9- الصور Images - دورة تعلم لغة HTML

الصور Images
دورة لغة HTML

تحدثنا في الدرس السابق عن الروابط Links ، وفي هذا الدرس عن موضوع هام جدا وهو الصور Images ولا شك أن الصور عنصر هام جدا في تكوين صفحات الانترنت.

لإدراج صورة في لغة HTML نستخدم الوسم <img> ، وهذا الوسم من النوع الفارغ "Empty Tag"، أي يحتوي علي سمات ولا يوجد له وسم نهاية "End Tag".

الوسم <img> والسمة src :

لادراج صورة في الصفحة يجب أن تستخدم السمة "src ، "src اختصار لـ "source" ، والقيمة التي تسند للسمة src تكون رابط الصورة المراد عرضها.

مثال علي ادراج صورة:

<img src="url"/>

الشرح :

img : وسم عرض الصور في لغة Html .

src : سمة المصدر وقيمتها تحتوي علي رابط الصورة .

url : هي قيمة السمة src ، قم باستبدال url برابط اي صورة وقم بتجربة الكود بنفسك.

الوسم <img> والسمة alt :

بفرض انك بعد ادراجك لصورة تم حذفها، أو انك أدخلت رابط الصورة بطرقة خاطئة، بالطبع اذا حدث ذلك لن تظهر الصورة، ولكن مع السمة alt تقوم باضافة نص بديل ... اي انه في حالة عدم ظهور الصورة لأاي سبب من الأسباب يقوم المتصفح بعرض نص بدلا منها.

عدم اضافة السمة alt لا يؤثر علي ظهور الصورة، ولكن من الأفضل اضافته نظرا لأهميته الكبيرة في تهيئة موقعك لمحركات البحث.

مثال علي اضافة النص البديل:

<img src="url" alt="text"/>

تحديد عرض وارتفاع الصورة:

يمكنك تحديد عرض وارتفاع الصورة من خلال السمتين width , height ، والقيمة التي تسندها لهما تكون افتراضيا بالبكسل .

مثالعلي تحديد عرض وارتفاع صورة:

<img src="url" alt="text" width="300" height="200"/>

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

التسميات: دورة تعليم لغة HTML, HTML