الدرس 4: الروابط التشعبية (Hyperlinks) وإدراج الصور (Images) في HTML
شرح علمي لوسم الروابط <a> ووسم الصور <img> في HTML. تعلم كيفية استخدام الخصائص التقنية مثل href و src و alt لتحسين تفاعل المستخدم وأداء السيو (SEO) لموقعك.
في هذا الدرس، سننتقل إلى الجانب التفاعلي والبصري من لغة HTML. سنتعلم كيف نربط صفحات موقعنا ببعضها البعض أو بمواقع خارجية، وكيفية إضافة الصور والتحكم في خصائصها تقنياً لضمان سرعة تحميل الصفحة وصداقتها لمحركات البحث.
1. الروابط التشعبية: وسم الـ a> (Anchor Tag)>
وسم الـ <a> هو المسؤول عن إنشاء الروابط. الميزة الأهم في هذا الوسم هي خاصية (Attribute) تسمى href، وهي اختصار لـ Hypertext Reference.
الصيغة البرمجية:
مثال برمجى
أهم الخصائص الملحقة بالروابط:
target="_blank": تُستخدم لفتح الرابط في تبويب جديد بدلاً من مغادرة صفحتك الحالية.
title: يظهر نص توضيحي صغير عند وقوف الفأرة على الرابط.
2. أنواع مسارات الروابط (URL Paths)
كمطور ويب، يجب أن تميز بين نوعين من المسارات عند ربط الملفات:
المسار المطلق (Absolute Path): وهو العنوان الكامل للموقع (مثال: https://alshafra.com/languages/html). يُستخدم للإشارة لمواقع خارجية.
المسار النسبي (Relative Path): وهو الإشارة لملف موجود داخل مجلد مشروعك (مثال: contact.html).
3. إدراج الصور: وسم الـ <img> (Image Tag)
وسم الصور هو وسم ذاتي الإغلاق (Self-closing)، مما يعني أنه لا يحتاج لوسم نهاية </img>. يعتمد بشكل كلي على الخصائص لتحديد المصدر والشكل.
الخصائص الأساسية للصور:
src (Source): مسار ملف الصورة أو رابطها الإلكتروني.
alt (Alternative Text): نص بديل يصف الصورة. هذا النص ضروري جداً لـ:
محركات البحث: لفهم محتوى الصورة وأرشفته.
إمكانية الوصول (Accessibility): لمساعدة المكفوفين الذين يستخدمون قارئات الشاشة.
width & height: لتحديد أبعاد الصورة بالبكسل (Pixel).
4. تطبيق عملي شامل
انسخ هذا الكود في ملف index.html لتجربة الربط بين النصوص والصور:
مثال برمجى
5. أخطاء شائعة يجب تجنبها
نسيان خاصية alt: محركات البحث تعتبر الصفحة ناقصة تقنياً إذا خلت الصور من الوصف.
المسارات الخاطئة: تأكد من أن ملف الصورة موجود في نفس المجلد الذي تشير إليه في كود src.
استخدام أحجام صور ضخمة: دائماً قم بضغط صورك قبل رفعها لضمان سرعة تصفح الموقع.
تحدي "الشيفرة" (4)
قم بإنشاء صفحة ثانية باسم gallery.html وضع فيها 3 صور لمبرمجين مشهورين، ثم قم بعمل رابط في صفحتك الرئيسية (index.html) ينقل المستخدم إلى صفحة المعرض.
هل ظهرت الصور بشكل صحيح؟ إذا رأيت أيقونة "صورة مكسورة"، فهذا يعني أن المسار في src غير دقيق!