القوائم Lists

القوائم في لغة HTML

يتم استخدام القوائم في لغة HTML لتقديم قائمة المعلومات بطريقة جيدة ودلالية. هناك ثلاثة أنواع مختلفة من القوائم في HTML ولكل منها استخدامها :

  • القائمة الغير مرتبة (Unordered list)- تُستخدم لإنشاء قائمة بالبنود ذات الصلة ، بدون ترتيب معين.
  • القائمة المرتبة (Ordered list)- تُستخدم لإنشاء قائمة بالبنود ذات الصلة بترتيب معين.
  • قائمة الوصف (Description list) - تستخدم لإنشاء قائمة بالمصطلحات وتفصيلاتها.
ملاحظة:

داخل بنود القائمة ، يمكنك وضع نص اوصور اوروابط اوفواصل أسطر وما إلى ذلك. يمكنك أيضًا وضع قائمة كاملة داخل اي بند من بنود القائمة لإنشاء قائمة متداخلة (nested list).

القائمة الغير مرتبة (Unordered list)

يتم إنشاء قائمة غير مرتبة باستخدام العنصر <ul> ، ويبدأ كل بند من بنود القائمة بالعنصر <li>.
يتم تمييز بنود القائمة في القوائم غير المرتبة بدائرة سوداء . إليك مثال:

مثال
تشغيل
  1. <ul>
  2. <li>Chocolate Cake</li>
  3. <li>Black Forest Cake</li>
  4. <li>Pineapple Cake</li>
  5. </ul>

يمكننا أيضًا تغيير نوع التعداد النقطي في القائمة غير المرتبة باستخدام CSS الخاصية list-style-type.
قاعدة النمط التالية تغير نوع الرمز النقطي من القرص disc الافتراضي إلى مربع square:

مثال
تشغيل
  1. ul {
  2. list-style-type: square;
  3. }

القائمة المرتبة (Ordered list)

يتم إنشاء قائمة مرتبة باستخدام عنصر <ol> ، ويبدأ كل بند من بنود القائمة بالعنصر <li>. تستخدم القوائم المرتبة عندما يكون ترتيب بنود القائمة مهمًا.
يتم تمييز بنود القائمة في القائمة المرتبة بأرقام. إليك مثال:

مثال
تشغيل
  1. <ol>
  2. <li>Fasten your seatbelt</li>
  3. <li>Starts the car's engine</li>
  4. <li>Look around and go</li>
  5. </ol>

يبدأ ترقيم بنود القائمة المرتبة عادةً بالرقم 1. ومع ذلك ، إذا كنت ترغب في التغيير ، يمكنك استخدام سمة start كما هو موضح في المثال التالي:

مثال
تشغيل
  1. <ol start="10">
  2. <li>Mix ingredients</li>
  3. <li>Bake in oven for an hour</li>
  4. <li>Allow to stand for ten minutes</li>
  5. </ol>

مثل القائمة غير المرتبة ، يمكنك أيضًا استخدام CSS الخاصية list-style-type لتغيير نوع الترقيم في قائمة مرتبة.
قاعدة النمط التالية تغير نوع العلامة إلى أرقام رومانية.

مثال
تشغيل
  1. ol {
  2. list-style-type: upper-roman;
  3. }
نصيحة:

يمكنك أيضًا استخدام السمة type لتغيير نوع الترقيم ، على سبيل المثال type="I".
ومع ذلك ، يجب عليك تجنب هذه السمة ، استخدم CSS خاصية list-style-type بدلاً من ذلك.

قائمة الوصف (Description list)

قائمة الوصف هي قائمة بالبنود مع وصف أو تعريف لكل بند
يتم إنشاء قائمة الوصف باستخدام عنصر <dl>. يتم استخدام عنصر <dl> مع عنصر <dt> الذي يحدد المصطلح ، وعنصر <dd> الذي يحدد تعريف المصطلح.
تعرض متصفحات الويب عادةً قوائم الوصف عن طريق وضع المصطلحات والتعريفات في أسطر منفصلة ، حيث تكون تعريفات المصطلح بمسافة بادئة قليلاً. إليك مثال:

مثال
تشغيل
  1. <dl>
  2. <dt>Bread</dt>
  3. <dd>A baked food made of flour.</dd>
  4. <dt>Coffee</dt>
  5. <dd>A drink made from roasted coffee beans.</dd>
  6. </dl>
« التالي السابق »