img HTML Tag

عنصر <img> يستخدم لإدراج صورة في صفحة الويب

<img src="" alt="" title="" class="" id="" width="" height="" style="">

هذا العنصر لا يحتوى على علامة إغلاق ولكن ربما تحتاج لعلامة الإغلاق في حالة إذا كنت تستخدم XML

السمات
هناك العديد من السمات المختلفة التي يمكن إضافتها ضمن عنصر HTML لإحداث تغيير على العنصر ، وبعض العناصر في HTML لها سمات معينة مثل عنصر img
السمات التي يمكن إضافتها ضمن العنصر img هي السمات العامة والتي يمكن إضافتها ضمن جميع عناصر HTML ومعظم هذه السمات اختيارية

أما السمات المطلوبة لعنصر img
سمة src والتي من خلالها تستطيع تحديد مسار أو رابط الصورة سواء كانت الصورة ضمن مجلد المشروع الموجود على جهازك أو أي صورة موجودة على الانترنت.
سمة alt والتي يمكنك من خلالها إضافة عنوان للصورة ، ويظهر هذا العنوان في حالة عدم تحميل الصورة أو إذا كان مسار الصورة غير صحيح
سمة title هي سمة اختيارية ويمكنك استخدامها لإضافة نص يظهر عند مرور مؤشر الفأرة على الصورة.
سمة class هي سمة اختيارية ويتم استخدامها كثيرا من أجل التنسيق مع لغة CSS
سمة id سمة اختيارية ويتم استخدامها من أجل التنسيق مع لغة css لشئ واحد معين ولكن غالبا هذه السمة يتم استخدامها وربطها مع أكواد وشفرات الجافا سكريبت والجي كويري
سمة width هي سمة اختيارية تستخدم لتحديد نسبة العرض للعنصر
سمة height هي سمة اختيارية تستخدم لتحديد نسبة الارتفاع للعنصر
سمة style هي سمة اختيارية ويمكن من خلالها إضافة تنسيقات CSS وهذه التنسيقات تطبق على هذا العنصر فقط


ولكي نستطيع اظهار الصورة في المتصفح لا بد من استخدام سمة src ضمن وسم
<img>
ومن خلال هذه السمة يمكننا تحديد مسار الصورة سواء كانت من ضمن المجلد المحلى أو صورة خارجية متواجدة على الانترنت

مثال 1


إذا كان لدينا مجلد باسم demo وبداخل هذا المجلد يوجد ملف HTML باسم index.html وأيضا يوجد صورة باسم google.png ، فيكون الكود التالي هو الكود الصحيح لعرض الصورة

<img src="google.png">

مثال 2

إذا كان لدينا مجلد باسم demo وبداخل هذا المجلد يوجد ملف HTML باسم index.html وأيضا مجلد img وبداخل هذا المجلد يوجد صورة بإسم google.png فيكون الكود التالي هو الكود الصحيح لعرض الصورة

<img src="img/google.png">


مثال 3

إذا كان لدينا مجلد باسم demo وبداخل هذا المجلد يوجد ملف HTML باسم index.html وأيضا مجلد img وبداخل مجلد img يوجد مجلد أخر باسم img1 وبداخل مجلد img1 يوجد صورة بإسم google.png فيكون الكود التالي هو الكود الصحيح لعرض الصورة

<img src="img/img1/google.png">



مثال 4

إذا كان لدينا مجلد باسم demo وبداخل هذا المجلد يوجد صورة بإسم google.png ويوجد مجلد باسم file وبداخل مجلد file يوجد به ملف HTML باسم index فيكون الكود التالي هو الكود الصحيح لعرض الصورة
، حيث يمثل الرمز /.. الرجوع خطوة للخلف
<img src="../google.png">


<img src="google.png" alt="google">

<img src="google.png" title="google">

<img src="google.png" style="width:100px;border:2px solid #ddd">


<img src="google.png" width="100">

<img src="google.png" height="70">

<img src="google.png" height="70">


<img src="google.png" class="thumbnails">

<img src="google.png" id="thumbnails">