در این جلسه از دوره آموزش html وب سایت همراه آی سی تی به بررسی نحوه وارد کردن تصاویر در صفحات وب خواهیم پرداخت.

تصاویر HTML :

تصاویر HTML می توانند طراحی و ظاهر یک صفحه وب را بهبود بخشند.
تصاویر HTML با برچسب <img> تعریف می شوند.
برچسب <img> یک تگ تنها (single tag) است،و تگ بسته ندارد.
ویژگی src نشانی اینترنتی (آدرس وب) تصویر را مشخص می کند.

<img src="url">

ویژگی alt :

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

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>

نکته : این تگ در سئو وب سایت بسیار مهم است و حتما باید از آن استفاده شود.

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

شما می توانید به تصاویر HTML خصوصیات اعمال کنید.همانطور که در تصویر بالا می بینیدبرای این که سایز مشخصی به تصویر بدهیداز تگ Width برای مشخص کردن عرض و از تگ Height برای مشخص کردن ارتفاع یک تصویر استفاده کنید.به طور پیش فرض منطق پیکسل برای عرض و ارتفاع عکس وجود دارد.اما می توان برحسب درصد هم طول و عرض به آنها داد.

توجه: همیشه عرض و ارتفاع تصاویر HTML را مشخص کنید. اگر عرض و ارتفاع مشخص نشده باشند، هنگامی که تصویر بارگیری می شود، صفحه ممکن است دچار مشکل گردد.

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

</body>
</html>

عرض و ارتفاع یا style؟

هر دو ویژگی عرض، ارتفاع و style در HTML5 معتبر هستند.
با این حال، ما پیشنهاد می کنیم با استفاده از تگ style به یک تصویر عرض و ارتفاع بدهید. . این موضوع باعث می شود که در رزولوشن های مختلف از تغییر اندازه تصاویر جلوگیری شود.

<!DOCTYPE html>
<html>
<head>
<style>
/* This stylesheet sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body>

<h2>Styling Images</h2>
<p>The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

تصاویر در یک سرور دیگر :

برخی از وب سایت ها تصاویر خود را در سرورهای ذخیره تصویرقرار می دهند.
می توانید به تصاویر HTML از هر آدرس وب در جهان دسترسی داشته باشید.

<!DOCTYPE html>
<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

</body>
</html>

شما می توانید اطلاعات بیشتر در مورد مسیرهای فایل را در جلسه فایل های HTML را بخوانید.

تصاویر متحرک :

درhtml می توانید از تصاویر متحرک استفاده کنید.به مثال زیر دقت کنید.

استاندارد GIF اجازه می دهد تصاویر متحرک باشند.

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

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

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>

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

<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>

</body>
</html>

نکته : برای جلوگیری از نمایش حاشیه به طور پیش فرض در برخی از مرورگرها border=0 قرار دهید.

تصویر شناور :

در بسیاری از مواقع برای اینکه تصاویر در کنار هم قرار بگیرند نیاز است آنها را به سمت راست یا چپ شناور کنیم.که با استفاده از خصوصیت float می توانیم این کار را انجام دهیم.به مثال زیر دقت کنید.

<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

</body>
</html>

دقت کنید که در این قسمت برای تاکید بر آشنایی با تگ float سایر خصوصیات خالی گذاشته شده ولی در هنگام واردکردن کدها در ویرایشگر بایدحتما آدرس دهی به تگ imgو متن دهی به تگ alt انجام شود.

نقشه های تصویر :

از تگ <map> برای تعریف یک نقشه تصویر استفاده کنید. یک نقشه تصویر یک تصویر با مناطق قابل کلیک است.که شما می توانید با کلیک بر روی هر قسمت از تصویر به صفحه یا قسمتی از صفحه که برای آن در نظر گرفته شده است بروید. نمونه ای از نقشه تصویر نقشه ایران است که در سایت شیپور ارائه شده است.به مثال زیر دقت کنید.

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<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="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

تصویر پس زمینه :

بااستفاده از تگ های css می توانید یک تصویر دلخواه را به عنوان تصویر پس زمینه انتخاب کنید.به صورت پیش فرض تصاویر در html اگر کوچکتر از محدوده عنصری باشند که در آن قرار می گیرند تکرار می شوند. مثلا در این مثال ما تصویر را در body قرار داده ایم که به صورت پیش فرض تکرار شده است.

<!DOCTYPE html>
<html>
<body style="background-image:url('clouds.jpg');">

<h2>Background Image</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p style="background-image:url('clouds.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for this paragraph.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>
</html>

برای یادگیری بیشتر در مورد کنترل هایی که در مورد پس زمینه وجود دارد به دوره آموزش css ما مراجعه کنید.

یکی ازمباحث بسیار مهم در طراحی قالب اچ تی ام ال وب سایت بحث نحوه نمایش تصاویر در رزولوشن های مختلف است که تصاویر باید قابلیت انعطاف پذیری داشته باشند و دچار مشکل نشوندکه به عبارتی به این موضوع ریسپانسیو بودن قالب html سایت گفته می شود.شاید شما عکسی را در صفحه خودبه کاربرده باشیدکه در گوشی موبایل خوب نمایش داده نشود ولی در دسکتاپ کامپیوتر مشکلی از لحاظ نمایش نداشته باشد.برای حل این چنین مشکلاتی html5 تگ<picture> را برای افزودن انعطاف پذیری بیشتر در هنگام تعیین منابع تصویر معرفی کرد.

تگ <picture> حاوی تعدادی از تگ های <source> است که هر کدام به منبع تصویری اشاره دارند. به این ترتیب مرورگر می تواند تصویری را انتخاب کند که برای نمایش در دستگاه کاربر مناسب باشد.هر تگ <source> دارای صفاتی است که تصویر مناسب را برای هر رزولوشن توصیف می کند.مرورگر اندازه ها را تطبیق می دهد و اندازه مناسب را انتخاب می کنند.

به مثال زیر دقت نمایید.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
<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>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>