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

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

يا هلا والله! اليوم بنتكلم عن طريقة سهلة وبسيطة لعرض مجموعة عناصر كقائمة غير مرتبة في صفحتك الـ HTML. يعني لما يكون عندك مجموعة أشياء ما يهم ترتيبها، زي قائمة مشتريات أو نقاط معينة، القوائم الغير مرتبة هي الحل الأنسب.

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

هي ببساطة قائمة عناصر تظهر عادةً بنقاط (bullets) أو أي رمز آخر بدلاً من الأرقام. العنصر الأساسي هنا هو وسم

    (Unordered List) اللي يضم بداخله كل عناصر القائمة.

    كيف نسويها؟

    كل عنصر في القائمة لازم يكون داخل وسم

  • (List Item). الموضوع أسهل مما تتخيل، شوف المثال هذا:

    <!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على قائمة غير مرتبة</title>
</head>
<body>

    <h3>أشياء لازم تسويها اليوم:</h3>
    <ul>
        <li>ترد على الإيميلات</li>
        <li>تخلص مشروعك الخاص</li>
        <li>تتغدى كبسة</li>
        <li>تريح شوي</li>
    </ul>

    <h3>ألواني المفضلة:</h3>
    <ul>
        <li>أزرق</li>
        <li>أخضر</li>
        <li>رمادي</li>
    </ul>

</body>
</html>

    ملاحظات مهمة:

    تذكر دائمًا، وسم ul هو الحاوية الرئيسية، وداخله فقط يكون وسم li. ما تحط أي شيء ثاني مباشرة داخل ul غير li.

    تغيير شكل النقاط (Bullets)

    لو حبيت تغير شكل النقاط الافتراضية، تقدر تستخدم خصائص الـ CSS، بالتحديد خاصية list-style-type. مثلاً، لو تبغاها مربعات بدل الدوائر، تسوي كذا:

    <ul style="list-style-type: square;">
    <li>عنصر مربع</li>
    <li>عنصر آخر مربع</li>
</ul>

<ul style="list-style-type: circle;">
    <li>عنصر دائري</li>
    <li>عنصر آخر دائري</li>
</ul>

<ul style="list-style-type: none;">
    <li>عنصر بدون نقطة</li>
    <li>عنصر آخر بدون نقطة</li>
</ul>

    القيم الشائعة لـ list-style-type هي disc (الافتراضي - دائرة ممتلئة)، circle (دائرة فارغة)، square (مربع ممتلئ)، و none (لإزالة النقاط تمامًا).

    خلاصة الكلام

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