طراحی وب سایت

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

 

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

در ليستهاي نامرتب براي عناصر ليست از شماره و عدد يا حروف الفبا استفاده نمي شود. عناصر اين معمولاً با يک دايره تو پر مشخص مي شوند.

<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> استفاده کرد و ظاهر ليست را تغيير داد.

 

شناسه type

از اين شناسه در ليستهاي نا مرتب براي مشخص کردن شکل علامت مشخص کننده هر بخش استفاده مي شود. اين شناسه مي تواند مقادير زير را داشته باشد:

 

circle

با قرار دادن اين مقدار براي ليست علامت ابتدايي هر بخش به شکل يک دايره تو خالي در مي آيد.

disc

اين مقدار شکل علامت ابتداي هر قسمت از ليست را به يک دايره تو پر تغيير مي دهد.

square

اين مقدار شکل علامت ليست را به صورت يک مربع تو پر در مي آورد.

به ياد داشته باشيد که از شناسه type هم مي توان در تگ <ul> استفاده کرد و هم در تگ <li>. در صورتي که براي تگ <ul> از اين شناسه استفاده شود علامت مربوط به همه قسمتهاي ليست تغيير مي کند اما اگر براي تگ <li> از اين شناسه استفاده شود فقط علامت مربوط به همان بخش از ليست تغيير مي کند.

 

در مثال زير مي توانيد نحوه نمايش ليست با استفاده از شناسه type را در حالات مختلف مشاهده کنيد. ما از کد زير براي ساختن اين ليست آزمايشي استفاده مي کنيم:

 

<ul>

<li type="circle">قسمت اول ليست</li>

<li type="disk">قسمت دوم ليست</li>

<li type="square">قسمت سوم ليست</li>

</ul>

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

 

قسمت اول ليست

قسمت دوم ليست

قسمت سوم ليست

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

 

<center>

<ul>

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

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

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

</ul>

<center>

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

 

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

بخش دوم ليست

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

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