آموزش HTML – فصل یازدهم: لیست ها در HTML

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

آموزش HTML – فصل یازدهم: لیست ها در HTML

لیست ها دو نوع دارند، لیست های تریب دار و لیست های بدون ترتیب.

لیست بدون ترتیب در زبان HTML

یک لیست بدون ترتیب با تگ <ul> شروع میشود.

هر مورد لیست با تگ <li> شروع میشود.

اقلام داخل لیست به صورت پیشفرض با یک گلوله نشان دار میشود (یک دایره کوچک مشکی).

مثال استفاده از یک لیست بدون ترتیب:

  • قهوه
  • چای
  • شیر

انتخاب نشان اقلام لیست بدون ترتیب HTML

مولفه list-style-type در سی اس اس برای مشخص کردن سبک نشان اقلام لیست استفاده میشود.

مقدار های زیر هرکدام یک نشان گر را برای اقلام لیست مشخص می کنند.

  • مقدار disk نشان گر اقلام لیست را به یک گلوله تنظیم میکند. (حالت پیشفرض)
  • مقدار circle نشان گر اقلام لیست را به یک دایره تنظیم میکند.
  • مقدار square نشان گر اقلام لیست را به یک مربع تنظیم میکند.
  • مقدار none لیست بدون نشان گر نمایش داده میشود.

مثال استفاده از Disc به عنوان نشانگر لیست HTML


مثال استفاده از Circle به عنوان نشانگر لیست HTML


به همین صورت قادرید از باقی مقادیر ممکن برای تغییر نشانگر لیست ها در HTML استفاده کنید.

لیست ترتیب دار در زبان HTML

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

هر یک از اقلام لیست با تگ <li> شروع میشود.

اقلام لیست به صورت معمولی با اعداد نشان گذاری میشوند.

مثال استفاده لیست ترتیب دار:

  1. قهوه
  2. چای
  3. شیر

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

خاصیت type تگ <ol> نوع نشان گر اقلام لیست را تعریف میکند.

مقدار های زیر هرکدام یک نشان گر را برای اقلام لیست مشخص می کنند. و به صورت type=”x” وارد میشوند

  • با مقدار 1  اقلام لیست شماره گذاری خواهند شد. (حالت پیشفرض).
  • با مقدار A اقلام لیست با حروف بزرگ شماره گذاری خواهند شد.
  • با مقدار a اقلام لیست با حروف کوچک شماره گذاری خواهند شد.
  • با مقدار I اقلام لیست با اعداد رومی بزرگ شماره گذاری خواهند شد.
  • با مقدار i اقلام لیست با اعداد رومی کوچک شماره گذاری خواهند شد.

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


مثال لیست ترتیبب دار با حروف بزرگ:


مثال لیست ترتیبب دار با حروف کوچک:


مثال لیست ترتیبب دار با حروف رومی بزرگ:


مثال لیست ترتیبب دار با حروف رومی کوچک:


لیست های توضیح دار در زبان HTML

اچ تی ام ال همچنین لیست دارای توضیحات را هم پشتیبانی میکند.

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

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

مثال استفاده از لیست های دارای توضیح در HTML:

قهوه
– یک نوشیدنی تقریبا سیاه رنگ و تلخ
آب پرتغال
– یک نوشیدنی نارنجی رنگ و شیرین

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

لیست میتواند گاها مرکب و تو در تو باشد (لیست در لیست های دیگر)

مثال:


اقلام یک لیست میتوانند حاوی لیست های جدید باشند و یا هر المان دیگر اچ تی ام ال مثل تصویر ها، لینک ها و غیره.

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

به صورت معمولی هر لیست ترتیب دار از شماره 1 شروع به شمارش میکند اگر می خواهید از یک شماره خاص شروع به شمارش شود میتوانید از خاصیت start استفاده کنید.

مثال زیر از شماه 50 شروع می شود:

  1. قهوه
  2. چای
  3. شیر

ایجاد لیست های افقی با سی اس اس

لیست های اچ تی ام ال را میتوان به طریق های مختلفی با سی اس اس سبک بندی کرد.

یک راه محبوب برای سبک بندی لیست ها سبک بندی لیست به روش افقی است برای ساختن یک فهرست هدایت کاربر یا همان navigation menu

مثال:


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

در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل دوازدهم: جداول در HTML را مطالعه کنید.

ویدیوها و مطالب مشابه