القوائم المرتبة وغير المرتبة

مقدمة: ليه القوائم مهمة في صفحات الويب؟

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

في HTML، عندنا نوعين أساسيين من القوائم هنتعلمهم النهاردة بالتفصيل:

• القوائم غير المرتبة <ul>: ودي بنستخدمها لما يكون ترتيب العناصر مش مهم. بتظهر العناصر دي عادةً على شكل نقاط (bullets).
• القوائم المرتبة <ol>: ودي بنستخدمها لما يكون تسلسل العناصر مهم، زي الخطوات أو الترتيب الرقمي. بتظهر العناصر دي مترقمة (1, 2, 3, ...).

والعنصر المشترك اللي بنستخدمه جوه النوعين دول هو وسم العنصر <li>، اللي بيمثل كل عنصر لوحده في القائمة. يلا بينا نتعمق في كل نوع ونشوف بيتكتب إزاي وبنستخدمه إمتى.

القائمة غير المرتبة <ul>: لما الترتيب مش بيفرق

القائمة غير المرتبة، أو "Unordered List"، بنستخدمها لما نعرض مجموعة عناصر ترتيبها مش مهم. يعني لو غيرت ترتيب العناصر، المعنى مش هيتغير. زي قائمة المشتريات، أو قائمة مميزات منتج معين.

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

مثال على قائمة غير مرتبة بسيطة:

نسخ الكود

<h3>قائمة المشتريات</h3>
<ul>
  <li>خبز</li>
  <li>حليب</li>
  <li>بيض</li>
  <li>جبنة</li>
</ul>

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

المتصفح هيعرض الكود اللي فات بالشكل ده، بعلامات تنقيط افتراضية (عادةً بتكون دايرة سودا):

نصائح مهمة لاستخدام <ul>:

1. دايمًا حط وسوم <li> مباشرة جوه وسم <ul>. مينفعش تحط نصوص أو وسوم تانية زي <p> بين <ul> و <li> مباشرة.
2. ممكن تحط أي محتوى جوه الـ <li> نفسه، زي نصوص، صور، أو حتى روابط.

مثال متقدم: قائمة تحتوي على روابط:

نسخ الكود

<h3>قائمة التنقل في الموقع</h3>
<ul>
  <li><a href="/home">الصفحة الرئيسية</a></li>
  <li><a href="/about">عن الموقع</a></li>
  <li><a href="/contact">اتصل بنا</a></li>
</ul>

دي الطريقة الشائعة جدًا لعمل قوائم التنقل (Navigation Menus) في المواقع. القائمة غير المرتبة هي الأساس الهيكلي، وبعدين بنستخدم CSS عشان نديها الشكل الجمالي اللي إحنا عايزينه.

القائمة المرتبة <ol>: لما يكون التسلسل مطلوب

على عكس القائمة غير المرتبة، القائمة المرتبة "Ordered List" بنستخدمها لما يكون فيه تسلسل أو ترتيب منطقي ومهم للعناصر. زي خطوات عمل حاجة معينة، أو قائمة أفضل اللاعبين، أو مراحل مشروع. لو غيرت ترتيب العناصر هنا، المعنى هيختل.

طريقة كتابتها شبه الـ <ul> بالظبط، لكن بنستخدم الوسم <ol> كحاوية، وبرضه بنستخدم <li> لكل عنصر جوه القائمة. المتصفح تلقائيًا بيرقم العناصر دي.

مثال على قائمة مرتبة:

نسخ الكود

<h3>خطوات تحضير القهوة</h3>
<ol>
  <li>اغلي الماء.</li>
  <li>أضف القهوة المطحونة إلى الكوب.</li>
  <li>صب الماء الساخن فوق القهوة.</li>
  <li>قلّب جيدًا وأضف السكر حسب الرغبة.</li>
</ol>

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

تغيير نوع الترقيم باستخدام خاصية `type`:

مش لازم الترقيم يكون بالأرقام (1, 2, 3) بس. نقدر نغير شكل الترقيم باستخدام خاصية `type` جوه وسم <ol>. الخاصية دي بتاخد قيم مختلفة:

• type="1": الترقيم بالأرقام (ده الافتراضي).
• type="A": الترقيم بالحروف الإنجليزية الكبيرة (A, B, C).
• type="a": الترقيم بالحروف الإنجليزية الصغيرة (a, b, c).
• type="I": الترقيم بالأرقام الرومانية الكبيرة (I, II, III).
• type="i": الترقيم بالأرقام الرومانية الصغيرة (i, ii, iii).

مثال على استخدام `type`:

نسخ الكود

<h3>محاور الدرس (باستخدام الحروف)</h3>
<ol type="a">
  <li>مقدمة عن HTML.</li>
  <li>الوسوم الأساسية.</li>
  <li>إنشاء القوائم.</li>
</ol>

القوائم المتداخلة: تنظيم أكتر للمعلومات

قوة القوائم الحقيقية بتظهر لما نبدأ نعمل قوائم جوه قوائم. دي بنسميها "Nested Lists" أو القوائم المتداخلة. دي مفيدة جدًا لتقسيم المواضيع الكبيرة لنقاط فرعية أصغر.

القاعدة بسيطة جدًا: عشان تعمل قائمة فرعية، بتحط وسم <ul> أو <ol> جديد بالكامل داخل وسم <li> بتاع القائمة الرئيسية.

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

هنا هنعمل قائمة لمحتويات كورس برمجة، وكل لغة ليها قائمة فرعية بالمواضيع بتاعتها.

نسخ الكود

<h3>محتويات كورس تطوير الويب</h3>
<ul>
  <li>HTML
    <!-- بداية القائمة الفرعية -->
    <ul>
      <li>الوسوم الأساسية</li>
      <li>القوائم والجداول</li>
      <li>النماذج (Forms)</li>
    </ul>
    <!-- نهاية القائمة الفرعية -->
  </li>
  <li>CSS
    <ul>
      <li>المحددات (Selectors)</li>
      <li>الـ Box Model</li>
      <li>التصميم المتجاوب (Responsive)</li>
    </ul>
  </li>
  <li>JavaScript</li>
</ul>

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

المتصفح هيعرض القائمة الفرعية بمسافة بادئة (indentation) وشكل نقطة مختلف عشان يميزها عن القائمة الرئيسية.

مثال على قوائم متداخلة مختلطة (<ol> و <ul>):

ممكن كمان نعمل قائمة مرتبة رئيسية، وجواها قوائم فرعية غير مرتبة، والعكس صحيح.

نسخ الكود

<h3>خطة السفر</h3>
<ol>
  <li>اليوم الأول: الوصول والاستقرار
    <ul>
      <li>الذهاب إلى الفندق</li>
      <li>جولة حرة في المساء</li>
    </ul>
  </li>
  <li>اليوم الثاني: زيارة المعالم السياحية
    <ul>
      <li>زيارة المتحف</li>
      <li>زيارة القلعة التاريخية</li>
    </ul>
  </li>
  <li>اليوم الثالث: العودة</li>
</ol>

أمثلة تطبيقية: استخدام القوائم في مشاريع حقيقية

دلوقتي بعد ما فهمنا الأساسيات، تعالوا نشوف إزاي ممكن نستخدم القوائم دي في سياقات مختلفة على صفحات الويب.

مثال 1: قائمة مواصفات منتج

لما بتعرض منتج على موقع تجارة إلكترونية، قائمة المواصفات بتكون مهمة جدًا. استخدام <ul> هنا هو الأنسب لأن ترتيب المواصفات مش مهم.

نسخ الكود

<h2>مواصفات اللابتوب طراز X-200</h2>
<ul>
  <li><strong>المعالج:</strong> Intel Core i7 الجيل العاشر</li>
  <li><strong>الذاكرة العشوائية (RAM):</strong> 16 جيجابايت DDR4</li>
  <li><strong>التخزين:</strong> 512 جيجابايت SSD فائق السرعة</li>
  <li><strong>الشاشة:</strong> 15.6 بوصة بدقة Full HD</li>
  <li><strong>نظام التشغيل:</strong> Windows 11</li>
</ul>

مثال 2: قائمة الأسئلة الشائعة (FAQ)

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

نسخ الكود

<h2>الأسئلة الشائعة</h2>
<ol>
  <li>
    <h3>كيف يمكنني تتبع طلبي؟</h3>
    <p>يمكنك تتبع طلبك من خلال صفحة "طلباتي" بعد تسجيل الدخول إلى حسابك.</p>
  </li>
  <li>
    <h3>ما هي مدة الشحن؟</h3>
    <p>مدة الشحن تتراوح بين 3 إلى 5 أيام عمل داخل المدن الرئيسية.</p>
  </li>
  <li>
    <h3>هل يمكنني إرجاع المنتج؟</h3>
    <p>نعم، يمكنك إرجاع المنتج خلال 14 يومًا من تاريخ الاستلام. يرجى مراجعة سياسة الإرجاع.</p>
  </li>
</ol>

لاحظ هنا كيف أننا وضعنا عناوين وفقرات نصية كاملة داخل كل عنصر <li>، وهذا يوضح مرونة وقوة القوائم في تنظيم المحتوى المعقد.

تمرين عملي: ابنِ قائمتك الأولى

الآن حان دورك لتطبيق ما تعلمته. أفضل طريقة لتعلم البرمجة هي الممارسة.

خطوات التمرين:

1. افتح محرر الأكواد بتاعك (زي VS Code) وأنشئ ملف جديد باسم lists-practice.html.
2. ابدأ بكتابة الهيكل الأساسي لصفحة HTML.
3. داخل وسم <body>، قم بإنشاء المحتوى التالي:

نسخ الكود

<h1>صفحتي الشخصية عن الهوايات</h1>
    
<h2>هواياتي المفضلة</h2>
<!-- أنشئ هنا قائمة غير مرتبة (ul) تحتوي على 3 من هواياتك المفضلة -->

<h2>أهدافي للعام الحالي</h2>
<!-- أنشئ هنا قائمة مرتبة (ol) تحتوي على 3 أهداف تريد تحقيقها بالترتيب -->

4. بعد ما تكمل الكود، احفظ الملف وافتحه في المتصفح عشان تشوف النتيجة.
5. جرّب تعدل على القوائم، ضيف عناصر جديدة، وغير `type` بتاع القائمة المرتبة.

تحدي إضافي (اختياري):

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

تهانينا! لقد أكملت درس القوائم بنجاح. الآن أصبحت لديك أداة قوية لتنظيم وعرض المحتوى بشكل احترافي في صفحات الويب. القوائم هي حجر أساس في HTML، وفهمها جيدًا سيساعدك كثيرًا في رحلتك لتعلم تطوير الويب.