لیست در HTML | تگ OL و UL

توی این جلسه از دوره آموزش رایگان HTML به آموزش لیست ها در html میپردازیم. لیست ها توی خیلی از وبسایت ها وجود دارن و اهمیت بالایی توی سایت ها دارن. توی این جلسه بهتون یاد میدم که چطور توی سایتتون یه لیست بسازید و از تگ های ul و ol و LI استفاده کنید و یه قدم به یه طراح سایت نزدیک تر بشید، در آخر هم باهم کاربرد های لیست هارو بررسی میکنیم.

تگ LI در HTML

قبل از این که ساخت لیست در HTML رو یاد بگیریم بهتره با اضافه کردن آیتم به لیست ها آشنا بشیم. ما با تگ LI میتونیم داخل لیست هامون آیتم قرار بدیم. این آیتم ها میتونن هرچیزی باشن؛ لینک، متن، عکس و یا حتی لیست های دیگه.( در ادامه نحوه قرار دادنشون رو براتون با مثال توضیح میدم).

نکته: این تگ فقط برای لیست های UL و LI استفاده میشه و برای DL ها کاربرد نداره.

انواع لیست در HTML

توی html مدل های مختلفی از لیست ها وجود داره که ما میتونیم تو جاهای مختلف بر اساس نیازمون از اونها استفاده کنیم. توی این جلسه همه این لیست ها رو براتون توضیح میدم.

لیست های نامرتب

اولین نوع لیست ها با تگ UL یا unordered list ساخته میشه. این نوع لیست ها ترتیب خاصی ندارن و جایگاه آیتم ها در این لیست مهم نیست. این لیست ها با علامت دایره توپُر یا نقطه نشون داده میشن ولی میتونیم علامتشون رو تغییر بدیم (در ادامه بهتون توضیح میدم).

اینجا یه مثال براتون از این مدل لیست قرار داده شده:

<ul>
    <li>آیتم 1</li>
    <li>آیتم 2</li>
    <li>آیتم 3</li>
</ul>

نتیجه این کد به این صورته:

آیتم 1
آیتم 2
آیتم 3

لیست های مرتب

نوع دوم لیست ها با تگ OL ساخته میشه. OL مخفف ordered list هست. آیتم های این لیست ها مرتب هستن و هرکدوم یه جایگاه خاص دارن. به صورت پیشفرض این لیست ها با اعداد نشانه گذاری میشن ولی میتونیم با حروف هم اونهارو نشونه گذاری کنیم.

اینجا یه نمونه از این تگ رو مشاهده میکنید:

<ol>
    <li>آیتم 1</li>
    <li>آیتم 2</li>
    <li>آیتم 3</li>
    <li>آیتم 4</li>
</ol>

نتیجه این کد به این صورته:

آیتم 1
آیتم 2
آیتم 3
آیتم 4

لیست های دارای توضیحات

این مدل از لیست ها با تگ DL ساخته میشن. DL مخفف description list هست و هر آیتم از لیست یه توضیحات داره. این لیست ها خیلی کم استفاده میشن. برای نوشتن آیتم های این لیست نمیتونیم از LI استفاده کنیم، بلکه باید از این دو تگ زیر استفاده کنیم

DT که مخفف description title هست و بخش اصلی آیتم هست.
DD که مخفف description detail هست و کارش نشون دادن توضیحات DT هست.

اینجا میتونید یه نمونه از این نوع لیست رو ببینید:

<dl>
    <dt>فایرفاکس</dt>
    <dd>یک مرورگر رایگان و امن</dd>
    <dt>کروم</dt>
    <dd>یک مرورگر محبوب </dd> 
</dl>

نتیجه این کد به این صورته:

فایرفاکس

یک مرورگر رایگان و امن

کروم

یک مرورگر محبوب

نکته: شما میتونید توی بعضی از آیتم هاتون از dd استفاده نکنید و فقط به تنهایی از dt استفاده کنید.

تغییر علامت آیتم ها

گقتیم که لیست های OL با اعداد و لیست های UL با نقطه آیتم هاشون رو نشانه گذاری میکنن. اما اگه ما نخوایم آیتم هامون این شکلی باشن باید چکار کنیم؟ این کار دو راه داره که هردو رو براتون توضیح میدم:

استفاده از css : راه درست و اصولی این کار کدنویسی css هست که در آینده در دوره css شما به طور کامل اون رو یاد میگیرید.

استفاده از اتریبیوت type : این روش خیلی وقته که منسوخ شده و بهتره این کار رو با css انجام بدید. چیزهایی که منسوخ میشن احتمال داره که خیلی از مرورگر های جدید ازشون پشتیبانی نکنن، پس بهتره از روش های جدیدتر استفاده کنیم. اما اینجا یه توضیحات خلاصه ازش براتون قرار میدم.

این اتریبیوت مقادیر زیر رو برای ul داره و با نوشتن اتریبیوت روی تگ ul میتونید ازشون استفاده کنید:

مقدار	عملکرد
disc	حالت نقطه‌ای و پیشفرض رو داره و نیاز به نوشتن نداره
circle	حالت دایره تو خالی داره
square	حالت مربع توپر داره
none	آیتم هارو بدون علامت گذاری میکنه

برای تگ های OL هم میتونید از این مقادیر و value ها استفاده کنید

مقدار	عملکرد
۱	گزینه پیش فرض که با اعداده و نیاز بهنوشتن نداره
A	با حروف بزرگ انگلیسی شماره گذاری میکنه
a	با حروف کوچک انگلیسی شماره گذاری میکنه

اینجا یه نمونه از این کار رو میتونید ببینید:

<ul type="square">
    <li>آیتم 1</li>
    <li>آیتم 2</li>
    <li>آیتم 3</li>
</ul>

قرار دادن انواع محتوا در LI

تا اینجای کار ما برای مثال هامون توی تگ li از متن استفاده کردیم. اما لیست ها در html فقط به متن محدود نمی‌شن، داخل تگ li هم مثل تگ a میتونیم از انواع محتوا استفاده کنیم. مثلا میتونیم توی این تگ از تگ هایی مثل a یا img استفاده کنیم. حتی میتونیم از تگ ul یا ol هم داخل این تگ استفاده کنیم و لیست های تو در تو بسازیم.

تیکه کد زیر یه مثال از این کار رو نشون میده:

<ul>
    <li>آیتم اصلی 1</li>
    <li>آیتم اصلی 2</li>
    <li>
        <ul>
            <li>آیتم فرعی 1</li>
            <li>آیتم فرعی 2</li>
        </ul>
    </li> 
    <li>آیتم اصلی 3</li>
</ul>

کاربرد های لیست ها توی سایت های واقعی

حالا که مبحث لیست ها در HTML رو یاد گرفتیم، بهتره قبل از اینکه بریم سراغ تمرین کمی با کاربرد های لیست ها توی وبسایت‌های واقعی آشنا بشیم. بیشترین کاربرد لیست ها در html ساخت navigation bar یا منو هست. این منو ها اکثرا بالای صفحات دیده میشن(بالای همین صفحه هم میتونید منو سایت مگا جی اس رو ببینید).

از لیست تو جاهای دیگه مثل نوشتن توضیحات کوتاه محصولات (در سایت فروشگاهی) یا نوشتن مهارت های شخصی تو سایت های رزومه استفاده کنید. البته این ها مثال های کمی برای لیست ها بودن و شما میتونید کاربرد های خیلی بیشتری ازش توی سایت ها پیدا کنید.

تمرین این جلسه

یه فایل html باز کنید و title صفحه رو فروش موبایل قرار بدید. حالا با تگ هایی مثل h1 و p توضیحات متنی برای موبایلتون بزارید. با تگ img هم یه عکس از محصولتون بزارید. در آخر با تگ ul یکسری اطلاعات کوتاه از محصولتون بنویسید. همچین بخشی رو میتونید توی بخش مشخصات محصولات سایت دیجیکالا هم ببینید.

حالا که به اینجای جلسه آموزش لیست ها در html رسیدید و تمرین رو هم انجام دادید میشه گفت که کاملا به تگ های لیست ها مثل OL و UL و LI مسلط هستید. اگه هرجایی از این جلسه سوالی داشتید میتونید تو بخش کامنت ها بپرسید. برای دیدن جلسه بعدی دوره هم میتونید از لینک زیر استفاده کنید.

ساخت جدول در HTML