آموزش تگ ul در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ ul در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ UL در HTML
تگ ul که مخفف کلمه ( UnOrdered List ) می باشد در لغت به معنی لیست نامرتب می باشد، تگی است که با استفاده از آن میتوان یک لیست نامرتب را در یک صفحه وب ایجاد و یا تعریف کرد.
اینکه میگیم نامرتب یعنی آیتم ها یا گزینه های این لیست هیچگونه شماره یا در کل هیچگونه ترتیبی ندارند و در کنار همه ی گزینه ها یک علامت ( دایره توپُر مشکی ) قرار دارد.
که البته ما میتوانیم به دلخواه این ( دایره توپُر مشکی ) رو با استفاده از CSS تغییر دهیم، مثلا میتونیم حذفش کنیم کامل یا نه مثلا رنگش رو یا شکل دایره توپُر رو تغییر دهیم.
Free-Learn
مثال از تگ ul در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <ul> <li>سلام</li> <li>خوبی</li> <li>من صادق</li> <li>هستم</li> </ul> </body> |
مثال شماره ۲ : سفارشی سازی تگ ul با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> ul{ border-left: 4px solid #00b185; background-color: #f1f1f1; padding: 10px 20px; list-style:none; } ul li::before { content:"\2023"; color:#a8a8a8; font-weight:bold; display:inline-block; width:1em; margin-left:-1em; } </style> |
مثال شماره ۳ : ایجاد منوی افقی با استفاده از تگ ul و دستورات CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <div> <ul class="top-menu"> <li><a href="#">خانه</a></li> <li><a href="#">آموزش HTML</a></li> <li><a href="#">آموزش CSS</a></li> <li><a href="#">درباره من</a></li> </ul> </div> </body> |
مثال شماره ۴ : ایجاد منوی عمودی با استفاده از تگ ul و دستورات CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <div> <ul class="top-menu"> <li><a class="active" href="#">خانه</a></li> <li><a href="#">آموزش HTML</a></li> <li><a href="#">آموزش CSS</a></li> <li><a href="#">درباره من</a></li> </ul> </div> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ ul در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ ul در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت
یعنی در HTML5 پشتیبانی نمی شود.)
| نام صفت | مقدار | توضیح |
|---|---|---|
| compact | compact | باعث میشه آیتم های لیست بصورت فشرده نمایش داده شوند. () |
| type | disc square circle |
نوع یا شکل آیتم ها یا گزینه های لیست را مشخص میکند. () |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ ul از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
علاوه بر تگ ul که برای ایجاد لیست نامرتب استفاده می شود، ما با استفاده از تگ ol نیز میتوانیم یک لیست مرتب شده را ایجاد نماییم.
تگ li که درون تگ ul قرار میگیرد با استفاده از آن میتوان آیتم ها یا گزینه های لیست هم نامرتب و هم مرتب را تعریف کرد.
معمولا و بیشترین استفاده از تگ ul در یک صفحه وب برای ایجاد منوی های سایت می باشد، هم منوی افقی و هم منوی عمودی که در مثال های ( ۳ و ۴ ) میتوانید نمونه آن را مشاهده نمایید.
صفت type که درون این تگ مورد استفاده قرار میگیرد در HTML5 منسوخ شده و پشتیبانی نمی شود لذا میتوان از CSS بجای این صفت استفاده نمود.
پیشنهاد میکنم حتما آموزش کار با منوها را در CSS مشاهده نمایید.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ ul را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 8 9 |
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; } |
