شرح إدراج الصور داخل صفحة HTML خطوة بخطوة من المحرر للمتصفح
في الموضوع ده هنشرح إزاي تضيف صورة في صفحة HTML باستخدام وسم
<img>. هنبدأ من الصفر داخل محرر الأكواد وهنشوف
النتيجة في المتصفح.
1️⃣ فتح محرر الأكواد
بنفتح محرر Visual Studio Code، وده المحرر اللي بنكتب فيه كودات HTML.
بننشئ ملف جديد ونكتب فيه الهيكل الأساسي لأي صفحة HTML، وده بيكون بالشكل
ده:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>إضافة صورة في HTML</title>
</head>
<body>
</body>
</html>
2️⃣ وسم إدراج الصور <img>
لما نيجي نضيف صورة، بنستخدم وسم <img>، وده وسم
من غير وسم إغلاق (self-closing tag). بنكتبه كده:
<img src="image.jpg" alt="وصف الصورة">العناصر اللي بيحتويها الوسم ده:
-
src: ده اختصار لـ source، وده بنكتب فيه اسم الصورة أو المسار بتاعها. -
alt: اختصار لـ alternative text، وده النص البديل اللي بيظهر لو الصورة مش اتحملت لأي سبب.
3️⃣ التأكد من مكان الصورة
لازم الصورة تكون موجودة في نفس مكان ملف HTML، أو تكتب المسار بتاعها صح لو في فولدر تاني.
📌 مثال لو الصورة في نفس المكان:
<img src="image.jpg" alt="صورة توضيحية">📌 مثال لو الصورة داخل فولدر اسمه images:
<img src="images/image.jpg" alt="صورة داخل فولدر">4️⃣ تجربة عرض الصورة في المتصفح
بعد ما نكتب الكود، بنفتح ملف الـ HTML في المتصفح عن طريق دبل كليك عليه أو نسحبه جوه المتصفح.
📸 الصورة هتظهر تلقائيًا لو المسار صح.
5️⃣ تجربة الخطأ في اسم الصورة
لو كتبنا اسم الصورة غلط أو مش موجودة، مش هتظهر الصورة وهيظهر بدلها النص
اللي في alt.
📌 مثال:
<img src="wrongname.jpg" alt="الصورة مش موجودة">🛑 النتيجة: الصورة مش بتظهر، لكن النص “الصورة مش موجودة” بيظهر مكانها.
6️⃣ التحكم في حجم الصورة
ممكن نتحكم في حجم الصورة باستخدام الخصائص:
-
width: العرض. -
height: الطول.
📌 مثال:
<img src="image.jpg" alt="صورة بحجم معين" width="300" height="200">
✅ لو كتبت width بس، المتصفح بيظبط
height تلقائيًا حسب أبعاد الصورة الأصلية.
7️⃣ عرض خصائص الصورة من المتصفح
من المتصفح، نقدر نضغط كليك يمين على الصورة ونختار “Inspect” علشان نشوف خصائصها:
-
نقدر نشوف الـ
srcوalt. -
نقدر نشوف الحجم.
-
نقدر نشوف مكان الصورة في الصفحة (Position).
8️⃣ حالات فشل تحميل الصور
الصورة ممكن ما تظهرش لو:
-
الاسم غلط.
-
الامتداد مش صحيح (.jpg, .png, .gif).
-
الصورة مش موجودة فعلًا.
-
في مشكلة في المسار لو الصورة في فولدر تاني.
9️⃣ فوائد alt:
-
بيظهر نص بديل للمستخدم.
-
بيساعد محركات البحث (SEO).
-
مهم للي بيستخدموا أدوات قراءة الشاشة (لذوي الاحتياجات الخاصة).
1️⃣0️⃣ مثال شامل فيه كل العناصر:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>إدراج صورة</title>
</head>
<body>
<h1>دي صورة توضيحية</h1>
<img src="images/photo.png" alt="صورة طبيعية" width="400" height="300">
</body>
</html>
وبكده نكون عرفنا كل حاجة عن إدراج الصور داخل صفحة HTML:
✔ إزاي نكتب الكود.
✔ نعرضه في المتصفح.
✔ نتحكم في الحجم.
✔ نكتب النص البديل.
✔ ونتعامل مع الأخطاء.