آموزش تگ ul در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ ul در HTML با من همراه باشید.

آموزش تگ ul در HTML

Free-Learn

تگ UL در HTML

تگ ul که مخفف کلمه ( UnOrdered List ) می باشد در لغت به معنی لیست نامرتب می باشد، تگی است که با استفاده از آن میتوان یک لیست نامرتب را در یک صفحه وب ایجاد و یا تعریف کرد.

اینکه میگیم نامرتب یعنی آیتم ها یا گزینه های این لیست هیچگونه شماره یا در کل هیچگونه ترتیبی ندارند و در کنار همه ی گزینه ها یک علامت ( دایره توپُر مشکی ) قرار دارد.

که البته ما میتوانیم به دلخواه این ( دایره توپُر مشکی ) رو با استفاده از CSS تغییر دهیم، مثلا میتونیم حذفش کنیم کامل یا نه مثلا رنگش رو یا شکل دایره توپُر رو تغییر دهیم.

Free-Learn

مثال از تگ ul در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : سفارشی سازی تگ ul با استفاده از CSS

امتحان کنید

مثال شماره ۳ : ایجاد منوی افقی با استفاده از تگ ul و دستورات CSS

امتحان کنید

مثال شماره ۴ : ایجاد منوی عمودی با استفاده از تگ ul و دستورات CSS

امتحان کنید

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 بجای این صفت استفاده نمود.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ ul را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.


Free-Learn