HTML بالعربي: مشروع: صفحة متعددة الأقسام جاهزة للتجاوب

يبني هذا المشروع على HTML الدلالي، والتخطيط والتصميم المتجاوب، والصور المتجاوبة والأداء.

⚠️ تنبيه مهم: هذا مسار HTML فقط — لا يوجد CSS في هذا المشروع، ولا استعلامات Media Queries. مهمتك هنا هي بناء الهيكل الذي يجعل التصميم المتجاوب ممكنًا لاحقًا: عناصر دلالية صحيحة، صور متجاوبة حقيقية، وترتيب مصدر (Source Order) منطقي. تنسيق العرض البصري بين المقاسات هو موضوع مسار CSS، لا هذا الدرس.

المتطلبات

ابنِ صفحة هبوط (Landing Page) واحدة لموضوع من اختيارك (دورة تدريبية، تطبيق، فعالية) تحتوي:

<header> فيه اسم/شعار الموقع و<nav> بقائمة روابط داخلية (#section-id) لأقسام الصفحة.
قسم بطلي (Hero) في البداية: عنوان رئيسي وجملة تعريفية ودعوة لاتخاذ إجراء (زر/رابط).
3 إلى 4 أقسام محتوى مستقلة، كل واحد <section> بعنوانه الخاص (مثلًا: "ماذا ستتعلم"، "لماذا نحن"، معرض صور، "الأسئلة الشائعة").
قسم معرض صور واحد على الأقل يستخدم srcset/sizes أو <picture> — لا صورة واحدة بمقاس ثابت.
<footer> فيه معلومات تواصل مختصرة.

نقطة البداية

هيكل مبدئي — أكمله بمحتواك الخاص وأقسامك:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><!-- عنوان صفحتك --></title>
  <meta name="description" content="<!-- وصف الصفحة -->">
</head>
<body>
  <header>
    <!-- شعار/اسم + nav بروابط #id لكل قسم -->
  </header>

  <main>
    <section id="hero">
      <!-- العنوان الرئيسي وجملة تعريفية وزر دعوة لاتخاذ إجراء -->
    </section>

    <section id="...">
      <!-- قسم محتوى أول -->
    </section>

    <!-- 2-3 أقسام إضافية بنفس النمط -->
  </main>

  <footer>
    <!-- معلومات تواصل -->
  </footer>
</body>
</html>

البنية المتوقعة

ترتيب العناوين يجب أن يبقى منطقيًا عبر كل الصفحة، لا داخل كل قسم بمعزل عن الباقي:

<h1> واحد فقط — عنوان القسم البطلي (Hero)، وليس اسم الموقع في الترويسة.
كل <section> يبدأ بـ<h2> يصف موضوعه، وأي عنوان فرعي بداخله <h3>.
الترتيب المنطقي للمصدر (Source Order) يهم قبل أي تنسيق CSS: ضع أهم قسم بعد الـHero مباشرة في كود HTML — على الجوال بلا CSS متقدم، الزائر يقرأ الصفحة بترتيب ظهورها في الملف، لا بترتيبها البصري المستقبلي. هذا نفس المبدأ الذي رأيته في كيف يتعامل المتصفح مع HTML.

متطلبات الوصول

معلم واحد فقط من كل نوع أساسي: <header>، <main> واحد، <footer> واحد. لو احتجت أكثر من <nav> (مثلًا نافبار علوي وقائمة تذييل)، ميّز كل واحد بـaria-label مختلف.
روابط <nav> داخل <ul>/<li> حقيقية، لا مجرد روابط متتالية بلا قائمة.
كل صورة في معرض الصور لها alt وصفي حقيقي (لا alt="صورة" عامة).
تسلسل العناوين يمر بالفحص اليدوي: h1 → h2 → h2 → h2... بلا تخطي مستوى.

قائمة التحقق

معايير الإتمام

المشروع مكتمل حين: الصفحة تفتح بلا أخطاء في المتصفح، تمر على مدقّق W3C بلا أخطاء بنيوية، تحوي h1 واحدًا وترتيب عناوين منطقيًا عبر كل الأقسام، معرض الصور يقدّم فعليًا أكثر من مصدر صورة واحد عبر srcset/picture، وكل عنصر في قائمة التحقق أعلاه محقَّق.

إرشادات للحل المقترح

عند المراجعة، ركّز على قرارين بنيويين أكثر من التفاصيل الشكلية:

هل استُخدم <section> لكل قسم محتوى فعلي له عنوان، لا لكل صندوق تقسيم بصري؟ لو وجدت قسمًا بلا <h2> واضح، هذا مؤشر أنه كان يجب أن يكون <div> عاديًا لا <section> — القاعدة من HTML الدلالي تنطبق هنا حرفيًا.
هل ترتيب الأقسام بالمصدر يخدم قارئًا يمرّ عليها تسلسليًا (جوال، قارئ شاشة، طباعة)؟ لا توجد إجابة واحدة صحيحة، لكن يجب أن يكون القرار واعيًا — قسم "الأسئلة الشائعة" مثلًا عادة يأتي متأخرًا لأنه أقل أولوية من الشرح الرئيسي، لا لأنه "طال بها الوصول عشوائيًا".

راجع أيضًا مرجعي section وnav لتفاصيل الاستخدام الصحيح لكل عنصر.