مشروع HTML متكامل للمبتدئين: بناء موقع من عدة صفحات
تطوير المواقع

مشروع HTML متكامل للمبتدئين: بناء موقع من عدة صفحات

طبّق دروس HTML في مشروع صغير متعدد الصفحات يتضمن التنقل والمقالات والصور ونموذج تواصل وبنية قابلة للصيانة.

فكرة المشروع

سننشئ موقعًا تعليميًا صغيرًا من ثلاث صفحات: الرئيسية، صفحة المقالات، وصفحة التواصل. الهدف التدرب على البنية والروابط والنماذج وإمكانية الوصول، وليس إنشاء نظام خلفي كامل.

تنظيم الملفات

my-site/
  index.html
  articles/
    index.html
    first-lesson.html
  contact.html
  assets/
    css/style.css
    images/

قالب الصفحة

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>موقعي التعليمي</title>
  <meta name="description" content="موقع تعليمي يقدم دروسًا عملية للمبتدئين.">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <header><a href="index.html">الرئيسية</a></header>
  <main><h1>مرحبًا بك</h1><p>ابدأ باستكشاف الدروس.</p></main>
  <footer>معلومات الموقع</footer>
</body>
</html>

المسارات في المثال صحيحة لصفحة الجذر فقط؛ داخل مجلد articles تحتاج غالبًا إلى ../assets/... أو روابط نسبية ملائمة لموضع الملف.

التنقل والروابط

أضف قائمة تنقل دلالية باستخدام nav، واكتب نصوص روابط تصف الوجهة. اختبر كل رابط بعد نقل الملفات، وتجنب الاعتماد على مسارات تعمل محليًا فقط أو على حالة أحرف مختلفة بين أنظمة التشغيل.

صفحة التواصل

<form action="/contact" method="post">
  <label for="name">الاسم</label>
  <input id="name" name="name" autocomplete="name" required>
  <label for="email">البريد الإلكتروني</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <button type="submit">إرسال</button>
</form>

هذا النموذج يحتاج إلى خادم أو خدمة نماذج تستقبل الطلبات؛ HTML وحدها لا ترسل الرسائل إلى بريدك.

قائمة التسليم

  • لكل صفحة عنوان ووصف وH1 واضح.
  • كل الصور لها نص بديل مناسب وأبعاد محددة.
  • التنقل يعمل بلوحة المفاتيح وعلى الهاتف.
  • الروابط والملفات لا تعيد أخطاء.
  • اختبر الصفحات باستخدام مدقق HTML، ثم راجع التصميم والتباين.

بعد إنهاء المشروع، ارجع إلى درس بنية المستند ودرس النماذج لتحسين التفاصيل.

مراجع موثوقة

تابع سلسلة HTML

تابع الدروس السابقة: ما هي HTML؟، بنية مستند HTML، العناوين والفقرات والروابط، القوائم والصور، وأساسيات النماذج.

تنظيم مشروع متعدد الصفحات

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

project/
  index.html
  pages/
    about.html
    contact.html
  assets/
    css/style.css
    js/main.js
    images/

المجلدات هنا مثال تنظيمي فقط؛ المهم أن تتوافق الروابط النسبية مع مكان كل ملف. عند النشر على استضافة ثابتة، اختبر مسارات الصور والأنماط والروابط من داخل الصفحات الفرعية أيضًا.

قائمة مراجعة قبل الإطلاق

  • كل صفحة تصل إليها من رابط واضح ولا توجد صفحات يتيمة.
  • كل صفحة لها عنوان رئيسي واحد واضح ووسوم metadata مناسبة.
  • التنقل يعمل بلوحة المفاتيح وعلى الشاشات الصغيرة.
  • لا توجد روابط تجريبية أو نماذج توحي بالإرسال دون وجهة فعلية.

تنظيم المشروع قبل إضافة صفحات جديدة

اكتب خريطة بسيطة للصفحات وحدد الروابط المشتركة بينها قبل نسخ الملفات. حافظ على رأس وتذييل متسقين، واجعل لكل صفحة عنوانًا ووصفًا ووسم h1 يعبّر عن محتواها. عند تكرار مكوّن، فكّر في طريقة صيانته مركزيًا بدل إصلاح النسخ يدويًا في كل صفحة.

  • أنشئ صفحة رئيسية وصفحة موضوع وصفحة تواصل ثم اختبر التنقل بينها.
  • تحقق من المسارات النسبية عند وضع الصفحات داخل مجلدات.
  • تأكد من أن الصور لها أبعاد ونص بديل مناسب.
  • اختبر النموذج ووضح أين تذهب البيانات فعليًا.
  • افحص كل صفحة على الهاتف ولوحة المفاتيح قبل النشر.

بعد النشر، افتح كل URL مباشرة وليس عبر الصفحة الرئيسية فقط؛ بعض أخطاء المسارات لا تظهر إلا عند الدخول المباشر.

خطة بناء موقع HTML متعدد الصفحات قابل للصيانة

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

الصفحةالمحتوى الأساسياختبار النجاح
الرئيسيةتعريف موجز وروابط إلى الأقسام المهمةيفهم الزائر الموقع خلال وقت قصير
صفحة الموضوعشرح منظم وأمثلة وروابط ذات صلةيستطيع القارئ إنجاز المهمة المقصودة
التواصلوسيلة تواصل واضحة ونموذج عند الحاجةتعمل الوجهة والرسائل بصورة صحيحة
صفحة سياسة أو مساعدةمعلومات مطلوبة للثقة والاستخداميمكن الوصول إليها بسهولة من الصفحات المناسبة

نظّم الملفات دون تعقيد

احتفظ بأسماء ملفات بسيطة ومتسقة، وضع الصور في مجلد واضح، وتجنب نسخ مسارات مختلفة للملف نفسه. عند تكرار الرأس أو التذييل بين الصفحات، راجعها معًا بعد أي تغيير حتى لا تظهر روابط متناقضة. في موقع HTML ثابت قد تحتاج إلى تحديث كل صفحة يدويًا؛ إذا كبر الموقع فقيّم مولد مواقع ثابتة، لكن لا تغيّر البنية قبل فهم احتياجات النشر والاستضافة.

الروابط والعناوين والبيانات الوصفية

كل صفحة ينبغي أن تحمل عنوانًا يصف محتواها، وتسلسل عناوين مفهومًا، وروابط داخلية لا تؤدي إلى ملفات مفقودة. اختبر الروابط من الصفحات العميقة لا من الرئيسية فقط. وإذا كان الموقع منشورًا تحت مسار فرعي، فتأكد من أن المسارات المطلقة لا تشير خطأً إلى جذر نطاق مختلف.

اختبار قبل النشر

  1. افتح كل صفحة مباشرة في المتصفح وتأكد من عدم وجود أخطاء تحميل.
  2. استخدم قائمة التنقل بلوحة المفاتيح والهاتف.
  3. تحقق من الصور والنصوص البديلة وحجم الخط والتباين.
  4. افحص روابط الصفحات وموارد CSS والصور في نسخة النشر، لا على جهازك فقط.
  5. احتفظ بنسخة من التغييرات أو استخدم Git حتى يمكن الرجوع عن تحديث خاطئ.

يمكن الرجوع إلى دليل MDN لبنية المحتوى وتوثيق GitHub Pages إذا كنت تنشر مشروعًا ثابتًا.

خطة إطلاق ومراجعة مشروع متعدد الصفحات

قبل نشر الموقع، أنشئ قائمة بالصفحات والمسارات والروابط التي تربط بينها. يجب أن يستطيع الزائر الوصول إلى كل صفحة مهمة من التنقل أو من رابط سياقي، وأن تعمل الروابط المباشرة عند فتح عنوان الصفحة في تبويب جديد. لا تعتمد على التنقل من الصفحة الرئيسية فقط لاكتشاف أخطاء المسارات.

المحتوى المتكرر والتناسق

استخدم نمطًا موحدًا للعناوين وقائمة التنقل والتذييل، لكن لا تجعل النصوص الوصفية متطابقة بين الصفحات. لكل صفحة عنوان ووصف يعبّران عن موضوعها. إذا كنت تنسخ قالب HTML، راجع metadata والروابط والصور حتى لا تبقى قيم من صفحة أخرى.

اختبارات النشر

  1. افتح كل ملف مباشرة وتأكد من تحميل CSS والصور.
  2. جرّب كل رابط تنقل وكل رابط داخلي في المقالات.
  3. اختبر نموذج التواصل من إدخال البيانات إلى رسالة النجاح أو الفشل.
  4. تحقق من عدم وجود معلومات حساسة أو ملفات تطوير غير مقصودة في النسخة العامة.
  5. اختبر على الهاتف وراجع إمكانية الوصول عبر لوحة المفاتيح.

الصيانة بعد النشر

احتفظ بسجل للتغييرات واستخدم Git لإجراء تحديثات صغيرة قابلة للمراجعة. إذا نقلت صفحة، حدّث الروابط الداخلية وأضف تحويلًا عند الحاجة. راقب الروابط المكسورة بعد تحديث المحتوى، ولا تترك ملفات قديمة متاحة إذا كانت تسبب التباسًا للمستخدم.

راجع توثيق GitHub Pages ومدقق HTML كجزء من روتين النشر.

تنظيم مشروع متعدد الصفحات ليسهل توسيعه

عندما يحتوي الموقع على صفحات كثيرة، تصبح الاتساقية أهم من تكرار نسخ متباينة من الشيفرة. حدّد بنية مجلدات واضحة للصفحات والموارد والصور، وقرر كيف ستشير الصفحات إلى الأنماط والبرامج النصية. إذا كانت الصفحة داخل مجلد فرعي، اختبر المسارات النسبية بعناية. لا تكرر ملف CSS أو JavaScript في عدة نسخ بأسماء مختلفة إلا إذا كان هناك سبب واضح، لأن ذلك يجعل إصلاح الخلل يتطلب تحديثات متكررة.

وحّد الأجزاء المشتركة دون تعقيد غير لازم

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

ضع قواعد للتنقل والروابط

اجعل أسماء الملفات مفهومة ومستقرة، واستخدم نصوص روابط تصف الوجهة. راجع روابط «اقرأ أيضًا» للتأكد من أنها تقود إلى صفحات موجودة ومناسبة، وتجنب الروابط المتبادلة العشوائية التي لا تساعد القارئ. عند تغيير عنوان صفحة، حدّث كل الإشارات الداخلية وخريطة الموقع وأي canonical أو بيانات مشاركة ذات صلة. إذا كان النطاق يدعم تحويلات، حافظ على مسار واضح للعناوين القديمة.

اختبر المشروع كما سيُعرض على الخادم

افتح صفحات عميقة مباشرة من عنوانها، واختبر إعادة التحميل، ثم افحص طلبات CSS والصور والسكريبتات. قد تخفي الصفحة الرئيسية الناجحة أخطاء في المسارات النسبية للصفحات الفرعية. شغّل فحصًا للروابط بعد أي عملية نقل، واختبر العرض على الهاتف والاتجاهات المختلفة عند دعم العربية والإنجليزية معًا.

احتفظ بتوثيق قصير يشرح نقطة الدخول وبنية المجلدات وطريقة النشر وأي قيود مهمة. ويمكن الرجوع إلى مسار تعلم تطوير الويب من MDN عند بناء قواعد المشروع الأساسية.

قائمة تحقق قبل نشر مشروع متعدد الصفحات

  • افتح كل صفحة مباشرة وتأكد من أن مواردها تعمل دون المرور بالصفحة الرئيسية.
  • تحقق من الروابط الداخلية ونصوص التنقل ووجهات «اقرأ أيضًا».
  • راجع العناوين والبيانات الوصفية وcanonical للصفحات الأساسية.
  • اختبر صفحة 404، والنماذج، والتنقل بلوحة المفاتيح، والعرض على الهاتف.
  • افحص عدم نشر ملفات مؤقتة أو أسرار أو مخرجات بناء غير مقصودة.

إذا كان المشروع ثابتًا، يمكن أتمتة بعض هذه الفحوصات بسكربتات بسيطة أو أدوات تحقق للروابط. أما إذا كان يعتمد على عملية بناء، فاختبر الناتج المنشور لا المصدر وحده. احتفظ بتوثيق قصير لمسار البناء والنشر وطريقة التراجع، وراجع الروابط عند نقل الملفات أو تغيير النطاق.

الهدف من تنظيم المشروع ليس إنشاء بنية مجلدات معقدة؛ بل تقليل احتمالات الاختلاف بين الصفحات وجعل الإصلاحات قابلة للتطبيق بصورة متسقة.

الخلاصة

الخلاصة: صمّم خريطة صفحات واضحة، واختبر الروابط المباشرة والتنقل والموارد على النسخة المنشورة. التوثيق والاختبار بعد كل تغيير يحافظان على المشروع قابلًا للصيانة.

الكاتب: عماد الدين لمراني