تسمح قوائم HTML لمطوري الويب بتجميع مجموعة من العناصر ذات الصلة في قوائم منظمة. تساعد القوائم في تحسين قابلية قراءة المحتوى وجعله أكثر قابلية للتنقل للمستخدمين.
An unordered HTML list:
- Item
- Item
- Item
- Item
An ordered HTML list:
- First item
- Second item
- Third item
- Fourth item
القوائم غير المرتبة في HTML
تستخدم القوائم غير المرتبة (unordered lists) في HTML لعرض مجموعة من العناصر دون ترتيب محدد. هذه القوائم مفيدة لعرض نقاط متعددة، خيارات متاحة، أو أي مجموعة غير متسلسلة من المعلومات.
بنية القائمة غير المرتبة:
- تبدأ القائمة غير المرتبة باستخدام الوسوم
<ul>. - يمثل كل عنصر في القائمة باستخدام الوسوم
<li>. - بشكل افتراضي، تظهر العناصر في القائمة بعلامات نقطية (دوائر صغيرة سوداء) بجوارها.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
القوائم المرتبة في HTML
تُستخدم القوائم المرتبة (ordered lists) لعرض مجموعة من العناصر متتابعةً بأرقام أو حروف أبجدية. تُساعد هذه القوائم على توضيح الترتيب والتسلسل المنطقي للمعلومات.
بنية القائمة المرتبة:
- تبدأ القائمة المرتبة باستخدام الوسوم
<ol>. - يُمثل كل عنصر في القائمة باستخدام الوسوم
<li>. - بشكل افتراضي، تُرقّم العناصر في القائمة تلقائيًا بأرقام (1، 2، 3، إلخ).
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
قوائم التعريف في HTML
بالإضافة إلى قوائم العناصر العادية، يدعم HTML أيضًا قوائم التعريف (definition lists). تُستخدم قوائم التعريف لتقديم مجموعة من المصطلحات أو المفاهيم مع تعريفات توضيحية لكل منها.
بنية قائمة التعريف:
- يبدأ تعريف القائمة باستخدام الوسوم
<dl>. - يُعرّف كل مصطلح ضمن القائمة باستخدام الوسوم
<dt>. - ويُقدم شرح لكل مصطلح داخل الوسوم
<dd>.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
القوائم غير المرتبة في HTML
تستخدم القوائم غير المرتبة (unordered lists) لعرض مجموعة من العناصر بدون ترتيب محدد. تُساعد هذه القوائم على تنظيم المحتوى وتسهيل قراءة المعلومات للمستخدمين دون إضفاء أي ترتيب تفضيلي بين العناصر.
بنية القائمة غير المرتبة:
- تبدأ القائمة باستخدام الوسوم
<ul>. - يمثل كل عنصر في القائمة باستخدام الوسوم
<li>. - بشكل افتراضي، تظهر العناصر في القائمة بنقاطية (دوائر صغيرة سوداء) بجوارها.
مثال:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
اختيار علامة عناصر القوائم غير المرتبة في HTML
يُستخدم خاصية list-style-type في CSS لتحديد شكل علامات عناصر القوائم غير المرتبة. يمكنها أن تأخذ إحدى القيم التالية:
| القيمة | التفسير |
|---|---|
| disc (افتراضي) | يضع علامة نقطة سوداء صغيرة (رصاصة) قبل كل عنصر. |
| circle | يضع علامة دائرة صغيرة قبل كل عنصر. |
| square | يضع علامة مربع صغير قبل كل عنصر. |
| none | لا تظهر أي علامة قبل عناصر القائمة. |
مثال – رصاصة Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال – دائرة Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال – مربع Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال – لا يوجد None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
القوائم المتداخلة في HTML
يمكنك إنشاء قوائم متداخلة في HTML، حيث تكون قائمة داخل قائمة أخرى. هذا مفيد عندما تريد تقسيم المحتوى إلى مجموعات فرعية منطقية ضمن قائمة أكبر.
مثال:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
ملاحظة: يمكن لعناصر القائمة (<li>) احتواء قوائم جديدة وعناصر HTML أخرى مثل الصور والروابط، إلخ.
القوائم الأفقية باستخدام CSS
يمكنك تصميم العديد من أشكال القوائم في HTML باستخدام CSS، ومن الطرق الشائعة تصميم قائمة أفقية، لإنشاء قائمة تنقل:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
ملخص الفصل:
- استخدم الوسوم
<ul>في HTML لتحديد قائمة غير مرتبة. - استخدم خاصية
list-style-typeفي CSS لتحديد علامة العناصر في القائمة. - استخدم الوسوم
<li>في HTML لتحديد عنصر في القائمة. - يمكن أن تكون القوائم متداخلة، بحيث توجد قائمة داخل قائمة أخرى.
- يمكن لعناصر القائمة أن تحتوي على عناصر HTML أخرى، مثل الصور والروابط.
- استخدم خاصية
float:leftفي CSS لعرض القائمة أفقياً.
