دليل مرجع HTML

مجموعة عناصر HTML

HTML: <input> العلامة HTML: <iframe> العلامة

HTML: <img> العلامة

أداة <img> في HTML تعرف الصور في وثيقة HTML. هذا العنصر يُدعى أيضًا <img> عناصر.

مثال على الإنترنت

كيفية إدراج الصور:

مثال

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع دروس أساسية (oldtoolbag.com)</title>　
</head>
<body>
<img src="pig.gif" alt="وجه الخنزير" width="32" height="32">
</body>
</html>

اختبر هذا <‹/›>

تطابق المتصفحات

IEFirefoxOperaChromeSafari

يدعم جميع المتصفحات الشائعة علامة <img>.

الفرق بين خاصية alt و title للصورة:

علامة alt في الصورة هي النص الذي يظهر كإشارة توضيحية عند عدم عرض الصورة بشكل صحيح.
علامة title في الصورة هي النص الذي يظهر كإشارة توضيحية عند تحريك الفأرة إلى العنصر.

تعريف العلامة واستخدام التعليمات

علامة <img> تعرف الصورة في صفحة HTML.

علامة <img> تحتوي على خاصيتين ضرورية: src و alt.

قد يدعم علامة <img> (اعتمادًا على المتصفح) الأنواع التالية من صيغ الصور: jpeg،gif،png،apng،svg،bmp،bmp ico،png ico.

ملاحظة:技术上، لا يتم إدراج الصورة في صفحة HTML، بل يتم ربطها بصفحة HTML.<img> علامة تهدف إلى إنشاء مكان احتياطي للصورة المشار إليها.

إشارة:من خلال تضمين علامة <img> داخل علامة <a>، أضف رابطًا إلى الصورة في مستند آخر.

الفرق بين HTML 4.01 و HTML5

لا يدعم HTML5 التالي: align،border،hspace،longdesc،vspace.

في HTML 4.01، تم إزالة التالي: align،border،hspace،vspace.

الفرق بين HTML و XHTML

في HTML، لا توجد علامة إنهاء لـ <img>.
في XHTML، يجب إغلاق علامة <img> بشكل صحيح.

الخصائص

New: خاصية جديدة في HTML5.

الخصائص	القيمة	وصف
align	top 　bottom 　middle 　left 　right	لا يدعم HTML5. تم إزالة HTML 4.01 　　تحديد كيفية ترتيب الصورة بناءً على النص المحيط.
alt	text	تحديد النص البديل للصورة.
border	pixels	لا يدعم HTML5. تم إزالة HTML 4.01 　　تحديد الحواف المحيطة بالصورة.
crossoriginHTML5	anonymous use-credentials	إعداد خاصية التكامل عبر الحدود للصورة.
height	pixels	تحديد ارتفاع الصورة.
hspace	pixels	لا يدعم HTML5. تم إزالة HTML 4.01 　　يحدد الفضاء العازل على الجانب الأيسر والجنب الأيمن للصورة
ismap	ismap	يحدد الصورة كخريطة صورة على الخادم
longdesc	URL	لا يدعم HTML5. تم إزالة HTML 4.01 　　يحدد URL يحتوي على وصف طويل للصورة
src	URL	يحدد URL عرض الصورة
usemap	#mapname	يحدد الصورة كخريطة صورة على الجهاز المكتبي
vspace	pixels	لا يدعم HTML5. تم إزالة HTML 4.01 　　يحدد الفضاء العازل في الجزء العلوي والسفلي من الصورة
width	pixels	يحدد عرض الصورة

خصائص العالمية

دعم <img> علامة خصائص العالمية في HTML.

خصائص الحدث

دعم <img> علامة خصائص الحدث في HTML.

تجربة العينة عبر الإنترنت

ترتيب الصورة
هذا المثال يوضح كيفية ترتيب الصورة في النص

تحريك الصورة
هذا المثال يوضح كيفية تحريك الصورة إلى يسار أو يمين الفقرة

تعيين رابط الصورة
هذا المثال يوضح كيفية استخدام الصورة كرابط

إنشاء خريطة صورة
هذا المثال يوضح كيفية إنشاء خريطة صورة تحتوي على منطقة قابلة للنقر. كل منطقة هي رابط

المقالات ذات الصلة

دليل تعليمات HTML:صور HTML

دليل مرجع DOM HTML: مفهوم الصورة

HTML: <input> العلامة HTML: <iframe> العلامة