HTML / القوائم الغير مرتبة
مفهوم القوائم الغير مرتبة
القائمة الغير مرتبة (Unordered List) تُستخدم لعرض مجموعة من العناصر دون الحاجة إلى ترتيبها أو تحديد عنصر يأتي قبل عنصر آخر. في هذا النوع من القوائم، يمكنك تحديد الرمز الذي سيظهر في بداية كل عنصر.
الرموز المتاحة تشمل مربع، دائرة، أو قرص. في هذا الدرس، سنتناول كيفية إنشاء القوائم غير المرتبة وخصائصها، بالإضافة إلى كيفية وضع قائمة بداخل قائمة.
إضافة قائمة غير مرتبة في الصفحة
بشكل عام، نستخدم الوسم <ul></ul> لإعلام المتصفح أننا نريد عرض قائمة غير مرتبة في الصفحة. أي عنصر نريد إضافته يجب وضعه بداخل الوسم <li></li>. الكلمة ul هي اختصار لكلمة Unordered List، بينما الكلمة li تعني List Item، أي عنصر في القائمة.
في المثال التالي، قمنا بإضافة قائمة غير مرتبة تحتوي على ثلاث عناصر:
<!DOCTYPE html>
<html>
<body>
<p>The following items are inside an unordered list:</p>
<!-- <ul> تم وضعه سيظهر قبله رمز يشير إلى أنه موضوع بداخل <li> كل وسم -->
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
أنواع الرموز التي يمكن عرضها في أول العناصر
لتحديد نوع الرموز التي ستظهر قبل العناصر، يمكنك إضافة الخاصية type للوسم <ul> وتمرير إحدى الكلمات التالية كقيمة:
type="square"لإظهار مربع في بداية كل عنصر.type="circle"لإظهار دائرة في بداية كل عنصر.type="disc"لإظهار قرص (نقطة كبيرة) في بداية كل عنصر، وهذه القيمة هي الافتراضية.type="none"لعدم إظهار رمز في بداية كل عنصر.
المثال الأول
في المثال التالي، قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو مربع:
<!DOCTYPE html>
<html>
<body>
<p>The following items are inside an unordered list with type 'square':</p>
<!-- سيتم إظهار مربع قبلها <ul> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم -->
<ul type="square">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
المثال الثاني
في المثال التالي، قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو دائرة:
<!DOCTYPE html>
<html>
<body>
<p>The following items are inside an unordered list with type 'circle':</p>
<!-- سيتم إظهار دائرة قبلها <ul> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم -->
<ul type="circle">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
المثال الثالث
في المثال التالي، قمنا بتحديد أن الرمز الذي سيظهر قبل كل عنصر هو قرص، وهذه القيمة هي الافتراضية:
<!DOCTYPE html>
<html>
<body>
<p>The following items are inside an unordered list with type 'disc':</p>
<!-- سيتم إظهار قرص قبلها <ul> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم -->
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
المثال الرابع
في المثال التالي، قمنا بتحديد أنه قبل كل عنصر لن يتم إظهار رمز:
<!DOCTYPE html>
<html>
<body>
<p>The following items are inside an unordered list with type 'none':</p>
<!-- لن يتم إظهار رمز قبلها <ul> هنا قمنا بتحديد أن العناصر الموضوعة بداخل الوسم -->
<ul type="none">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
تغيير نوع الرمز الذي سيظهر قبل عنصر محدد في القائمة
إذا أردت تغيير نوع الرمز الذي سيظهر قبل عنصر محدد في القائمة، يمكنك إضافة الخاصية type للعناصر وتمرير النوع الذي تريده.
مثال
في المثال التالي، قمنا بتغيير نوع الرمز الذي سيظهر قبل العنصر الثاني فقط إلى دائرة:
<!DOCTYPE html>
<html>
<body>
<p>We change the type of the second element only to "circle":</p>
<!-- لاحظ أن العنصر الثاني سيظهر قبله رمز دائرة عكس العناصر الأخرى لأننا غيرنا ذلك بأنفسنا -->
<ul>
<li>Apple</li>
<li type="circle">Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
وضع قائمة بداخل قائمة
يمكنك إظهار القوائم بشكل متداخل، بحيث يظهر تحت العنصر قائمة تابعة له. في المثال التالي، قمنا بتعريف عنصرين ووضعت كل عنصر فيه قائمة أخرى، مما يتيح تنظيم المعلومات بشكل أفضل:
<!DOCTYPE html>
<html>
<body>
<h2>Nested Unordered Lists</h2>
<ul>
<!-- العنصر الأول وضعنا فيه قائمة فيها ثلاث عناصر -->
<li>Front-End
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<br> <!-- هنا أضفنا سطر فارغ لإظهار المحتوى بشكل أفضل -->
</li>
<!-- العنصر الثاني وضعنا فيه قائمة فيها عنصرين -->
<li>Back-End
<ul>
<li>MySQL</li>
<li>Aspnetcore</li>
</ul>
</li>
</ul>
</body>
</html>