ما هي القوائم في HTML؟
القوائم تُستخدم لعرض مجموعة من العناصر المرتبة أو غير المرتبة، مثل قائمة مهام، خطوات، مكونات وصفة، إلخ.
1. القائمة غير المرتبة (Unordered List)
يُستخدم الوسم <ul> لإنشاء قائمة غير مرتبة (تظهر كنقاط).
العناصر داخلها توضع باستخدام الوسم <li>.
مثال:
<ul>
<li>تفاحة</li>
<li>موز</li>
<li>عنب</li>
</ul>
النتيجة:
- تفاحة
- موز
- عنب
2. القائمة المرتبة (Ordered List)
يُستخدم الوسم <ol> لإنشاء قائمة مرتبة بالأرقام تلقائيًا.
مثال:
<ol>
<li>فتح الموقع</li>
<li>تسجيل الدخول</li>
<li>بدء الاستخدام</li>
</ol>
النتيجة:
- فتح الموقع
- تسجيل الدخول
- بدء الاستخدام
3. تغيير نوع الترقيم
يمكن تغيير شكل الترقيم في القائمة المرتبة باستخدام الخاصية type.
أمثلة:
<ol type="A">
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
</ol>
أنواع الترقيم:
type="1"(الأرقام: 1،2،3...) – الافتراضيtype="A"(أحرف كبيرة: A،B،C...)type="a"(أحرف صغيرة: a،b،c...)type="I"(أرقام رومانية كبيرة: I، II، III...)type="i"(أرقام رومانية صغيرة: i، ii، iii...)
4. القوائم المتداخلة (Nested Lists)
يمكنك وضع قائمة داخل عنصر <li> لإنشاء قائمة فرعية.
مثال:
<ul>
<li>الفواكه
<ul>
<li>تفاح</li>
<li>موز</li>
</ul>
</li>
<li>الخضروات</li>
</ul>
مثال عملي كامل
<!DOCTYPE html>
<html>
<head>
<title>درس القوائم</title>
</head>
<body>
<h1>قائمة غير مرتبة</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>قائمة مرتبة</h2>
<ol type="A">
<li>التصميم</li>
<li>البرمجة</li>
<li>النشر</li>
</ol>
<h2>قائمة متداخلة</h2>
<ul>
<li>الهواتف
<ul>
<li>أندرويد</li>
<li>آيفون</li>
</ul>
</li>
<li>الأجهزة اللوحية</li>
</ul>
</body>
</html>
الواجب العملي
- أنشئ قائمة غير مرتبة تحتوي على 3 عناصر.
- أنشئ قائمة مرتبة بأرقام رومانية.
- جرّب عمل قائمة متداخلة (فرعية) داخل عنصر من القائمة.
ماذا سنتعلم في الدرس القادم؟
في الدرس السادس سنتعلّم كيفية إنشاء الجداول (Tables) باستخدام وسوم <table>, <tr>, <td>, <th>.