الروابط والصور في HTML: شرح وسم a و img للمبتدئين
بعد تعلم العناوين والفقرات في HTML، ننتقل الآن إلى عنصرين أساسيين لا يمكن لأي موقع الاستغناء عنهما، وهما الروابط والصور. الروابط تسمح بالانتقال بين الصفحات، بينما الصور تضيف جمالية وتوضيحًا للمحتوى. في هذا الدرس سنتعرف عليهما بالتفصيل.
ما هي الروابط في HTML؟
الروابط أو Links تُستخدم للانتقال من صفحة إلى أخرى، سواء داخل نفس الموقع أو إلى مواقع خارجية. بدون الروابط لا يمكن تصفح الإنترنت بالشكل الذي نعرفه اليوم. تُنشأ الروابط في HTML باستخدام وسم a.
شرح وسم a في HTML
وسم a هو اختصار لكلمة Anchor، ويُستخدم لإنشاء الروابط. يعتمد هذا الوسم على خاصية href التي تحتوي على رابط الصفحة المراد الانتقال إليها. يمكن أن يكون الرابط داخليًا أو خارجيًا.
مثال على رابط بسيط
<a href="https://barmij01.blogspot.com/"> الذهاب إلى الصفحة الرئيسية </a>
عند الضغط على هذا الرابط، سيتم الانتقال إلى الصفحة الرئيسية للموقع.
فتح الرابط في نافذة جديدة
في بعض الحالات نحتاج إلى فتح الرابط في نافذة جديدة، خصوصًا عند الربط بمواقع خارجية. يتم ذلك باستخدام الخاصية target مع القيمة _blank. يمكنك قراءة المزيد من التوثيق الرسمي في MDN Web Docs .
ما هي الصور في HTML؟
الصور عنصر مهم جدًا في صفحات الويب، حيث تساعد في شرح الفكرة وتجعل الصفحة أكثر جاذبية. في HTML يتم إدراج الصور باستخدام وسم img، وهو وسم ذاتي الإغلاق لا يحتوي على وسم إغلاق.
شرح وسم img وخصائصه
يعتمد وسم img على خاصية src لتحديد مسار الصورة، وخاصية alt لكتابة وصف بديل. وصف alt مهم جدًا لتحسين محركات البحث ولإظهار نص بديل في حال لم تظهر الصورة.
مثال على إدراج صورة
<img src="html-image.jpg" alt="صورة توضيحية عن HTML">
يُنصح دائمًا بكتابة وصف واضح داخل alt، لأنه يساعد محركات البحث ويساهم في تحسين SEO. يمكنك تعلم المزيد من موقع W3Schools .
ربط الصور مع الروابط
يمكن جعل الصورة نفسها رابطًا، وذلك بوضع وسم img داخل وسم a. يُستخدم هذا الأسلوب كثيرًا في الشعارات والإعلانات.
مثال صورة كرابط
<a href="https://barmij01.blogspot.com/"> <img src="logo.png" alt="شعار الموقع"> </a>
علاقة الصور والروابط بـ CSS
بعد إدراج الصور والروابط باستخدام HTML، يمكن تنسيقها وتغيير شكلها باستخدام CSS. HTML تهتم بالبنية، وCSS تهتم بالمظهر والتصميم.
أخطاء شائعة يجب تجنبها
من الأخطاء الشائعة نسيان خاصية alt، أو وضع روابط غير صحيحة داخل href، أو استخدام صور كبيرة الحجم تؤثر على سرعة الموقع. تفادي هذه الأخطاء يجعل موقعك أكثر احترافية.
خلاصة
الروابط والصور من أهم عناصر HTML، وبدونهما لا يكون الموقع عمليًا أو جذابًا. إتقان وسم a و img يساعدك على بناء صفحات متكاملة، ويُعتبر خطوة أساسية قبل الانتقال إلى دروس متقدمة.
⬅️ العودة إلى الصفحة الرئيسية | التـالي ←