استفاده از ليست هاي HTML

دو نمونه از پر استفاده ترين ليستها در HTML ليستهاي مرتب و ليستهاي نامرتب هستند. در ليستهاي مرتب ترتيب بخشهاي مختلف ليست مشخص مي شود ولي در ليستهاي نامرتب اين ترتيب مشخص نمي شود

 

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

در ليستهاي نامرتب براي عناصر ليست از شماره و عدد يا حروف الفبا استفاده نمي شود. عناصر اين معمولاً با يک دايره تو پر مشخص مي شوند. تگ ابتداي آن <ul> است و تگ پاياني آن <ul/> است. براي جدا کردن هر بخش ليست در ابتداي آن از تگ <li> استفاده مي شود. بهتر است هر تگ <li> که باز مي شود با <li/> بسته شود. در زير يک مثال براي اين نوع ليست آورده شده است:

 

<ul>

<li>بخش اول ليست</li>

<li>بخش دوم ليست</li>

<li>بخش سوم ليست</li>

</ul>

مثال بالا يک ليست بولت دار با سه بخش را به ما مي دهد:

 

بخش اول ليست

بخش دوم ليست

بخش سوم ليست

به اين نکته هم توجه کنيد که <li> نيازي به تگ پاياني ندارد ولي بهتر است از تگ پاياني آن يعني <li/> استفاده شود.. فاصله متن ليست شده از ابتداي خط هم مقداري از بقيه متن بيشتر مي شود. شما مي توانيد اين فاصله را با افزودن تگ <ul> بيشتر کنيد فقط به خاطر داشته باشيد تگهايي را که باز کرده ايد در آخر ليست ببنديد.در زير يک مثال براي اين نمونه ليست آورده شده است:

 

<ul>

<ul>

<ul>

<li>خط اول ليست</li>

<li>خط دوم ليست</li>

<li>خط سوم ليست</li>

</ul>

</ul>

</ul>

نتيجه اين فرمان به شکل زير خواهد بود:

 

خط اول ليست

خط دوم ليست

خط سوم ليست

از شناسه type مي توان در تگ <ul> استفاده کرد و ظاهر ليست را تغيير داد.

 

مي توانيد ليست به دست آمده را در اينجا مشاهده کنيد. به خاطر داشته باشيد که در مرورگرهاي مختلف ممکن است نحوه نمايش ليستها متفاوت باشد.

 

قسمت اول ليست

قسمت دوم ليست

قسمت سوم ليست

اگر مي خواهيد از تگ <center> براي ليست خود استفاده کنيد در اين کار دقت کنيد. چون ممکن است تمام سطرهاي متن شما به يک اندازه نباشند. در اين صورت به جاي اينکه ليستي در يک خط و مستقيم داشته باشيد ممکن است ليستي در هم ريخته و شلوغ به وجود آيد. مانند زير:

 

<center>

<ul>

<li>بخش اول ليست که بلندتر از بقيه سطرهاي ليست است</li>

<li>بخش دوم ليست</li>

<li>بخش سوم ليست در سطر آخر</li>

</ul>

<center>

ليست نهايي به اين صورت در صفحه ديده مي شود.

 

بخش اول ليست که بلندتر از بقيه سطرهاي ليست است

بخش دوم ليست

بخش سوم ليست در سطر آخر

اگر شما در يک صفحه بيشتر به ليستها نياز داريد مي توانيد از روش بالا استفاده کنيد اما بايد بدانيد که ممکن است ظاهر ليست در اندازه هاي مختلف پنجره مرورگر به هم بخورد. راه ديگري که براي جلوگيري از اين به هم خوردگي وجود دارد استفاده از يک Table است که بعداً در مورد آن توضيح خواهيم داد.