استخدام القوائم لبناء قوائم التنقل | القوائم النصية في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تعتمد بنية الويب الحديثة على القوائم غير المرتبة <ul> المقترنة بعناصر <li> والروابط التشعبية <a> لتشييد أشرطة التنقل الرئيسية ومسارات التصفح وأدلة الروابط. يؤكد استخدام القائمة للمتصفحات أن هذه الروابط تمثل مجموعة متكاملة ومترابطة من الخيارات المتاحة للمستخدم.

الصف 2 كود برمجي

HTML

<ul>
  <li><a href="/">Overview</a></li>
  <li><a href="/lessons">Curriculum</a></li>
  <li><a href="/community">Discussions</a></li>
</ul>

جرّب بنفسك

الصف 3 شرح توضيحي

يتم لاحقاً استخدام تقنيات CSS مثل Flexbox أو Grid لتحويل القائمة رأسياً إلى شريط أفقي أنيق، مع إزالة النقاط الافتراضية عبر list-style: none، مما يجمع بين الجمال البصري العصري والحفاظ على كامل مزايا الإتاحة الرقمية لقارئات الشاشة ومستخدمي لوحة المفاتيح.

الصف 4 ملاحظة هامة

الصف 5 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: أتقنت في هذا الدرس أهمية ودور القوائم في الويب، وعائلات القوائم الثلاث الأساسية ul وol وdl، وعنصر القائمة الموحد li، ومزايا الإتاحة وقراءة قارئات الشاشة، وبناء أشرطة التنقل. الخطوة التالية تأخذنا في جولة تفصيلية متعمقة لإتقان القوائم غير المرتبة ul وتنسيقاتها.

Navigation Menus with Lists استخدام القوائم لبناء قوائم التنقل

شرح صفوف ومحتوى الفقرة

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

جميع فقرات هذا الدرس (القوائم النصية في لغة HTML)