14 – القوائم في HTML – النصوص – المستوى الاول

بواسطةahmed

📌 القوائم في HTML

القوائم بتساعدنا نعرض عناصر متعددة بشكل منظم، زي:

  • خطوات عمل شيء (قائمة مرتبة).

  • نقاط أساسية أو ملاحظات (قائمة غير مرتبة).

🔹 عناصر القوائم الأساسية

  1. <ol> = Ordered List → قائمة مرتبة.

  2. <ul> = Unordered List → قائمة غير مرتبة.

  3. <li> = List Item → عنصر داخل القائمة.

🔹 1. القائمة المرتبة <ol>

  • تعرض العناصر بأرقام أو حروف (1, 2, 3 … أو A, B, C…).

  • تستخدم في الخطوات أو أي شيء يحتاج ترتيب.

✅ مثال:

🔎 النتيجة:

  1. إعداد المكونات

  2. تسخين الفرن

  3. وضع الكعكة في الفرن

📌 خصائص <ol>

  • type → لتغيير شكل الترقيم:

  • start → لتغيير بداية الترقيم:

  • 🔎 النتيجة: 5. بداية من الرقم 5 – 6. التالي

🔹 2. القائمة غير المرتبة <ul>

  • تعرض العناصر بدون ترتيب، عادةً بنقاط (Bullets).

  • تستخدم لعرض أشياء غير متسلسلة.

✅ مثال:

🔎 النتيجة:

  • تفاح

  • موز

  • برتقال

📌 خصائص <ul> (التحكم بالـ bullets عبر CSS)

  • list-style-type ممكن تغير شكل النقطة:

🔹 3. العناصر <li>

  • كل عنصر داخل قائمة لازم يكون بين وسم <li> … </li>.

  • ممكن يحتوي نص، روابط، صور، حتى قوائم أخرى (قوائم متداخلة).

✅ مثال: قائمة متداخلة:

🔎 النتيجة:

  • فواكه

    • تفاح

    • موز

  • خضروات

🔹 مثال عملي كامل

🔹 ملخص

  • <ol> = قائمة مرتبة (أرقام / حروف).

  • <ul> = قائمة غير مرتبة (نقاط).

  • <li> = عنصر داخل القائمة.

  • ممكن نعمل قوائم متداخلة، ونغير شكل الترقيم أو النقاط باستخدام الخصائص.

★ ★ ★ ★ ★
التقييم: 0 من 0 تصويت

موضوعات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *