تعلم إنشاء القوائم في HTML خطوة بخطوة

القوائم من أهم العناصر في صفحات الويب لأنها تساعد على عرض المعلومات بشكل منظم وسهل القراءة. في HTML، هناك ثلاثة أنواع رئيسية من القوائم:

القوائم غير المرتبة (Unordered Lists)
تُستخدم للعناصر التي لا تحتاج ترتيبًا معينًا، مثل قائمة المهام اليومية أو المشتريات.
القوائم المرتبة (Ordered Lists)
تُستخدم للعناصر التي تحتاج ترتيبًا معينًا، مثل خطوات عمل وصفة أو تعليمات معينة.
قوائم الوصف (Description Lists)
تُستخدم لعرض مصطلحات مع تعريفاتها، مثل القواميس أو القوائم التعليمية.

الصورة بالدرس تعلم إنشاء القوائم في HTML خطوة بخطوة

1. القوائم غير المرتبة (Unordered Lists)

لإنشاء قائمة غير مرتبة، نستخدم <ul> لبدء القائمة، وكل عنصر داخل القائمة نضعه داخل <li>:


<ul>
  <li>مشتريات الأسبوع</li>
  <li>أعمال المنزل</li>
  <li>تمارين رياضية</li>
</ul>

النتيجة: تظهر النقاط بجانب كل عنصر تلقائيًا.

2. القوائم المرتبة (Ordered Lists)

لإنشاء قائمة مرتبة، نستخدم <ol> لكل القائمة و<li> لكل عنصر:


<ol>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
  <li>الخطوة الثالثة</li>
</ol>

النتيجة: يتم ترقيم العناصر تلقائيًا.

3. قوائم الوصف (Description Lists)

لإنشاء قائمة وصفية نستخدم <dl> للقائمة، <dt> للمصطلح، و<dd> للوصف:


<dl>
  <dt>HTML</dt>
  <dd>لغة توصيف النصوص التشعبية</dd>
  <dt>CSS</dt>
  <dd>لغة تنسيق الصفحات</dd>
  <dt>JavaScript</dt>
  <dd>لغة برمجة تفاعلية</dd>
</dl>

النتيجة: تظهر المصطلحات مع أوصافها بجانبها.

✅ نصائح مهمة:

اختر نوع القائمة المناسب لمحتواك.
يمكنك استخدام CSS لتغيير شكل النقاط أو الأرقام.
يمكن وضع قوائم داخل قوائم أخرى لهيكل هرمي أفضل.

💡 للاطلاع على شرح عملي ومفصل بالفيديو، يمكنكم مشاهدة هذا الفيديو:
شاهد الفيديو على يوتيوب

تعلم إنشاء القوائم في HTML خطوة بخطوة