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

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

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

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

تگ 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 آموزش داده خواهد شد.

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

 پخش اختصاصی