قائمة مرتبة ( ol ) في الـ HTML

نبذة عامة

في الدرس السابق تعلمنا كيفية عمل قوائم غير مرتبة من خلال الوسم <ul> هذا الدرس يشبه إلى حد كبير جداََ الدرس السابق ، لذا يرجى مراجعته أولاََ ثم مراجعة هذا الدرس ،

الدرس السابق ما تم دراسته كانت عبارة عن القوائم الغير مرتبة ، في هذا الدرس سنتعلم القوائم المرتبة ، وهنا سيكون بدلاََ من وجود النقاط سيكون أرقام أو حروف متسلسلة .

فبدلاََ من استخدام

أيام الأسبوع: 

• السبت
• الأحد
• الإثنين
• الثلاثاء
• الأربعاء
• الخميس

سيصبح كالتالي

أيام الأسبوع: 

1. السبت
2. الأحد
3. الإثنين
4. الثلاثاء
5. الأربعاء
6. الخميس

مثال بسيط لقائمة مرتبة

<ol>
    <li> Item </li>
    <li> Item </li>
    <li> Item </li>
    <li> Item </li>
    <li> Item </li>
    <li> Item </li>    
</ol>

لاحظ هنا ان الوسم المسئول عن القائمة المرتبة هو <ol> وهو ايضاََ يجب ان يحتوي على وسم بداية ووسم نهاية وهو إختصار لـ Ordered Lists ، وكما في القائمة الغير مرتبة هذا الوسم لوحده لا يكفي ،

يجب أن تحتوى بداخله ايضاََ على وسم <li> على حسب العناصر التي ستكون موجودة بداخلة .

خصائص القوائم المرتبة

تعرفنا مسبقاََ على Attribute التي  من خلالها يمكن إضافة خصائص  للعنصر نفسه ، ما هي الـ Attribute الموجودة في وسم الـ ol

reversed

وهذه الخاصية من الخصائص الجديدة في الـ HTML5 ، ومن خلالها يمكنك ترتيب القائمة بشكل عكسي .

<ol reversed>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
    <li> Item 5 </li>
    <li> Item 6 </li>    
</ol>

بمجرد إضافة reversed ستكون النتيجة كالتالي :

لاحظ ان الترتيب العكسي يكون للأرقام الخاص بالقائمة وليس للعنصر كاملاََ.

type

لاحظنا انه في القائمة المرتبة ، يكون هناك ارقام ، هل بإمكان وضع شىء أخر غير الأرقام ؟

نعم ممكن ، من خلال خاصية type  يمكنك تحديد نوع الترقيم ، سواء حروف كبيرة أو صغيرة أو أرقام رومانية والقيمة الإفتراضية هي type=”1″

• a للحروف الصغيرة
• A للحروف الكبيرة
• i للأرقام الرومانية الصغيرة
• I للأرقام الرومانية الكبيرة

start

بالوضع الطبيعي في القائمة المرتبة تبدأ الأرقام من الرقم  1 وتبدأ الحروف من الحرف a أو A وهكذا ، ولكن الأن من خلال خاصية start يمكنك تحديد الترقيم الذي تريد ان تبدأ من عنده هذه القائمة ، من خلال اعطائها قيمة رقمية صحيحة .

<ol start="3">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
    <li> Item 5 </li>
    <li> Item 6 </li>    
</ol>

سيبدأ الترقيم في هذا الحالة من الرقم 3 ، وستكون النتيجة كالتالي :

يجب أن تلاحظ انه لو كانت الترقيم عبارة عن حروف كبيرة وكانت start=”3″ فسيبدأ الترقيم من الحرف C لانه يقبل فقط أرقام صحيحة .