القوائم هى احد العناصر التى تستخدم بكثرة فى اغلب الصفحات التى تتصفحها
فى الإنترنت.
على سبيل المثال, قائمة روابط الدورات الموجودة على يمين صفحات ملتقى مطورى المواقع.
او القائمة الموجودة بأعلى اليسار.
وهناك العديد من القوائم التى لها اشكال اخرى.
القوائم لها ثلاث انواع.
القوائم الغير مرتبة unordered lists
والقوائم المرتبة ordered lists
والقوائم المعرفة definition lists
لنأخذهم بالترتيب
القوائم الغير مرتبة.
والتى تعنى لا ترتيب لها, كل عناصر القائمة لا يمثل ترتيبهم شئ فى اهمية عرضهم.
او بمعنى اخر, ان القائمة, اولها مثلا اخرها, لن يفرق كثيرا اذا وضعت الأول مكان الأخير او الأخير مكان الأول.
ويتم تطبيقها بالشكل التالى كامثال
- الكود:
-
<ul>
<li>عنصر ما</li>
<li>عنصر اخر</li>
<li>عنصر مرة اخرى</li>
</ul>
وكما تلاحظ, لا يوجد اهمية اذا وضعنا العنصر الأول (عنصر ما)
مكان العنصر الأخير (عنصر مرة اخرى)
كلهم سيتم عرضهم, ولا يوجد اهمية تجعلنا نضع واحد قبل الأخر.
لكننا نضعهم بقائمة لتنسيقهم فقط ليس الا.
النوع الثانى, وهو القوائم المرتبة ordered lists
وتصاغ بالشكل التالى
- الكود:
-
<ol>
<li>العنصر الأول</li>
<li>العنصر الثانى</li>
<li>العنصر الثالث</li>
</ol>
لاحظ بنفسك كيف تم ترقيم عناصر القائمة
وهذا لأنها كما ذكرنا قائمة مرتبة.
قبل ان نذهب للجزء الثالث من انواع القوائم
دعونى اولا اوضح انه يمكننا ان نصنع مزيج داخل القوائم. كالتالى مثلا.
- الكود:
-
<ul>
<li>قائمة فرعية مرتبة
<ol>
<li>العنصر الأول بالقائمة الفرعية المرتبة</li>
<li>العنصر الثانى بالقائمة الفرعية المرتبة</li>
</ol>
</li>
<li>قائمة فرعية غير مرتبة
<ul>
<li>عنصر</li>
<li>مجرد عنصر</li>
<li>قائمة فرعية اكثر عمقا؟
<ol>
<li>عنصر واحد</li>
<li>عنصر ثانى</li>
</ol></li>
</ul></li>
<li>عنصر اخر</li>
</ul>
اتمنى ان تكون استطعت ان تستوعب كم هى سهولة وسلاسة صنع القوائم وعناصرها.
واخيرا النوع الثالث من القوائم
وهو القوائمة المعرفة او definition lists
هذا النوع, نادر استخدامه, وهو حقا لا يعنى اى شئ اكثر من اضافة تنسيق بسيط لجعل الأمر عبارة عن عناوين ريئيسية ووصفها.
كما رأينا بالنوع الأول والثانى, عناصرهم توضع داخل الوسم <li>
والحرفين هم اختصار لكلمة list item
لكن النوع الثالث, العناصر الرئيسية منه توضع داخل الوسم <dt>
وهى اختصار لكلمة definition term
ووصفه يوضع داخل الوسم definition description
ويكتمل الأمر بالشكل التالى
- الكود:
-
<dl>
<dt>المصطلح الأول</dt>
<dd>تعريف المصطلح الأول</dd>
<dd>وصف اخر للمصطلح الأول</dd>
<dt>مصطلح اخر</dt>
<dd>تعريف المصطلح الأخر</dd>
</dl>
اشياء اخرى حول القوائم.
متصفح الأنترنت اكسبلورار عادة يضيف مساحة فارغة لا نحبذ وجودها فى القوائمة
وتظهر هذه المساحة عند استخدام القوائم بنظام الـ inline (يتم إعداده من
خلال الـ css ويوجد شرح لهذا بقسم الـ css ) وخصوصا اذا كنت تضع عناصر
داخل عناصر القائمة, كالعنصر a الخاص بالروابط.
لتجنب هذا الأمر يوجد عدة طرق
اما ان تكتب القوائم دون ترك اى مسافات بين عناصرها
بالشكل التالى
- الكود:
-
<ul><li><a
href="#">رابط</a></li><li><a href="#">رابط
اخر</a></li><li><a
href="#">الخ</a></li></ul>
او ان تكتبها بالشكل التالى
- الكود:
-
<ul><!--
--><li><a href="#">رابط</a></li><!--
--><li><a href="#">رابط اخر</a></li><!--
--><li><a href="#">الخ</a></li><!--
--></ul>
اتمنى يكون كل شئ واضح بإذن الله.
واراكم بالدرس القادم على خير.
الرئيسية
