امروزه از تصاویر تقریبا در همه ی صفحات وب استفاده شده است، زیرا تصاویر طراحی و ظاهر صفحات وب را بهتر و زیباتر می کنند. در این فصل به آموزش استفاده از تصاویر در صفحات HTML و همچنین معرفی و استفاده از صفات و ویژگی های آن پرداخته ایم.
نحوه استفاده از تصاویر در HTML
در HTML تصاویر با تگ <img> تعریف می شوند.
تگ <img> از نوع عناصر خالی یا empty است، این تگ تنها حاوی صفات یا attribute ها است و فاقد تگ پایانی است.
صفت src آدرس URL تصویری را که می خواهیم از آن استفاده کنیم مشخص می کند.
صفت alt
اگر کاربر به هر دلیلی تنواند تصویر را مشاهده کند (به دلیل سرعت پایین اینترنت، خطایی در صفت src، یا اگر کاربر از نرم افزارهای خواننده صفحه یا screen reader استفاده کند)، مقدار یا value ای که برای صفت alt تعریف شده به کاربر نشان داده می شود.
مقدار صفت alt باید به موضوع تصویر مرتبط باشد:
همچنین اگر مرورگر نتواند تصویری را پیدا کند، مقدار صفت alt را به جای آن نمایش می دهد:
نکته: استفاده از صفت alt لازم است. استفاده نکردن از این صفت باعث پایین آمدن اعتبار صفحه شما نزد موتورهای جستجو می شود.
اندازه تصاویر - عرض و ارتفاع
شما می توانید با استفاده از صفت style برای مشخص کردن عرض (width) و ارتفاع (height) یک تصویر استفاده کنید:
مثال
روشی دیگر برای مشخص کردن عرض و ارتفاع یک تصویر استفاده از صفات width و height است:
صفات width و height همیشه عرض و ارتفاع تصاویر را در واحد پیکسل مشخص می کنند.
نکته: همیشه عرض و ارتفاع تصاویر را مشخص کنید. اگر عرض و ارتفاع تصویر مشخص نشده باشد، در حین بارگیری تصویر صفحه وب سایت می لرزد.
استفاده از صفات width و height بهتر است یا صفت style؟
قبل از پاسخ به این سوال باید بگوییم که استفاده از هر سه صفت width و height و style در HTML معتبر است.
با این حال، ما پیشنهاد می کنیم از صفت style استفاده کنید، به این دلیل که این کار مانع از تعییر اندازه تصویر شما به دلیل استفاده از فایل های CSS در روش های internal و External می شود:
مثال
<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 تنها نام تصویر را استفاده کنیم، مرورگر انتظار دارد که تصویر را در همان پوشه ای پیدا کند که آن صفحه وب در آن قرار دارد.
با این حال، ذخیره کردن تصویر در یک زیر پوشه معمول تر است. بعد از قرار دادن تصویر در یک زیر پوشه باید نامه آن پوشه را به همراه نام تصویر به روش زیر در صفت src وارد کنید.
مثال
استفاده از تصویری در سرور دیگر
ممکن است که بعضی از وبسایت ها تصاویر خود را روی سرورهایی که فقط برای ذخیره تصاویر هستند دخیره کنند و یا بخواهند از تصویری که روی سروری دیگری وجود دارد استفاده کنند.
در واقع، شما می توانید به هر تصویری در سطح وب به واسطه آدرس URL کامل آن تصویر دسترسی داشته باشید. در مثال زیر با استفاده از همین روش از یک تصویر استفاده شده است:
مثال
تصاویر متحرک
در HTML استفاده از تصاویر متحرک یا Gif ها مجاز است. شما به روش زیر می توانید از گیف ها استفاده کنید:
مثال
استفاده از تصویر به عنوان لینک
برای استفاده از تصویر به عنوان لینک، تگ <img> را درون تگ <a> قرار دهید:
مثال
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
نکته: مقدار border:0; که به مثال بالا اضافه شده، به این دلیل است که در مرورگر IE9 (و نسخه های پایین تر) به صورت پیشفرض یک بوردر به عکس های لینک شده اضافه می گردد.
استفاده از صفت float برای تصاویر
شما می توانید با استفاده از صفت float استفاده کنید تا اجازه دهید که تصویر در سمت راست یا چپ متن قرار بگیرد:
مثال
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>
تبدیل کردن تصویر به نقشه
تگ <map> یک image-map را تعریف می کند. یک image-map تصویری است که نواحی مختلف آن قابل کلیک کردن است.
در تصویر زیر شما میتوانید بر روی رایانه، تلفن و یا فنجان قهوه کلیک کنید:
مثال
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
صفت name در تگ <map> به صفت usename در تگ <img> مرتبط است، همچنین این دو صفت باعث ایجاد ارتباط بین این دو تگ می شوند.
عنصر <map> شامل تعدادی تگ <area> نیز هست که مناطق قابل کلیک در image-map را تعریف می کنند.
استفاده از تصویر به عنوان پس زمینه
برای استفاده از تصویر به عنوان پس زمینه یک عنصر HTML، از خاصیت background-image مانند مثال زیر استفاده کنید:
مثال
برای اضافه کردن عکس پس زمینه به یک صفحه وب، خاصیت background-image را به عنصر <body> اضافه کنید:
<h2>Background Image</h2>
</body>
مثال
برای اضافه کردن عکس پس زمینه به یک پاراگراف، خاصیت background-image را به عنصر <p> اضافه کنید:
<p style="background-image:url('clouds.jpg');">
...
</p>
</body>
عنصر <picture> در HTML
HTML5 عنصر <picture> را معرفی کرد تا انعطاف پذیری بیشتری برای مشخص کردن منابع تصویر و جود داشته باشد.
عنصر <picture> حاوی تعدادی عنصر <source> است که برای هر یک منبع تصویری متفاوت تعریف می شود. به این ترتیب مرورگر می تواند تصویری متناسب با صفحه نمایش ای که در آن نمایش داده می شود انتخاب کند.
هر عنصر <source> دارای صفاتی است که توصیف می کند، کدام تصویر مناسب تر است.
مرورگر اولین عنصر <source> را که مناسب باشد (با توجه به مقادیری که برای صفت آن مشخص شده است)، انتخاب می کند و بقیه ی عناصر <source> زیر آن را نادیده می گیرد.
مثال
تصویر اول تا زمانی نشان داده می شود که عرض پنجره مرورگر بیشتر از 650 پیکسل باشد و تصویر دوم زمانی که عرض پنجره ی مرورگر بین 465 تا 650 پیکسل باشد نمایش داده می شود، تصویر سوم نیز زمانی نشان داده میشود که عرض پنجره مرورگر از 450 پیکسل کمتر شود.
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
توجه: همیشه یک عنصر <img> را به عنوان آخرین زیر عنصر <picture> اضافه کنید. اگر عنصر <picture> توسط مرورگر پشتیبانی نشود و یا اگر هیچ یک از تگ های <source> با یکدیگر مطابقت نداشته باشند، مرورگر از عنصر <img> استفاده می کند.
نرم افزارهای خواننده صفحه (Screen Readers)
خواننده صفحه نمایش یک نرم افزار است که کدهای HTML را می خواند و آن ها را به متن تبدیل می کند و سپس به کاربر اجازه می دهد تا به محتوای صفحات وب گوش دهد. نرم افزارهای خواننده صفحه نمایش برای افراد نابینا و یا افرادی که اختلال یادگیری دارند مفید است.
