درس ششم – تگ های ایجاد لیست در HTML – بخش اول
در HTML سه نوع لیست و متناسب با لیست ها، سه نوع تگ برای ایجاد لیست وجود دارد که دو نوع را در این درس و یک نوع را در درس بعد می آموزید:
1-تگ ul
|
1 2 3 4 |
<ul> <li>الف</li> <li>ب</li> </ul> |
- با استفاده از تگ های ul و li می توانید یک لیست ایجاد کنید به این صورت که قبل از هر خط یک دایره قرار می گیرد.
- تگ ul مخفف عبارت لیست نامرتب (Unordered List) می باشد.
- هر تگ ul دارای حداقل یک تگ li است.
- تگ li مخفف عبارت آیتم یا موردی از لیست (List Item) می باشد.
- تگ li درون تگ ul قرار می گیرد.
- به ازای هر گزینه از لیست، یک تگ li مورد نیاز است.
- در لیست نامرتب، همانگونه که از نامش مشخص است، ترتیب خاصی وجود ندارد.
مثال: لیست بالا با استفاده از تگ های ul و li ایجاد شده است.
2-تگ ol
|
1 2 3 4 |
<ol> <li>گزینه اول</li> <li>گزینه دوم</li> </ol> |
- با استفاده از تگ های ol و li می توانید یک لیست ایجاد کنید به این صورت که قبل از هر خط، عدد قرار گیرد.
- تگ ol مخفف عبارت لیست مرتب (Ordered List) می باشد.
- هر تگ ol دارای حداقل یک تگ li است.
- تگ li مخفف عبارت آیتم یا موردی از لیست (List Item) می باشد.
- تگ li درون تگ ol قرار می گیرد.
- به ازای هر گزینه از لیست، یک تگ li مورد نیاز است.
- در لیست مرتب، گزینه های لیست، شماره گذاری می شوند به این صورت که شماره اولین گزینه، 1، شماره دومین گزینه 2 الی آخر.
مثال: نتیجه کدهای بالا:
- گزینه اول
- گزینه دوم
خلاصه درس:
- برای ایجاد لیست نامرتب (بدون شماره) از تگ ul و برای ایجاد لیست مرتب (شماره دار) از تگ ol استفاده می کنیم.
- به ازای هر آیتم یا مورد از لیست، یک تگ li باز و بسته درون تگ ul یا ol قرار می دهیم و محتوا را درون تگ li قرار می دهیم.
محتوای یک فایل HTML شامل تگ های ul، ol و li:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>سایت من</title> <meta name="description" content="توضیحات مورد نظر"> <meta name="keywords" content="کلمه1,کلمه2,کلمه3"> </head> <body> <ul> <li>الف</li> <li>ب</li> </ul> <ol> <li>گزینه اول</li> <li>گزینه دوم</li> </ol> </body> </html> |
تمرین
در فایل index با استفاده از تگ های ol و ul و li چند لیست ایجاد کنید.