آموزش تگ ol در HTML

6 شهریور 1401
ارسال شده توسط
آموزش html css
آموزش تگ 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+وردپرس پوش

 

پشتیبانی از صفات و رویدادهای عمومی

تگ 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 در این موارد بسیار مهارت پیدا کنید.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید