اسفند, ۱۳۹۷ بدون نظر HTML

کار با تگ های ایجاد کننده لیست در HTML

 

همانطور که پیش تر گفتیم، در HTML برای ایجاد هر خاصیتی از تگ های استاندارد و تعریف شده ی خاصی استفاده می شود که بنا بر نیاز سنجی، توسط کنسرسیوم جهانی وب (w3c) تعریف شده اند، یکی از این نیاز ها، امکان ایجاد مطالب و محتوا، به صورت لیست شده است. از این رو در ادامه آموزش های مقدماتی HTML، این بار می خواهیم بپردازیم به مبحث کار با تگ های ایجاد کننده لیست در صفحات وب.

انواع لیست در HTML

قبل از پرداختن به ادامه آموزش، بد نیست اشاره ای هم داشته باشیم به انواع مختلف لیست در HTML.
لیست ها در وب تقریبا در دو دسته اصلی طبقه بندی می شوند، لیست های شماره ای (لیست هایی که در ابتدای آیتم های آن شماره قرار می گیرد و به صورت خودکار مرتب می شوند) که به آنها در اصطلاح ordered یا سفارشی و مرتب شده می گویند، و در مقابل لیست هایی که بدون شماره بوده و به جای آن، از علائم دیگر نظیر نقطه های مشکی تو پُُر یا تو خالی و… استفاده می شود، به این نوع لیست ها، unordered یا نامرتب می گویند که البته برخلاف نام آن، تفاوت عمده این دو لیست، تنها در شمار دار بودن یا نبودن آیتم های آنها است.

تگ ol و تگ ul

ایجاد لیست های مرتب شده با تگ ol و li

برای ایجاد لیست ها با آیتم های شماره بندی شده، از دو تگ ol و li استفاده می شود، تگ ol یک تگ کلیدی است و به مفسر مرورگر تفهیم می کند که منظور ما از لیست، لیستی با آیتم های شماره دار است، به مثال زیر توجه کنید.

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

 

نتیجه کد:

  1. لیست اول
  2. لیست دوم
  3. لیست سوم

در حالت پیش فرض، مرورگر از اعداد برای مرتب سازی آیتم های لیست استفاده می کند (به فرض از شماره ۱، ۲، ۳ …)، اما اگر بخواهید نمایش عناوین آیتم ها را سفارشی کنید، می توانید از چند مقدار متفاوت برای خاصیت type تگ ol استفاده کنید، این مقادیر می تواند به صورت زیر باشد:

– لیست آیتم ها به صورت شماره ای (۱، ۲، ۳ و…) با مقدار ۱ برای type.
– لیست آیتم ها به صورت حروف کوچک (c، b، a و…) با مقدار a برای type.
– لیست آیتم ها به صورت حروف بزرگ (C، B، A و…) با مقدار A برای type.
– لیست آیتم ها به صورت شماره های رومی کوچک (iii، ii، i و…) با مقدار i برای type.
– لیست آیتم ها به صورت شماره های رومی بزرگ (III، II، I و…) با مقدار I برای type.

به مثال زیر توجه کنید:

  <ol type=”i”>
    <li>لیست اول</li>
   <li>لیست دوم </li>
  <li> لیست سوم</li>
 </ol>

 

نتیجه کد:

  1. لیست اول
  2. لیست دوم
  3. لیست سوم

ایجاد لیست های بدون شماره با تگ ul و li

برای ایجاد لیست هایی با آیتم های فاقد شماره در صفحات وب، از تگ ul و li استفاده می شود، در اینجا ul تگ کلیدی است که به مرورگر می گوید آیتم های لیست را بدون شماره نشان دهد و از li نیز برای ایجاد آیتم ها استفاده می شود، به مثال زیر توجه کنید.

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

 

نتیجه کد:

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

در حالت پیش فرض، مرورگر برای نمایش آیتم های لیست، از یک علامت (معمولا نقطه های تو پُر) استفاده می کند، برای اینکه این رفتار مرورگر را کنترل کرده و نحوه نمایش آیتم های لیست را سفارشی کنیم، می توانیم همانند تگ ol از ویژگی type استفاده کنیم، با این تفاوت که در اینجا تنها سه مقدار زیر قابل تعیین است.

– ایجاد نقطه های تو خالی با مقدار circle برای type.
– ایجاد نقطه های تو پر با مقدار disc برای type.
– ایجاد نقطه های مربعی با مقدار square برای type.

به مثال زیر توجه کنید:

  <ul type=”square”>
    <li>لیست اول </li>
    <li>لیست دوم </li>
    <li> لیست سوم </li>
  </ul>

 

نتیجه کد:

  • لیست اول
  • لیست دوم
  • لیست سوم
برچسب ها

ارسال نظر شما

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *