الدرس 2 من 8 · آخر تحقق: 2 تشرين الأول 2026

هيكل صفحة الويب الحقيقية بـ HTML5: العناوين والنصوص والروابط والصور الدلالية

بتطلع من هالدرس وأنت قادر على: بناء صفحة تعريفية كاملة الدلالات (Semantic HTML5) متوافقة مع محركات البحث وقارئات الشاشة، مع إدراج روابط وصور سليمة.

الدرس 2 من 8

المدة التقديرية: فيديو 15:20 + تطبيق وتمرين 50 دقيقة · ضمن منهج البرمجة وتطوير الويب

ليش هالدرس مهم

لأن الكود غير الدلالي يجعل موقعك غير مرئي لغوغل وغير مفهوم للعملاء

كثير من المتعلمين يكتبون كل شيء باستخدام وسوم عامة مثل

و، وتكون النتيجة صفحة تعمل بالعين ولكنها ميتة لمحركات البحث وتقنيات مساعدة ذوي الإعاقة. المعايير القياسية للويب تعتمد على HTML5 الدلالي (Semantic HTML).

عندما تبني موقعاً لشركة أو متجر، محركات البحث تبحث عن وسوم صريحة مثل

الفيديو التوضيحي الموثّق

شاهد الشرح المباشر ثم نفّذ خطوة بخطوة

القناة: Abdelrahman Gamal · المدة: 15:20 · انتبه لطريقة كتابة المسارات النسبية للروابط والصور والفارق بين الرابط الداخلي والرابط الخارجي المطلق.

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

الشرح المكتوب بالتفصيل الممل

خطوات التطبيق العملي على حاسوبك

افتح ملف index.html واستبدل المحتوى الداخلي لـ بهيكل دلالي يبدأ بوسم
وفيه وسم
للروابط. شو رح تشوف على الشاشة: ظهور ترويسة الصفحة وقائمة تنقل مرتبة بدون تنسيق ملون بعد. إذا ما ظهرلك: احرص على كتابة كل وسم بفتحه وإغلاقه بشكل سليم لضمان سلامة الشجرة البرمجية.
أضف وسماً رئيسياً
وضمنه وسماً للقسم الترويجي
. شو رح تشوف على الشاشة: المحتوى الرئيسي ينفصل عن الترويسة بوضوح في لوحة فحص العناصر (F12). إذا ما ظهرلك: القاعدة الذهبية: وسم h1 واحد فقط بالصفحة بأكملها يعبر عن الموضوع الرئيسي.
اكتب عنواناً رئيساً <h1> واسم النشاط، وتحته فقرة <p> تشرح الخدمة، وزر رابط <a href='#services'>تواصل معنا</a>. شو رح تشوف على الشاشة: نص تسويقي واضح يظهر في أعلى الصفحة برابط تحويل داخلي نحو قسم الخدمات. إذا ما ظهرلك: تأكد من أن الرابط يبدأ بـ # إذا كان يتنقل لنفس الصفحة نحو قسم محدد.
أنشئ قسماً ثانياً
يحوي عنوان
'خدماتنا' وقائمة غير مرتبة
- للخدمات. شو رح تشوف على الشاشة: قائمة نقطية منسقة دلالياً تشرح الخدمات المقدمة (مثل: تصميم مواقع، صيانة، تحسين سرعة).
  إذا ما ظهرلك: استخدام
  للبنود المتوازية و
  للخطوات المتسلسلة يعطي دلالة واضحة.
  ضع صورة داخل مجلد 'assets/images' واستدعها بوسم . شو رح تشوف على الشاشة: الصورة تظهر داخل الصفحة بحجمها الطبيعي. إذا ما ظهرلك: خاصية alt إلزامية لـ SEO وإمكانية الوصول، وتظهر كنص بديل لو فشل تحميل الصورة.
  
  أضف قسماً لنموذج التواصل
  يحوي حقول وزر إرسال
  
  اختم الصفحة بوسم <footer> واكتب بداخله حقوق النشر ورابطاً يعود لأعلى الصفحة <a href='#top'>للأعلى</a>. شو رح تشوف على الشاشة: تذييل أنيق في نهاية الصفحة يختم الهيكل القياسي للويب. إذا ما ظهرلك: تأكد من إغلاق كافة الوسوم، وتحقق من ظهور الصفحة بالمتصفح دون أي أخطاء.
  
  افتح أدوات المطور (F12) وتبويب Console وتأكد من عدم وجود أي خطأ باللون الأحمر كصورة مفقودة (404). شو رح تشوف على الشاشة: لوحة Console نظيفة تماماً بدون أي علامات تحذير أو أخطاء مسارات. إذا ما ظهرلك: إذا ظهر خطأ 404 لصورة، راجع المسار النسبي المكتوب وتأكد من مطابقة الحروف الكبيرة والصغيرة.

جرّب بنفسك

التمرين العملي للدرس 2

ابنِ صفحة ويب شخصية أو تجارية لمهنة حرة من 4 أقسام كاملة (ترويسة، بطل، خدمات، تذييل) باستخدام HTML5 الدلالي النظيف وصورة واحدة بمسار نسبي ووصف alt، وافحصها في المتصفح.

معيار النجاح والتسليم

الصفحة مبنية بوسوم دلالية: header, nav, main, section, footer.
يوجد وسم h1 واحد فقط وعناوين فرعية h2 منظمة منطقياً.
الصور مضافة بمسارات نسبية سليمة وخاصية alt مكتوبة بدقة.

فحص سريع

ثلاثة أسئلة للتأكد من استيعاب المفاهيم

ما الفرق بين الرابط النسبي والرابط المطلق؟

الرابط النسبي يشير لملف داخل مجلد موقعك (مثل: assets/style.css)، بينما الرابط المطلق يبدأ بـ https:// ويشير لعنوان كامل على الإنترنت.

لماذا يمنع تكرار وسم

أكثر من مرة بالصفحة الواحدة؟

لأن وسم h1 يمثل العنوان الرئيسي والوحيد للوثيقة في نظر محركات البحث، وتكراره يشتت الفهرسة ويضعف قوة الكلمات المفتاحية.

ما هي أهمية خاصية alt في وسم ؟

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

مستند الدرس

انسخه لملاحظاتك

- الهيكل الدلالي: header, nav, main, section, article, footer تبني هيكل موقع احترافي. - العناوين الهرمية: h1 واحد فقط، يليه h2 للأقسام، وh3 للتفريعات الداخلية. - الروابط الداخلية: استخدام #id للتنقل السريع داخل نفس الصفحة بسلاسة. - الصور النظيفة: خاصية alt إلزامية دائماً لوصف دقيق باللغة العربية. - المسارات النسبية: كتابة أسماء الملفات بحروف دقيقة وتجنب المسارات المطلقة من القرص المحلي. - القوائم:

للمراحل والخطوات الترتيبية. - فحص Console: التأكد المستمر من عدم وجود روابط مفقودة برمز 404. - مخرج الدرس: صفحة تعريفية كاملة العناصر والدلالات جاهزة للتنسيق بالـ CSS.

الدرس التالي (3) ← فهرس دروس المنهج

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

قناة وتطبيقات مهارات سوريا

شارك إنجازك في مجموعتنا التفاعلية وتابع فرص العمل الحر البرمجية عبر تيليغرام.

انضم لقناة مهارات المجانية المستند الكامل للطباعة