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

درس 10 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

پیش از شروع، اگر ساختار تگ ها را فراموش کرده اید درس 5: تگ ها و ویژگی ها را مرور کنید. برای دیدن نمونه های متنی منظم نیز درس 6: عنوان ها و پاراگراف ها مفید است.

هدف یادگیری درس 10

ساخت لیست نامرتب با ul
ساخت لیست مرتب با ol
استفاده صحیح از li
ساخت لیست تو در تو
شناخت کاربرد start و reversed در ol
انتخاب نوع لیست بر اساس معنی محتوا

نمای ساختار ul و ol و li و لیست تو در تو در HTML — در HTML نوع لیست را بر اساس معنی و ترتیب محتوا انتخاب می کنیم.

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

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

<ul>
  <li>طراحی واکنش گرا</li>
  <li>سرعت مناسب</li>
  <li>ساختار سئو شده</li>
</ul>

لیست مرتب با ol

وقتی ترتیب اهمیت دارد، از ol استفاده می کنیم. مراحل نصب، دستور پخت یا روند انجام یک کار از نمونه های واضح هستند.

<ol>
  <li>پوشه پروژه را بسازید</li>
  <li>فایل index.html را ایجاد کنید</li>
  <li>صفحه را در مرورگر باز کنید</li>
</ol>

اگر ترتیب مراحل را عوض کنیم، روند کار ممکن است نادرست شود. همین تفاوت ساده معیار خوبی برای انتخاب بین ul و ol است. برای مرور ساخت فایل پروژه می توانید درس 3: ساختار پوشه ها و اولین پروژه وب را ببینید.

لیست تو در تو

گاهی یک مورد خودش زیرمجموعه دارد. در این حالت لیست دوم را داخل همان li مربوط به مورد والد قرار می دهیم.

<ul>
  <li>فرانت اند
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>بک اند</li>
</ul>

شروع شماره گذاری از عدد دلخواه

ویژگی start در ol اجازه می دهد شماره گذاری از عدد دیگری آغاز شود. این مقدار باید عددی باشد.

<ol start="4">
  <li>مرحله چهارم</li>
  <li>مرحله پنجم</li>
</ol>

شماره گذاری معکوس با reversed

برای نمایش شمارش معکوس می توان ویژگی بولی reversed را روی ol قرار داد.

<ol reversed>
  <li>مرحله سوم</li>
  <li>مرحله دوم</li>
  <li>مرحله اول</li>
</ol>

نمونه کامل قابل کپی

کد زیر یک صفحه کامل با هر دو نوع لیست و یک لیست تو در تو است. ساختار head و body همان چیزی است که در درس 4: ساختار سند HTML یاد گرفتیم.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تمرین لیست ها</title>
</head>
<body>
  <h1>برنامه یادگیری طراحی وب</h1>

  <h2>موضوعات دوره</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>طراحی واکنش گرا</li>
  </ul>

  <h2>مراحل تمرین</h2>
  <ol>
    <li>کد را بنویسید</li>
    <li>فایل را ذخیره کنید</li>
    <li>خروجی را در مرورگر ببینید</li>
  </ol>

  <h2>ساختار مهارت ها</h2>
  <ul>
    <li>HTML
      <ul>
        <li>لینک ها</li>
        <li>تصاویر</li>
        <li>لیست ها</li>
      </ul>
    </li>
    <li>CSS</li>
  </ul>
</body>
</html>

نتیجه مورد انتظار

پس از ذخیره و باز کردن فایل، باید یک فهرست گلوله ای برای موضوعات، یک فهرست شماره دار برای مراحل و یک فهرست تو در تو برای مهارت ها ببینید. اگر ترتیب مراحل را تغییر دهید، معنی روند انجام کار عوض می شود؛ به همین دلیل ol برای آن بخش مناسب است.

اشتباه های رایج

قرار دادن متن مستقیم داخل ul یا ol: هر مورد اصلی را داخل li قرار دهید.
استفاده از ol فقط برای ظاهر شماره دار: نوع لیست را بر اساس معنی محتوا انتخاب کنید، نه فقط ظاهر.
قرار دادن لیست فرزند بیرون از li والد: برای ساختار منطقی، لیست تو در تو را داخل li مربوط قرار دهید.
استفاده از تگ های قدیمی برای شکل گلوله: ظاهر لیست را بعدا با CSS کنترل می کنیم.
نوشتن عدد فارسی داخل ویژگی start: در کد از رقم انگلیسی استفاده کنید.

تمرین درس 10

یک لیست نامرتب برای سه مهارت خود بسازید. زیر یکی از مهارت ها دو زیرمهارت قرار دهید. سپس یک لیست مرتب با سه مرحله برای ساخت یک صفحه HTML بنویسید و شماره گذاری آن را از 5 شروع کنید.

نمایش پاسخ تمرین

<ul>
  <li>HTML
    <ul>
      <li>لینک ها</li>
      <li>تصاویر</li>
    </ul>
  </li>
  <li>CSS</li>
  <li>Git</li>
</ul>

<ol start="5">
  <li>ایجاد فایل</li>
  <li>نوشتن ساختار HTML</li>
  <li>بررسی در مرورگر</li>
</ol>

ارتباط با پروژه نهایی

در پروژه نهایی از لیست ها برای منوی ناوبری، امکانات خدمات، مراحل انجام کار، ویژگی های پلن ها و فهرست های محتوایی استفاده می کنیم. در درس 8: لینک ها و مسیرها یاد گرفتیم چگونه لینک بسازیم و در درس 9: تصاویر در HTML نحوه استفاده از تصویر را تمرین کردیم. این سه مهارت در صفحات واقعی کنار هم استفاده می شوند.