16 – إدراج الصور – الروابط والصور – المستوى الاول
📌 الصور في HTML
🔹 ما هو الوسم <img>؟
-
يُستخدم لإدراج صورة في صفحة الويب.
-
وسم فارغ (Empty Element) → يعني ما فيهوش وسم إغلاق (</img> ❌).
-
يكتفي بالوسم المفتوح <img> ومعاه الخصائص (Attributes).
🔹 التركيب الأساسي
🔹 الخصائص الأساسية لوسم <img>
1. الخاصية src (Source)
-
تحدد مسار الصورة اللي عايز تعرضها.
-
ممكن يكون:
-
رابط نسبي (Relative Path): الصورة موجودة في نفس المشروع.
-
رابط كامل (Absolute URL): الصورة موجودة على الإنترنت.
-
2. الخاصية alt (Alternative Text)
-
نص بديل يظهر إذا فشل تحميل الصورة (مثلًا الرابط خطأ).
-
مهم جدًا لـ:
-
تحسين تجربة المستخدم (Accessibility) → قارئات الشاشة بتقرأ النص لضعاف البصر.
-
تحسين SEO → محركات البحث تستخدمه لفهم محتوى الصورة.
-
✅ مثال:
3. الخاصية width و height
-
لتحديد أبعاد الصورة (العرض والارتفاع).
-
ممكن تحدد بالقيمة (بيكسل) أو بالنسبة (%).
-
الأفضل تحديد إما العرض فقط أو الارتفاع علشان تحافظ على تناسق أبعاد الصورة.
✅ أمثلة:
🔹 خصائص أخرى مفيدة
-
title → نص يظهر عند تمرير الماوس على الصورة:
-
loading=”lazy” → تحميل الصورة عند ظهورها في الشاشة فقط (يوفر سرعة):
🔹 مثال عملي كامل
🔹 ملخص
-
<img> = لإدراج الصور (وسم فارغ).
-
src = مسار الصورة.
-
alt = نص بديل عند فشل التحميل + مهم للـ SEO.
-
width, height = التحكم في أبعاد الصورة.
-
ممكن تضيف خصائص إضافية زي title, loading.
Call now
Contact WhatsApp
