0

لیست ها (تگ های ul, ol, dl)

16 خرداد 1393

لیست ها (تگ های ul, ol, dl)

ایجاد لیست در اچ تی ام ال

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

لیست ها به سه دسته منظم ، توضیحی و نامنظم تقسیم می شوند.

لیست های نامنظم(تگ ul)

این لیست ها با تگ ul آغاز می شوند و در داخل آن تگ li قرار می گیرد به کد زیر نگاه کنید:

html
<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<ul>
		<li>Lorem.</li>
		<li>Velit.</li>
		<li>Nemo.</li>
		<li>Incidunt.</li>
	</ul>
</body> 
</html>
 

نتیجه

 به طور پیش فرض هر کدام از آیتم های لیست های نامنظم (تگ li ) دارای یک نشانگر می باشد.

لیست های منظم ( تگ ol)

این لیست ها با تگ ol آغاز می شوند و آیتم آن نیز با تگ li ، تفاوت این لیست با لیست نامنظم در نشانگر آن است لیست های نامنظم نشانگر همه آیتم ها یکی است ولی در لیست های منظم ، آیتم ها یا دارای شماره منحصر به فرد یا الفبای منحصر به فرد می باشد به مثال زیر نگاه کنید:

html
<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<ol>
		<li>Lorem.</li>
		<li>Velit.</li>
		<li>Nemo.</li>
		<li>Incidunt.</li>
	</ol>
</body> 
</html>
 

لیست های توضیحی ( تگ dl )

این لیست با تگ dl آغاز میشود ولی این تفاوت را با دو لیست قبل دارد که به جای آیتم تگ قسمتی ( تگ li)، آیتم های این لیست دو قسمتی می باشند به طور که قسمت اول عنوان آیتم  (تگ dt) می باشد و قسمت دوم توضیح عنوان (تگ dd) می باشد. به کد زیر نگاه کنید:
html
<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<dl>
		<dt>title</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur.</dd>
		<dt>title</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur.</dd>
		<dt>title</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur.</dd>
	</dl>
</body> 
</html>

نتیجه

 صفت های تگ ul

این تگ دارای صفات زیادی نیست و مهمترین آن عبارت است از:

صفت type

این صفت نوع نشانگر آیتم های لیست را مشخص می کند که دارای مقادیر زیر می باشد:
1. disc
این نشانگر، نشانگر پیش فرض لیست می باشد که یک دایره توپر می باشد.
2. circle
این نشانگر یک دایره توخالی می باشد.
3. square
این نشانگر یک مربع توپر می باشد.
html
<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<ul type="disc">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ul>
	<ul type="circle">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ul>
	<ul type="square">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ul>
</body> 
</html>

نتیجه

 

 صفت های تگ ol

از جمله صفات این تگ عبارتند از:

صفت type

این صفت شمارشگر آیتم ها را تعیین می کنید که  مقادیر آن عبارتند از:
1. 1
این مقدار، پیش فرض لیست های منظم می باشد و نوع شمارشگر را عدد تعیین می کند.
2. A
این شمارشگر حروف بزرگ لاتین می باشد.
3. a
این شمارشگر حروف کوچک لاتین می باشد.
4. I
این نشانگر حروف بزرگ رومی می باشد.
5. i
این نشانگر حروف کوچک رومی می باشد.
html
<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<ol type="1">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ol>
	<ol type="A">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ol>
	<ol type="a">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ol>
	<ol type="I">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ol>
	<ol type="i">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ol>
</body> 
</html>
 

نتیجه

صفت start

با توجه به نوع شمارشگر می توان تعیین کرد که شمارشگراز چه عدد و یا از چه حرفی آغاز شود.
html
<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<ol type="1" start="6">
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ol>
</body> 
</html>

 صفت های تگ li

این تگ نیز دارای دو صفت می باشد که عبارتند از:

صفت type

این صفت دارای مقادیر زیر می باشد که توضیح آن در بالا آمده است.
1
A
a
I
i
disc
square
circle

صفت vlaue

این صفت تعیین می کند که از آن li به بعد شمارشگر از چه مقداری شروع کند( این فقط برای آیتم های لیست های منظم می باشد).

html
<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<ol type="1">
		<li value="20">Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li value="30">Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ol>
</body> 
</html>
 

نتیجه

صادق جعفری

صادق جعفری

متخصص طراحی و اجرای انواع قالب وب سایت برای انواع cms (جوملا ، وردپرس و ...)

با بیش از 4 سال سابقه و بیش از 35 پروژه موفق

نوشتن دیدگاه