نبذة عامة
القوائم تعتبر من الأمور المهمة في لغة الـ HTML ولها العديد من الإستخدامات ، لكي تتضح لنا القوائم بشكل أكبر ، تخيل معي أنك تريد فرز أيام الأسبوع ، لو كنت على برنامج الـ Word مثلاََ لكان الشكل كالتالي:
أيام الأسبوع:
- السبت
- الأحد
- الإثنين
- الثلاثاء
- الأربعاء
- الخميس
هذا ما يسمي بالقوائم وبالـ HTML يوجد نوعين من القوائم ، قوائم مرتبة وقوائم غير مرتبة ، في هذا الدرس سنقوم بشرح ما هي القوائم الغير مرتبة وكيفية كتابتها وما هو الـ tag المسئول عنها .
عنصر الـ <ul>
العنصر المسئول عن القوائم الغير مرتبة عن <ul> </ul> وله وسم بداية ووسم نهاية .
الـ ul هي إختصار لـ Unordered List بمعنى ( قائمة غير مرتبة )
لو قمت الان بكتابة الايام داخل الـ <ul> بالشكل التالي :
<ul>
Saturday
Sunday
Monday
Tuesday
Wednesday
Thursday
</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>
ستكون النتيجة كالتالي:
خصائص القوائم الغير مرتبة
تعرفنا مسبقاََ على Attribute التي من خلالها يمكن إضافة خصائص للعنصر نفسه ، ما هي الـ Attribute الموجودة في وسم الـ ul
type
تستخدم هذه الخاصة لتحديد شكل ونواع النقاط التي تظهر قبل عناصر القائمة ولها أكثر من قيمة:
- square
- disc
- circle
<ul type="square"> </ul>
<ul type="disc"> </ul>
<ul type="circle"> </ul>
في الوقت الحالي نادراََ ما يتم استخدام هذه الخصائص ، لإنه تم الاستغناء عنها وإستبدالها ببعض الخصائص الموجودة في الـ CSS