قوائم HTML


قائمة HTML غير مرتبة

تبدأ القائمة غير المرتبة <ul>بالعلامة. يبدأ كل عنصر بالقائمة <li>بالعلامة.

سيتم تمييز عناصر القائمة برموز نقطية (دوائر سوداء صغيرة) افتراضيًا:

مثال

<!DOCTYPE html>
<html>
<body>

<h2>قائمة مشروبات باستخدام html</h2>

<ul>
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ul>  

</body>
</html>

قائمة HTML غير مرتبة بشئ محدد

يمكنك اختيار شكل النقاط ك التالي

من خلال السمة style نضيف الخاصية list-style-type

تقوم list-style-type:disc بعمل شكل قرص او نقاط وهذا هو الشكل الافتراضي للقائمة من الاساس

وتقوم list-style-type:circle بعمل دائرة فقط

تقوم list-style-type:square بعمل شكل مربع

وتقوم list-style-type:none بالغاء وجود النقاط من الاساس

مثال – قرص

<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:disc">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ul>
  </body>
</html>

مثال – الدائرة

<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:circle">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ul>
  </body>
</html>

مثال – مربع

<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:square">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ul>
  </body>
</html>

مثال – لا شيء او نقاط مخفية

<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:none">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ul>
  </body>
  </html>

ترتيب قائمة HTML

تبدأ القائمة المرتبة بالعلامة <ol> . يبدأ كل عنصر بالقائمة بالعلامة <li>.

سيتم تمييز عناصر القائمة بالأرقام افتراضيًا:

مثال

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ol>
    </body>
  </html>

قائمة HTML مرتبة – سمة النوع

ويحدد نوع قائمة العناصر  السمة type من العلامة  <ol>، :

يمكنك اختيار شكل الترتيب ك التالي

من خلال اضافة السمة type ومحتواها يحدد نوع ترتيب القائمة

ويحدد “type=”1 ترتيب العنصر باستخدام الارقام وهو الوضع الافتراضي في الاساس

يحدد “type=”A الترتيب بالحروف الابحدية الانجليزية الكبيرة (Capital) مثل (A,B,C,D)

ويحدد “type=”a الترتيب بالحروف الابجدية الانجليزية الصغيرة (small) مثل (a,b,c,d)

يحدد “type=”I الترتيب بالارقام الرومانية الكبيرة مثل (I,II,III,IIII)

ويحدد “type=”i الترتيب بالارقام الرومانية الصغيرة مثل (i,ii,iii,iiii)

أعداد:

<!DOCTYPE html>
<html>
<body>
<ol type="1">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ol>
  </body>
  </html>

الأحرف الكبيرة:

<!DOCTYPE html>
<html>
<body>
<ol type="A">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ol>

أحرف صغيرة:

<!DOCTYPE html>
<html>
<body>
<ol type="a">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ol>
  </body>
  </html>

أرقام رومانية كبيرة:

<!DOCTYPE html>
<html>
  <body>
<ol type="I">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ol>
  </body>
  </html>

أرقام رومانية صغيرة:

<!DOCTYPE html>
<html>
  <body>
<ol type="i">
  <li>حليب</li>
  <li>عصير ليمون</li>
  <li>كاكاو ساخن</li>
</ol>
  </body>
  </html>

قوائم وصف HTML

يدعم HTML أيضًا قوائم الوصف.

قائمة الوصف هي قائمة بالمصطلحات ، مع وصف لكل مصطلح.

و تحدد العلامة <dl> قائمة الوصف، وتعرف العلامة  <dt> مصطلح (اسم)، ويصف العلامة <dd>  كل مصطلح:

مثال

<!DOCTYPE html>
<html>
  <body>
<dl>
  <dt>عصير ليمون</dt>
  <dd>- ليمون بارد مع ثلج</dd>
  <dt>كوكا</dt>
  <dd>- مشروب كوكا بارد بدون ثلج</dd>
</dl>
  </body>
  </html>

قوائم HTML المتداخلة

يمكن أن تتداخل القائمة (قوائم داخل القوائم):

مثال

<!DOCTYPE html>
<html>
  <body>
<ol>
  <li>حليب</li>
  <li>مشروب شوكلاته</li>
     <ul>
      <li>شوكلاته ساخنة</li>
      <li>شوكلاتة باردة</li>
    </ul>
  <li>عصير ليمون</li>
</ol>
  </body>
  </html>

ملاحظة: يمكن أن تحتوي عناصر القائمة على قائمة جديدة وعناصر HTML أخرى مثل الصور والروابط وما إلى ذلك.


التحكم في بداية العد

بشكل افتراضي ، ستبدأ القائمة المرتبة بالاعداد في العد من الرقم 1. إذا كنت تريد بدء العد من رقم محدد ، فيمكنك استخدام السمة start:

مثال

<!DOCTYPE html>
<html>
  <body>
<ol start="50">
  <li>حليب</li>
  <li>مشروب شوكلاته</li>
  <li>عصير ليمون</li>
</ol>
  </body>
  </html>

مع القليل من CSS

قائمة أفقية مع CSS

يمكن تصميم قوائم HTML بعدة طرق مختلفة باستخدام CSS.

تتمثل إحدى الطرق الشائعة في تصميم قائمة أفقيًا لإنشاء قائمة تنقل:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #546;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #151555;
}
</style>
</head>
<body>
<h2>قائمة علويه</h2>
<ul>
  <li><a href="#home">الرئيسية</a></li>
  <li><a href="#posts">منشورات</a></li>
  <li><a href="#contact">تواصل</a></li>
  <li><a href="#new">جديد</a></li>
</ul>

</body>
</html>

نصيحة: يمكنك معرفة المزيد عن CSS في دروسنا


ملخص الفصل

  • استخدم عنصر <ul> لتعريف قائمة غير مرتبة
  • استخدم خاصية list-style-type لتحديد علامة عنصر القائمة
  • واستخدم عنصر <ol> لتحديد قائمة مرتبة
  • استخدم سمة type لتحديد نوع الترقيم
  • استخدم عنصر <li> لتعريف عنصر قائمة
  • واستخدم عنصر <dl> لتحديد قائمة وصف
  • استخدم عنصر <dt> لتعريف مصطلح الوصف
  • واستخدم عنصر <dd> لوصف المصطلح في قائمة الوصف
  • يمكن أن تتداخل القوائم داخل القوائم
  • يمكن أن تحتوي عناصر القائمة على عناصر HTML أخرى
  • استخدم خاصية  float:right أو display:inline لعرض قائمة أفقيًا