آموزش HTML - لیست های مرتب

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

مثال

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>لیست مرتب در html</title>
   </head>

   <body>
      <ol>
          <li>تبریز</li>
         <li>شیراز</li>
         <li>تهران</li>
         <li>اصفهان</li>
      </ol>
   </body>

</html>

این کد ، نتیجه زیر را ایجاد می کند -

آموزش لیست های معین در html

ویژگی Type

می توانید از ویژگی type برای تگ <ol> استفاده کنید تا نوع شماره گذاری مورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری با استفاده از اعداد است. اما از گزینه های زیر نیز می توان برای انواع شماره گذاری لیست استفاده نمود

<ol type = "1"> - اعداد پیش فرض
<ol type = "I"> - اعداد یونانی با حروف یزرگ
<ol type = "i"> - اعداد یونانی با حروف کوچک
<ol type = "A"> - حروف بزرگ انگلیسی
<ol type = "a"> - حروف کوچک انگلیسی

مثال

در زیر مثالی آورده ایم که در آن برای شماره گذاری از <ol type = "1"> استفاده شده است . این همان حالت پیشفرض است و نوشتن یا عدم نوشتن این مقدار تغییری در حالت نمایش اولیه ایجاد نمی کند

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>HTML لیست های مرتب در</title>
   </head>

   <body>
      <ol type = "1">
          <li>تبریز</li>
         <li>شیراز</li>
         <li>تهران</li>
         <li>اصفهان</li>
      </ol>
   </body>

</html>

این کد ، نتیجه زیر را ایجاد می کند -

آموزش لیست های معین در html

مثال

در مثال زیر از <ol type = "I"> استفاده می کنیم

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>HTML لیست های مرتب در</title>
   </head>

   <body>
      <ol type = "I">
          <li>تبریز</li>
         <li>شیراز</li>
         <li>تهران</li>
         <li>اصفهان</li>
      </ol>
   </body>

</html>

این کد ، نتیجه زیر را ایجاد می کند -

لیست های نامرتب با حروف یونانی بزرگ در html

مثال

در مثال زیر از <ol type = "i"> استفاده کردیم

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>HTML لیست های مرتب در</title>
   </head>

   <body>
      <ol type = "i">
          <li>تبریز</li>
         <li>شیراز</li>
         <li>تهران</li>
         <li>اصفهان</li>
      </ol>
   </body>

</html>

این کد ، نتیجه زیر را ایجاد می کند -

نمایش حروف یونانی کوچک در لیست

مثال

در مثال زیر از <ol type = "A" > استفاده می کنیم

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>HTML لیست های مرتب در</title>
   </head>

   <body>
      <ol type = "A">
          <li>تبریز</li>
         <li>شیراز</li>
         <li>تهران</li>
         <li>اصفهان</li>
      </ol>
   </body>

</html>

این کد ، نتیجه زیر را ایجاد می کند -

نمایش لیست های مرتب با حروف بزرگ لاتین

مثال

در مثال زیر از <ol type = "a"> استفاده می کنیم

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>HTML لیست های مرتب در</title>
   </head>

   <body>
      <ol type = "a">
          <li>تبریز</li>
         <li>شیراز</li>
         <li>تهران</li>
         <li>اصفهان</li>
      </ol>
   </body>

</html>

این کد ، نتیجه زیر را ایجاد می کند -

لیست های مرتب با حروف لاتین کوچک

ویژگی start

می توانید از ویژگی start برای تگ <ol> برای تعیین نقطه شروع شماره گذاری مورد نیاز خود استفاده کنید. در زیر گزینه های ممکن درج گردیده است :

<ol type = "1" start = "4">    - شروع با 4
<ol type = "I" start = "4">    - IV شروع با
<ol type = "i" start = "4">    - iv شروع با
<ol type = "a" start = "4">    - d شروع با
<ol type = "A" start = "4">    - D شروع با

مثال

در مثال زیر از <ol type = "i" start = "4" > استفاده کردیم

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>HTML لیست های مرتب در</title>
   </head>

   <body>
      <ol type = "i" start="4">
          <li>تبریز</li>
         <li>شیراز</li>
         <li>تهران</li>
         <li>اصفهان</li>
      </ol>
   </body>

</html>

این کد ، نتیجه زیر را ایجاد می کند -

لیست های مرتب شروع از عدد تعیین شده

لیست های نامرتب - درس قبلی

درس بعدی - لیست های تعریف