لیست ها در html

اچ تی ام ال

لیست ها در html

در صفحات Html ، می توان انواع ليست های ترتيبی و نشانه ای ( بدون ترتيب ) را ايجاد کرد .

ليست های نشانه ای ( بدون ترتيب ) :

تگ <ul> :

يک ليست نشانه ای ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک نشانه ( Bullet ) قرار می گيرد .

برای ايجاد ليست های نشانه ای از تگ < ul > مخفف عبارت ( Unordered List ) به معنای ليست های بدون ترتيب استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<ul> List of Lessons
<li> Html </li>
<li> Css </li>
<li> Jquery </li>
<li> JavaScript </li>
<li> Color </li>
</ul>
</body>
</html>
پیش نمایش
خصوصيات تگ ul
نام خاصيت نوع خاصيت شرح
type disc
square
circle
نوع نشانه ( شکل ) ليست را مشخص می کند ، که يکی از موارد زير می تواند باشد :
1) disc : دایره های توپر
2) circle : دايره های توخالی
3) square : مربع

ليست های ترتيبی :

تگ <ol> :

يک ليست ترتيبی ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک شماره يا حرف ( نماد نشانه گذاری ) قرار گرفته ، که با معرفی هر آيتم جديد شمارنده يا حرف يک واحد افزايش می يابد .

برای ايجاد ليست های ترتيبی از تگ < ol > مخفف عبارت ( Ordered List ) به معنای ليست های ترتيبي استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<ol> List of Lessons
<li> Html </li>
<li> Css </li>
<li> Jquery </li>
<li> JavaScript </li>
<li> Color </li>
</ol>
</body>
</html>
پیش نمایش

نکته :همجنين می توان ليست ها را به صورت تو در تو نيز ايجاد کرد . در اين حالت انواع ليست های ترتيبی و نشانه ای را می توان در درون يکديگر استفاده کرد . به مثال زير دقت کنيد :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<ul>
<li> List number 1 </li>
<ol>
<li> List of Lessons </li>
<li> List of Lessons </li>
<li> List of Lessons </li>
</ol>
<li> List number 2 </li>
<ol>
<li> List of Lessons </li>
<li> List of Lessons </li>
<li> List of Lessons </li>
</ol>
</ul>
</body>
</html>
پیش نمایش
خصوصيات تگ ol
نام خاصيت نوع خاصيت شرح
start number
عدد
عدد يا حرف شروع ليست را معين می کند .
type A
a
I
i
1
نوع نمايش عدد يا حرف نشانه گذاری ليست را مشخص می کند ، که يکی از حالت های زير می تواند باشد :
1) A : حروف بزرگ انگليسی
2) a : حروف کوچک انگليسی
3) I : حروف بزرگ يونانی
4) i : حروف کوچک يونانی
5) 1 : اعداد انگليسی

ليست های معنی :

تگ <dl> <dt> <dd> :

ليست های معنی ، مجموعه ای از چندين آيتم متفاوت هستند که می توان همانند کتاب های معنی واژه ، برای هر يک از آنها يک توضيح ارائه داد .

برای ايجاد ليست های معنی ، از تگ < dl > استفاده می شود . هر يک از آيتم های ليست که می خواهيم توضيحی راجع به آن ارائه دهيم در يک تگ < dt > و متن توضيح مربوطه در يک تگ < dd > بلافاصله بعد از آن می آيد .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<dl>
<dt> Html </dt>
<dd> Client Side Language </dd>
<dt> ASP.NET </dt>
<dd> Server Side Language </dd>
<dt> Java Script </dt>
<dd> Client Side Scripting Language </dd>
</dl>
</body>
</html>
پیش نمایش