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

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

در یازدهمین جلسه در خدمت شماییم با آموزش Html؛ آموزش کار با لیست ها در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…

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

لیست های مورد استفاده در یک سند HTML به دو صورت منظم و نامنظم هستند که هر یک کدنویسی مخصوص به خود را دارد. در ادامه با انواع این لیست ها آشنا خواهیم شد. در زیر نمونه ای از لیست ها را مشاهده می نمایید.

پیشنمایش

 

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

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

پیشنمایش

 

انتخاب نشانگر آیتم لیست نامنظم در 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 نشانگر آیتم لیست را به شکل دایره توپر مشکی تبدیل می‌کند

پیشنمایش

 

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

پیشنمایش

 

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

پیشنمایش

 

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

پیشنمایش

 

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

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

پیشنمایش

 

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

پیشنمایش

 

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

پیشنمایش

 

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

پیشنمایش

 

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

پیشنمایش

 

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

پیشنمایش

 

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

در زبان HTML از لیست های توصیفی (Description list) برای طراحی وب سایت هم پشتیبانی می‌شود. فهرست توصیفی در واقع لیستی از عبارات است که برای هر کدام توصیفی آورده شده است. تگ <dl> لیست توصیفی، تگ <dt> عبارت (نام) و تگ <dd> هر عبارت را تعریف می‌کنند:

پیشنمایش

 

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

لیست ها را می‌توان به صورت تو در تو (یعنی لیست در لیست ) ایجاد کرد

پیشنمایش

هر یک از آیتم‌های لیست، خود می‌توانند حاوی یک لیست جدید و دیگر عناصر HTML مثل تصاویر و لینک باشند.

 

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

لیست های افقی HTML را می‌توان با استفاده از CSS به روش‌های مختلف ایجاد کرد. یکی از روش‌های محبوب ایجاد لیست به شکل افقی برای ایجاد منو است

پیشنمایش

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 مهندس رحمانی