منو

لیست ها در html(قسمت هشتم)

لیست ها در html
لیست جلسات
DatoosTech img Course

قسمت اول

مقدمه html

DatoosTech img Course

قسمت دوم

چهارچوب اصلی صفحه های وب

DatoosTech img Course

قسمت سوم

تگ های فراخوانی

DatoosTech img Course

قسمت چهارم

خواص استاندارد تگ های HTML

DatoosTech img Course

قسمت پنجم

تگ های قاب بندی متن

DatoosTech img Course

قسمت ششم

ایجاد لینک در html

DatoosTech img Course

قسمت هفتم

ایجاد جدول در html

DatoosTech img Course

قسمت هشتم

لیست ها در html

DatoosTech img Course

قسمت نهم

فرم ها در html

DatoosTech img Course

قسمت دهم

کنترول ها در html

DatoosTech img Course

قسمت یازدهم

تصاویر در html

DatoosTech img Course

قسمت دوازدهم

استایل در html

DatoosTech img Course

قسمت سیزدهم

آدرس های اینترنتی (url)

DatoosTech img Course

قسمت چهاردهم

اسکریپت ها در Html

DatoosTech img Course

قسمت پانزدهم

تقسيم بندی صفحه و متن در Html

DatoosTech img Course

قسمت شانزدهم

رويدادهای HTML

DatoosTech img Course

قسمت هفدهم

کنترل های ذاتی HTML

DatoosTech img Course

قسمت هجدهم

خواص جدید کنترل ها در HTML 5

DatoosTech img Course

قسمت نوزدهم

اجرای مدیا در Html

DatoosTech img Course

قسمت بیستم

قابلیت های پیشرفته Html 5

DatoosTech img Course

قسمت بیست و یکم

طراحی اشیای گرافیکی

DatoosTech img Course

قسمت بیست و دوم

لیست تگ های 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>
پیش نمایش