انواع لیست در HTML
قبل از پرداختن به ادامه آموزش، بد نیست اشاره ای هم داشته باشیم به انواع مختلف لیست در HTML.
لیست ها در وب تقریبا در دو دسته اصلی طبقه بندی می شوند، لیست های شماره ای (لیست هایی که در ابتدای آیتم های آن شماره قرار می گیرد و به صورت خودکار مرتب می شوند) که به آنها در اصطلاح ordered یا سفارشی و مرتب شده می گویند، و در مقابل لیست هایی که بدون شماره بوده و به جای آن، از علائم دیگر نظیر نقطه های مشکی تو پُُر یا تو خالی و... استفاده می شود، به این نوع لیست ها، unordered یا نامرتب می گویند که البته برخلاف نام آن، تفاوت عمده این دو لیست، تنها در شمار دار بودن یا نبودن آیتم های آنها است.
ایجاد لیست های مرتب شده با تگ ol و li
برای ایجاد لیست ها با آیتم های شماره بندی شده، از دو تگ ol و li استفاده می شود، تگ ol یک تگ کلیدی است و به مفسر مرورگر تفهیم می کند که منظور ما از لیست، لیستی با آیتم های شماره دار است، به مثال زیر توجه کنید.
<ol>
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض، مرورگر از اعداد برای مرتب سازی آیتم های لیست استفاده می کند (به فرض از شماره 1، 2، 3 ...)، اما اگر بخواهید نمایش عناوین آیتم ها را سفارشی کنید، می توانید از چند مقدار متفاوت برای خاصیت type تگ ol استفاده کنید، این مقادیر می تواند به صورت زیر باشد:
- لیست آیتم ها به صورت شماره ای (1، 2، 3 و...) با مقدار 1 برای 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>
<li>html</li>
</ol>
ایجاد لیست های بدون شماره با تگ ul و li
برای ایجاد لیست هایی با آیتم های فاقد شماره در صفحات وب، از تگ ul و li استفاده می شود، در اینجا ul تگ کلیدی است که به مرورگر می گوید آیتم های لیست را بدون شماره نشان دهد و از li نیز برای ایجاد آیتم ها استفاده می شود، به مثال زیر توجه کنید.
<ul>
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
در حالت پیش فرض، مرورگر برای نمایش آیتم های لیست، از یک علامت (معمولا نقطه های تو پُر) استفاده می کند، برای اینکه این رفتار مرورگر را کنترل کرده و نحوه نمایش آیتم های لیست را سفارشی کنیم، می توانیم همانند تگ ol از ویژگی type استفاده کنیم، با این تفاوت که در اینجا تنها سه مقدار زیر قابل تعیین است.
- ایجاد نقطه های تو خالی با مقدار circle برای type.
- ایجاد نقطه های تو پر با مقدار disc برای type.
- ایجاد نقطه های مربعی با مقدار square برای type.
به مثال زیر توجه کنید.
<ul type="square">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
خوشبختانه علاوه بر مقادیر و خاصیت های فوق، کنترل عناصر تگ های ul و li با css نیز کاملا مقدور است، علاوه بر این، css امکانات خیلی بیشتری برای سفارشی سازی لیست های وب در اختیارمان قرار می دهد که در آموزش های مقدماتی css و در مطلب زیر به طور مفصل در این رابطه گفته ایم:
نحوه تنظیم لیست با تگ ul li در css
ایجاد لیست های تو در تو با تگ ul و li
کاربرد لیست های وب به موارد ساده محدود نمی شود، بلکه با پیروی از اصول HTML می توان لیست هایی تو در تو یا به اصطلاح nested نیز ایجاد کرد، اینگونه لیست ها می توانند برای توصیف مواردی که به صورت زیر مجموعه ای و طبقه بندی شده هستند، مانند منوهای وب کاربرد داشته باشند، ساختار کلی یک منوی زیر مجموعه ای و تو در تو را می توانید در مثال زیر مشاهده کنید.
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
ساخت لیست های تعریف شده با تگ dl، dt و dd
در HTML می توان با استفاده از تگ های dl، dt و dd لیست هایی با قابلیت های توصیفی ایجاد نمود که می تواند کاربرد های خاص خود را داشته باشد، در این شیوه، تگ dl به عنوان تگ کلیدی، تگ dt برای ایجاد آیتم های لیست و تگ dd برای توصیف هر آیتم کاربرد دارد؛ به مثال زیر توجه کنید.
<dl>
<dt>آموزش</dt>
<dd>آموزش برنامه نویسی</dd>
<dt>مقدماتی</dt>
<dd>آموزش مقدماتی</dd>
<dt>تگ ها</dt>
<dd>آموزش تگ های html</dd>
<dt>html</dt>
<dd>آموزش html</dd>
</dl>
مثال و پیش نمایش آنلاین
در زیر کد و پیش نمایش آنلاین نحوه استفاده از تگ های ایجاد کننده لیست در صفحات وب را ملاحظه می کنید که می توانید از آن استفاده نمائید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد لیست در صفحات وب</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
لیست های شماره ای:<br />
<!-- شروع یک لیست -->
<ol type="I">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ol>
<!-- پایان یک لیست -->
<hr />
لیست های عادی:<br />
<!-- شروع یک لیست -->
<ul type="square">
<li>آموزش</li>
<li>مقدماتی</li>
<li>تگ ها</li>
<li>html</li>
</ul>
<!-- پایان یک لیست -->
<hr />
لیست های توصیفی:<br />
<!-- شروع یک لیست -->
<dl>
<dt>آموزش</dt>
<dd>آموزش برنامه نویسی</dd>
<dt>مقدماتی</dt>
<dd>آموزش مقدماتی</dd>
<dt>تگ ها</dt>
<dd>آموزش تگ های html</dd>
<dt>html</dt>
<dd>آموزش html</dd>
</dl>
<!-- پایان یک لیست -->
<hr />
لیست های تو در تو:<br />
<!-- شروع یک لیست -->
<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul></li></ul>
</li>
</ul>
<!-- پایان یک لیست -->
</body>
</html>