الروابط والصور في HTML: شرح a و img وأنواع المسارات
بعد التعرف على خصائص HTML مثل id و class، ننتقل الآن إلى عنصرين أساسيين لا يمكن لأي موقع الاستغناء عنهما، وهما الروابط والصور. في هذا الدرس سنتعلم كيفية إنشاء الروابط وإدراج الصور بشكل صحيح مع فهم المسارات وأنواعها.
ما هي الروابط في HTML؟
الروابط هي وسيلة للانتقال من صفحة إلى صفحة أخرى، أو من موقع إلى موقع آخر. HTML توفر وسمًا خاصًا للروابط وهو الوسم a.
وسم a (الرابط)
وسم a يُستخدم لإنشاء رابط، ويعتمد بشكل أساسي على الخاصية href التي تحدد وجهة الرابط. يمكن أن يكون الرابط داخليًا أو خارجيًا.
مثال على رابط داخلي
<a href="about.html">من نحن</a>
هذا المثال ينقل المستخدم إلى صفحة داخل نفس الموقع.
مثال على رابط خارجي
<a href="https://developer.mozilla.org" target="_blank"> موقع MDN </a>
الخاصية target="_blank" تجعل الرابط يُفتح في نافذة جديدة.
ما هي الصور في HTML؟
الصور عنصر مهم لتحسين شكل الصفحة وتجربة المستخدم. HTML توفر وسم img لإدراج الصور داخل الصفحات.
وسم img
وسم img هو وسم ذاتي الإغلاق، ويعتمد على خاصيتين أساسيتين: src لتحديد مسار الصورة، و alt لوصف الصورة.
مثال على إدراج صورة
<img src="html.png" alt="شعار HTML">
الخاصية alt مهمة جدًا لتحسين SEO ولإظهار وصف الصورة في حال لم يتم تحميلها.
أنواع المسارات في HTML
المسار هو المكان الذي توجد فيه الملفات مثل الصور أو الصفحات. هناك نوعان أساسيان من المسارات: نسبي ومطلق.
المسار النسبي
المسار النسبي يعتمد على مكان الملف الحالي. يُستخدم غالبًا داخل نفس الموقع.
<img src="images/photo.jpg">
المسار المطلق
المسار المطلق يحتوي على الرابط الكامل للموقع. يُستخدم غالبًا مع المواقع الخارجية.
<img src="https://example.com/photo.jpg">
تنسيق الروابط والصور باستخدام CSS
يمكن تغيير شكل الروابط والصور وتحسين مظهرها باستعمال CSS. HTML تهتم بالبنية، وCSS تهتم بالشكل والتصميم.
أخطاء شائعة
من الأخطاء الشائعة نسيان خاصية alt في الصور، أو كتابة مسار خاطئ. كما ينسى البعض إغلاق وسم a بطريقة صحيحة.
مصادر إضافية للتعلم
للتعمق أكثر يمكنك الرجوع إلى MDN Web Docs أو W3Schools .
خلاصة
الروابط والصور من أهم عناصر HTML. بفهم وسم a و img وأنواع المسارات، ستتمكن من إنشاء صفحات مترابطة وجذابة بصريًا.