القوائم — أساسيات HTML

القوائم

القوائم من أكثر العناصر استخداماً: قوائم التنقل، الخطوات، المميزات، نتائج البحث. القائمة تخبر المتصفح وقارئ الشاشة بعدد العناصر ("قائمة من 5 عناصر") وهذا يساعد التنقل.

القائمة غير المرتبة `<ul>`

عندما لا يهم الترتيب:

<ul>
    <li>دعم اللغة العربية</li>
    <li>دروس تفاعلية</li>
    <li>تحديات برمجية</li>
</ul>

القائمة المرتبة `<ol>`

عندما يهم الترتيب (خطوات، ترتيب فائزين):

<ol>
    <li>ثبّت المحرر</li>
    <li>أنشئ ملف index.html</li>
    <li>افتحه في المتصفح</li>
</ol>

خيارات مفيدة:

| الخاصية | المثال | النتيجة |

|---|---|---|

| start | <ol start="4"> | يبدأ العد من 4 |

| reversed | <ol reversed> | عدّ تنازلي (أفضل 10) |

| type | <ol type="a"> | a, b, c (أو i, I, A) |

القائمة الوصفية `<dl>`

لأزواج "مصطلح ← تعريف": قاموس، أسئلة شائعة، مواصفات منتج:

<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز لهيكل صفحات الويب.</dd>
    <dt>CSS</dt>
    <dd>لغة لتنسيق مظهر الصفحات.</dd>
</dl>

القواعد

- العناصر المباشرة داخل <ul> و <ol> يجب أن تكون <li> فقط.

- القائمة المتداخلة توضع داخل <li>، لا بين عنصرين:

<ul>
    <li>الواجهة الأمامية
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>الواجهة الخلفية</li>
</ul>

❌ خطأ شائع: وضع <ul> مباشرة بعد </li> كعنصر شقيق.

قوائم التنقل

قائمة روابط الموقع هي قائمة فعلاً، والعرف أن تُكتب هكذا (وCSS يجعلها أفقية لاحقاً):

<nav>
    <ul>
        <li><a href="index.html">الرئيسية</a></li>
        <li><a href="courses.html">الدورات</a></li>
        <li><a href="contact.html">تواصل</a></li>
    </ul>
</nav>

الشكل من CSS

النقاط والأرقام يمكن تغييرها أو إخفاؤها بـ CSS (list-style). لا تتجنب القائمة لأنك لا تريد نقاطاً، ولا تكتب أرقاماً يدوياً داخل <li>.

تمرين

اكتب صفحة "خطة تعلم" فيها: قائمة مرتبة بالمراحل الثلاث (HTML، CSS، JavaScript)، وتحت كل مرحلة قائمة غير مرتبة بالمواضيع، وفي النهاية قائمة وصفية بثلاثة مصطلحات.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>خطة التعلم</title>
</head>
<body>
    <h1>خطة تعلم تطوير الويب</h1>
    <ol>
        <li>HTML
            <ul>
                <li>بنية الصفحة</li>
                <li>النماذج</li>
            </ul>
        </li>
        <li>CSS
            <ul>
                <li>Flexbox</li>
                <li>Grid</li>
            </ul>
        </li>
        <li>JavaScript</li>
    </ol>

    <h2>أفضل 3 مشاريع للمبتدئ</h2>
    <ol reversed>
        <li>صفحة شخصية</li>
        <li>صفحة هبوط</li>
        <li>تطبيق مهام</li>
    </ol>

    <h2>مصطلحات</h2>
    <dl>
        <dt>المتصفح</dt>
        <dd>برنامج يقرأ HTML ويعرضه كصفحة.</dd>
        <dt>الخادم</dt>
        <dd>جهاز يرسل ملفات الموقع عند طلبها.</dd>
    </dl>
</body>
</html>