فهرست ها در اچ تی ام ال

در زبان اچ تی ام ال دو نوع فهرست یا لیست وجود دارد؛ فهرست مرتب(Ordered list - ol) و فهرست غیر مرتب(Unordered list - ul). منظور از فهرست مرتب، فهرستی است که آیتم ها آن به ترتیب (بر اساس عدد یا حروف) نمایش داده می شوند. اما منظور از فهرست غیر مرتب فهرستی است که آیتم های آن دارای ترتیب عددی یا حروفی نیست و آیتم ها با یک نشانه، مثلا دایره توپر...، نمایش داده می شوند.

فهرست نامرتب

برای ایجاد یک فهرست نامرتب از تگ <ul> استفاده می کنیم. آیتم های مربوط به این فهرست بین تگ آغازین <ul> و تگ پایانی </ul> قرار می گیرند. آیتم ها را بین تگهای آغازین <li> و تگ پایانی </li> قرار می دهیم. در این نوع فهرست، در کنار آیتم ها به صورت پیش فرض یک دایره توپر(bullet) نمایش داده می شود.

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

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

همانطور که گفتم مقدار پیش فرض برای شکلی که در کنار آیتم قرار می گیرد یک دایره توپر است. اما می توانیم این شکل را تغییر دهیم. در CSSیک ویژگی با نام list-style-type وجود دارد که می توانیم با استفاده از آن نوع نشانگر مربوط به آیتم های یک لیست نامرتب را تغییر دهیم. مقادیر موجود برای این ویژگی به شرح زیر است:

 

مقدار	توضیح
disc	این مقدار، مقدار پیش فرض است. نشانگر آیتم به صورت دایره توپر تنظیم می شود.
circle	نشانگر آیتم به صورت دایره تنظیم می شود.
square	نشانگر آیتم به شکل مربع تنظیم می شود.
none	آیتم بدون نشانگر نمایش داده می شود.

مثال: نشانگر آیتم به شکل مربع

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

<ul style="list-style-type:square">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>

مثال: یک فهرست بدون هیچ نشانگر

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

<ul style="list-style-type:none">
  <li>آیتم اول</li>
  <li>آیتم دوم</li>
  <li>آیتم سوم</li>
</ul>

فهرست مرتب

منظور از فهرست مرتب، فهرستی است که آیتم ها بر اساس عدد یا حرف مرتب شده اند. فهرست مرتب را با استفاده از تگ <ol>ایجاد می کنیم. مانند فهرست نامرتب، آیتم ها با استفاده از تگ <li> نوشته می شوند (مقدار پیش فرض، اعداد هستند):

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

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

 

نوع	توضیح
type="1"	این مقدار، مقدار پیش فرض است. در این حالت آیتمهای فهرست با استفاده از اعداد شماره گذاری می شوند.
type="A"	دراینحالت،آیتمهایفهرستبااستفادهازحروفلاتینبزرگشمارهگذاریمیشوند.
type="a"	در این حالت، آیتمهای فهرست با استفاده از حروف لاتین کوچک شماره گذاری می شوند.
type="I"	در این حالت، آیتم با استفاده از اعداد رومی با اندازه بزرگ شماره گذاری می شوند.
type="i"	در این حالت، آیتم با استفاده از اعداد رومی با اندازه کوچک شماره گذاری می شوند.

یک فهرست با اعداد رومی با اندازه بزرگ

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

<ol type="I">
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ol> 

فهرست توضیحات (Description list) در اچ تی ام ال 

در اچ تی ام ال یک نوع دیگر از فهرست نیز وجود دارد که به آن فهرست توضیحات می گویند. منظور از فهرست توضیحات یک فهرست از اصطلاحات (Term) است که یک توضیح (Description) برای هر اصطلاح ذکر می شود.
برای ساختن یک فهرست توضیحات از تگ <dl> استفاده می کنیم. اصطلاح یا کلمه ای که نیاز است توضیح برای آن نوشته شود در داخل تگ

قرار می گیرد. توضیح مربوط به اصطلاح نیز در داخل تگ <dd> نوشته می شود. مثال زیر را ببینید:

عسس

- جمع عاس به معنی شبگرد

تلقین

- فهماندن و یاد دادن کلام به کسی

<dl>
<dt>عسس</dt>
<dd>- جمع عاس به معنی شبگرد</dd>
<dt>تلقین</dt>
<dd>- فهماندن و یاد دادن کلام به کسی</dd>
</dl>

ما می توانیم فهرست ها را به صورت تودرتو (Nested) نیز ایجاد کنیم. در اصل در داخل آیتم های فهرست می توانیم یک فهرست جدید، یا عناصر اچ تی ام ال مثل یک تصویر را قرار دهیم. مثال زیر را در مورد یک فهرست تو در تو ببینید.:

• آیتم 1
• آیتم 2
  • آیتم 2-1
  • آیتم 2-2
• آیتم 3

<ul>
<li>آیتم 1</li>
<li>آیتم 2
<ul>
<li>آیتم 2-1</li>
<li>آیتم 2-2</li>
</ul>
</li>
<li>آیتم 3</li>
</ul>