نحوه استفاده از لیست ها در صفحات 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>Beno Academy | Html & Css Tutorial</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>

در صورتیکه کدهای فوق را ذخیره و صفحه را اجرا کنید، خروجی به شکل زیر خواهد بود:

استایل دهی به لیست ها در CSS

استفاده از لیست ها در صفحات وب موجب نظم، انسجام و زیبایی محتوای یک صفحه وب می شود. کاربرد دیگر لیست ها ساخت انواع منوی افقی، عمودی و مگا منو می باشد. برای استایل دهی به لیست ها هم می توان از tag selector و هم class selector استفاده نمود و خواص قابل تنظیم آنها به شرح زیر می باشند.

list-style-type: نحوه نمایش لیست که می تواند یکی از گزینه های زیر باشند:

  • none: باعث حذف علامت موجود در کنار لیست ها می گردد.
  • circle: نمایش دایره تو خالی در کنار گزینه ها.
  • square: نمایش مربع تو پر در گزینه ها.
  • upper-roman: نمایش اعداد یونانی بصورت حرف بزرگ.
  • lower-roman: نمایش اعداد یونانی بصورت حرف کوچک.
  • upper-alpha: نمایش حروف لاتین بصورت حرف بزرگ.
  • lower-alpha: نمایش حرفو لاتین بصورت حرف کوچک.
  • list-style-image: نمایش یک آیکون (تصویر) در کنار گزینه های لیست.

توجه داشته باشید گزینه های upper-roman, lower-roman, upper-alpha و lower-alpha مخصوص لیست های شماره گذاری شده و گزینه های circle و square مخصوص لیست های علامت گذاری شده می باشند.

مثال: سه لیست بصورت زیر ایجاد نمایید.

  1. لیست شماره گذاری شده با حروف بزرگ لاتین.
  2. لیست علامت گذاری شده با مربع تو پر.
  3. لیستی همراه با آیکن.

اگر قصد داشته باشید با استفاده از خاصیت list-style-image آیکنی برای گزینه های لیست مشخص نمایید، اولاً آیکن مورد نظر می بایست در سایز بسیار کوچک باشد، ثانیا آیکن فوق در پوشه ای مانند image در مجاورت صفحه باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Html & Css Tutorial</title>
    <style>
      .list1{
        list-style-type: upper-alpha;
      }
      .list2{
        list-style-type: square;
      }
      .list3{
        list-style-image: url('image/arrow.png');
      }
    </style>
  </head>
  <body>
    <h3>آموزش برنامه نویسی</h3>
    <ol class="list1">
      <li>آموزش سی شارپ</li>
      <li>آموزش جاوا اسکریپت</li>
      <li> آموزش ری اکت</li>
    </ol>
    <h3>آموزش طراحی سایت</h3>
    <ul class="list2">
      <li>HTML</li>
      <li>CSS</li>
      <li>Bootstrap</li>
    </ul>
    <h3>پایگاه داده</h3>
    <ul class="list3">
      <li>SQL Server</li>
      <li>Oracle</li>
      <li>MongoDB</li>
      <li>MySQL</li>
    </ul>
  </body>
</html>

نتیجه اجرا کدهای فوق به شکل زیر خواهد بود:

جدیدترین مقالات

آکادمی بنو

مقالات آموزشی

سایر خدمات ما

نشانی

کپی رایت © 2020 بنو.