تصاویر (Images)
«تصاویر HTML» صفحه را زنده می کنند. تگ <img> تصویر را نشان می دهد. «ویژگی (Attribute)» یعنی تنظیمی برای یک تگ، مثل src یا alt. باهم قدم به قدم جلو می رویم.
سینتکس تگ img
تگ <img> خالی است. یعنی تگ بسته ندارد. فقط ویژگی ها را می گیرد.
<img src="pic_trulli.jpg" alt="Italian Trulli">
ویژگی src (مسیر تصویر)
ویژگی src مسیر تصویر را می دهد. اگر مسیر عوض شود، تصویر پیدا نمی شود.
<img src="img_chania.jpg" alt="Flowers in Chania">
ویژگی alt (متن جایگزین)
وقتی تصویر لود نشود، متن alt نشان داده می شود. همچنین برای صفحه خوان ها لازم است.
<img src="wrongname.gif" alt="Flowers in Chania">
اندازه تصویر: width و height
می توانید اندازه را با style بدهید. یا از ویژگی ها استفاده کنید.
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
نکته: تعیین اندازه، پرش چیدمان را کم می کند.
کدام بهتر است؟ width/height یا style؟
هر دو معتبر هستند. اما استفاده از style جلوی تغییر ناخواسته اندازه را می گیرد.
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
تصاویر در پوشه ای دیگر
اگر تصویر در پوشه فرعی است، نام پوشه را در src بنویسید.
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
تصویر از وب سایت دیگر
برای تصویر خارجی، آدرس کامل بدهید. مراقب کپی رایت باشید.
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
هشدار: تصویر خارجی ممکن است حذف یا تغییر شود.
تصویر متحرک (Animated GIF)
می توانید GIF متحرک بگذارید. زیاد استفاده نکنید تا صفحه سنگین نشود.
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
تصویر به عنوان لینک
می توانید تصویر را داخل لینک بگذارید. کاربر روی تصویر کلیک می کند.
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
شناوری تصویر با float
با float تصویر چپ یا راست متن می ایستد.
<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 — تصاویر PNG متحرک.
- GIF — فرمت قدیمی و متحرک.
- ICO — آیکون ها و فاوآیکون ها.
- JPEG — مناسب عکس ها.
- PNG — شفافیت و کیفیت خوب.
- SVG — برداری و مقیاس پذیر.
جمع بندی سریع
- همیشه alt بنویسید.
- اندازه را از قبل تعیین کنید.
- مسیر src را دقیق تنظیم کنید.
- برای لینک، تصویر را داخل a بگذارید.
- از تصاویر HTML با حوصله استفاده کنید.