القوائم Lists - تعلم Html

تعلم القوائم (Lists) في HTML: المرتبة وغير المرتبة والوصفية

مرحبًا بكم في درس جديد من دروس HTML، وفي هذا الدرس سنتعرف على كيفية إنشاء القوائم بمختلف أنواعها باستخدام لغة HTML.

القوائم من العناصر الأساسية في تصميم المواقع، حيث نستخدمها لعرض قوائم منتجات، أسماء، قوائم رئيسية أو فرعية داخل الموقع، وغير ذلك.

في HTML يوجد ثلاثة أنواع رئيسية من القوائم:

1. قائمة غير مرتبة (Unordered List)

2. قائمة مرتبة (Ordered List)

3. قائمة وصفية (Description List)

دعونا نتعرف على كل نوع وطريقة استخدامه.

---

أولًا: القائمة غير المرتبة (Unordered List)

لإنشاء قائمة غير مرتبة، نستخدم الوسم <ul>، وهو اختصار لـ Unordered List. داخل هذا الوسم، نضيف العناصر باستخدام الوسم <li>، وهو اختصار لـ List Item.

مثال:

<ul>
  <li>قهوة</li>
  <li>شاي</li>
  <li>لبن</li>
</ul>

عند عرض هذا الكود في المتصفح، ستظهر القائمة بعلامات نقطية (Bullets) قبل كل عنصر. وتُعتبر العناصر <ul> و<li> عناصر من نوع Block، أي أنها تظهر كل منها في سطر منفصل.

كما ستلاحظ وجود بعض المسافات من الأعلى ومن الجوانب، وهي عبارة عن خصائص CSS افتراضية مثل margin وpadding، يمكن تعديلها لاحقًا باستخدام CSS.

---

ثانيًا: القائمة المرتبة (Ordered List)

لإنشاء قائمة مرتبة نستخدم الوسم <ol>، وهو اختصار لـ Ordered List. وداخل القائمة نستخدم نفس الوسم <li> للعناصر.

مثال:

<ol>
  <li>قهوة</li>
  <li>شاي</li>
  <li>لبن</li>
</ol>

في هذه الحالة، سيتم عرض القائمة بأرقام (1، 2، 3) بدلًا من النقط. ويمكنك التحكم في شكل الترقيم باستخدام الخاصية type.

أنواع الترقيم المتاحة باستخدام type:

• type="1" (الافتراضي): 1، 2، 3

• type="A": A، B، C

• type="a": a، b، c

• type="I": I، II، III

• type="i": i، ii، iii

مثال:

<ol type="A">
  <li>قهوة</li>
  <li>شاي</li>
  <li>لبن</li>
</ol>

خواص إضافية:

• الخاصية reversed: تستخدم لعكس ترتيب الأرقام.

<ol reversed>
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  <li>عنصر 3</li>
</ol>

• الخاصية start: تُستخدم لتحديد الرقم الذي تبدأ منه القائمة.

<ol start="20">
  <li>عنصر 1</li>
  <li>عنصر 2</li>
</ol>

---

ثالثًا: القائمة الوصفية (Description List)

تُستخدم القائمة الوصفية لعرض المصطلحات وتعريفاتها، وتُعرف باستخدام الوسم <dl>، وبداخلها نستخدم الوسمين:

• <dt>: لكتابة المصطلح أو العنوان (Description Term)

• <dd>: لكتابة الوصف أو التفاصيل (Description Definition)

مثال:

<dl>
  <dt>HTML</dt>
  <dd>لغة ترميز تُستخدم لإنشاء صفحات الويب.</dd>
  <dt>CSS</dt>
  <dd>لغة تُستخدم لتنسيق شكل صفحات الويب.</dd>
</dl>

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

---

القوائم المتداخلة (Nested Lists)

يمكنك وضع قائمة داخل عنصر من عناصر قائمة أخرى، سواء كانت مرتبة أو غير مرتبة.

مثال لقائمة غير مرتبة بداخل أخرى:

<ul>
  <li>قهوة</li>
  <li>شاي
    <ul>
      <li>شاي أسود</li>
      <li>شاي أخضر</li>
    </ul>
  </li>
  <li>لبن</li>
</ul>

مثال لقائمة مرتبة بداخل أخرى:

<ol>
  <li>قهوة</li>
  <li>شاي
    <ol type="a">
      <li>شاي أسود</li>
      <li>شاي أخضر</li>
    </ol>
  </li>
  <li>لبن</li>
</ol>

من المهم ملاحظة أن المتصفحات تطبق أنماط CSS افتراضية على هذه القوائم، ويمكنك التحكم الكامل في شكل القائمة باستخدام CSS.

---

ملخص الدرس:

• القوائم مهمة في تصميم صفحات الويب لتنظيم المحتوى.

• HTML توفر ثلاثة أنواع من القوائم: غير مرتبة، مرتبة، وصفية.

• لكل نوع استخدام خاص ويمكن تخصيص شكله باستخدام السمات المختلفة أو CSS.

• يمكن تداخل القوائم لتشكيل قوائم فرعية داخلية.

---

إذا كنت مبتدئًا في HTML، فالقوائم تعتبر من أساسيات تعلم بناء الصفحة. تأكد من تطبيق ما تعلمته وتجربته في محرر الأكواد الخاص بك، ولا تنسَ مراجعة الدروس القادمة التي سنتحدث فيها عن تنسيق القوائم وتخصيصها باستخدام CSS.

شاهد الفيديو