تصاویرHTML

تصاویر HTML

تصاویر می‌توانند طراحی و ظاهر یک صفحه وب را بهبود بخشند.

مثال

HTML

<img src="pic_trulli.jpg" alt="Italian Trulli">

مثال

<img src="img_girl.jpg" alt="Girl in a jacket">

مثال

<img src="img_chania.jpg" alt="Flowers in Chania">

نحو (Syntax) تصاویر HTML

تگ <img> HTML برای قرار دادن یک تصویر در صفحه وب استفاده می‌شود. تصاویر از نظر فنی در یک صفحه وب "جاسازی" نمی‌شوند؛ بلکه تصاویر به صفحات وب "پیوند" داده می‌شوند. تگ <img> یک فضای نگهدارنده برای تصویر ارجاع داده شده ایجاد می‌کند. تگ <img> خالی است، فقط شامل ویژگی‌ها (attributes) است و تگ بسته شدن ندارد. تگ <img> دو ویژگی الزامی دارد:

src - مسیر (path) تصویر را مشخص می‌کند.
alt - یک متن جایگزین برای تصویر را مشخص می‌کند.

نحو (Syntax)

<img src="url" alt="alternatetext">

ویژگی src

ویژگی الزامی src مسیر (URL) تصویر را مشخص می‌کند. نکته: هنگامی که یک صفحه وب بارگذاری می‌شود، این مرورگر است که در آن لحظه تصویر را از یک وب سرور دریافت کرده و آن را در صفحه قرار می‌دهد. بنابراین، مطمئن شوید که تصویر واقعاً در همان مکان نسبت به صفحه وب باقی می‌ماند، در غیر این صورت بازدیدکنندگان شما یک آیکون لینک خراب را مشاهده خواهند کرد. آیکون لینک خراب و متن alt در صورتی نمایش داده می‌شوند که مرورگر نتواند تصویر را پیدا کند.

مثال

<img src="img_chania.jpg" alt="Flowers in Chania">

ویژگی alt

ویژگی الزامی alt یک متن جایگزین برای تصویر فراهم می‌کند، در صورتی که کاربر به هر دلیلی نتواند آن را مشاهده کند (به دلیل اتصال آهسته، خطایی در ویژگی src، یا اگر کاربر از یک صفحه خوان (screen reader) استفاده می‌کند). مقدار ویژگی alt باید تصویر را توصیف کند:

مثال

<img src="img_chania.jpg" alt="Flowers in Chania">

اگر مرورگر نتواند تصویری را پیدا کند، مقدار ویژگی alt را نمایش می‌دهد:

مثال

<img src="wrongname.gif" alt="Flowers in Chania">

نکته: یک صفحه خوان (screen reader) یک برنامه نرم‌افزاری است که کد HTML را می‌خواند و به کاربر اجازه می‌دهد محتوا را "گوش دهد". صفحه خوان‌ها برای افرادی که مشکلات بینایی یا ناتوانی یادگیری دارند مفید هستند.

اندازه تصویر - عرض و ارتفاع

می‌توانید از ویژگی style برای مشخص کردن عرض و ارتفاع یک تصویر استفاده کنید.

مثال

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

همچنین، می‌توانید از ویژگی‌های width و height استفاده کنید:

مثال

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

ویژگی‌های width و height همیشه عرض و ارتفاع تصویر را بر حسب پیکسل تعریف می‌کنند. نکته: همیشه عرض و ارتفاع یک تصویر را مشخص کنید. اگر عرض و ارتفاع مشخص نشوند، ممکن است صفحه وب هنگام بارگذاری تصویر دچار لرزش شود.

عرض و ارتفاع، یا Style؟

ویژگی‌های width، height و style همگی در HTML معتبر هستند. با این حال، ما استفاده از ویژگی style را پیشنهاد می‌کنیم. این کار از تغییر اندازه تصاویر توسط شیوه نامه‌ها (style sheets) جلوگیری می‌کند:

مثال

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: 100%;
        }
    </style>
</head>
<body>

    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

    <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

تصاویر در پوشه‌ای دیگر

اگر تصاویر خود را در یک زیرپوشه دارید، باید نام پوشه را در ویژگی src وارد کنید:

مثال

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

تصاویر در سرور/وب‌سایت دیگر

برخی از وب‌سایت‌ها به تصویری در سرور دیگر اشاره می‌کنند. برای اشاره به تصویری در سرور دیگر، باید یک URL مطلق (کامل) را در ویژگی src مشخص کنید:

مثال

<img src="https://www.codoloper.com/images/w3schools_green.jpg" alt="codoloper.com">

نکاتی در مورد تصاویر خارجی: تصاویر خارجی ممکن است تحت حق کپی‌رایت باشند. اگر اجازه استفاده از آن را دریافت نکنید، ممکن است قوانین کپی‌رایت را نقض کنید. علاوه بر این، شما نمی‌توانید تصاویر خارجی را کنترل کنید؛ ممکن است ناگهان حذف یا تغییر کنند.

تصاویر متحرک

HTML تصاویر GIF متحرک را مجاز می‌داند:

مثال

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">



تصویر به عنوان لینک

برای استفاده از یک تصویر به عنوان لینک، تگ <img> را درون تگ <a> قرار دهید:

مثال

<a href="default.asp">
    <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>



شناور شدن تصویر (Image Floating)

از ویژگی float CSS استفاده کنید تا تصویر به سمت راست یا چپ متن شناور شود:

مثال

<p>
    <img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
    The image will float to the right of the text.
</p>

<p>
    <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
    The image will float to the left of the text.
</p>

نکته: برای کسب اطلاعات بیشتر در مورد CSS Float، آموزش CSS Float ما را بخوانید.

فرمت‌های رایج تصویر

در اینجا رایج‌ترین انواع فایل‌های تصویری آورده شده است که در همه مرورگرها (کروم، اج، فایرفاکس، سافاری، اپرا) پشتیبانی می‌شوند:

مخفف	فرمت فایل	پسوند فایل
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

خلاصه فصل

از عنصر <img> HTML برای تعریف یک تصویر استفاده کنید.
از ویژگی src HTML برای تعریف URL تصویر استفاده کنید.
از ویژگی alt HTML برای تعریف یک متن جایگزین برای یک تصویر، در صورتی که قابل نمایش نباشد، استفاده کنید.
از ویژگی‌های width و height HTML یا ویژگی‌های width و height CSS برای تعریف اندازه تصویر استفاده کنید.
از ویژگی float CSS برای شناور شدن تصویر به سمت چپ یا راست استفاده کنید.

نکته: بارگذاری تصاویر بزرگ زمان‌بر است و می‌تواند سرعت صفحه وب شما را کاهش دهد. از تصاویر با دقت استفاده کنید.

تگ‌های تصویر HTML

تگ	توضیحات
`<img>`	یک تصویر را تعریف می‌کند
`<map>`	یک نقشه تصویری (image map) را تعریف می‌کند
`<area>`	یک منطقه قابل کلیک را در داخل یک نقشه تصویری تعریف می‌کند
`<picture>`	یک کانتینر برای چندین منبع تصویر تعریف می‌کند

<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html>

<p> <img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text. </p> <p> <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text. </p>

مخفف	فرمت فایل	پسوند فایل
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

مخفف

فرمت فایل

پسوند فایل

APNG

Animated Portable Network Graphics

.apng

GIF

Graphics Interchange Format

.gif

ICO

Microsoft Icon

.ico, .cur

JPEG

Joint Photographic Expert Group image

.jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG

Portable Network Graphics

.png

SVG

Scalable Vector Graphics

.svg

تگ	توضیحات
`<img>`	یک تصویر را تعریف می‌کند
`<map>`	یک نقشه تصویری (image map) را تعریف می‌کند
`<area>`	یک منطقه قابل کلیک را در داخل یک نقشه تصویری تعریف می‌کند
`<picture>`	یک کانتینر برای چندین منبع تصویر تعریف می‌کند

تگ

توضیحات

<img>

یک تصویر را تعریف می‌کند

<map>

یک نقشه تصویری (image map) را تعریف می‌کند

<area>

یک منطقه قابل کلیک را در داخل یک نقشه تصویری تعریف می‌کند

<picture>

یک کانتینر برای چندین منبع تصویر تعریف می‌کند