یک صفحه وب به عنوان یکی از بهترین روشهای ارائه اطلاعات مرتب سازی و نمایه می شود. از طریق HTML می توان دو نوع لیست تهیه کرد.
- فهرست مرتبشده
- لیست نامرتب
لیست های نامرتب
< ul type = “disc/circle/square”>
<li>…….</li>
<li>…….</li>
<li>…….</li>
<li>…….</li>
</ul>
type = “disc” یک دیسک جامد تنظیم می کند. type = “circle” یک دایره خالی تنظیم می کند. type = “مربع” یک مربع جامد تنظیم می کند.
مثال 1
<html>
<ul type ="disc">
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ul>
</html>
خروجی
مثال 2
<ul type = “circle”>
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ul>
</html>
خروجی
ای بالا
ای پنجاب
ای هاریانا
ای نماینده مجلس
لیست های سفارش داده شده
<ol type = “1/A/a”>
<li>………</li>
<li>………</li>
<li>………</li>
<li>………</li>
</ol>
type = “1” اعداد توالی را تعیین می کند. type = “A” مجموعه حروف بزرگ A ، B ، C .. type = “a” ترتیب حروف کوچک a ، b ، c sequ را می دهد
مثال
<html>
<ol type= “1”>
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ol>
</html>
خروجی
- بالا
- پنجاب
- هاریانا
- نماینده مجلس
مثال
<html>
<ol type ="A">
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ol>
</html>
خروجی
A.UP
ب.پونجاب
سی هاریانا
D.MP
مثال
<html>
<ol type ="a">
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ol>
</html>
خروجی
a.UP
ب پونجاب
ج هاریانا
d.MP
لیست های تعریف
<dl>
<dt>……..</dt> <dd>…….</dd>
<dt>……..</dt> <dd>…….</dd>
<dt>……..</dt> <dd>…….</dd>
</dl>
شامل همه موارد لیست تعریف است
شامل اولین لایه موارد است.
شامل تمام لایه دوم موارد لیست است
مثال
<html>
<dl>
<dt>AAAA</dt> <dd>These are A letters</dd>
<dt>BBBB</dt> <dd> These are B letters </dd>
<dt>CCCC</dt> <dd> These are C letters </dd>
</dl>
</html>
خروجی
بله
اینها حروف A هستند
BBBB
اینها حرف B هستند
CCCC
اینها نامه های C هستند
توضیح
شامل همه موارد لیست تعریف است.
شامل اولین لایه موارد لیست “AAAA” است.
سبک لیست های غیر مرتب
لیست های غیر منظم سبک CSS را بر اساس شناسه ، کلاس یا نام برچسب تنظیم می کنند.
.class{attribute:value}
مثال
<html>
<style type = “text/css”
#b{font-style:italic}
</style>
<body>
<ol class = “b”>
<li>AAA</li>
<li>BBB</li>
</ol>
</body>
</html>
خروجی
- AAA
- BBB
توضیح: # b {font-style: italic} قلم را به صورت ایتالیک برای کلاس تنظیم می کند = ”a”
سبک لیست های تعریف شده
تعریف را می توان سبک CSS را با شناسه ، کلاس یا نام برچسب آن تنظیم کرد.
برچسب {ویژگی: ارزش}
مثال
<html>
<style type =”text/css”>
dt{color:purple}
dd{font-style:italic}
<style>
<dl>
<dt>AAAAA</dt> <dd> These are A letters </dd>
<dt>BBBBB</dt> <dd> These are B Letters </dd>
</dl>
</html>
خروجی:
AAAAA
اینها نامه هستند
BBBBB
اینها نامه های B هستند
توضیح: dt {color: purple} & dd {font-style: italic} سبک css را بر اساس نام برچسب تنظیم می کند.