القوائم المرتبة في HTML

يا هلا بالجميع! اليوم بنشوف كيف نسوي قوائم مرتبة في HTML. الموضوع سهل وبتستخدمه كثير لما تحتاج تعرض قائمة بترتيب معين، سواء كانت خطوات، أو ترتيب أهمية، أو أي شي يحتاج تسلسل.

القوائم المرتبة <ol> وشغلها

القائمة المرتبة في HTML نستخدم لها الوسم <ol> (اختصار لـ "ordered list"). وكل عنصر داخل القائمة نحطه داخل وسم <li> (اختصار لـ "list item"). المتصفح بيضيف الترقيم تلقائيًا.

مثال بسيط:

<ol>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
  <li>الخطوة الثالثة</li>
</ol>

النتيجة بتكون كذا:

1. الخطوة الأولى
2. الخطوة الثانية
3. الخطوة الثالثة

تحكم في نوع الترقيم (attribute type)

تبغى الترقيم يكون بأرقام، حروف، أو رومانية؟ ما عندك مشكلة! استخدم الخاصية type مع الوسم <ol>.

• type="1": هذا الافتراضي (1, 2, 3...)
• type="a": حروف صغيرة (a, b, c...)
• type="A": حروف كبيرة (A, B, C...)
• type="i": أرقام رومانية صغيرة (i, ii, iii...)
• type="I": أرقام رومانية كبيرة (I, II, III...)

مثال على استخدام type="a":

<ol type="a">
  <li>أول عنصر</li>
  <li>ثاني عنصر</li>
  <li>ثالث عنصر</li>
</ol>

النتيجة:

1. أول عنصر
2. ثاني عنصر
3. ثالث عنصر

بداية الترقيم من وين (attribute start)

إذا تبغى القائمة تبدأ من رقم معين، مو من 1، استخدم الخاصية start.

مثال: نبغى نبدأ القائمة من 5:

<ol start="5">
  <li>العنصر الأول في قائمتنا اللي تبدأ من 5</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>

النتيجة:

5. العنصر الأول في قائمتنا اللي تبدأ من 5
6. العنصر الثاني
7. العنصر الثالث

ترقيم عكسي (attribute reversed)

تبغى الترتيب يكون تنازلي؟ ضيف الخاصية reversed للوسم <ol> وبس.

مثال:

<ol reversed>
  <li>العنصر الأخير</li>
  <li>العنصر اللي قبله</li>
  <li>العنصر الأول</li>
</ol>

النتيجة (لاحظ أن الترقيم يبدأ من عدد العناصر وينزل):

1. العنصر الأخير
2. العنصر اللي قبله
3. العنصر الأول

ملاحظة: لما تستخدم reversed، المتصفح بيحسب عدد العناصر ويبدأ الترقيم تنازليًا من هذا العدد. لو عندك 3 عناصر، بيبدأ من 3.

تعديل رقم عنصر واحد (attribute value على <li>)

إذا احتجت تغير رقم عنصر معين داخل القائمة، استخدم الخاصية value على وسم <li>.

مثال:

<ol>
  <li>العنصر الأول</li>
  <li value="5">هذا العنصر بيبدأ من 5</li>
  <li>والعناصر اللي بعده بتكمل من 5</li>
</ol>

النتيجة:

1. العنصر الأول
5. هذا العنصر بيبدأ من 5
6. والعناصر اللي بعده بتكمل من 5

نصيحة سريعة: تذكر أن القوائم المرتبة <ol> تستخدم لما الترتيب مهم. لو الترتيب مو مهم، استخدم القوائم غير المرتبة <ul> اللي بنشرحها في درس ثاني إن شاء الله.

كذا نكون غطينا أساسيات القوائم المرتبة في HTML. أتمنى الشرح كان واضح ومفيد. يلا طبقوا!

← السابقالفهرسالتالي →