آموزش برنامه نویسی وب🌐: بخش html قسمت ششم ( لیست ها در اچ تی ام ال)

در این قسمت، لیست ها در اچ تی ام ال رو یاد خواهیم گرفت و تغییر استایل، لیست ها در CSS.

لیست‌ها در HTML

در HTML سه نوع لیست اصلی وجود دارد که هر کدام کاربردهای خاص خود را دارند. این لیست‌ها شامل لیست مرتب (Ordered List)، لیست نامرتب (Unordered List) و لیست توصیفی (Description List) می‌باشند.

1. لیست مرتب (Ordered List)

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

<ol>
  <li>Benz</li>
  <li>Audi</li>
  <li>Ford</li>
</ol>

تغییر نوع علامت‌گذاری لیست مرتب

به صورت پیش‌فرض، آیتم‌های لیست مرتب با اعداد دهدهی (1, 2, 3, ...) علامت‌گذاری می‌شوند. با استفاده از ویژگی list-style-type می‌توان این رفتار را تغییر داد. برخی از انواع علامت‌گذاری شامل موارد زیر هستند:

decimal: اعداد دهدهی (پیش‌فرض)
lower-alpha: حروف کوچک الفبای انگلیسی
upper-alpha: حروف بزرگ الفبای انگلیسی
lower-roman: اعداد رومی با حروف کوچک
upper-roman: اعداد رومی با حروف بزرگ

<ol style="list-style-type:upper-roman;">
  <li>Benz</li>
  <li>Audi</li>
  <li>Ford</li>
</ol>

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

لیست نامرتب، لیستی است که آیتم‌های آن بدون ترتیب خاصی و با استفاده از نمادهای گرافیکی مانند دایره یا مربع علامت‌گذاری می‌شوند. برای ساخت لیست نامرتب از تگ <ul> استفاده می‌کنیم.

<ul>
  <li>Benz</li>
  <li>Audi</li>
  <li>Ford</li>
</ul>

تغییر نوع علامت‌گذاری لیست نامرتب

به صورت پیش‌فرض، آیتم‌های لیست نامرتب با دایره توپر (●) نمایش داده می‌شوند. با استفاده از ویژگی list-style-type می‌توان نوع علامت‌گذاری را تغییر داد. برخی از انواع علامت‌گذاری شامل موارد زیر هستند:

disc: دایره توپر (پیش‌فرض)
circle: دایره توخالی
square: مربع

<ul style="list-style-type:square;">
  <li>Benz</li>
  <li>Audi</li>
  <li>Ford</li>
</ul>

3. لیست توصیفی (Description List)

لیست توصیفی برای نمایش مجموعه‌ای از واژه‌ها و توضیحات آن‌ها استفاده می‌شود. برای ساخت لیست توصیفی از تگ <dl> استفاده می‌کنیم و برای هر واژه از تگ <dt> و برای توصیف آن از تگ <dd> بهره می‌بریم.

<dl>
  <dt>Saipa</dt>
  <dd>Shahin</dd>
  <dd>Pride</dd>

  <dt>Toyota</dt>
  <dd>Prius</dd>
  <dd>GR Corolla</dd>
</dl>

استفاده از لیست‌های تو در تو

می‌توان درون هر لیست، لیست دیگری قرار داد. به عنوان مثال، درون یک لیست مرتب می‌توان لیست نامرتب یا بالعکس قرار داد.

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>

سفارشی‌سازی بیشتر با تصاویر

اگر بخواهیم به جای نمادهای پیش‌فرض از یک تصویر دلخواه برای علامت‌گذاری استفاده کنیم، می‌توانیم از ویژگی list-style-image استفاده کنیم.

<ul style="list-style-image:url('icon.png');">
  <li>Benz</li>
  <li>Audi</li>
  <li>Ford</li>
</ul>

حذف علامت‌گذاری

اگر بخواهیم آیتم‌های لیست بدون علامت‌گذاری نمایش داده شوند، کافیست ویژگی list-style-type را برابر با n قرار دهیم.

<ul style="list-style-type:n;">
  <li>Benz</li>
  <li>Audi</li>
  <li>Ford</li>
</ul>

قسمت بعدی