لیست‌های مرتب (ol) و تنظیم نوع شماره‌گذاری (type)

لیست‌های مرتب (

) و جادوی شماره‌گذاری (type)! ✨

سلام به همه! فصل قبل در مورد لیست‌های نامرتب صحبت کردیم. اما اگه ترتیب آیتم‌ها برامون خیلی مهم باشه چی؟ مثلاً برای دستور پخت غذا، مراحل نصب یه برنامه، یا یه رتبه‌بندی؟ اینجا تگ <ol> (مخفف Ordered List یا لیست مرتب) وارد عمل می‌شه!

لیست‌های مرتب به طور خودکار آیتم‌ها رو شماره‌گذاری می‌کنن و به کاربر نشون می‌دن که هر کدوم در چه ترتیبی قرار دارن.

تگ <ol>: سازنده نظم و ترتیب! 🔢

تگ <ol> مثل یه قابلمه نامرئی عمل می‌کنه که آیتم‌های لیست رو داخل خودش جا می‌ده و به هر کدوم یه شماره یا نشانه ترتیبی اختصاص می‌ده. مرورگر به طور پیش‌فرض از اعداد (1, 2, 3…) برای شماره‌گذاری استفاده می‌کنه.

ساختار کلی:

<ol>
  <!-- آیتم‌های لیست اینجا قرار می‌گیرند -->
</ol>

نکته: مثل لیست‌های نامرتب، آیتم‌های لیست مرتب هم باید داخل تگ <li> (List Item) قرار بگیرن.

خصوصیت type: قدرت انتخاب نوع شماره‌گذاری! 🔠➕

اینجاست که جادو شروع می‌شه! خصوصیت type به شما این امکان رو می‌ده که نحوه شماره‌گذاری رو تغییر بدید. می‌تونید از اعداد، حروف، یا حتی اعداد رومی استفاده کنید!

مقادیر رایج خصوصیت type:

• '1': اعداد معمولی (پیش‌فرض) – مثل 1, 2, 3…
• 'a': حروف کوچک انگلیسی – مثل a, b, c…
• 'A': حروف بزرگ انگلیسی – مثل A, B, C…
• 'i': اعداد رومی کوچک – مثل i, ii, iii…
• 'I': اعداد رومی بزرگ – مثل I, II, III…

مثال کاربردی: دستور پخت کیک 🍰

<h2>دستور پخت کیک شکلاتی:</h2>
<ol type="1"> <!-- نوع پیش‌فرض -->
  <li>مواد خشک (آرد، شکر، پودر کاکائو، بکینگ پودر، نمک) را در یک کاسه بزرگ مخلوط کنید.</li>
  <li>مواد تر (تخم مرغ، شیر، روغن، وانیل) را در کاسه دیگری هم بزنید.</li>
  <li>مواد تر را به مواد خشک اضافه کرده و خوب مخلوط کنید تا خمیر یکدست شود.</li>
  <li>خمیر را در قالب چرب شده بریزید و در فر از قبل گرم شده با دمای 180 درجه سانتی‌گراد به مدت 30-35 دقیقه بپزید.</li>
</ol>

نتیجه:

1. مواد خشک (آرد، شکر، پودر کاکائو، بکینگ پودر، نمک) را در یک کاسه بزرگ مخلوط کنید.
2. مواد تر (تخم مرغ، شیر، روغن، وانیل) را در کاسه دیگری هم بزنید.
3. مواد تر را به مواد خشک اضافه کرده و خوب مخلوط کنید تا خمیر یکدست شود.
4. خمیر را در قالب چرب شده بریزید و در فر از قبل گرم شده با دمای 180 درجه سانتی‌گراد به مدت 30-35 دقیقه بپزید.

مثال با حروف کوچک: مراحل نصب نرم‌افزار 💻

<h2>راهنمای نصب نرم‌افزار:</h2>
<ol type="a">
  <li>فایل نصب را دانلود کنید.</li>
  <li>روی فایل دانلود شده دوبار کلیک کنید.</li>
  <li>دستورالعمل‌های روی صفحه را دنبال کنید.</li>
  <li>پس از اتمام، روی دکمه Finish کلیک کنید.</li>
</ol>

نتیجه:

1. فایل نصب را دانلود کنید.
2. روی فایل دانلود شده دوبار کلیک کنید.
3. دستورالعمل‌های روی صفحه را دنبال کنید.
4. پس از اتمام، روی دکمه Finish کلیک کنید.

خصوصیت start: شروع از عدد دلخواه! 🚀

گاهی ممکنه بخواید لیست شما از عددی غیر از ۱ شروع بشه. خصوصیت start این کار رو براتون انجام می‌ده.

<h3>فصل‌های یک کتاب (شروع از فصل ۵):</h3>
<ol start="5">
  <li>مقدمه</li>
  <li>فصل اول</li>
  <li>فصل دوم</li>
</ol>

نتیجه:

5. مقدمه
6. فصل اول
7. فصل دوم

یادتون باشه که این شماره‌گذاری‌ها فقط برای نمایش هستن. اگه بعداً آیتمی رو اضافه یا حذف کنید، مرورگر به طور خودکار شماره‌گذاری رو آپدیت می‌کنه! این قدرت HTML هست! 💪

لیست‌های مرتب با تگ <ol> و خصوصیت انعطاف‌پذیر type، ابزاری فوق‌العاده برای سازماندهی اطلاعاتی هستن که ترتیب در اون‌ها اهمیت داره. با استفاده درست از این‌ها، وب‌سایت شما حرفه‌ای‌تر و منظم‌تر به نظر می‌رسه! 😉