HTML بالعربي: المشروع النهائي: بناء موقع HTML متكامل

هذا مشروعك الأخير في المسار، وهو تجميع كل ما بنيته حتى الآن في موقع حقيقي متعدد الصفحات — لا تمرين معزول، بل محاكاة لما تفعله فعليًا حين تبني أول موقع حقيقي لك. يفترض هذا المشروع أنك أتممت المسار بالكامل: البنية الدلالية في HTML الدلالي، النماذج في النماذج (Forms)، مسارات الملفات في مسارات الملفات، رأس المستند وSEO في رأس المستند، والأمان في أمان الروابط والمحتوى المضمّن — لا تبدأ هذا المشروع قبلها.

المثال المستخدم هنا: موقع تعريفي لمستقل (Freelancer) في تطوير الويب بثلاث صفحات: index.html (الرئيسية)، about.html (نبذة عني وخبراتي)، وcontact.html (تواصل معي). اختر أي مجال يعجبك (مصمّم، مطعم صغير، نادٍ رياضي محلي...) لكن حافظ على نفس البنية الثلاثية.

المتطلبات

3 صفحات حقيقية مترابطة بروابط داخلية صحيحة (مسارات نسبية — راجع مسارات الملفات): index.html، about.html، contact.html.
تنقّل موحّد: نفس <nav> (نفس الروابط، بنفس الترتيب) يظهر في الصفحات الثلاث، مع تمييز الصفحة الحالية (مثلًا بسمة aria-current="page" على رابطها).
بنية دلالية كاملة بكل صفحة: header، nav، main، footer — لا صناديق div عشوائية بلا معنى.
head وSEO كاملان بكل صفحة: title فريد، meta description فريد، و<link rel="canonical"> يشير للصفحة نفسها (راجع رأس المستند).
نموذج حقيقي في contact.html: حقول مُسمّاة بـ <label> صحيح، تحقق مدمج (required, type="email")، وmethod="post".
عنصر جدول أو قائمة تعريفات واحد على الأقل حيث يفيد فعليًا (مثلًا جدول "الخدمات والأسعار" في about.html) — لا تُقحمه إن لم يخدم المحتوى.
صورة متجاوبة واحدة على الأقل بـ srcset/sizes أو <picture> (راجع الصور المتجاوبة والأداء)، مع width/height وalt وصفي.
أي رابط خارجي (حساب LinkedIn، GitHub...) يحمل target="_blank" rel="noopener noreferrer" (راجع أمان الروابط والمحتوى المضمّن).
h1 واحد فقط بكل صفحة، وتسلسل عناوين منطقي بعده.

نقطة البداية

ابدأ ببنية الملفات:

project/
├── index.html
├── about.html
├── contact.html
└── images/
    └── (صورك هنا)

استخدم هذا الهيكل الموحّد لرأس ورأس-تنقّل الصفحة (كرّره بنفس الشكل تقريبًا في الصفحات الثلاث، مع تغيير aria-current وقيم title/canonical فقط):

<!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="سارة أحمد، مطوّرة ويب مستقلة متخصصة في بناء مواقع سريعة وسهلة الوصول. تعرّف على خدماتي وتواصل معي.">
  <link rel="canonical" href="https://example.com/index.html">
</head>
<body>
  <header>
    <p>سارة أحمد</p>
    <nav aria-label="التنقل الرئيسي">
      <a href="index.html" aria-current="page">الرئيسية</a>
      <a href="about.html">نبذة عني</a>
      <a href="contact.html">تواصل معي</a>
    </nav>
  </header>

  <main>
    <h1>مرحبًا، أنا سارة</h1>
    <!-- أكمل محتوى الصفحة الرئيسية هنا -->
  </main>

  <footer>
    <p>© 2026 سارة أحمد</p>
  </footer>
</body>
</html>

أكمل من هنا: انسخ هذا الهيكل لملفَي about.html وcontact.html، عدّل title/canonical/aria-current في كل واحد، ثم ابنِ محتوى main الخاص بكل صفحة حسب الوصف التالي.

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

index.html: h1 ترحيبي + فقرة تعريفية قصيرة + قسم "خدماتي" (قائمة ul أو بطاقات بعناصر section) + صورة متجاوبة واحدة على الأقل.
about.html: h1 = "نبذة عني" + سيرة قصيرة + section "الخبرات" (يمكن استخدام time للتواريخ كما في مشروع السيرة الذاتية إن أردت إعادة استخدام تلك البنية) + جدول أو dl لـ"الخدمات والأسعار".
contact.html: h1 = "تواصل معي" + نموذج تواصل كامل (اسم، بريد، رسالة، زر إرسال) + address لمعلومات التواصل المباشرة (بريد، رابط LinkedIn خارجي بـ rel="noopener noreferrer").
مشترك بكل الصفحات: header بالتنقّل، footer بحقوق النشر.

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

h1 واحد فقط بكل صفحة، وبقية العناوين بترتيب منطقي (لا قفز من h1 إلى h4).
nav بنفس البنية بكل صفحة مع aria-label وصفي، وتمييز الصفحة الحالية بـ aria-current="page".
نص كل رابط وصفي (لا "اضغط هنا") — خصوصًا روابط التنقّل الثلاثة والرابط الخارجي.
كل صورة لها alt يصف محتواها الفعلي (لا اسم الملف ولا "صورة").
كل حقل بنموذج contact.html له <label for> حقيقي مربوط بـ id، لا placeholder كبديل عن label.

قائمة التحقق

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

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

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

الحل القوي يتميّز بأن كل صفحة تخدم غرضًا واحدًا واضحًا (لا تكرار محتوى بين الصفحات)، والتنقّل موحّد بصرفٍ وبنيويًا بينها، والنموذج في contact.html يبدو قابلاً للاستخدام فعليًا لا مجرد حقول عشوائية. أعلام تحذير شائعة عند المراجعة:

تكرار نفس المحتوى الترحيبي في أكثر من صفحة — كل صفحة يجب أن يكون لها هدف فريد (هذا نفس منطق منع تكرار نية البحث الذي تتعلمه بقية الموقع).
nav مختلف الترتيب أو الروابط بين الصفحات — يكسر تجربة التنقّل المتوقّعة.
جدول أو dl مُقحَم بلا داعٍ فعلي — إن لم يكن هناك بيانات حقيقية تناسبه، لا تجبر استخدامه.
صورة alt عامة مثل "صورة" أو اسم الملف نفسه — علامة على عدم فهم غرض alt.
رابط خارجي بلا rel="noopener noreferrer" — أشهر ثغرة أمنية بسيطة يغفل عنها المشروع النهائي تحديدًا لأنه أول مشروع "حقيقي" يحتوي روابط خارجية فعلية.
استخدام عنصر أو سمة لم تُشرح بالمسار (مثل <b>/<i> بدل الدلالي، أو <center> القديم) — علامة على العودة لعادات قديمة بدل ما تعلّمته.

بعد إتمام هذا المشروع، تكون قد أنهيت المحتوى العملي لمسار HTML بالكامل — التالي هو الخلاصة وما بعد HTML لمراجعة رحلتك والانتقال إلى CSS.