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

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

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

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

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

تخيل عندك قائمة مشتريات أو قائمة مهام، بس مو مهم تسويها بترتيب معين. هنا يجي دور القوائم الغير مرتبة. كل عنصر فيها يظهر عادةً مع نقطة (bullet point) جنبه.

العلامات الأساسية: <ul> و <li>

فيه علامتين أساسيتين تستخدمهم:

  • <ul>: اختصار لـ Unordered List، وهي العلامة الأم اللي تحتوي كل عناصر القائمة.
  • <li>: اختصار لـ List Item، وهي العلامة اللي تمثل كل عنصر داخل القائمة.

مثال بسيط

أسهل طريقة تفهم فيها الموضوع هي تشوف الكود بنفسك. هذا مثال لقائمة مشتريات:

<pre><code>
<ul>
    <li>حليب</li>
    <li>خبز</li>
    <li>بيض</li>
    <li>قهوة</li>
</ul>
</code></pre>

الناتج بيكون شيء زي كذا:

  • حليب
  • خبز
  • بيض
  • قهوة

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

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

<pre><code>
<ul>
    <li>فواكه
        <ul>
            <li>تفاح</li>
            <li>موز</li>
            <li>برتقال</li>
        </ul>
    </li>
    <li>خضروات
        <ul>
            <li>طماطم</li>
            <li>خيار</li>
        </ul>
    </li>
</ul>
</code></pre>

بتطلع معاك بالشكل هذا:

  • فواكه
    • تفاح
    • موز
    • برتقال
  • خضروات
    • طماطم
    • خيار

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

بشكل افتراضي، النقاط تكون دوائر سوداء. لكن تقدر تغير شكلها باستخدام الـ CSS (أوراق الأنماط المتتالية). مثلاً، ممكن تخليها مربعات أو دوائر مفرغة أو حتى تشيلها بالكامل.

كمثال بسيط، لتغيير النقاط إلى مربعات:

<pre><code>
<ul style="list-style-type: square;">
    <li>عنصر 1</li>
    <li>عنصر 2</li>
</ul>
</code></pre>

أو عشان تشيل النقاط تماماً:

<pre><code>
<ul style="list-style-type: none;">
    <li>عنصر بدون نقطة</li>
    <li>عنصر آخر بدون نقطة</li>
</ul>
</code></pre>
ملاحظة مهمة: يفضل دائماً استخدام ملفات CSS خارجية لتنسيق موقعك بدلاً من التنسيق المباشر (inline styles) في الـ HTML، عشان يكون الكود أنظف وأسهل للصيانة. لكن لأغراض الشرح، التنسيق المباشر كويس.

متى تستخدمها؟

  • قوائم التنقل (Navigation menus)
  • قوائم الميزات (Features lists)
  • قوائم المهام (To-do lists)
  • أي مجموعة عناصر ما يهم ترتيبها

خلاصة

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

هذا كان درسنا السريع عن القوائم الغير مرتبة. طبق اللي تعلمته وبتصير محترف فيها بسرعة!