قائمة مرتبة ( 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 ستكون النتيجة كالتالي :

reversed attribute ol

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

 

type

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

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

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

type attribute ol

 

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-ol-3

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

start attribute ol