ما هو وسم الصور في HTML؟
لإضافة صورة داخل صفحة HTML، نستخدم الوسم <img>.
هذا الوسم ذاتي الإغلاق (لا يحتاج إلى وسم إغلاق).
الصيغة الأساسية:
<img src="مسار-الصورة" alt="وصف بديل">
شرح الخصائص:
src: هو المسار إلى ملف الصورة، ويمكن أن يكون:- مسار داخلي (من نفس مجلد المشروع).
- أو رابط خارجي لصورة من الإنترنت.
alt: نص بديل يظهر إذا تعذّر تحميل الصورة، كما أنه مفيد لتحسين الوصول لمحركات البحث.
مثال على صورة داخلية:
<img src="images/logo.png" alt="شعار الموقع">
(تأكد أن الصورة موجودة داخل مجلد "images" بجانب ملف HTML)
مثال على صورة من الإنترنت:
<img src="https://via.placeholder.com/300x200" alt="صورة تجريبية">
1. التحكم بحجم الصورة
يمكنك تحديد العرض والارتفاع باستخدام خصائص width و height:
<img src="images/photo.jpg" alt="صورة" width="300" height="200">
أو يمكنك التحكم بها باستخدام CSS لاحقًا.
2. إدراج صورة كرابط
يمكنك جعل الصورة قابلة للنقر، مثل رابط:
<a href="https://www.google.com">
<img src="images/google-logo.png" alt="اذهب إلى جوجل" width="150">
</a>
3. تنسيقات مفيدة
- الصورة بدون إطار افتراضي.
- يمكن استخدام
styleلتحديد مكانها:
<img src="images/photo.jpg" alt="صورة" style="display: block; margin: auto;">
مثال عملي كامل
<!DOCTYPE html>
<html>
<head>
<title>درس الصور</title>
</head>
<body>
<h1>عرض صورة من الجهاز</h1>
<img src="images/cat.jpg" alt="قطة جميلة" width="300">
<h2>عرض صورة من الإنترنت</h2>
<img src="https://via.placeholder.com/250x150" alt="صورة خارجية">
<h2>صورة كـ رابط</h2>
<a href="https://www.wikipedia.org" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="ويكيبيديا" width="100">
</a>
</body>
</html>
الواجب العملي
- أضف صورة من جهازك باستخدام
<img>. - أضف صورة من الإنترنت.
- اضبط عرض الصورة إلى 300px.
- اجعل صورة ترتبط برابط خارجي.
- جرّب استخدام النص البديل
alt.
ماذا سنتعلم في الدرس القادم؟
في الدرس الخامس سنتعلّم كيفية إنشاء القوائم (Lists) بأنواعها:
القوائم المرتبة <ol> وغير المرتبة <ul>.