آموزش تگ ol در HTML

آموزش تگ ol در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ ol در HTML به صورت کامل آشنا بشید.
تگ Ol در HTML
تگ ol
که از کلمه ی ترکیبی Ordered List گرفته شده، تگی است که با استفاده از آن میتوان یک لیست مرتب شده ( لیستی که آیتم های آن دارای شماره گذاری باشد ) را ایجاد کرد.
برای ایجاد آیتم هاو موارد لیست باید از تگ <li> استفاده کنیم.
پیشنهاد ما این است که آموزش کار با لیست ها در HTML را مشاهده کنید.
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
مثال از تگ ol در HTML
در ادامه آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره یک : استفاده از تگ ol
<body> <ol> <li>سایت آموزشی وردپرس پوش</li> <li>سایت آموزشی وردپرس پوش</li> <li>سایت آموزشی وردپرس پوش</li> </ol> </body>
مثال شماره دو : استفاده از صفت type ( برای مشخص کردن نوع شماره گذاری آیتم ها )
<body> <ol type="A"> <li>سایت آموزشی وردپرس پوش</li> <li>سایت آموزشی وردپرس پوش</li> <li>سایت آموزشی وردپرس پوش</li> </ol> </body>
مثال شماره سه : استفاده از صفت start ( نقطه شروع شماره گذاری آیتم هارو مشخص میکنه )
<body> <ol start="10"> <li>Salam</li> <li>Khobi</li> <li>Man</li> <li>Milad</li> <li>Hastam</li> </ol> </body>
و مثال شماره چهار : استفاده از صفت reversed ( شماره گذاری آیتم هارو معکوس میکنه )
<ol reversed> <li>Salam</li> <li>Khobi?</li> <li>wppush</li> </ol>
و در آخر مثال شماره پنج : استفاده از CSS برای مشخص کردن نوع شماره گذاری آیتم ها
<body> <ol style="list-style-type:upper-alpha;"> <li>سایت آموزشی وردپرس پوش</li> <li>سایت آموزشی وردپرس پوش</li> <li>سایت آموزشی وردپرس پوش</li> </ol> </body>
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ ol
در HTML پشتیبانی میکنند یا خیر.
جدول صفات تگ ol در HTML
در جدول زیر میتوانید مشاهده کنید که چه صفات و چه مقادیری را میتوان در این تگ استفاده کرد.
پشتیبانی از صفات و رویدادهای عمومی
تگ ol
از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
نکات و توضیحات
- صفاتی مانند صفات start و type متعلق به نسخه HTML4.01 است و عملا این صفات در نسخه HTML5 منسوخ شده بشمار می روند، ولی خب به این همه مرورگرها ازشون پشتیبانی میکنند و در صفحه نشونشون میدن.
- همونطور که گفتم صفت type یه صفت منسوخ شده بشمار می ره، پس باید از CSS بجای این صفت استفاده کنید. ( همانند مثال شماره ۵ )
دستورات CSS پیش فرض
معمولا مرورگرها تگ ol
را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }
شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید