القوائم

📌 شرح تفصيلي لتاغات القوائم في HTML: <ul>, <ol>, و <li>

القوائم في HTML تُستخدم لتنظيم وعرض المحتوى في شكل مرتب أو غير مرتب. هناك ثلاثة أنواع رئيسية من القوائم:

1️⃣ القائمة غير المرتبة (<ul>) – تستخدم لعرض العناصر بدون ترتيب رقمي، وتظهر عادة على شكل نقاط. 2️⃣ القائمة المرتبة (<ol>) – تستخدم عندما يكون هناك ترتيب منطقي للعناصر (1، 2، 3 أو A، B، C). 3️⃣ العنصر داخل القائمة (<li>) – يُستخدم داخل <ul> أو <ol> لإنشاء عنصر في القائمة.

🔹 1️⃣ القوائم غير المرتبة <ul>

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

📝 مثال بسيط لقائمة غير مرتبة

<ul>
    <li>القهوة</li>
    <li>الشاي</li>
    <li>العصير</li>
</ul>

🔹 يتم عرض القائمة تلقائيًا بعلامات نقاط (•) أمام كل عنصر.

🎨 تغيير شكل النقاط باستخدام CSS

<ul style="list-style-type: square;">
    <li>القهوة</li>
    <li>الشاي</li>
    <li>العصير</li>
</ul>

🔹 يتم تغيير شكل النقاط من الدائرة الافتراضية إلى مربع (■).

🛠️ أنواع النقاط الممكنة (list-style-type)

🔹 2️⃣ القوائم المرتبة <ol>

تُستخدم عندما تحتاج إلى ترتيب عناصر القائمة، مثل خطوات تنفيذ مهمة أو قائمة تعليمية.

📝 مثال لقائمة مرتبة

<ol>
    <li>افتح المتصفح</li>
    <li>اذهب إلى موقع البحث</li>
    <li>ابحث عن المعلومات المطلوبة</li>
</ol>

🔹 يتم عرض العناصر تلقائيًا بأرقام (1، 2، 3… إلخ).

🎨 تغيير تنسيق الأرقام باستخدام type

<ol type="A">
    <li>القهوة</li>
    <li>الشاي</li>
    <li>العصير</li>
</ol>

🔹 سيتم عرض العناصر بحروف (A, B, C…) بدلًا من الأرقام.

🛠️ أنواع التعدادات (type في <ol>)

🔹 3️⃣ إدراج قوائم متداخلة (داخل بعضها)

يمكنك إدراج قوائم داخل قوائم لإنشاء هيكل معقد.

📝 مثال على قائمة متداخلة

<ul>
    <li>المشروبات
        <ul>
            <li>القهوة</li>
            <li>الشاي</li>
            <li>العصير</li>
        </ul>
    </li>
    <li>الأطعمة
        <ul>
            <li>البيتزا</li>
            <li>السوشي</li>
            <li>المعكرونة</li>
        </ul>
    </li>
</ul>

🔹 سيتم عرض قائمة رئيسية تحتوي على “المشروبات” و “الأطعمة”، وبداخل كل عنصر قائمة فرعية.

🔹 4️⃣ إزالة الرموز من القوائم باستخدام CSS

إذا كنت تريد إزالة النقاط أو الأرقام تمامًا، استخدم:

<ul style="list-style: none;">
    <li>القهوة</li>
    <li>الشاي</li>
    <li>العصير</li>
</ul>

🔹 تختفي علامات القائمة وتبقى العناصر بدون أي رموز.

🔹 5️⃣ إنشاء قائمة أفقية باستخدام CSS

يمكنك جعل العناصر تظهر جنبًا إلى جنب بدلًا من قائمة عمودية:

<ul style="list-style: none; display: flex;">
    <li style="margin: 10px;">القهوة</li>
    <li style="margin: 10px;">الشاي</li>
    <li style="margin: 10px;">العصير</li>
</ul>

🔹 تصبح العناصر أفقية بدلًا من عمودية، مما يجعلها مناسبة للقوائم في القوائم العلوية للمواقع.

💡 نصيحة أخيرة للطلاب المبتدئين

1. استخدم <ul> عندما لا يكون هناك ترتيب مهم للعناصر.
2. استخدم <ol> عندما يكون هناك تسلسل منطقي للعناصر.
3. استخدم <li> داخل أي منهما لإنشاء عنصر في القائمة.
4. يمكنك تخصيص القوائم عبر CSS لتغيير الشكل والموضع والتصميم.