مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته آموختیم که چگونه از تگ legend در HTML استفاده نماییم؛ تگ legend تگی است که با کمک آن می توان یک عنوان یا کپشن برای تگ fieldset تعریف کرد.
در ادامه این دوره قصد داریم به آموزش کار با تگ li در HTML بپردازیم.
آموزش کار با تگ li در HTML
به مثال زیر توجه نمایید.
در این مثال یک لیست ترتیبی (<ol>) و یک لیست غیر ترتیبی (<ul>) در فهرست HTML به کار گرفته شده اند.
مثال :
| <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
تعریف و کاربرد
تاکنون متوجه شده اید که تگ li برای تعريف يک آيتم در ليست به کار مي رود.
تگ li در لیست های ترتیبی (<ol>) ، لیست های غیر ترتیبی (<ul>) و در لیست های منو (<menu>) استفاده می شود.
پشتیبانی مرورگر ها
تفاوت بین HTML 4.01 و HTML5
خصیصه “type” در HTML5 پشتیبانی نمی شود.
پیشنهاد می شود که از خصیصه “value” در HTML 4.01 استفاده نشود اما شما می توانید از همین خصیصه در HTML5 استفاده نمایید.
نکات و توصیه ها
توصیه ها
برای تعیین نوع لیست از CSS استفاده کنید.
خصیصه ها
| خصیصه | مقدار | توضیحات |
|---|
| type | ۱
A
a
I
i
disc
square
circle | این خصیصه تعیین می کند که آیتم های لیست شما به چه صورت باشد.
این خصیصه در HTML5 پشتیبانی نمی شود. |
| value | number | این خصیصه ابتدا تعداد آیتم های یک لیست را مشخص می نماید و سپس آیتم از مقدار مشخص شده به ترتیب افزایش پیدا می کنند.
(فقط برای لیست های مرتب (<ol>) استفاده می شود). |
خصیصه های سراسری Global Attributes
تگ <li> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <li> از خصیصه رویداد در HTML پشتیبانی می کند.
مثال های تکمیلی
مثال یک
یک لیست تو در تو (یک لیست در داخل یک لیست دیگر.)
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <body> <h4>A list inside a list:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html> |
مثال دو
یک لیست تو در تو (لیست پیچیده تر تو در تو).
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <body> <h4>Lists inside a list:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html> |
تنظیمات پیش فرض CSS
بیشتر مرورگرها عنصر <li> را با مقادیر پیش فرض زیر نمایش می دهند:
کلام آخر
در این جلسه با آموزش کار با تگ li در HTML همراه شما بودیم و آموختیم که تگ li برای تعريف يک آيتم در ليست به کار مي رود.
در جلسه آینده می خواهیم شما را با تگ link آشنا کنیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
