نحوه استفاده از لیست ها در صفحات HTML

اگر با برنامه Microsoft Word آشنایی داشته باشید می دانید که در Word امکان تعریف لیست های علامت گذاری شده و شماره گذاری شده وجود دارد که این قابلیت در صفحات وب نیز با تعریفی متفاوت قابل استفاده می باشد بطوریکه می توان لیست های مرتب (Ordered List) و لیست های نامرتب (Unordered List) داشت. هنگامی که ترتیب گزینه مهم باشد از لیست های مرتب و در غیر اینصورت از لیست های نامرتب می توان استفاده نمود.

لیست های مرتب

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

در html برای ایجاد لیست های مرتب از تگ <ol> و به ازای هریک از گزینه های آن از تگ <li> به شکل زیر استفاده می شود.

<ol>
  <li>Word</li>
  <li>Excel</li>
  <li>Access</li>
  <li>Powerpoint</li>
</ol>

هنگامی که از لیست های مرتب استفاده می نمایید، در کنار هریک از گزینه ها به ترتیب یک عدد قرار می گیرد.

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

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

<ul>
  <li>Word</li>
  <li>Excel</li>
  <li>Access</li>
  <li>Powerpoint</li>
</ul>

هنگامی که از لیست های نامرتب استفاده می شود، در کنار هریک از گزینه ها، یک علامت نمایش داده خواهد شد.

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

<!DOCTYPE html>
<html>
  <head>
    <title>آکادمی بنو</title>
  </head>
  <body>
    <h1>ICDL</h1>
    <ol>
      <li>Word</li>
      <li>Excel</li>
      <li>Access</li>
      <li>Powerpoint</li>
    </ol>
    <hr />
    <h1>Web Design</h1>
    <ul>
      <li>Html, Css</li>
      <li>Javascript</li>
      <li>jQuery</li>
      <li>Angular</li>
      <li>React</li>
    </ul>
  </body>
</html>