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

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

آموزش 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 برای تعریف استایل نشانگر آیتم موجود در لیست به کار می‌رود.

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe 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> نوع نشانگر آیتم‌های لیست را تعریف می‌کند.

TypeDescription
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>
پیشنمایش

 

“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

منبع

 

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

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

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

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

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

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

نظرات
برچسب ها: , , , , , , , , , , , ,
بزرگترین پک آموزشی طراحی وب و تمام زبان های برنامه نویسی
  • انتشار: ۲۶ اردیبهشت ۱۳۹۸

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

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

آموزش پایتون و جنگوآموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار 480 هزارتومان
طراحی سایت بدون کدنویسیپکیج آموزش صفر تا صد طراحی فروشگاه اینترنتی بدون کدنویسی 96 هزارتومان
پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی 180 هزارتومان
دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ 4 93 هزارتومان
پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی 128 هزارتومان
پکیج آموزش برنامه نویسی اندروید+ساخت اپلیکیشن مشابه دیجی کالا 89 هزارتومان
مشاهده همه

نظرات

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

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