آموزش لیست ها در HTML

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

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

 آموزش طراحی سایت

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

یک لیست نامرتب یا بدون ترتیب با تگ < ul > شروع می شود و هر آیتم از لیست با تگ < li > شروع می شود. آیتم های لیست نامرتب به صورت پیش فرض با دایره های کوچک نشانه گذاری می شوند، اما شما می توانید این نشانه گذاری ها را تغییر دهید.

 آموزش HTML

خروجی مثال بالا به شکل زیر است:

 آموزش لیست در HTML

لیست های ترتیبی در HTML

یک لیست دارای ترتیب با تگ < ol > شروع می شود و هرکدام از آیتم های لیست با تگ < li > شروع می شود. به صورت پیش فرض آیتم های لیست ترتیبی با اعداد نشانه گذاری می شوند، اما شبیه لیست های نامرتب این امکان وجود دارد که نشانه گذاری آیتم های لیست را تغییر دهید.

آموزش ایجاد لیست در HTML

خروجی کد بالا به شکل زیر است:

 آموزش لیست ها در HTML

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

یک لیست توضیحات، لیستی از عناوین با توضیحاتی مربوط به هر کدام از آیتم های لیست می باشد.

تگ < dl > لیست توضیحات را تعریف می کند، تگ < dt > عنوان هر آیتم را تعریف می کند، و تگ < dd > هر عنوان را توضیح می دهد:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش لیست در HTML

لیست های بدون ترتیب در HTML – انتخاب کردن نشانه ی پشت آیتم ها

از خاصیت list-style-type برای مشخص کردن نوع نشانه های آیتم ها (دایره ، مربع و...) در لیست استفاده می شود.

آموزش HTML

همانطور که می بینید به صورت پیش فرض نشانه آیتم ها در لیست های نامرتب به صورت دایره های توپر است.

آموزش طراحی سایت

انواع نشانه های آیتم ها در لیست های نامرتب

disc: با انتخاب این مقدار، از دایره های توپر برای نشانه گذاری آیتم های لیست استفاده می شود.

Circle: با انتخاب این مقدار، از دایره های توخالی برای نشانه گذاری آیتم های لیست استفاده می شود.

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

None: از هیچ نشانه ای برای نشان دار کردن آیتم های لیست استفاده نمی شود.

لیست های Nested در HTML

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

آموزش ایجاد لیست در HTML

خروجی مثال بالا به شکل زیر است.

آموزش لیست ها در HTML

لیست های افقی با CSS

لیست های HTML می توانند در حالت های بسیاری قرار بگیرند. یکی از روش های معروف، افقی حالت دادن لیست می باشد. حالت افقی در زمان هایی که شما می خواهید یک منو بسازید استفاده می شود. چرا که با استفاده از لیست ها شما خیلی راحت می توانید منوی سایت را طراحی کنید. دقت کنید که در مثال زیر برای افقی قرار دادن آیتم ها در صفحه از مشخصه float استفاده شده است

آموزش HTML

خروجی مثال بالا به شکل زیر است:

آموزش ایجاد لیست در HTML

لیست های ترتیب دار در HTML

تگ < ol > در HTML یک لیست ترتیبی را تعریف می کند. یک لیست ترتیبی می تواند عددی یا با حروف الفبا باشد.

لیست ترتیب دار در زبان HTML با تگ < ol > شروع می شود  و هر آیتم با یک تگ < li > مشخص می شود.

بصورت پیش فرض آیتم ها با اعداد نشانه گذاری می شوند:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش HTML

خاصیت type در لیست های ترتیبی

ویژگی Type از تگ < ol >، نوع نشانه آیتم ها را تعریف می کند.

"Type="1: آیتم های لیست ترتیبی به ترتیب از مقدار 1 نشانه گذاری می شوند.

"Type="A: آیتم های لیست ترتیبی به ترتیب حروف الفبا از مقدار A (حروف بزرگ) شروع می شوند.

"Type="a: آیتم های لیست ترتیبی به ترتیب حروف الفبا از مقدار a (حروف کوچک) شروع می شوند.

"Type="I: آیتم های لیست ترتیبی به ترتیب اعداد یونانی از مقدار I (اعداد بزرگ) شروع می شوند.

"Type="i: آیتم های لیست ترتیبی به ترتیب اعداد یونانی از مقدار i (اعداد کوچک) شروع می شوند.

در تصویر زیر نمونه ای از این نوع نشانه گذاری ها را می بینید:

آموزش لیست در HTML

آموزش لیست ها در HTML

کنترل کردن شمارش لیست

به صورت پیش فرض، لیست ترتیب دار از 1 شروع به شمارش می کند. اما شما می توانید نقطه شروع شمارش را تغییر دهید و از یک عدد به خصوص شمارش را شروع کنید. برای این کار شما می توانید از ویژگی start استفاده کنید:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش HTML

آموزش طراحی سایت آموزش HTML آموزش لیست ها در HTML آموزش ایجاد لیست در HTML آموزش List در HTML