html اللوائح

html لوائح ol و ul

آخر تحيين: 04-01-2015

html لائحة التعريف الصّور


المثال أسفله للائحتين : لائحة غير مُرتّبة و أخرى مُرتّبة :

  • Unordered List : ul : لائحة غير مُرتّبة . مثال :

    • عنصر
    • عنصر
    • عنصر
  • Ordered List : ol : لائحة مُرتّبة . مثال :

    1. عنصر 1
    2. عنصر 2
    3. عنصر 3

ol : اللّوائح المُرتّبة

كما يدُلّ عليها اسمها فهي لوائح تكون مُرتّبة حسب معايير مُحدّدة و الوسم الذي نستعمله لإنشائها هو : <ol> ... </ol> ، و هو اختصار للإسم Ordered List . و داخل هذا الوسم سنقوم بتحديد عناصر اللائحة و ذلك باستعمال وسم آخر و هو <li> ... </li> ، و هو كذلك اختصار لكلمة List . العملية بسيطة سندرس مثالا ليتضح لكم الأمر :
هذه لائحة لأفضل المتصفّحين حسب ترتيب شهر دجنبر 2013 . من المركز الأوّل إلى المركز الثالث

  1. Google chrome
  2. Mozilla firefox
  3. Internet explorer

لترجمة هذه اللائحة إلى لغة html :

<ol>
   <li> Google chrome </li>                                    
   <li> Mozilla firefox </li>
   <li> Internet explorer </li>                          
</ol>
لاحظوا بأن ترتيب كتابة العناصر ضرورية ، في هذا المثال بما أن Google chrome يحتل المرتبة الأولى في التصنيف ، فقد وضعناه في المركز الأول و سيأخذ تلقائيا الرقم 1 و العنصر الذي يليه سيأخذ رقم "2" و الذي يليه رقم "3" وهكذا دَوالَيك .
- احرصوا أن تكون وسوم العناصر "li" دائماً داخل وسم اللاّئحة المُرتّبة "ol"

ul : اللّوائح غير المُرتّبة

في حالة اللوائح الغير المُرتّبة كما يدل اسمها ، يمكنكم البدء بأي عنصر تريدونه أو بطريقة عشوائية ، ترتيبها لا يهم .
مثال لِلائحة غير مُرتّبة
أذكر أسماء بعض الخضر و الفواكه ؟

  • البطاطس
  • الجزر
  • الليمون
  • الطماطم

لقد اختفت الأرقام ! لأننا لسنا مُحتاجين إليها فالمطلوب منّا هو ذِكْرُ بعض الخُضَر . و الفواكه دون ترتيبها . لنُترجم هذا إلى شيفرة HTML . سنحافظ على نفس الشكل الذي استخدمناه في اللوائح المُرتّبة . مع تغيير و سم ol بوسم اللّوائح الغير المُرتّبة ul

<ul>                                      
  <li>  البطاطس </li>
  <li> الجزر </li>
  <li> الليمون </li>                              
  <li> الطماطم </li>                                      
</ul>

اللوائح المتداخلة

يمكن للّوائح أن تكون متداخلة على عدّة مستويات ، أي نضع لوائح داخل أخرى . مثال :

<ul>
 <li> ... <li>
 <li> ...
     <ul>
       <li> ... </li>
       <li> ... </li>
     </ul>
 </li>
 <li> ... </li>
</ul>

مثال :

<ul>
  <li> لائحة الخُضر :
    <ul>                                      
        <li>  البطاطس </li>
        <li> الجزر </li>
        <li> الباذنجان </li>                        
        <li> الطماطم </li>                                    
    </ul>
  </li>

  <li> لائحة الفواكه :
    <ul>                                      
        <li> الإجّاص </li>
        <li> التّفاح </li>
        <li> الليمون </li>                            
        <li> الموز </li>                                       
    </ul>
  </li>
</ul>
مشاهدة النتيجة

يمكننا أيضا المزج بين اللوائح المُرتّبة و الغير المرتبة ، مثال :

<ol>
  <li> لائحة الخُضر :
    <ul>                                      
        <li>  البطاطس </li>
        <li> الجزر </li>
        <li> الباذنجان </li>                        
        <li> الطماطم </li>                                    
    </ul>
  </li>

  <li> لائحة الفواكه :
    <ul>                                      
        <li> الإجّاص </li>
        <li> التّفاح </li>
        <li> الليمون </li>                            
        <li> الموز </li>                                       
    </ul>
  </li>
</ol>
مشاهدة النتيجة
المجال الأكثر خصبا لاستعمال اللوائح على الويب ، هو توظيفها في إنشاء لوائح الرّوابط .
ما دُمتم تحترمون ترتيب فتح و إغلاق الوسوم و تتّبعون قاعدة:(الوسم الذي يضم وسوما أخرى ، هو الذي يُغلقُ أخيراً) ، يُمْكِنكم دمج ما شئتم من اللّوائح . و ستحتاجون لهذا خاصّة عندما تريدون إنشاء قائمة الّروابط من المستوى الثاني أو الثالث ... .

- لإنشاء اللائحة ، يجب أن تحافظوا على ترتيب الوسوم . نبدأ دائماً بوسم "ul" أو "ol" ثم يليه و سم العناصر "li"
- إذا كانت اللوائح متداخلة ، فاللائحة التي ندخلها في أخرى يجب أن تكون دائما داخل وسم "li" . أقول هذا ، لأنكم ستصادفون لا محالة كثيرا من الشيفرات لا تحترم هذا الشرط ، مثال :
<ul>
  <!-- ... -->
  <li> ... </li>
  <ul>
     <li> ... </li>
  </ul>
  <!-- ... -->
</ul>

رغم أن هذه الطريقة تعرض اللائحة بشكل صحيح على المتصفّح ، إلا أنها تخل بقاعدة فتح و إغلاق الوسوم المتداخلة . لاحترام مواصفات لغة html ستكون الشيفرة الصحيحة كالآتي :
<ul>
 <!-- ... -->
 <li> ... 
    <ul>
       <li> ... </li>
    </ul>
 </li>
 <!-- ... -->
</ul>