HTML Description List
القوائم الوصفية في لغة HTML
في هذا الدرس، سوف تتعلم كيفية بناء عناصر نصية مترابطة ومتفرعة من بعضها البعض باستخدام عنصر <dl> في لغة HTML. سواء كانت العناصر مرقمة أو غير مرقمة، يمكنك تنظيمها بطريقة واضحة ضمن القوائم الوصفية.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Description List
القوائم الوصفية في لغة HTML
</>
Descriptive Lists in HTML
القوائم الوصفية في HTML
تُستخدم القوائم الوصفية [description lists] في تنظيم مجموعة من العناصر النصية المكونة من فئات أو أجزاء رئيسية متفرع منها أجزاء فرعية. ويمكن جعلها مرقمة باستخدام القوائم المتداخلة عن طريق عنصر <ol>.
- عنصر <dl> هو المسؤول عن إنشاء قوائم وصفية، وهو من نوع [العناصر المتداخلة nested elements].
- كل عنصر نصي رئيسي داخل القائمة الوصفية يتم إنشاؤه باستخدام عنصر <dt> في لغة HTML، وهو اختصار لـ [defines tag، بمعنى علامة التعريف]، وهو من نوع [العناصر المتداخلة nested elements].
- كل عنصر نصي فرعي داخل القائمة الوصفية يتم إنشاؤه باستخدام عنصر <dd> في لغة HTML، وهو اختصار لـ [describes tag، بمعنى علامة الوصف]، وهو من نوع [العناصر المتداخلة nested elements].
- يمكن إضافة عدد غير محدود من العناصر النصية داخل القوائم الوصفية، سواءً كانت العناصر رئيسية أو فرعية.
Web Development Technologies: Front-End And Back-End
يعرض المثال تقنيات تطوير الويب: HTML للواجهة الأمامية و PHP للواجهة الخلفية.
<dl> <dt>Front-End</dt> <dd>HTML</dd> <dt>Back-End</dt> <dd>PHP</dd> </dl>
dd & dt
- <dt>: يُستخدم لتحديد عنوان العنصر الرئيسي أو الموضوع الذي سنتحدث عنه. يمكنك التفكير فيه كعنوان رئيسي.
- <dd>: يُستخدم لوصف أو شرح العنصر الرئيسي. يمكنك التفكير فيه كالنص الذي يأتي تحت العنوان ليعطي تفاصيل إضافية.
مثلاً: إذا كان <dt> هو [فاكهة]، فإن <dd> يمكن أن يكون [تفاح، برتقال، موز].
</>
How to Write Description Lists in HTML
كيفية كتابة قوائم الوصف في HTML
خطوات إنشاء القوائم الوصفية [description lists] في لغة HTML هي:
1. نقوم بإنشاء عنصر <dl> ليكون الحاوية للقوائم الوصفية.
2. نضع بداخلها العنصر <dt> لإضافة العناصر الرئيسية للقائمة.
3. إضافة العناصر المتفرعة تحت <dt> باستخدام العنصر <dd> لتقديم تفاصيل أو شروحات عن العنصر الرئيسي.
Description Iist Element
عنصر <dl> هو المسؤول عن بناء القوائم الوصفية.
<dl> </dl>
Main Item in Description List
عنصر <dt> يُستخدم لإضافة العناصر الرئيسية داخل القوائم الوصفية كما يلي.
<dl> <dt>Main Item</dt> </dl>
Descriptive List with Multiple Main Items
مثال على استخدام عنصر <dt> لإدراج عناصر رئيسية متعددة في قائمة وصفية.
<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، يمكن التحكم في تنظيم العناصر داخل القائمة الوصفية، سواء كانت رئيسية أو فرعية، وتغيير طريقة عرضها.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
