📝 تعلم إنشاء القوائم في HTML: تنظيم محتواك باحترافية

سنتعلم كيفية تنظيم المعلومات على صفحات الويب الخاصة بك باستخدام القوائم (Lists). تخيل أنك تريد عرض قائمة مهام يومية، أو مكونات وصفة طعام، أو فهرس للمواضيع. كل هذه المعلومات تحتاج إلى تنظيم بصري يسهل على الزائر قراءتها وفهمها. هذا بالضبط ما توفره لنا وسوم القوائم في HTML! هيا بنا نبدأ. 🚀

🔤 ما هي القوائم (Lists) في HTML؟

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

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

  1. القوائم غير المرتبة (Unordered Lists): تُستخدم لعرض عناصر ليس لها ترتيب معين أو أولوية.
  2. القوائم المرتبة (Ordered Lists): تُستخدم لعرض عناصر متسلسلة أو لها ترتيب هام.
  3. قوائم الوصف (Description Lists): تُستخدم لعرض أزواج من المصطلحات والتفاصيل الخاصة بها.

📌 القوائم غير المرتبة (Unordered Lists)

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

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

<ul>
  <li>حليب</li>
  <li>بيض</li>
  <li>خبز</li>
  <li>فواكه</li>
</ul>

النتيجة في المتصفح:

  • حليب
  • بيض
  • خبز
  • فواكه

🔍 ملاحظة: المتصفح يضيف تلقائياً علامات النقاط (•) بجانب كل عنصر. هذا هو النمط الافتراضي.

1️⃣ 2️⃣ 3️⃣ القوائم المرتبة (Ordered Lists)

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

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

<ol>
  <li>افتح محرر النصوص (مثل VS Code).</li>
  <li>أنشئ ملفاً جديداً وسمّه `index.html`.</li>
  <li>اكتب هيكل HTML الأساسي.</li>
  <li>احفظ الملف وافتحه في المتصفح.</li>
</ol>

النتيجة في المتصفح:

  1. افتح محرر النصوص (مثل VS Code).
  2. أنشئ ملفاً جديداً وسمّه index.html.
  3. اكتب هيكل HTML الأساسي.
  4. احفظ الملف وافتحه في المتصفح.

🔍 ملاحظة: المتصفر يضيف تلقائياً أرقاماً تسلسلية (1, 2, 3...) بجانب كل عنصر.

🏷️ قوائم الوصف (Description Lists)

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

تتكون قائمة الوصف من ثلاث وسوم:

  • <dl>: يحوي القائمة ككل (اختصار لـ Description List).
  • <dt>: يعرّف المصطلح (اختصار لـ Description Term).
  • <dd>: يقدم وصفاً أو تعريفاً للمصطلح (اختصار لـ Description Details).
<dl>
  <dt>HTML</dt>
  <dd>لغة ترميز تستخدم لإنشاء هيكل صفحات الويب.</dd>

  <dt>CSS</dt>
  <dd>لغة تنسيق تستخدم لتجميل وتصميم صفحات الويب.</dd>

  <dt>JavaScript</dt>
  <dd>لغة برمجة تستخدم لإضافة التفاعل إلى صفحات الويب.</dd>
</dl>

النتيجة في المتصفح:

HTML : لغة ترميز تستخدم لإنشاء هيكل صفحات الويب.

CSS : لغة تنسيق تستخدم لتجميل وتصميم صفحات الويب.

JavaScript : لغة برمجة تستخدم لإضافة التفاعل إلى صفحات الويب.

✨ مثال عملي: دمج أنواع القوائم

يمكنك بسهولة إنشاء قوائم متداخلة (Nested Lists) بوضع قائمة كاملة داخل عنصر <li> لقائمة أخرى. هذا مفيد لإنشاء هيكل تفصيلي.

<h3>وصة فطيرة التفاح</h3>
<ol>
  <li>تحضير العجينة:
    <ul>
      <li>اخلط الطحين والملح.</li>
      <li>أضف الزبدة الباردة واعجن.</li>
    </ul>
  </li>
  <li>تحضير الحشوة:
    <ul>
      <li>قشر التفاح وقطعه.</li>
      <li>أضف السكر والقرفة.</li>
    </ul>
  </li>
  <li>ادخل الفطيرة الفرن لمدة 45 دقيقة.</li>
</ol>

في هذا المثال، أنشأنا قائمة مرتبة رئيسية للخطوات، وبداخل بعض عناصرها (<li>) وضعنا قوائم غير مرتبة فرعية للتفاصيل.

🎯 ملخص الدرس

تهانينا! 🥳 لقد تعلمت اليوم أداة تنظيمية قوية في HTML:

  • <ul> + <li> لإنشاء قوائم غير مرتبة (بنقاط).
  • <ol> + <li> لإنشاء قوائم مرتبة (مرقمة).
  • <dl> + <dt> + <dd> لإنشاء قوائم وصف (مصطلحات وتعريفات).
  • يمكنك دمج القوائم (تداخلها) لإنشاء هياكل تنظيمية معقدة.

تذكر أن القوائم تجعل محتواك أكثر قابلية للقراءة والمسح البصري، وهو أمر يحبه محركات البحث والزوار على حد سواء! 👍