14 – القوائم في HTML – النصوص – المستوى الاول
📌 القوائم في HTML
القوائم بتساعدنا نعرض عناصر متعددة بشكل منظم، زي:
-
خطوات عمل شيء (قائمة مرتبة).
-
نقاط أساسية أو ملاحظات (قائمة غير مرتبة).
🔹 عناصر القوائم الأساسية
-
<ol> = Ordered List → قائمة مرتبة.
-
<ul> = Unordered List → قائمة غير مرتبة.
-
<li> = List Item → عنصر داخل القائمة.
🔹 1. القائمة المرتبة <ol>
-
تعرض العناصر بأرقام أو حروف (1, 2, 3 … أو A, B, C…).
-
تستخدم في الخطوات أو أي شيء يحتاج ترتيب.
✅ مثال:
🔎 النتيجة:
-
إعداد المكونات
-
تسخين الفرن
-
وضع الكعكة في الفرن
📌 خصائص <ol>
-
type → لتغيير شكل الترقيم:
-
start → لتغيير بداية الترقيم:
-
🔎 النتيجة: 5. بداية من الرقم 5 – 6. التالي
🔹 2. القائمة غير المرتبة <ul>
-
تعرض العناصر بدون ترتيب، عادةً بنقاط (Bullets).
-
تستخدم لعرض أشياء غير متسلسلة.
✅ مثال:
🔎 النتيجة:
-
تفاح
-
موز
-
برتقال
📌 خصائص <ul> (التحكم بالـ bullets عبر CSS)
-
list-style-type ممكن تغير شكل النقطة:
🔹 3. العناصر <li>
-
كل عنصر داخل قائمة لازم يكون بين وسم <li> … </li>.
-
ممكن يحتوي نص، روابط، صور، حتى قوائم أخرى (قوائم متداخلة).
✅ مثال: قائمة متداخلة:
🔎 النتيجة:
-
فواكه
-
تفاح
-
موز
-
-
خضروات
🔹 مثال عملي كامل
🔹 ملخص
-
<ol> = قائمة مرتبة (أرقام / حروف).
-
<ul> = قائمة غير مرتبة (نقاط).
-
<li> = عنصر داخل القائمة.
-
ممكن نعمل قوائم متداخلة، ونغير شكل الترقيم أو النقاط باستخدام الخصائص.
Call now
Contact WhatsApp
