ایجاد لیست در صفحات وب

در ادامه سلسله آموزش های زبان html،در این مقاله در مورد لیست ها صحبت خواهیم کرد.

لیست ها یکی از پرکاربردترین عناصر موجود در HTML می باشند که طراحان را قادر به نمایش انواع اطلاعات به صورت لیست می نماید.در html سه نوع لیست وجود دارد:1- لیست های مرتب 2- لیست های نامرتب 3- لیست های تعریفی.در ادامه نحوه تعریف هر کدام از این لیست ها را توضیح خواهیم داد.

همچنین امکان تعریف این لیست ها به صورت تو در تو نیز وجود دارد،یعنی می توانیم یک لیست نامرتب را داخل یک لیست مرتب تعریف کنیم.

امروزه از لیست ها به منظور ایجاد جلوه های گرافیکی، همچون منوهای درختی، منوهای افقی و عمودی، تب ها و... استفاده می شود(البته برای این منظور باید آشنایی نسبی با CSS داشته باشید).

لیست های مرتب

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

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8"/>
        <title>پیشگامان صفر و یک فرساد</title>
    </head>
    <body>
	       <ol>
				<li>HTML</li>
				<li>CSS</li>
				<li>Java Script</li>
				<li>PHP</li>
		   </ol>
    </body>
</html>

در این مثال لیست شماره داری ایجاد کرده ایم که حاوی 4 ایتم می باشد.خروجی قطعه کد بالا در مرورگر را در تصویر زیر مشاهده می کنید.

در حالت پیش فرض، مرورگر از اعداد برای مرتب سازی آیتم های لیست استفاده می کند (به عنوان مثال از شماره 1، 2، 3 ...)، اما اگر بخواهید نمایش عناوین آیتم ها را سفارشی کنید، می توانید از خاصیت type در تگ ol استفاده کنید.مقادیری که در خاصیت type تگ ol می توانید استفاده کنید عبارتند از :

لیست آیتم ها به صورت شماره ای (1، 2، 3 و...) با وارد کردن مقدار 1 برای خاصیت type
لیست آیتم ها به صورت حروف کوچک (a,b,c,…) با وارد کردن مقدار a برای خاصیت type
لیست آیتم ها به صورت حروف بزرگ (A,B,C,…) با وارد کردن مقدار A برای خاصیت type
لیست آیتم ها به صورت شماره های رومی کوچک (i,ii,iii) با وارد کردن مقدار i برای خاصیت type
لیست آیتم ها به صورت شماره های رومی بزرگ (I,II,III,…) با وارد کردن مقدار I برای خاصیت type

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

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8"/>
        <title>پیشگامان صفر و یک فرساد</title>
    </head>
    <body>
	       <ol type="a">
				<li>HTML</li>
				<li>CSS</li>
				<li>Java Script</li>
				<li>PHP</li>
		   </ol>	
    </body>
</html>

همانطور که در تصویر زیر مشاهده می کنید ایتم ها با استفاده از حروف کوچک انگلیسی (a,b,c,d) نامگذاری شده اند.

ممکن است شما بخواهید نامگذاری ایتم ها از ابتدا شروع نشود،به عنوان مثال اگر بخواهید نامگذاری ها از حرف f شروع شود می توانید از خاصیت start استفاده کنید.با استفاده از این خاصیت می توانید تعیین کنید نامگذاری ایتم ها از کجا شروع شود.به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8"/>
        <title>پیشگامان صفر و یک فرساد</title>
    </head>
    <body>
	       <ol type="a" start="6">
				<li>HTML</li>
				<li>CSS</li>
				<li>Java Script</li>
				<li>PHP</li>
		   </ol>
    </body>
</html>

خروجی قطعه کد بالا را در تصویر زیر مشاهده می کنید.

همانطور که مشاهده می کنید نامگذاری ایتم ها از حرف ششم حروف لاتین یعنی حرف f آغاز شده است.خاصیت start را می توانید با دیگر type ها هم استفاده کنید.در مثال بالا اگر type را برابر 1 قرار می دادیم نامگذاری ایتم های از عدد 6 اغاز می شد.

در طراحی سایت، بیشترین مورد استفاده از لیست های مرتب، در هنگام ایجاد منوهای صفحه بندی یا همان paginationها می باشد.

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

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

<!DOCTYPE html>
<html>
      <head>
	<meta charset="utf-8"/>
        <title>پیشگامان صفر و یک فرساد</title>
    </head>
    <body>
	       <ul>
				<li>HTML</li>
				<li>CSS</li>
				<li>Java Script</li>
				<li>PHP</li>
		   </ul>
    </body>
</html>

خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود.

لیست های نامرتب

برای نحوه نمایش آیتم های لیست را تغییر دهیم، می توانیم همانند تگ ol از ویژگی type استفاده کنیم، با این تفاوت که در اینجا تنها سه مقدار زیر قابل تعیین است.

ایجاد دایره های تو خالی با مقدار circle برای خاصیت type
ایجاد دایره های تو پر با مقدار disc برای خاصیت type
ایجاد مربع های توپر با مقدار square برای خاصیت type

در طراحی سایت، بیشترین مورد استفاده از لیست های نامرتب، در هنگام ایجاد منوها می باشد.

لیست های تعریفی

یک لیست تعریفی لیستی از آیتم ها است، که هر آیتم دارای توضیح (تعریف) می باشد. لیست تعریفی با تگ dl مشخص می شود. تگ dt برای ایجاد آیتم های لیست و تگ dd برای توصیف هر آیتم کاربرد دارد؛ به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
     <head>
	<meta charset="utf-8"/>
        <title>پیشگامان صفر و یک فرساد</title>
    </head>
    <body>
	       <dl>
				<dt>HTML</dt>
				<dd>معرفی محتوای سایت</dd>
				<dt>CSS</dt>
				<dd>تغییر ظاهر نمایش محتوا</dd>
				<dt>Java Script</dt>
				<dd>پویانمایی سمت کاربر</dd>
		   </dl>
    </body>
</html>

خروجی قطعه کد بالا را در تصویر زیر مشاهده می کنید.