حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

شرح القوائم المرتبة HTML

القوائم المُرتبة (Ordered Lists)

ننتقل الآن إلى نوع جديد وهام من عناصر تنظيم المحتوى، وهو "القوائم". تُستخدم القوائم لعرض مجموعة من العناصر أو البيانات المترابطة. تنقسم القوائم في HTML إلى نوعين رئيسيين: قوائم مُرتبة (Ordered)، وقوائم غير مُرتبة (Unordered).

هذا الدرس مخصص "حصرياً" للنوع الأول: **القوائم المُرتبة (Ordered Lists)**، والتي يتم تعريفها باستخدام الوسم <ol>. تُستخدم هذه القوائم عندما يكون "التسلسل" أو "الترتيب" الرقمي للعناصر ذا أهمية دلالية (Semantic)، مثل عرض خطوات إرشادية، أو ترتيب أفضل النتائج، أو ترقيم البنود القانونية.

التعريف الأساسي: الوسم <ol>

الوسم <ol> هو اختصار لمصطلح "Ordered List" (قائمة مرتبة).

هذا الوسم هو "وسم حاوٍ" (Container Tag) مزدوج، مما يعني أنه يتطلب وسم فتح <ol> ووسم إغلاق </ol>.

وظيفته الدلالية (Semantic) ليست عرض العناصر بنفسه، بل هو بمثابة "إعلان" للمتصفح بأن العناصر التي ستأتي بداخله هي جزء من "قائمة" وأن "ترتيبها" مهم. المتصفح، افتراضيًا، سيقوم بعرض هذه العناصر مسبوقة بترقيم (مثل 1, 2, 3...).

قاعدة هامة: الوسم <ol> لا يجب أن يحتوي على نصوص أو وسوم أخرى "كمحتوى مباشر". المحتوى المباشر الوحيد المسموح به داخل <ol> هو واحد أو أكثر من وسوم <li>.

الوسم <li>: عنصر القائمة (The List Item)

الوسم <li> هو اختصار لمصطلح "List Item" (عنصر القائمة).

هذا هو الوسم الذي يحمل "المحتوى الفعلي" لكل عنصر في القائمة. وهو أيضًا وسم مزدوج (<li>...</li>).

يجب "دائمًا" وضع وسوم <li> كـ "ابن مباشر" (Direct Child) لوسم قائمة أب (مثل <ol> أو <ul> الذي سنتناوله لاحقاً).

المحتوى داخل <li> مرن جداً؛ يمكن أن يحتوي على نصوص بسيطة، أو فقرات <p>، أو عناوين <h1>، أو صور <img>، أو حتى قوائم أخرى (وهو ما يُعرف بالتداخل).

عندما يرى المتصفح وسماً <li> داخل <ol>، فإنه يقوم تلقائيًا بإنشاء "علامة ترقيم" (Marker) بجانبه (مثل "1." أو "a.").

مثال (1): بناء قائمة مرتبة بسيطة (خطوات وصفة)

أحد أوضح الأمثلة على أهمية "الترتيب" هو وصفات الطهي أو دليل الإرشادات. لا يمكن تنفيذ الخطوة 3 قبل الخطوة 1.

لاحظ في المثال التالي أننا "لا نكتب" الأرقام (1, 2, 3) بأنفسنا. المتصفح هو من يقوم بإنشائها تلقائيًا بناءً على ترتيب وسوم <li>.

مثال (1): قائمة مرتبة بسيطة 

<body>

    <h2>خطوات تحضير الشاي</h2>
    
    <ol>
        <li>قم بغلي الماء في الإناء.</li>
        <li>ضع كيس الشاي في الكوب.</li>
        <li>اسكب الماء المغلي في الكوب.</li>
        <li>أضف السكر حسب الرغبة.</li>
        <li>قم بالتقليب وقدمه ساخناً.</li>
    </ol>

</body>

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

  1. قم بغلي الماء في الإناء.
  2. ضع كيس الشاي في الكوب.
  3. اسكب الماء المغلي في الكوب.
  4. أضف السكر حسب الرغبة.
  5. قم بالتقليب وقدمه ساخناً.

الخصائص الهيكلية (السلوك الكُتَلي)

تماماً مثل وسوم العناوين <h1> والفقرات <p>، فإن الوسم <ol> والوسم <li> كلاهما يُعتبران "عناصر كُتَلية" (Block-level elements) بشكل افتراضي.

هذا يعني أن:

  • الوسم <ol> سيشغل 100% من العرض المتاح له، وسيبدأ على سطر جديد.
  • كل وسم <li> بداخله سيبدأ أيضاً على سطر جديد، مما ينتج عنه الشكل "العمودي" المعتاد للقوائم.

افتراضيًا، تضيف المتصفحات هوامش (margin) وحشوًا (padding) حول وسم <ol> (عادةً حشو على اليسار لإفساح المجال للترقيم). يمكن تعديل كل هذا لاحقاً باستخدام CSS.

الخاصية type: تغيير نمط الترقيم

هذا هو ما يشير إليه البعض بـ "أنواع" القوائم المرتبة. افتراضيًا، الترقيم يكون بالأرقام العشرية (1, 2, 3). ولكن، يمكننا تغيير هذا النمط باستخدام "خاصية" (Attribute) تُضاف إلى وسم الفتح <ol>.

الخاصية هي type. وهي تقبل 5 قيم أساسية:

  • 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">.

مثال (2): استعراض كافة أنواع الترقيم

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

مثال (2): استخدام الخاصية type 

<body>

    <h3>النوع الافتراضي (type="1")</h3>
    <ol type="1">
        <li>العنصر الأول</li>
        <li>العنصر الثاني</li>
    </ol>

    <h3>أحرف كبيرة (type="A")</h3>
    <ol type="A">
        <li>العنصر الأول</li>
        <li>العنصر الثاني</li>
    </ol>

    <h3>أحرف صغيرة (type="a")</h3>
    <ol type="a">
        <li>العنصر الأول</li>
        <li>العنصر الثاني</li>
    </ol>

    <h3>أرقام رومانية كبيرة (type="I")</h3>
    <ol type="I">
        <li>العنصر الأول</li>
        <li>العنصر الثاني</li>
    </ol>

    <h3>أرقام رومانية صغيرة (type="i")</h3>
    <ol type="i">
        <li>العنصر الأول</li>
        <li>العنصر الثاني</li>
    </ol>

</body>

الخاصية start: بدء الترقيم من رقم مخصص

ماذا لو أردنا أن تبدأ القائمة بالترقيم من "5" بدلاً من "1"؟

يمكننا استخدام الخاصية start. هذه الخاصية تأخذ "رقماً صحيحاً" (Integer) يمثل نقطة البداية.

تُكتب هكذا: <ol start="5">.

نقطة هامة جداً: الخاصية start تأخذ "دائماً" رقماً، حتى لو كان type يستخدم الحروف. المتصفح ذكي بما يكفي لترجمة الرقم إلى الحرف المقابل.

  • <ol type="a" start="3">: سيبدأ الترقيم من "c" (الحرف الثالث).
  • <ol type="I" start="5">: سيبدأ الترقيم من "V" (الرقم الروماني الخامس).

مثال (3): دمج type و start

هذا المثال يوضح كيفية إنشاء قائمة تبدأ من الحرف 'C' (الحرف رقم 3)، وقائمة أخرى تبدأ من الرقم الروماني 'X' (الرقم 10).

مثال (3): استخدام type و start 

<body>

    <h3>قائمة تبدأ من الحرف 'c'</h3>
    <ol type="a" start="3">
        <li>النقطة 'c'</li>
        <li>النقطة 'd'</li>
        <li>النقطة 'e'</li>
    </ol>

    <h3>قائمة تبدأ من الرقم 10</h3>
    <ol start="10">
        <li>العنصر العاشر</li>
        <li>العنصر الحادي عشر</li>
    </ol>

</body>

الخاصية reversed: عكس ترتيب القائمة

قدم معيار HTML5 خاصية جديدة ومفيدة جداً، وهي reversed.

هذه الخاصية تُسمى "خاصية منطقية" (Boolean Attribute). هذا يعني أنها لا تحتاج إلى قيمة (مثل type="a"). مجرد "وجود" الكلمة reversed كافٍ لتفعيلها.

تُكتب هكذا: <ol reversed>.

وظيفتها هي جعل المتصفح يقوم بترقيم القائمة "تنازلياً" (من الأكبر للأصغر).

إذا كانت القائمة تحتوي على 3 عناصر، فسيتم ترقيمها: 3، 2، 1.

مثال (4): قائمة العد التنازلي (مع start)

تصبح الخاصية reversed أكثر قوة عند دمجها مع الخاصية start.

إذا قمت بتعيين start="5" و reversed، فسيقوم المتصفح بالعد تنازلياً بدءاً من 5.

مثال (4): استخدام reversed و start 

<body>

    <h3>قائمة عد تنازلي (Top 3)</h3>
    <ol reversed>
        <li>الفائز بالمركز الثالث</li>
        <li>الفائز بالمركز الثاني</li>
        <li>الفائز بالمركز الأول</li>
    </ol>
    
    <h3>إطلاق صاروخ (يبدأ من 5)</h3>
    <ol reversed start="5">
        <li>خمسة</li>
        <li>أربعة</li>
        <li>ثلاثة</li>
        <li>اثنان</li>
        <li>واحد</li>
        <li>إطلاق!</li>
    </ol>

</body>

النتيجة المتوقعة للمثال الثاني:

  1. خمسة
  2. أربعة
  3. ثلاثة
  4. اثنان
  5. واحد
  6. إطلاق!

(ملاحظة: لقد قمنا بترقيم 6 عناصر، لذلك بدأ العد من 5 وانتهى عند 0، وهو سلوك منطقي).

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

هذا هو المفهوم الأكثر تقدماً في القوائم. يمكنك وضع قائمة "داخل" قائمة أخرى. يُستخدم هذا لإنشاء هياكل هرمية معقدة (مثل فصول وفروع في كتاب).

القاعدة الذهبية للتداخل:

لإنشاء قائمة متداخلة، يجب وضع وسم <ol> (أو <ul>) الجديد "بالكامل" داخل وسم <li> تابع للقائمة الأب.

هيكل خاطئ (شائع): <ol><li>...</li><ol>...</ol></ol>. (هنا القائمة الجديدة "شقيقة" للعنصر <li> وهذا خطأ).

هيكل صحيح: <ol><li>...<ol>...</ol></li></ol>. (هنا القائمة الجديدة "ابن" للعنصر <li>).

افتراضيًا، تقوم المتصفحات بتغيير نمط الترقيم type تلقائيًا لكل مستوى من مستويات التداخل (مثال: المستوى 1 يبدأ بـ "1."، المستوى 2 يبدأ بـ "a."، المستوى 3 يبدأ بـ "i.")، ولكن يمكنك التحكم في ذلك يدوياً باستخدام type.

مثال (5): قائمة متداخلة (هيكل مستند)

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

مثال (5): قائمة مرتبة متداخلة 

<body>

    <h2>فهرس المستند</h2>
    
    <ol type="I"> <!-- الفصول الرئيسية بالأرقام الرومانية -->
    
        <li>الفصل الأول: المقدمة
            <!-- القائمة المتداخلة توضع "داخل" الـ li -->
            <ol type="A"> <!-- الفروع بالأحرف الكبيرة -->
                <li>أهداف البحث</li>
                <li>منهجية البحث</li>
            </ol>
        </li> <!-- نهاية عنصر الفصل الأول -->
        
        <li>الفصل الثاني: تحليل البيانات
            <ol type="A">
                <li>جمع البيانات الأولية</li>
                <li>عرض النتائج
                    <!-- مستوى ثالث من التداخل -->
                    <ol type="1"> <!-- نقاط فرعية بالأرقام -->
                        <li>النتيجة 1.1</li>
                        <li>النتيجة 1.2</li>
                    </ol>
                </li> <!-- نهاية عنصر "عرض النتائج" -->
            </ol>
        </li> <!-- نهاية عنصر الفصل الثاني -->
        
        <li>الفصل الثالث: الخاتمة</li>
        
    </ol> <!-- نهاية القائمة الرئيسية -->

</body>

ملاحظات حول التنسيق والخصائص المُهملة

من المهم التأكيد مجدداً على أن HTML تُعنى بـ "الهيكل" و "المعنى الدلالي".

بينما تسمح لنا الخواص (مثل type و start) ببعض التحكم في العرض، إلا أن التحكم "الكامل" في التنسيق (مثل تغيير لون الترقيم، أو المسافات، أو استخدام صور مخصصة كعلامات ترقيم) يجب أن يتم حصرياً عبر لغة CSS (باستخدام خصائص مثل list-style-type و padding).

خصائص مُهملة (Deprecated): في إصدارات HTML القديمة (مثل HTML 4)، كانت هناك خصائص مثل compact (لجعل القائمة مضغوطة). تم "إهمال" هذه الخصائص في HTML5. هذا يعني أنها لم تعد مدعومة بشكل قياسي، ويجب "تجنب استخدامها تماماً" والاعتماد على CSS بدلاً منها لتحقيق نفس التأثير البصري.

(ملخص الدرس):
1. استخدم <ol>...</ol> عندما يكون "ترتيب" العناصر مهماً.
2. العناصر الفعلية تُكتب داخل وسوم <li>...</li>.
3. المتصفح هو من يقوم بإنشاء الترقيم (1, 2, 3) تلقائياً.
4. استخدم الخاصية type لتغيير نمط الترقيم (A, a, I, i).
5. استخدم الخاصية start لبدء العد من رقم محدد (مثل start="5").
6. استخدم الخاصية المنطقية reversed للعد التنازلي.
7. عند التداخل، يجب وضع القائمة الجديدة (<ol>) "داخل" عنصر <li> تابع للقائمة الأب.