HTML

HTML Description List
القوائم الوصفية في لغة HTML

سوف تتعلم في هذا الدرس بناء عدّة عناصر نصية مترابطة ومتفرعة من بعضها البعض، سواءً كانت العناصر مرقمة أو غير مرقمة، عن طريق عنصر dl في لغة HTML.

التاريخ

31 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

638

المواضيع

12
الشروحات chevron_left HTML Description List chevron_left HTML

HTML Description List
القوائم الوصفية في لغة HTML

</> HTML description lists
القوائم الوصفية في لغة HTML

تُستخدم القوائم الوصفية في صف مجموعة عناصر نصية مؤلفة من فئات أو أجزاء رئيسية، متفرع عنها أجزاء فرعية، حيث يتم تقسيم القائمة إلى عدة أجزاء تكون غير مرقمة، كما يمكن جعلها مرقمة عن طريق استخدام nested lists عن طريق عنصر <ol> .

  • عنصر <dl> هو المسؤول عن إنشاء description lists قوائم وصفية وهو من نوع nested elements العناصر المُتداخلة.
  • كل عنصر نصي رئيسي داخل القائمة الوصفية يتم إنشاءه عن طريق عنصر <dt> في لغة HTML -اختصار tag defines- وهو من نوع nested elements العناصر المُتداخلة.
  • كل عنصر نصي فرعي داخل القائمة الوصفية يتم إنشاءه عن طريق عنصر <dd> في لغة HTML -اختصار tag describes- وهو من نوع nested elements العناصر المُتداخلة.
  • يمكن إضافة عدد غير محدود من العناصر النصية داخل القوائم الوصفية سواءً كان العنصر النصي رئيسي أو فرعي.
HTML description lists

تستخدم description lists لعرض القوائم غير المرقمة.

<dl>
  <dt>Front-End</dt>
  <dd>HTML</dd>
  <dt>Back-End</dt>
  <dd>PHP</dd>
</dl>

</> HTML description lists syntax
طريقة كتابة القوائم الوصفية في لغة HTML

خطوات إنشاء description lists قوائم وصفية في لغة HTML هي:

  1. نقوم بإنشاء عنصر <dl> لبناء حاوية القوائم الوصفية.
  2. نضع بداخله العنصر <dt> لإضافة عناصر رئيسية للقائمة.
  3. نضع العناصر المتفرغة عن العنصر <dt> أسفله وبداخل العنصر <dd> لكي نقوم ببناء القوائم الفرعية المتفرعة عن dt.
Description list element

عنصر <dl> المسؤول عن بناء القوائم الوصفية.

<dl>

</dl>
Description list main item

عنصر <dt> المسؤول عن إضافة عناصر رئيسية داخل القوائم الوصفية.

<dl>
  <dt>Main Item</dt>
</dl>
Description list sub item

عنصر <dd> المسؤول عن إضافة عناصر فرعية داخل القوائم الوصفية أسفل العناصر الرئيسية.

<dl>
  <dt>Main Item</dt>
  <dt>Sub Item</dt>
  <dt>Sub Item</dt>
  <dt>Sub Item</dt>
</dl>
Description lists syntax

طريقة كتابة القوائم الوصفية في لغة HTML.

<dl>
  <dt>Front-End</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>JS</dd>
  <dt>Back-End</dt>
    <dd>PHP</dd>
    <dd>MYSQL</dd>
    <dd>Laravel</dd>
</dl>
ملاحظة
  • يُمكنكَ وضع أي نصوص أو عناصر HTML أخرى داخل القائمة الوصفية سواء داخل العناصر الرئيسية أو داخل العناصر الفرعية.
  • عن طريق لغة CSS يُمكنكَ التحكم في تنظيم العلامات داخل القائمة الوصفية الرئيسية والفرعية، وتغييرها.  
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات