انواع لیست‌های HTML

مقدمه

این درس به لیست‌های HTML و عناصر مربوط به آنها اختصاص دارد. در HTML امکان ایجاد سه نوع لیست وجود دارد: لیست‌های ترتیبی (ordered lists) که با استفاده از عنصر ol ایجاد می‌شوند، لیست‌های غیر ترتیبی (unordered lists) که با استفاده از عنصر ul ایحاد می‌شوند و لیست‌های توصیفی (descriptive lists) که با استفاده از عنصری به نام dl ایجاد می‌شوند. در این درس، در مورد این لیست‌ها و روش‌های ایجاد آنها صحبت خواهیم کرد.

ایجاد لیست‌های ترتیبی با عنصر ol

عنصر ol برای ایجاد یک لیست ترتیبی (ordered list) کاربرد دارد. آیتم‌های یک لیست ترتیبی به صورت شماره‌گذاری شده نمایش داده می‌شوند. این آیتم‌ها را با استفاده از عنصر li ایجاد می‌کنیم. پس، به تعداد آیتم‌های یک لیست، عنصر li داریم که درون عنصر ol قرار می‌گیرند. در کدهای زیر از یک لیست ترتیبی برای ارائه‌ی یک دستورالعمل پخت کیک استفاده شده است:

HTML

<ol>
  <li>Mix flour, baking powder, sugar and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

امکان تودرتو کردن لیست‌های ترتیبی و ایجاد لیست‌های پیچیده‌تر نیز وجود دارد. برای این منظور، کافیست عنصر ol مربوط به لیست درونی را درون یک عنصر li مربوط به لیست بیرونی قرار دهیم. مثال زیر را ببینید:

HTML

<ol>
  <li>first item</li>
  <li>
    second item
    <ol>
      <li>second item, first subitem</li>
      <li>second item, second subitem</li>
      <li>second item, third subitem</li>
    </ol>
  </li>
  <li>third item</li>
</ol>

بر خلاف اکثر عناصری که تا اینجا دیده‌ایم، عنصر ol علاوه بر صفت‌های global، از سه صفت اختصاصی نیز پشتیبانی می‌کند که عبارتند از:

• type: از این صفت برای تعیین نوع شماره‌گذاری آیتم‌های لیست استفاده می‌شود.
• reversed: این صفت بولین برای معکوس کردن ترتیب نمایش آیتم‌های لیست و نمایش آنها به صورت نزولی کاربرد دارد.
• start: با استفاده از این صفت می‌توانیم تعیین کنیم که شماره‌گذاری آیتم‌های لیست از چه عدد یا حرفی شروع شود.

اجازه دهید تا صفت‌های عنصر ol را به صورت جداگانه بررسی کنیم و ببینیم هر یک از این صفت‌ها چه مقادیری را دریافت می‌کنند و با ارائه‌ی مثال‌هایی از هر یک از آنها، کاربردشان را در عمل ببینیم.

تعیین روش شماره‌گذاری آیتم‌های لیست

از صفت type برای تعیین روش شماره‌گذاری آیتم‌های یک لیست ترتیبی استفاده می‌شود. روش‌های ممکن عبارتند از: شماره‌گذاری با استفاده از اعداد، حروف لاتین و اعداد رومی. بر این اساس، صفت type می‌تواند یکی از مقادیر زیر را دریافت کند:

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

HTML

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

نمایش آیتم‌های لیست به ترتیب نزولی

آیتم‌های یک لیست ترتیبی در حالت پیش‌فرض به ترتیب صعودی نمایش داده می‌شوند اما صفت reversed این امکان را به ما می‌دهد که ترتیب نمایش آیتم‌ها را معکوس کرده و آنها را به صورت نزولی نمایش دهیم. صفت reversed یک صفت بولین است و بنابراین، می‌توانیم هیچ مقداری را برای آن وارد نکنیم. یادآوری می‌کنم که در مورد صفت‌های بولین، صِرف استفاده از آنها به معنای true بودن آنهاست و نیازی به وارد کردن مقدار برای این صفت‌ها نیست.

HTML

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

تعیین مبدأ شماره‌گذاری

صفت start مشخص کننده‌ی مقدار آغازین در شماره‌گذاری آیتم‌های لیست است که در حالت پیش‌فرض از مبداء استانداردی مانند 1 یا a شروع به شماره‌گذری می‌شوند. این صفت، فارغ از نوع آیتم‌های لیست، همواره یک عدد صحیح را به عنوان مقدار دریافت می‌کند. این مطلب در مثال زیر قابل مشاهده است.

HTML

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="a" start="4">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ایجاد لیست‌های غیرترتیبی با عنصر ul

لیست‌های غیرترتیبی (unordered lists) نوع دیگری از لیست‌ها هستند که در HTML با استفاده از عنصری به نام ul ایجاد می‌شوند. تفاوت این لیست‌ها با لیست‌های تریبی در نحوه‌ی نمایش آیتم‌های لیست است. در مورد لیست‌های ترتیبی، آیتم‌ها به صورت شماره‌گذاری شده و در مورد لیست‌های غیرترتیبی به صورت علامت‌گذاری شده نمایش داده می‌شوند.

HTML

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

کاراکترهایی که برای علامت‌گذاری آیتم‌های یک لیست غیرترتیبی استفاده می‌شوند، bullet نامیده می‌شوند. اکثر مرورگرها به طور پیش‌فرض از دایره‌های توپر به عنوان bullet استفاده می‌کنند. در نسخه‌های قبلی HTML عنصر ul مجهز به صفتی به نام type بود که امکان تغییر نوع bullet را به ما می‌داد اما این صفت دیگر جزئی از استاندارد HTML نیست و برای تغییر نوع bullet باید از CSS استفاده کرد.

مشابه آنچه در مورد لیست‌های ترتیبی دیدیم، اگر بخواهیم لیست‌های غیرترتیبی را تودرتو کنیم، می‌توانیم به سادگی از یک عنصر ul درون عنصر ul دیگر استفاده کنیم. مثال زیر را ببینید:

HTML

<ul>
  <li>first item</li>
  <li>
    second item
    <ul>
      <li>second item, first subitem</li>
      <li>second item, second subitem</li>
      <li>second item, third subitem</li>
    </ul>
  </li>
  <li>third item</li>
</ul>

ایجاد لیست‌های توصیفی با عنصر dl

برای ایجاد یک لیست توصیفی (descriptive list) از عنصري به نام dl استفاده می‌شود. یک لیست توصیفی حاوی یک یا چند جفتِ عبارت و تعریف (term and definition) است. یک جفتِ عبارت و تعریف توسط دو عنصر dt و dd ساخته می‌شود. عبارتی که قصد تعریف کردن آن را داریم یا به طور کلی توضیحی در مورد آن داریم، درون عنصر dt و تعریف آن عنصر را درون عنصر dd که بلافاصله بعد از آن می‌آید، قرار می‌دهیم. در کد زیر از این عناصر برای ایجاد یک لیست توصیفی که حاوی چند اصطلاح سینمایی و توضیحی در مورد هر اصطلاح است، استفاده شده است.

HTML

<dl>
  <dt>soliloquy</dt>
  <dd>where a character speaks to themselves,
   representing their inner thoughts or feelings and
   in the process relaying them to the audience
   (but not to other characters.)</dd>

  <dt>monologue</dt>
  <dd>In drama, where a character speaks their
   thoughts out loud to share them with the audience
   and any other characters present</dd>

  <dt>aside</dt>
  <dd>where a character shares a comment only
   with the audience for humorous or dramatic effect.
   This is usually a feeling, thought, or piece of
   additional background information</dd>
</dl>

در لیست‌های تعریفی معمولاً تعریف هر عبارت بلافاصله بعد از آن عبارت آورده می‌شود. این یعنی اینکه معمولاً یک عنصر dt و سپس یک عنصر dd بلافاصله بعد از آن آورده می‌شود. اما این امکان نیز وجود دارد که چند عبارت یعنی چند عنصر dt را پشت سر هم آورده و سپس یک تعریف با استفاده از یک عنصر dd برای همه‌ی این عبارات آورده شود. مثال زیر را ببینید.

HTML

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
</dl>

همانطور که احتمالاً حدس زده‌اید، عکس مطلب بالا نیز برقرار است. یعنی این امکان وجود دارد که بیش از یک تعریف را برای یک عبارت بیاوریم؛ کاری که در مثال زیر انجام شده است.

HTML

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser
    Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger
    than a domestic cat (60 cm long).
  </dd>
</dl>