فهم اللوائح والقوائم في HTML 📋

شنو هي القوائم في HTML؟

حيت دارنا الموقع ديالنا، بزاف من الأوقات كاينا معلومات بزاف ومحتاج نقسموها بطريقة منظمة وسهلة باش يفهمها الزائر. واللي غادي يعطينا يد قوية هي القوائم (Lists).

القوائم في HTML هي طريقة جميلة باش نضيفو مجموعة من العناصر بطريقة منظمة. كيفاش ملي كتقلب فـ كاتالوج وكاتشوف فيه قائمة بالمنتجات، هكّاك HTML كيساعدنا ننظمو المعلومات ديالنا.

---

نوعين من القوائم 📝

في HTML عندنا نوعين أساسيين ديال القوائم:

1️⃣ اللوائح المرتبة (Ordered Lists)

هادي القوائم فيها أرقام (1، 2، 3...). كنستعملوها ملي كيكون عندنا شي ترتيب أو تسلسل مهم.

مثال: الخطوات ديال الطبخ، أو الخطوات باش تتعلم HTML:

<ol>
  <li>الخطوة الأولى: افتح محررك المفضل</li>
  <li>الخطوة الثانية: اكتب الكود ديالك</li>
  <li>الخطوة الثالثة: شوف النتيجة في المتصفح</li>
</ol>

النتيجة على الموقع:

1. الخطوة الأولى: افتح محررك المفضل
2. الخطوة الثانية: اكتب الكود ديالك
3. الخطوة الثالثة: شوف النتيجة في المتصفح

شنو معنى الرموز؟

• <ol> = بداية القائمة المرتبة (Ordered List)، وكتقول للمتصفح بلي هادي قائمة مرتبة.
• <li> = عنصر واحد من عناصر القائمة (List Item).
• </li> = نهاية عنصر من عناصر القائمة.
• </ol> = نهاية القائمة المرتبة.

---

2️⃣ اللوائح الغير مرتبة (Unordered Lists)

هادي القوائم فيها نقاط (•) وماشي أرقام. كنستعملوها باش نعرضو معلومات بدون ما يكون بينها ترتيب معين.

مثال: ميزات موقع أو مقررات دراسة:

<ul>
  <li>تعلم HTML بسهولة</li>
  <li>بلا تعقيد ولا حاجات معقدة</li>
  <li>مع أمثلة عملية وحقيقية</li>
</ul>

النتيجة على الموقع:

• تعلم HTML بسهولة
• بلا تعقيد ولا حاجات معقدة
• مع أمثلة عملية وحقيقية

شنو معنى الرموز؟

• <ul> = بداية القائمة الغير مرتبة (Unordered List).
• <li> = عنصر واحد من عناصر القائمة (List Item).
• </li> = نهاية عنصر من عناصر القائمة.
• </ul> = نهاية القائمة الغير مرتبة.

---

الفرق بيناتهم في الجدول 📊

---

نصائح عملية 💡

🎯 متى تستعمل القائمة المرتبة؟

• الخطوات والتعليمات: كيفاش تركب حاجة أو تطبخ.
• الترتيب حسب الأهمية: ملي كيكون الترتيب مهم.
• الخطوات التسلسلية: شي حاجة كتجي من بعد حاجة أخرى.

🎯 متى تستعمل القائمة الغير مرتبة؟

• الخيارات: ملي كتقدم عدة خيارات بدون ترتيب معين.
• الميزات والفوائد: مثلا ميزات موقع أو منتج.
• قائمة التسوق: الحاجات اللي بغيت تشري.
• الخصائص والصفات: الحاجات اللي كتصف حاجة معينة.

---

مثال واقعي ملخبط 🌐

مثلاً إلا درنا موقع ديال مطعم، ماشي ضروري نبقاو نقولو تحت الطبق:

الدجاج والأرز والسلطة والخبز

نقدرو ننظموها بطريقة أجمل باستعمال القوائم:

<h3>مكونات الطبق ديالنا:</h3>

<ul>
  <li>دجاج مشوي طازة</li>
  <li>أرز مطهي على البخار</li>
  <li>سلطة خضراء طازة</li>
  <li>خبز ساخن</li>
</ul>

<h3>خطوات الطبخ:</h3>

<ol>
  <li>شوي الدجاج لمدة نص ساعة</li>
  <li>طبخ الأرز في الماء المملح</li>
  <li>حضر السلطة بالخضار الطازة</li>
  <li>أخدم الكل مع الخبز الساخن</li>
</ol>

---

الخلاصة 🎁

القوائم في HTML هي واحد من أسهل وأهم العناصر وأكثرها استعمالاً.

✅ القوائم المرتبة (OL) = للخطوات والترتيب.

✅ القوائم الغير مرتبة (UL) = للخيارات والميزات.

تقريباً أي موقع تشوفو فالإنترنت فيه قوائم: فـ الـ Navbar، فالـ Footer، فالصفحات ديال المنتجات، فالـ Sidebar... القوائم كاينة فكل بلاصة تقريباً.

دابا باش تتمرن على هاد الحاجة، جرب الكود بيدك وشوف كيفاش كيظهر فالمتصفح! 🚀

---

💡 نقطة ذهبية:

دائماً استعمل <li> داخل <ol> أو <ul>، وسدّ الـ tags ديالك بشكل صحيح باش يبقى الكود منظم ويخدم كما خاص.