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

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

القائمة الغير مرتبة ( Unordered List ) يقصد بها عرض مجموعة عناصر بدون الإهتمام ما إن كان يجب عرض عنصر قبل عنصر آخر فيها.

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

في هذا الدرس ستتعرف على وسوم و خصائص القوائم الغير مرتبة بالإضافة إلى كيفية وضع قائمة بداخل قائمة.

إضافة قائمة غير مرتبة في الصفحة

بشكل عام، نستخدم الوسم <ul> </ul> لإعلام المتصفح أننا نريد عرض قائمة غير مرتبة في الصفحة.
أي عنصر نريد إضافته فيها يجب وضعه بداخل الوسم <li> </li>.

في المثال التالي قمنا بإضافة قائمة غير مرتبة و بداخلها ثلاث عناصر.

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ul>

أنواع الرموز التي يمكن عرضها في أول العناصر

لتحديد نوع الرموز التي ستظهر قبل العناصر يمكنك إضافة الخاصية type للوسم <ul> و تمرير إحدى الكلمات التالية لها كقيمة:

• type="square" لإظهار مربع في بداية كل عنصر.
• type="circle" لإظهار دائرة في بداية كل عنصر.
• type="disc" لإظهار قرص (أي نقطة كبيرة) في بداية كل عنصر و هذه القيمة الإفتراضية التي يتم وضعها في حال لم تحدد القيمة بنفسك.
• type="none" لعدم إظهار رمز في بداية كل عنصر.

في المثال التالي قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو مربع.

<ul type="square">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ul>

في المثال التالي قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو دائرة.

<ul type="circle">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ul>

في المثال التالي قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو قرص و بالطبع لن نلاحظ أي فرق سواء وضعناها أم لا لأنه النوع الإفتراضي.

<ul type="disc">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ul>

في المثال التالي قمنا بتحديد أنه قبل كل عنصر لن يتم إظهار رمز.

<ul type="none">
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ul>

تغيير نوع الرمز الذي سيظهر قبل عنصر محدد في القائمة

في حال أردت تغيير نوع الرمز الذي سيظهر قبل عنصر محدد في القائمة يمكنك إضافة الخاصية type للعنصر و تمرير النوع الذي تريده أن يبدأ به.

في المثال التالي قمنا بتغيير نوع الرمز الذي سيظهر قبل العنصر الثاني فقط إلى circle.

<ul>
    <li>Apple</li>
    <li type="circle">Orange</li>
    <li>Mango</li>
</ul>

وضع قائمة بداخل قائمة

يمكنك إظهار القوائم بشكل متداخل بحيث يظهر تحت العنصر قائمة تابعة له.
أي عنصر تريد وضع قائمة خاصة له يجب أن تعرّف القائمة بداخل العنصر نفسه.

في المثال التالي قمنا بتعريف قائمة فيها عنصرين و كل عنصر وضعنا فيه قائمة أخرى.

<ul>
    <!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
    <li>Front-End
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </li>
    <!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
    <li>Back-End
        <ul>
            <li>MySQL</li>
            <li>Aspnetcore</li>
        </ul>
    </li>
</ul>