HTML <img> Tag
تگ <img> در HTML یک تصویر را در صفحه قرار می دهد.
مثال:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
direction: rtl;
font: normal 16px "segoe UI";
text-align: center;
}
</style>
</head>
<body>
<p>
این تصویر یک توپ فوتبال است:
</p>
<img src="http://my-project.ir/img/football-ball.png" alt="تصویر توپ فوتبال">
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
همانطور که در مثال بالا میبینیم، صفت src ضروری است. این صفت آدرس تصویری که در نظر داریم در صفحه قرار داده شود را مشخص می کند.
صفت alt توضیح متنی این تصویر را مشخص می کند. این صفت (alt) ضروری نیست اما استفاده از آن می تواند بسیار با اهمیت باشد، چراکه دستگاه های صفحه خوان (که افراد نابیبا از آن استفاده می کنند) می توانند از محتوای تصویر اطلاع پیدا کنند. همچنین اگر بنا به هر دلیلی مرورگر نتواند عکس را لود کند، توضیح متنی آن نمایش داده می شود و کاربر می تواند از محتوای تصویر اطلاع پیدا کند.
صفت ها (Attributes)
alt
توضیح متنی تصویر را مشخص می کند.
height
ارتفاع تصویر را مشخص می کند. مقدار این صفت بر حسب px می باشد.
src
آدرس تصویر را مشخص می کند.
srcset
آدرس تصویر را برای استفاده در موقعیت های متفاوت مشخص می کند.
width
عرض تصویر را مشخص می کند. مقدار این صفت بر حسب px است.
پشتیبانی مرورگرها
تمام مرورگرها از این تگ HTML پشتیبانی می کنند.
