جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش قراردادن لیست ها در وب سایت ( ساده ولی کاربردی قسمت 20 )

این پست قسمت بیستم از سری آموزش های ساده ولی کاربردی از سایت اسکریپت دات کام می باشد که برای شما عزیزان آماده کرده ام .

در این قسمت میپردازیم به لیست های مرتب و نامرتب در html . منظور از لیست های مرتب , همان لیست هایی هستند که ترتیب در آنها مهم هست , مثلا 1-2-3-4-5 و منظور از لیست های نامرتب همان لیست هایی هستند که اصطلاحا به آنها bullet میگویند و به صورت یک شکل خاص ظاهر میشوند, مثلا دایره یا مثلا مربع .

ضمنا در این پست نوعی دیگر از لیست ها رو که فاقد bullet و یا ترتیب هستند را آموزش خواهیم داد .

آموزش زبان html - ساده و کاربردی

تگ ol : تگی Block Level و Container که مخفف کلمه order List و به معنای لیست های مرتب میباشد.

تگ ul : تگی Block Level و Container که مخفف کلمه unorder List و به معنای لیست های نامرتب می باشد .

تگ li : تگی Block Level و Container که مخفف کلمه List می باشد که تعداد آن , همان تعداد لیست گزینه های لیست می باشد .

تگ li یک تگ فرزند میباشد که باید داخل یکی از تگ های پدر ol یا ul قرار بگیرد .

مثلا برای داشتن یک لیست مرتب :

<ol>
    <li>طراحی سایت</li>
    <li>آموزش سئو</li>
    <li>آموزش اچ تی ام ال</li>
    <li>آموزش سی اس اس</li>
    <li>آموزش جی کوئری</li>
    <li>وحید مجیدی</li>
</ol>

 و برای داشتن یک لیست نامرتب :

<ul>
    <li>طراحی سایت</li>
    <li>آموزش سئو</li>
    <li>آموزش اچ تی ام ال</li>
    <li>آموزش سی اس اس</li>
    <li>آموزش جی کوئری</li>
    <li>وحید مجیدی</li>
</ul>

 نکته : این تگ ها دارای خاصیت هایی میباشد که تمامی آنها در html5 منسوخ شده و به css منتقل شده که بعدا در سری آموزش های css به آن میپردازیم. مهمترین این خاصیت ها type میباشد که مشخص کننده نوع bullet می باشد . مثلا حروف انگلیسی , یونانی , عدد , دایره توخالی , دایره تو پر , مربع و …

———————————————————————————————-

نوع دیگری از لیست ها میباشد ( لیست های توضیح ) که تقریبا کمتر مورد استفاده قرار میگیرد که فاقد bullet می باشند .

این نوع لیست ها با 3 تگ dl , dt و dd تکمیل میشوند که تماما Block Level و Container می باشند .

دو تگ dt و dd در داخل تگ پدرشان که dl می باشد قرار میگیرند . تگ dt عنوان لیست , و تگ dd توضیح مربوزط به عنوان میباشد .

به عنوان مثال :

<dl>
    <dt>نمونه کار ها</dt>
    <dd>وحید مجیدی</dd>

    <dt>آموزش ها</dt>
    <dd>آموزش html</dd>
    <dd>آموزش css</dd>
    <dd>آموزش jquery</dd>
</dl>

باز هم باید متذکر بشم که تمامی خاصیت های این تگ ها از جمله خاصیت های دیزاینی در html5 منسوخ و بعدا در Css آموزش داده خواهد شد.

آموزش : وحید مجیدی

 پخش اختصاصی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

4 پاسخ به “آموزش قراردادن لیست ها در وب سایت ( ساده ولی کاربردی قسمت 20 )”

  1. شایان گفت:

    سلام ، میخواستم ازتون درخواست کنم قالب ریپ شده ساتی پاکت گیمز که خودم برای سرویس وبلاگ دهی میهن بلاگ اماده کردم و حق نشر رو هم رعایت کردم رو در سایت تان قرار دهید .
    لینک قالب : http://s3.picofile.com/file/8189275776/ghaleb_pocketgames_ir_ripe.txt.html
    لینک سایت / پیش نمایش قالب : pocketgames.ir
    در این قالب هیچ اسمی از هیچ فرد یا سایت یا کمپانی ذکر نشده ،
    با تشکر ………………………………………………………………..

    • وحید مجیدی گفت:

      سلام دوست عزیزم
      متاسفانه این قالب رو نمیتونم توی سایت اصلی بزارم

      اگر دوست داشتین میتونین در فروم سایت بزاریدش

  2. modern ps گفت:

    سلام جناب وحید مجیدی
    مرسی از این آموزش های خوبتون.
    یک سوال داشتم راجب این آموزش نیست اما اینجا میپرسم.
    این عکس رو ببینین :
    http://8pic.ir/images/e9a8qcq0q7a0ad1hwf5u.png
    اون قسمتی که تایین کردم و رنگش متمایز شده وقتی با موس روی متن بکشیم این رنگ خاکستری رو میگیره میخواستم رنگ رو عوض کنم.آیا امکانش هست؟اگر هست میشه لطف کنین بگین چجوری!!!
    و تشکر فراوان از شما.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *