Part 5 – القوائم في HTML – فيديو FSWD – HTML

في HTML، عندنا 3 أنواع رئيسية من القوائم:

1. ✅ قوائم مرتبة Ordered Lists → <ol>

2. ✅ قوائم غير مرتبة Unordered Lists → <ul>

3. ✅ قوائم وصفية Description Lists → <dl>

هنشرح كل نوع بالتفصيل + مثال كامل في الآخر 👇

🟠 1. القوائم المرتبة <ol> والعناصر <li>

📌 تعريف:

• تستخدم لما يكون فيه ترتيب مهم للعناصر (زي خطوات، ترتيب أولويات).

• <ol> معناها Ordered List.

• كل عنصر جواها بيتكتب داخل <li> (List Item).

<h2>خطوات تثبيت البرنامج</h2>
<ol>
  <li>نزل الملف من الموقع.</li>
  <li>افتح الملف واضغط على Install.</li>
  <li>اتبع التعليمات واضغط Finish.</li>
</ol>

النتيجة:

1. نزل الملف من الموقع.

2. افتح الملف واضغط على Install.

3. اتبع التعليمات واضغط Finish.

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

📌 تعريف:

• تستخدم لما تكون العناصر ليست مرتبة أو الترتيب مش مهم.

• <ul> معناها Unordered List.

• كل عنصر برضو بيتكتب داخل <li>

<h2>الأدوات المطلوبة:</h2>
<ul>
  <li>حاسوب أو لابتوب</li>
  <li>متصفح إنترنت</li>
  <li>محرر أكواد مثل VS Code</li>
</ul>

📤 النتيجة:

• حاسوب أو لابتوب

• متصفح إنترنت

• محرر أكواد مثل VS Code

🔵 3. القوائم الوصفية <dl>, <dt>, <dd>

📌 تعريف:

• تستخدم لعرض قائمة من المصطلحات والتعريفات (زي قاموس أو شرح مفاهيم).

• <dl> = Description List (قائمة وصفية)

• <dt> = Description Term (العنصر أو المصطلح)

• <dd> = Description Definition (الوصف أو الشرح)

<h2>مصطلحات برمجية</h2>
<dl>
  <dt>HTML</dt>
  <dd>لغة لبناء هيكل صفحات الويب.</dd>

  <dt>CSS</dt>
  <dd>لغة لتنسيق وتجميل شكل صفحات الويب.</dd>

  <dt>JavaScript</dt>
  <dd>لغة برمجة تضيف تفاعلية للمواقع.</dd>
</dl>

📤 النتيجة:

HTML
– لغة لبناء هيكل صفحات الويب.

CSS
– لغة لتنسيق وتجميل شكل صفحات الويب.

JavaScript
– لغة برمجة تضيف تفاعلية للمواقع.

مثال كامل يضم الأنواع الثلاثة

💡 ملخص سريع: