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

نبذة عامة

القوائم تعتبر من الأمور المهمة في لغة الـ HTML ولها العديد من الإستخدامات ، لكي تتضح لنا القوائم بشكل أكبر ، تخيل معي أنك تريد فرز أيام الأسبوع ، لو كنت على برنامج الـ Word مثلاََ لكان الشكل كالتالي:

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

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

هذا ما يسمي بالقوائم وبالـ HTML يوجد نوعين من القوائم ، قوائم مرتبة وقوائم غير مرتبة ، في هذا الدرس سنقوم بشرح ما هي القوائم الغير مرتبة  وكيفية كتابتها وما هو الـ tag المسئول عنها .

عنصر الـ <ul>

العنصر المسئول عن القوائم الغير مرتبة عن <ul> </ul> وله وسم بداية ووسم نهاية .

الـ ul هي إختصار لـ Unordered List  بمعنى ( قائمة غير مرتبة )

لو قمت الان بكتابة الايام داخل الـ <ul> بالشكل التالي :

<ul>
    Saturday
    Sunday
    Monday
    Tuesday
    Wednesday
    Thursday
</ul>

ستكون هذه هى النتيجة:

ul

 

هنا لم تكن النتيجة كما في المثال بأول الصفحة ، السبب بذلك ان الوسم <ul> لوحدة لا يكفي لكتابة قائمة غير مرتبة ، يجب توضيح ان هذه القائمة ستحتوي على العديد من العناصر وكل عنصر يتم وضعة في tag لتوضيح ذلك ، بمعنى أدق  يوم السبت سيكون داخل tag ويوم الأحد سيكون داخل tag وهكذا ….

الـ tag الذي نقصده هو <li> وهو اختصار لـ List Item بمعنى العناصر التي سوف تكون بداخل القائمة الغير مرتبة .

إذاََ لو اردتنا كتابة قائمة يجب استخدام الـ tag  باسم ul وبداخلة مجموعة من العناصر وكل عنصر يتم وضعه داخل tag باسم li   ليصبح شكل ترتيب الكود كالتالي:

<ul>
    <li> Saturday </li>
    <li> Sunday </li>
    <li> Monday </li>
    <li> Tuesday </li>
    <li> Wednesday </li>
    <li> Thursday </li>    
</ul>

ستكون النتيجة كالتالي:

ul list

 

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

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

type

تستخدم هذه الخاصة لتحديد شكل ونواع النقاط التي تظهر قبل عناصر القائمة ولها أكثر من قيمة:

  • square
  • disc
  • circle
<ul type="square"> </ul>
<ul type="disc"> </ul>
<ul type="circle"> </ul>

attribute type ul

 

في الوقت الحالي نادراََ ما يتم استخدام هذه الخصائص ، لإنه تم الاستغناء عنها وإستبدالها ببعض الخصائص الموجودة في الـ CSS