جلسه ششم: لیست در HTML – ایجاد انواع لیست

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

خوش اومدین به ششمین جلسه از دوره آموزش HTML. امروز میخوایم در مورد انواع لیست در HTML صحبت کنیم. ما 3 نوع لیست در HTML داریم که هر 3 اونها رو تو این پست توضیح میدیم و با تگ های اونها آشنا میشیم. پس با من همراه باشید.

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

ما 3 نوع لیست در HTML داریم.:

Unordered HTML List : لیست نامرتب
Ordered HTML List : لیست مرتب
HTML Description Lists : لیست های توضیحات

لیست نامرتب (Unordered HTML List)

برای تعریف یه لیست نامرتب ما از تگ ul استفاده میکنیم. قطعه کد زیر رو ببینید:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

با استفاده از تگ ul لیست رو تعریف میکنیم و هر آیتم از لیست رو داخل تگ li قرار میدیم. در خروجی یک دایره کوچک کنار هر آیتم نمایش داده میشه. تصویر زیر رو ببینید:

همونطور که در تصویر بالا میبینید ما با استفاده از تگ ul موفق شدیم یه لیست نامرتب ایجاد کنیم و با استفاده از تگ li آیتم های این لیست رو هم مشخص کردیم.

لیست مرتب (Ordered HTML List)

لیست های مرتب با استفاده از تگ ol ایجاد میشه. به مثال زیر دقت کنید:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

همونطور که تو قطعه کد بالا میبینید، من با استفاده از تگ ol لیست مرتب خودم رو درست کردم و باز هم با استفاده از تگ li آیتم های این لیست رو مشخص کردم. تصویر زیر رو ببینید:

ما موفق شدیم با استفاده از تگ ol یه لیست مرتب ایجاد کنیم و با استفاده از تگ li تعدادی آیتم هم به این لیست اضافه کردیم. هر آیتم از این لیست به ترتیب شماره گذاری میشه.

صفت type برای تگ ol

ما با استفاده از صفت type میتونیم نوع شماره گذاری تگ ol رو تغییر بدیم. همونطور که توی مثال بالا دیدید، در حالت پیشفرض شماره گذاری با اعداد انجام میشه. ما میتونیم با استفاده از صفت type این روش شماره گذاری رو تغییر بدیم.

صفت type مقادیر زیر رو دریافت میکنه:

لیست های توضیحات (HTML Description Lists)

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

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

تگ dl لیست توضیحات را تعریف می کند، تگ dt اصطلاح (نام) را تعریف می کند، و تگ dd هر عبارت را توصیف می کند:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

ما با استفاده از قطعه کد بالا میتونیم یک لیست توضیات ایجاد کنیم و برای تعدادی اصطلاح، توضیحات مناسب درج کنیم. تصویر زیر رو ببینید:

همونطور که تو بخش خروجی میبینید ما یک لیست توضیات داریم که با تگ dl ایجاد شده. با استفاده از تگ dt عنوان (نام) هر اصطلاح رو وارد کردیم و نهایتا با استفاده از تگ dd توضیحات مربوط به اون اصطلاح رو نوشتیم.

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

همه ویدیوهای دوره آموزش HTML