Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

HTMLقوائم الوصف

  • مفهوم قوائم الوصف
  • إضافة قائمة وصف

مفهوم قوائم الوصف

قائمة الوصف ( Description List ) يقصد بها عرض مجموعة مصطلحات و كل مصطلح معه وصف.

في هذا النوع من القوائم أي مصطلح أو وصف تضعه له يتم إعتبارهم كعناصر في القائمة.
و بشكل عام، المصطلح يتم عرضه مباشرةً في أول السطر، أما الوصف فيتم إبعاده قليلاً عن أول السطر بشكل يبدو فيه أنه تابع للمصطلح الموجود قبله.

في هذا الدرس ستتعرف على الوسوم التي تستخدم لإضافة قوائم وصف في الصفحة.

إضافة قائمة وصف

لعرض قائمة وصف في الصفحة نستخدم الوسوم التالية:

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

في المثال التالي قمنا بإضافة قائمة وصف بداخلها عنوانين و خمس خيارات.

مثال

<dl>
<dt>Hot Drinks</dt>
<dd>- Coffee</dd>
<dd>- Nescafe</dd>
<dd>- Tee</dd>
<dt>Cold Drinks</dt>
<dd>- Red Bull</dd>
<dd>- Pepsi</dd>
</dl>
<dl> <dt>Hot Drinks</dt> <dd>- Coffee</dd> <dd>- Nescafe</dd> <dd>- Tee</dd> <dt>Cold Drinks</dt> <dd>- Red Bull</dd> <dd>- Pepsi</dd> </dl>
جرب الكود