علامة HTML img يستخدم لعرض الصورة على صفحة الويب. علامة HTML img هي علامة فارغة تحتوي على سمات فقط، ولا يتم استخدام علامات الإغلاق في عنصر صورة HTML.
دعونا نرى مثالاً لصورة HTML.
<h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends">اختبره الآن
انتاج:
سمات علامة HTML img
تعد src و alt من السمات المهمة لعلامة HTML img. جميع سمات علامة صورة HTML مذكورة أدناه.
مقارنة سلسلة جافا
1) سرك
إنها سمة ضرورية تصف مصدر الصورة أو مسارها. فهو يرشد المتصفح إلى مكان البحث عن الصورة على الخادم.
قد يكون موقع الصورة على نفس الدليل أو على خادم آخر.
2) كل شيء
تحدد السمة alt نصًا بديلاً للصورة، إذا كان لا يمكن عرضه. تصف قيمة السمة alt الصورة بالكلمات. تعتبر السمة alt جيدة لمحتملي تحسين محركات البحث.
3) العرض
إنها سمة اختيارية تُستخدم لتحديد العرض لعرض الصورة. لا ينصح به الآن. يجب عليك تطبيق CSS بدلاً من سمة العرض.
4) الارتفاع
إنه h3 ارتفاع الصورة. تدعم سمة ارتفاع HTML أيضًا عناصر iframe والصورة والكائن. لا ينصح به الآن. يجب عليك تطبيق CSS بدلاً من سمة الارتفاع.
استخدام سمة الارتفاع والعرض مع علامة img
لقد تعلمت كيفية إدراج صورة في صفحة الويب الخاصة بك، والآن إذا أردنا إعطاء بعض الارتفاع والعرض لعرض الصورة وفقًا لمتطلباتنا، فيمكننا تعيينها باستخدام سمات الارتفاع والعرض للصورة.
عمر دارميندرا
مثال:
<img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image">اختبره الآن
انتاج:
ملاحظة: حاول دائمًا إدراج الصورة بالطول والعرض، وإلا فإنها قد تومض أثناء عرضها على صفحة الويب.
استخدام السمة البديلة
يمكننا استخدام سمة البديل مع بطاقة شعار. سيعرض نصًا بديلاً في حالة تعذر عرض الصورة على المتصفح. فيما يلي مثال للسمة البديلة:
<img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image">
انتاج:
كيفية الحصول على صورة من دليل/مجلد آخر؟
لإدراج صورة في موقع الويب الخاص بك، يجب أن تكون هذه الصورة موجودة في نفس المجلد الذي قمت بوضع ملف HTML فيه. ولكن إذا كانت الصورة متاحة في بعض الحالات في دليل آخر، فيمكنك الوصول إلى الصورة بهذه الطريقة:
في البيان أعلاه قمنا بوضع الصورة في القرص المحلي E------>مجلد الصور------>img/html-tutorial/39/html-image-2.webp.
ملاحظة: إذا كان عنوان URL الخاص بـ src غير صحيح أو به خطأ إملائي، فلن يتم عرض صورتك على صفحة الويب، لذا حاول وضع عنوان URL الصحيح.
يستخدم ![]()
علامة كرابط
يمكننا أيضًا ربط صورة بصفحة أخرى أو يمكننا استخدام الصورة كرابط. للقيام بذلك، ضع علامة داخل بطاقة شعار.
مثال:
<img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp">اختبره الآن
انتاج:
دعم المتصفحات
| عنصر |  كروم |  أي |  ثعلب النار |  الأوبرا |  سفاري |
| | نعم | نعم | نعم | نعم | نعم |