4- قوائم HTML: القوائم المرتبة و القوائم الغير مرتبة و القوائم الوصفية

قوائم HTML

تستعمل قوائم html كما يبين اسمها لانشاء قوائم في الموقع كالقائمة الرئيسية أو الفهرس و غيرها.

لتحسين مظهر و عمل القوائم يمكن استعمال ال CSS و ال Javascript.

و تنقسم قوائم html إلى ثلاثة انواع:

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

-القوائم المرتبة

-القوائم الوصفية

1- القوائم الغير مرتبة 

القوائم الغير مرتبة هي قوائم لا تحتوي على ارقام او حروف او رموز لترتيبها.

تكون القوائم الغير مرتبة منظمة باستعمال نقاط سوداء في بداية كل عنصر من عناصر القائمة.

مثال لكود قائمة غير منظمة مع النتيجة:

<ul>
<li> العنصرالاول  </li> 
<li> العنصرالثاني  </li>
<li> العنصرالثالث  </li>
<li> العنصرالرابع  </li>
</ul>

ونتيجة الكود أعلاه تكون كالتالي:

  • العنصرالاول
  • العنصرالثاني
  • العنصرالثالث
  • العنصرالرابع

يمكن استعمال السمة type و اعطائها القيمة none من اجل الاستغناء عن النقاط, و اليكم المثال في الكود التالي:

<ul type="none">
<li>العنصر الاول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
</ul>

و هاهي النتيجة:

  • العنصر الاول
  • العنصر الثاني
  • العنصر الثالث
  • العنصر الرابع

تستعمل سمة type كذلك لتغيير النقاط الى مربعات و ذلك باعطائها قيمة square او الى دوائر باعطائها قيمة circle.

بالامكان كذلك اضافة قائمة فرعية داخل عناصر القائمة الرئيسية و ذلك باعادة كتابة العناصر ul و li من جديد.

انظر المثال التالي مع النتيجة ليتضح الحال:

<ul>
    <li> عنصر رئيسي 1 </li>
    <li> عنصر رئيسي 2 </li>
    <li> عنصر رئيسي 3
        <ul>
            <li> عنصر فرعي 31</li>
            <li> عنصر فرعي 32</li>
        </ul>
    </li>	
    <li> عنصر رئيسي 4 </li>
</ul>

في الكود اعلاه اضفنا قائمة فرعية للعنصر المسمى عنصر رئيسي 3 و ذلك بإضافة العناصر ul و li داخل العنصر li الخاص بالعنصر الرئيسي 3. فكانت النتيجة كالتالي:

قوائم html

ملاحظة: ميزة type في القوائم الغير منظمة “ul” غير مدعومة في نسخة html 5. لذلك ينصح باستعمال CSS بدلها.

 

2- القوائم المرتبة

يكون هذا النوع من القوائم مرتبا باستعمال الارقام او الحروف او الرموز الرومانية.

و من ناحية الكود فان الامر شبيه بالقوائم الغير مرتبة و كل ما علينا فعله هو تغيير العنصر ul بالعنصر ol.

مثال لكود قائمة مرتبة:

<ol>
<li> العنصرالاول  </li> 
<li> العنصرالثاني  </li>
<li> العنصرالثالث  </li>
<li> العنصرالرابع  </li>
</ol>

و نتيجة الكود اعلاه تكون كالتالي:

  1. العنصرالاول
  2. العنصرالثاني
  3. العنصرالثالث
  4. العنصرالرابع

من اجل تغيير الارقام بالحروف او الرموز الرومانية يمكن استعمال السمة type و اعطائها القيمة I , i, a او A.

يمكن استعمال السمة start لتحديد نقطة الانطلاق.

و من اجل ترتبب القائمة ترتيبا تنازليا نستعمل سمة reversed

مثال على ذلك:

<ol type="A" start="D" reversed>
<li> العنصرالاول </li>
<li> العنصرالثاني </li>
<li> العنصرالثالث </li>
<li> العنصرالرابع </li>
</ol>

و نتيجة الكود اعلاه تكون كاللآتي:

  1. العنصرالاول
  2. العنصرالثاني
  3. العنصرالثالث
  4. العنصرالرابع

ملاحظة: نسخة html 5 تدعم سمة type داخل عنصر ol للقائمة المرتبة.

 

3- القوائم الوصفية

تسمح القوائم الوصفية لنا بإضافة وصف لكل عنصر من عناصر القائمة.

حيث يوضع عنوان العنصر داخل الوسم dt و الوصف الخاص به داخل الوسم dd كما هو موضح في المثال التالي:

<dl>
<dt> العنصر الاول</dt>
<dd>وصف للعنصر الاول</dd>
</dl>
<dl>
<dt>العنصر الثاني</dt>
<dd>وصف للعنصر الثاني</dd>
</dl>

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

القوائم الوصفية

و في الختام ارجو ان يكون درس قوائم html واضح للجميع و لا تنسو دعم هذا الدرس بتعليقاتكم و استفساراتكم.اخوكم صابر سعيد.

 


5 تعليقات

Add a Comment

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *