تگ ol در HTML

تگ ol در html

تگ ol در HTML چیست؟‌ چگونه در یک صفحه وب می‌توانیم لیست‌های ترتیبی بسازیم؟ چگونه لیست‌های ordered را استایل‌دهی کنیم. در این مقاله به صورت کامل در رابطه با تگ ol صحبت می‌کنیم و شما را با این تگ آشنا می‌کنیم.

تگ ol در HTML

تگ ol برای ساخت لیست‌های ترتیبی یا Ordered Lists مورد استفاده قرار می‌گیرد.

هنگامی که در لیست‌های ما ترتیب اهمیت پیدا می‌کند، می‌بایست از لیست‌های ترتیبی استفاده کنیم به این علت که این لیست‌ها با قرار دادن ترتیب مانند (۱. ۲. ۳. و غیره) یا نوع های دیگر باعث ترتیب بندی کردن عناصر لیست شما می‌شوند. در لیست‌های ترتیبی با تغییر ترتیب لیست ممکن است باعث تغییر معنای لیست شویم.

اگر لیستی که می‌خواهید بسازید نیازی به ترتیب‌بندی ندارد، می‌توانید از تگ ul استفاده کنید. همچنین اگر در رابطه با لیست‌ها اطلاعی ندارید می‌توانید مقاله ما در رابطه با آشنایی با لیست‌ها را مشاهده کنید.

تگ زیرمجموعه li

برای وارد کردن آیتم‌های لیست ترتیبی می‌بایست از یک تگ زیر مجموعه به نام <li> استفاده کنیم. این تگ از نوع block-level می‌باشد و از خصوصیات عمومی تگ‌های HTML پشتیبانی می‌کند، همچنین می‌توانید آن را استایل‌دهی کنید.

نمونه کد لیست‌های ترتیبی

یک نمونه از کد لیست‌های ترتیبی را در زیر می‌توانید مشاهده کنید.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
نمونه تگ ol
نمونه تگ ol

نمونه کد لیست‌های ترتیبی تو در تو

شما می‌توانید لیست‌های ترتیبی‌ای که می‌سازید را به صورت تو در تو نیز معرفی کنید که باعث می‌شود خروجی دقیق‌تری را در لیست‌هایتان داشته باشید. نمونه کد لیست‌های ترتیبی تو در تو را در زیر مشاهده می‌کنید.

<ol>
<li>first item</li>
<li>second item <!-- closing </li> tag not here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>
لیست تو در تو ترتیبی
لیست تو در تو ترتیبی

خاصیت‌های تگ ol

خاصیت ویژگی توضیحات
compact compact در HTML5 پشتیبانی نمی‌شود.
این خصوصیت باعث می‌شود که لیست از حالت عادی، کوچک‌تر نمایش داده شود.
reversed reversed این خصوصیت باعث برعکس شدن نمایش لیست می‌شود. (برای مثال ۹,۸,۷)
start number مشخص کننده مقدار شروع کننده لیست ترتیبی می‌باشد.
type 1
A
a
I
i
مشخص کننده نوع ترتیب بندی لیست می‌باشد.

انواع لیست‌های ترتیبی

همانطور که در جدول خاصیت ها موجود است ما ۵ نوع متفاوت از لیست‌های ترتیبی داریم. در کد زیر می‌توانید انواع آن را مشاهده کنید :

 

<!---- Numberic List ---->

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Alphabet Uppercase List ---->

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Alphabet lowercase List ---->

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Roman Numbers lowercase List ---->

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Roman Numbers Uppercase List ---->

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
انواع لیست‌های ترتیبی
انواع لیست‌های ترتیبی

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

یک لیست ترتیبی با حروف الفبای انگلیسی بزرگ بسازید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله با لیست‌های ترتیبی، خصوصیات آن‌ها و نحوه پیاده‌سازی آن‌ها در صفحات HTML آشنا شدیم و انواع لیست ترتیبی را شناختیم.

امیدوارم مطالب مورد نیاز در رابطه با تگ‌های ol را به صورت کامل یاد گرفته باشید.

خیلی خوشحال میشم که سوالات، انتقادات و پیشنهاداتتان را در بخش نظرات میزفا بفرستید.

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

6 نظر

6 پاسخ

  1. با عرض درود: من تویه ol بجای استفاده از انواع لیست از یک عکس استفاده کردم برای نمایش و جواب هم داد، اما یکاری شو بلد نبودم، عکسی که استفاده کردم سایزش یه مقدار بزرگ بود و بد نمایش داده میشد، تویه تگ image میشه width , height رو برای عکس تعیین کرد، و تویه ol میشه تویه قسمت style با نوشتن list-style-image یک عکسی رو فراخانی کرد، اما چجوری میشه عرض و طوله اون عکس رو در اونجا تغیر داد ؟ ممنون میشم پاسخ بدید:)

    1. سلام علیرضا عزیز،
      برای استفاده از این امکان باید قبلش تصویرت رو Crop و resize کرده باشی.

      حالا راه حل چیه؟ باید list-style-type:none بکنی و از طریق انتخابگر Before بیای و تصویر رو از طریق background-image معرفی بکنی و width و height بدی بهش.

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=