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

🎯 اهداف یادگیری

• شناخت انواع لیست‌ها در HTML
• یادگیری تگ‌های مربوط به لیست‌ها
• توانایی ایجاد لیست‌های تو در تو
• استایل‌دهی به لیست‌ها با CSS

📌 لیست‌های نامرتب (Unordered Lists)

لیست‌های نامرتب با تگ <ul> ایجاد می‌شوند و هر آیتم با تگ <li> مشخص می‌شود:

<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>

نتیجه نمایش:

• آیتم اول
• آیتم دوم
• آیتم سوم

ویژگی‌های لیست‌های نامرتب:

• نقاط گلوله‌ای: به طور پیش‌فرض با نقاط سیاه نمایش داده می‌شوند
• استایل‌دهی: با CSS می‌توان نوع نشانگر را تغییر داد
• کاربرد: برای لیست‌هایی که ترتیب اهمیت ندارند

📌 لیست‌های مرتب‌شده (Ordered Lists)

لیست‌های مرتب‌شده با تگ <ol> ایجاد می‌شوند و به صورت پیش‌فرض با اعداد نمایش داده می‌شوند:

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

نتیجه نمایش:

1. مرحله اول
2. مرحله دوم
3. مرحله سوم

ویژگی‌های لیست‌های مرتب‌شده:

• شماره‌گذاری خودکار: به صورت خودکار با اعداد، حروف یا اعداد رومی نمایش داده می‌شوند
• ویژگی start: می‌توان شماره شروع را تغییر داد: <ol start="5">
• کاربرد: برای دستورالعمل‌ها، مراحل انجام کار یا هر لیستی که ترتیب اهمیت دارد

📌 لیست‌های تعریفی (Description Lists)

لیست‌های تعریفی برای نمایش اصطلاحات و تعاریف آنها استفاده می‌شوند:

<dl>
  <dt>HTML</dt>
  <dd>زبان نشانه‌گذاری برای ساخت صفحات وب</dd>
  <dt>CSS</dt>
  <dd>زبان طراحی برای استایل‌دهی صفحات وب</dd>
</dl>

نتیجه نمایش:

HTML

زبان نشانه‌گذاری برای ساخت صفحات وب

CSS

زبان طراحی برای استایل‌دهی صفحات وب

ویژگی‌های لیست‌های تعریفی:

• تگ‌های خاص: <dl> برای لیست، <dt> برای اصطلاح و <dd> برای تعریف
• کاربرد: برای فرهنگ لغات، واژه‌نامه‌ها و تعاریف فنی

📌 لیست‌های تو در تو (Nested Lists)

می‌توان لیست‌ها را درون یکدیگر قرار داد تا ساختارهای پیچیده‌تری ایجاد کرد:

<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم
    <ul>
      <li>زیرآیتم اول</li>
      <li>زیرآیتم دوم</li>
    </ul>
  </li>
  <li>آیتم سوم</li>
</ul>

نتیجه نمایش:

• آیتم اول
• آیتم دوم
  • زیرآیتم اول
  • زیرآیتم دوم
• آیتم سوم

نکات لیست‌های تو در تو:

• ترکیب انواع لیست: می‌توان لیست‌های مرتب‌شده و نامرتب را با هم ترکیب کرد
• عمق لیست: هیچ محدودیتی در تعداد سطوح تو در تو وجود ندارد
• کاربرد: برای منوهای چند سطحی، فهرست مطالب و ساختارهای سلسله‌مراتبی

📌 استایل‌دهی به لیست‌ها با CSS

می‌توان ظاهر لیست‌ها را با CSS سفارشی کرد:

ul {
  list-style-type: square; /* تغییر نشانگر به مربع */
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 5px;
}
ol {
  list-style-type: upper-roman; /* اعداد رومی بزرگ */
}

گزینه‌های list-style-type:

📌 تمرین عملی

کد HTML زیر را کامل کنید تا یک لیست منوی چند سطحی ایجاد شود:

<ul>
  <li>صفحه اصلی</li>
  <li>آموزش‌ها
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>تماس با ما</li>
</ul>

راهنمای تمرین:

1. یک لیست نامرتب اصلی با ۳ آیتم ایجاد کنید
2. برای آیتم "آموزش‌ها" یک لیست تو در تو اضافه کنید

📌 قدم بعدی

در درس بعدی با آشنا خواهیم شد!