📌 الصور في 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.