کدهای ایجاد انواع لیست

ایجاد لیست‌های مرتب که با ترتیب اعداد نمایش می‌یابند به کمک تگ ol (Ordered List) می باشد.
نوع دیگری از لیست وجود دارد که به آن لیست تعریفی (Definition List) می‌گویند. برای ایجاد آن از تگ dl استفاده می شود. پر واضح است که لیست تعریفی برای مواردی ست که لازم است برای هر یک از آیتم های لیست، توضیحی نمایش داده شود.
در لیست‌های مرتب و نامرتب آیتم ها را با تگ li بیان می کنند. ولی در لیست های تعریفی آیتم ها با تگ dd مشخص می شوند. در این لیست‌ها توضیح هر آیتم با تگ dt بیان می‌شود.

در ادامه چند نمونه مثال کد را با هم مرور می کنیم. ابتدا کد لیست های نامرتب... آیتم های لیست‌های نامرتب می‌تواند با دایره توپر، توخالی و یا مربع باشند:

لیست نامرتب با نمایش آیتم ها بصورت دایره تو پر (دیسک)

 <ul type="disc">
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ul>

لیست نامرتب با نمایش آیتم‌ها بصورت دایره توخالی (سیرکل)

<ul type="circle">
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ul>

لیست نامرتب با نمایش آیتم‌ها بصورت مربع (اسکوئیر)

<ul type="square">
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ul>

اکنون نمایش لیست‌های مرتب که به ترتیب اعداد، حروف الفبای لاتین و یا الفبای رومی هستند:

به ترتیب اعداد

<ol>
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ol>

به ترتیب الفبای لاتین (با حروف بزرگ)

<ol type="A">
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ol>

به ترتیب الفبای لاتین (با حروف کوچک)

<ol type="a">
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ol>

به ترتیب الفبای رومی (با حروف بزرگ)

<ol type="I">
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ol>

به ترتیب الفبای رومی (با حروف کوچک)

<ol type="i">
 <li>آیتم یک</li>
 <li>آیتم دو</li>
 <li>آیتم سه</li>
 <li>آیتم چهار...</li>
</ol>

برای لیست‌های تعریفی نیز به این صورت کدنویسی می‌کنیم:

<dl>
  <dt>آیتم یک</dt>
  <dd>توضیح آیتم یکم</dd>
  <dt>آیتم دو</dt>
  <dd>توضیح آیتم دوم</dd>
</dl>

همانطوری که در ابتدا هم اشاره شد، ما می توانیم لیستی تو در تو و پیچیده داشته باشیم. با توجه به کد‌های قبلی، تصویر زیر و کدی که در ادامه آمده است، نحوه کد نویسی لیست‌های تو در تو آموزش داده می شود. در اینجا ممکن است جزئیات بیشتری را بیان کنیم اما به دلیل اختصار آن را به تجربه شخصی خودتان واگذار می‌کنیم تا به مرور فرا گیرید.

<ul>
  <li>آیتم یک</li>
  <li>آیتم دو:
    <ul>
    <li>مورد یک از آیتم دو</li>
    <li>مورد دو از آیتم دو:
      <ul>
      <li>بخش یک از مورد دو از آیتم دو</li>
      <li>بخش دو از مورد دو از آیتم دو</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>آیتم سه</li>
</ul>

برای تگ‌های لیست‌ها می توان استایل‌های ویژه ای تعریف کرد که به زیباتر شدن فهرست بندی‌ها کمک کند. در پست‌های آینده و در فرصت مناسب به این موضوع هم خواهیم پرداخت.
موفق باشید!