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

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

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

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

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

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

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

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

الكلمة ul هي إختصار لكلمة Unordered List و التي تعني قائمة غير مرتبة.
الكلمة li هي إختصار لكلمة List Item و التي تعني عنصر في القائمة.

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

مثال

<ul>

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

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

جرب الكود

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

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

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

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

المثال الأول

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

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

جرب الكود

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

المثال الثاني

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

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

جرب الكود

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

المثال الثالث

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

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

جرب الكود

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

المثال الرابع

<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>Apple</li> <li type="circle">Orange</li> <li>Mango</li> </ul>

جرب الكود

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

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

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

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

مثال

<ul>

<li>Front-End

<ul>

<li>Javascript</li>

</ul>

</li>

<li>Back-End

<ul>

<li>MySQL</li>

<li>Aspnetcore</li>

</ul>

</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>

جرب الكود

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

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

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

مثال

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

المثال الأول

المثال الثاني

المثال الثالث

المثال الرابع

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

مثال

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

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث