آموزش Html؛ آموزش کار با لیست ها در HTML

0 دیدگاه

در یازدهمین جلسه در خدمت شماییم با آموزش 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>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

</ol>

</body>

</html>

پیشنمایش

معرفی لیست نامنظم در Html

لیست های نامنظم با تگ <ul> و هر یک از آیتم‌های لیست با تگ <li> آغاز می‌شوند. آیتم‌های لیست (list item) به صورت پیش‌فرض به وسیله دایره‌های توپر سیاه‌رنگ (bullet) نشانه‌گذاری می‌شوند:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul>

<li>Coffee</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>

<li>Coffee</li>

</ul>

پیشنمایش

مقدار circle نشانگر آیتم لیست را به شکل دایره تو خالی تبدیل می‌کند

 <ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

پیشنمایش

مقدار square نشانگر آیتم لیست را به شکل مربع تبدیل می‌کند

 <ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

پیشنمایش

مقدار none باعث می‌شود آیتم‌های لیست بدون نشانگر باشند

 <ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

پیشنمایش

معرفی لیست منظم در Html

لیست های منظم با تگ <ol> و هر یک از آیتم‌های فهرست با تگ <li> مشخص می‌شوند. آیتم‌های فهرست به صورت پیش‌فرض به وسیله اعداد نشانه‌گذاری می‌شوند:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol>

<li>Coffee</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=”1: آیتم‌های فهرست با اعداد شماره‌گذاری می‌شوند (به صورت پیش‌فرض)

 <ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

پیشنمایش

“type=”A: آیتم‌های لیست با حروف بزرگ شماره‌گذاری می‌شوند

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

پیشنمایش

“type=”a: آیتم‌های لیست با حروف کوچک شماره‌گذاری می‌شوند

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

پیشنمایش

“type=”I: آیتم‌های لیست با اعداد رومی بزرگ شماره‌گذاری می‌شوند

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol

<li>Coffee</li>

</ol

پیشنمایش

“type=”i: آیتم‌های لیست با اعداد رومی کوچک شماره‌گذاری می‌شوند

 <ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</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>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<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>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</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>

<!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="#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

منبع

لیست جلسات قبل آموزش Html

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با پاراگراف و استایل در Html

آموزش کار با قالب بندی متن در Html

آموزش کار با کامنت در HTML

آموزش کار با کامنت در HTML

آموزش کار با رنگ ها در HTML

آموزش کار با تصاویر در HTML

آموزش کار با لینک در HTML

آموزش کار با جدول در HTML

آموزش کار با لیست ها در HTML

آموزش کار با عناصر Block و Inline در HTML

آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش کار با عنصر Head در HTML

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش HTML, آموزش اچ تی ام ال

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش برنامه نویسی پایتون در 24 ساعت + ساخت ربات تلگرامی

انتشار: ۲۶ اردیبهشت ۱۳۹۸

آموزش Html؛ آموزش کار با لیست ها در HTML

آموزش کار با لیست ها در HTML

معرفی لیست نامنظم در Html

انتخاب نشانگر آیتم لیست نامنظم در Html

معرفی لیست منظم در Html

خصوصیت Type در لیست منظم HTML

لیست های توصیفی در HTML

لیست های تو در تو در HTML

لیست های افقی در Html

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط