تگ 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> <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 را به صورت کامل یاد گرفته باشید.
خیلی خوشحال میشم که سوالات، انتقادات و پیشنهاداتتان را در بخش نظرات میزفا بفرستید.
6 پاسخ
با عرض درود: من تویه ol بجای استفاده از انواع لیست از یک عکس استفاده کردم برای نمایش و جواب هم داد، اما یکاری شو بلد نبودم، عکسی که استفاده کردم سایزش یه مقدار بزرگ بود و بد نمایش داده میشد، تویه تگ image میشه width , height رو برای عکس تعیین کرد، و تویه ol میشه تویه قسمت style با نوشتن list-style-image یک عکسی رو فراخانی کرد، اما چجوری میشه عرض و طوله اون عکس رو در اونجا تغیر داد ؟ ممنون میشم پاسخ بدید:)
سلام علیرضا عزیز،
برای استفاده از این امکان باید قبلش تصویرت رو Crop و resize کرده باشی.
حالا راه حل چیه؟ باید list-style-type:none بکنی و از طریق انتخابگر Before بیای و تصویر رو از طریق background-image معرفی بکنی و width و height بدی بهش.
جواب:
درسته علی اکبر، ممنون?
پاسخ سوال :
سلام محمد، درست گفتی، ممنون.