آموزش Html؛ آموزش کار با لیست ها در HTML
در یازدهمین جلسه در خدمت شماییم با آموزش Html؛ آموزش کار با لیست ها در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…
آموزش کار با لیست ها در HTML
لیست های مورد استفاده در یک سند HTML به دو صورت منظم و نامنظم هستند که هر یک کدنویسی مخصوص به خود را دارد. در ادامه با انواع این لیست ها آشنا خواهیم شد. در زیر نمونه ای از لیست ها را مشاهده می نمایید.
<html> <body> <h2>An Unordered HTML List</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>An Ordered HTML List</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>پیشنمایش
معرفی لیست نامنظم در Html
لیست های نامنظم با تگ <ul> و هر یک از آیتم‌های لیست با تگ <li> آغاز می‌شوند. آیتم‌های لیست (list item) به صورت پیش‌فرض به وسیله دایره‌های توپر سیاه‌رنگ (bullet) نشانه‌گذاری می‌شوند:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>پیشنمایش
انتخاب نشانگر آیتم لیست نامنظم در Html
در HTML، ویژگی list-style-type در CSS برای تعریف استایل نشانگر آیتم موجود در لیست به کار می‌رود.
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
مقدار disc نشانگر آیتم لیست را به شکل دایره توپر مشکی تبدیل می‌کند
<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>پیشنمایش
مقدار circle نشانگر آیتم لیست را به شکل دایره تو خالی تبدیل می‌کند
<ul style="list-style-type:circle;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
پیشنمایش
مقدار square نشانگر آیتم لیست را به شکل مربع تبدیل می‌کند
<ul style="list-style-type:square;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
پیشنمایش
مقدار none باعث می‌شود آیتم‌های لیست بدون نشانگر باشند
<ul style="list-style-type:none;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
پیشنمایش
معرفی لیست منظم در Html
لیست های منظم با تگ <ol> و هر یک از آیتم‌های فهرست با تگ <li> مشخص می‌شوند. آیتم‌های فهرست به صورت پیش‌فرض به وسیله اعداد نشانه‌گذاری می‌شوند:
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>پیشنمایش
خصوصیت Type در لیست منظم HTML
ویژگی type از تگ <ol> نوع نشانگر آیتم‌های لیست را تعریف می‌کند.
| Type | Description |
|---|---|
| type=”1″ | The list items will be numbered with numbers (default) |
| type=”A” | The list items will be numbered with uppercase letters |
| type=”a” | The list items will be numbered with lowercase letters |
| type=”I” | The list items will be numbered with uppercase roman numbers |
| type=”i” | The list items will be numbered with lowercase roman numbers |
“type=”۱: آیتم‌های فهرست با اعداد شماره‌گذاری می‌شوند (به صورت پیش‌فرض)
<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
پیشنمایش
“type=”A: آیتم‌های لیست با حروف بزرگ شماره‌گذاری می‌شوند
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
پیشنمایش
“type=”a: آیتم‌های لیست با حروف کوچک شماره‌گذاری می‌شوند
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>پیشنمایش
“type=”I: آیتم‌های لیست با اعداد رومی بزرگ شماره‌گذاری می‌شوند
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </olپیشنمایش
“type=”i: آیتم‌های لیست با اعداد رومی کوچک شماره‌گذاری می‌شوند
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>پیشنمایش
لیست های توصیفی در HTML
در زبان HTML از لیست های توصیفی (Description list) برای طراحی وب سایت هم پشتیبانی می‌شود. فهرست توصیفی در واقع لیستی از عبارات است که برای هر کدام توصیفی آورده شده است. تگ <dl> لیست توصیفی، تگ <dt> عبارت (نام) و تگ <dd> هر عبارت را تعریف می‌کنند:
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>پیشنمایش
لیست های تو در تو در HTML
لیست ها را می‌توان به صورت تو در تو (یعنی لیست در لیست ) ایجاد کرد
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>پیشنمایش
هر یک از آیتم‌های لیست، خود می‌توانند حاوی یک لیست جدید و دیگر عناصر HTML مثل تصاویر و لینک باشند.
لیست های افقی در Html
لیست های افقی HTML را می‌توان با استفاده از CSS به روش‌های مختلف ایجاد کرد. یکی از روش‌های محبوب ایجاد لیست به شکل افقی برای ایجاد منو است
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
پیشنمایش
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property float:left or display:inline to display a list horizontally
The post آموزش Html؛ آموزش کار با لیست ها در HTML appeared first on آموزش برنامه نویسی.
