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

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

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

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

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

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

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


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

مثال

<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 للعنصر (أي للوسم <li>) و تمرير النوع الذي تريده أن يبدأ به.


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

مثال

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

جرب الكود

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

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


معلومة تقنية

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


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

مثال

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

جرب الكود

الدورات

أدوات مساعدة

الأقسام

دورات
مقالات أسئلة مشاريع كتب