Изучаем изображения в HTML самостоятельно, тег img

21 марта, 2018 Максим Метелев 19863 просмотров Комментариев нет

Всех рад видеть в очередном 15 уроке посвященному изучению изображений в HTML. По большому счету, все сайты в интернете — это структурированный набор картинок, графики, текста, упорядоченный и стилизованный посредством CSS. Благодаря изображениям сайты выглядят более привлекательно, что улучшает внешний вид проекта.

HTML изображения

Содержание

1 Синтаксис изображений в HTML
2 Атрибут картинки ALT у изображений
3 Использовать атрибуты width и height или все-таки стили CSS?
4 Изображения, хранящиеся в других директориях/папках
5 Изображения на стороннем сервере
6 Анимированные изображения
7 Изображения в HTML как ссылка на документ
8 Обтекание изображения
9 Image Maps или карта изображения
10 Фоновое изображение
11 Элемент <picture>
12 Читатели HTML экрана

Синтаксис изображений в HTML

Здесь все достаточно просто. Все изображения, картинки в HTML отображаются с помощью одинарного тега <img>

Сам по себе он пустой и внутри него содержатся только атрибуты, определяющие картинку и путь до нее, который определен атрибутом src (source — источник картинки).

<img src="url">

1	<img src="url">

Атрибут картинки ALT у изображений

ALT — это альтернативный текст к нашим изображениям или проще говоря, мы описываем нашу графику с помощью текста, благодаря этому атрибуту. Напоминаю про его важность в SEO продвижении. Поскольку поиск документов также осуществляется по картинкам, ваше изображение должно быть подписано, чтобы ваш ресурс или статью с данным изображением нашли пользователи мировой паутины.

Также использование альтернативного текста с помощью атрибута alt необходимо, если у человека в браузере отключены картинки, или ошибочно задан путь к картинки (когда она оказалась «битой»), с целью экономии трафика или по каким-то другим причинам. Тогда вместо картинки, будет блок с альтернативным текстом.

<img src="img_chania.jpg" alt="Цветы в Ханье">

1	<img src="img_chania.jpg" alt="Цветы в Ханье">

Использование атрибута alt у картинок в html

Если браузер пользователя не сможет найти картинку, он возьмет ее описание и покажет:

<img src="wrongname.gif" alt="Цветы в Ханье">

1	<img src="wrongname.gif" alt="Цветы в Ханье">

"Битое" изображение и рядом с ним альтернативный текст

Примечание: использование атрибута alt крайне важно и обязательно. В конечном счете без него страница не будет корректно проверяться.

Кроме этого в изображениях html зачастую используются также и эти атрибуты width (ширина) и height (высота), которые задают размеры картинки в пикселях.

<img src="img_girl.jpg" alt="Девочка в жакете" width="500" height="600">

1	<img src="img_girl.jpg" alt="Девочка в жакете" width="500" height="600">

Атрибуты width и height у изображения в Html

Важно! Всегда указывайте размеры изображения, в противном случае картинка не отобразится в браузере в полном объеме и страница может мерцать при загрузке.

Использовать атрибуты width и height или все-таки стили CSS?

Все перечисленные атрибуты, включая стили CSS допустимы в HTML 5. Но мы рекомендуем использовать CSS, поскольку именно в нем будут задаваться жесткие параметры для всех изображений на сайте. Вот пример ниже:

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

<!DOCTYPE html>

<html>

<head>

<style>

img {

width:100%;

}

</style>

</head>

<body>

</body>

</html>

Использование атрибута style в изображении

Немного поясню пример выше. В стилях, которые мы применили ко всем изображениям в документе мы задали размер изображения тегу img равное 100%, т.е наша картинка растягивается на всю ширину экрана. При этом, как вы успели заметить, размеры картинки были заданы атрибуты внутри нее в теле веб документа, а именно: width="128" height="128"

При этом браузер взял за основу правило, которое задавалось внутри парных тегов style:

<style>
img { 
    width:100%; 
}
</style>

<style>

img {

width:100%;

}

</style>

А вот уже следующая картинка не подверглась этим изменениям. А почему, спросите вы? А потому что по принципу приоритета внутри картинки в теле веб документа мы задали отдельный стиль: style="width:128px;height:128px;" Таким образом, стили, которые заключены между парными тегами style на картинку «не подействуют», потому что внутри нее заданы свои стили. Думаю, что понятно объяснил.

Изображения, хранящиеся в других директориях/папках

Если путь не задан, то браузер будет искать наше изображение в той же папке, где находится наш веб документ. Однако принято хранить все картинки и медиафайлы в специальной папке с названием или images или img.

Чтобы браузер правильно и корректно отобразил вашу картинку до нее нужно указать правильный путь (т.е src).

<img src="/images/html5.gif" alt="HTML5 Иконка" style="width:128px;height:128px;">

1	<img src="/images/html5.gif" alt="HTML5 Иконка" style="width:128px;height:128px;">

Указываем путь до картинки в папке

Немного проясню. В примере выше наше изображение находится относительно папки с названием images.

Изображения на стороннем сервере

Некоторые веб-сайты, чтобы снизить нагрузку на хостинг, хранят изображения на стороннем сервере. Т.е по факту вы можете получить доступ к изображениям с любого адреса в мире.

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

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

Доступ к изображению по прямой ссылке на стороннем сервере

Анимированные изображения

Благодаря HTML вы можете добавлять анимированные картинки или gif анимацию.

<img src="programming.gif" alt="Компьютерный человек" style="width:48px;height:48px;">

1	<img src="programming.gif" alt="Компьютерный человек" style="width:48px;height:48px;">

Изображения в HTML как ссылка на документ

В предыдущем уроке мы рассказывали про текстовые ссылки и вскользь упомянули о том, что изображения можно также задавать ссылкой на любой другой веб документ. Для этого нашу картинку с тегом img нужно поместить внутри тега <a><img src="url here" /></a>

<a href="/">
  <img src="smiley.gif" alt="Обучение созданию сайтов на Wordpress" style="width:42px;height:42px;border:0;">
</a>

</a>

Изображение в HTML в качестве ссылки на другой документ или страницу

Примечание: Для того, чтобы не появлялась граница (рамка) вокруг изображения, когда оно будет являться ссылкой, просто добавьте в стилях значение border: 0; для браузеров IE 9 (и ранние версии).

Обтекание изображения

Используя в CSS свойство 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>

The image will float to the right of the text.</p>

The image will float to the left of the text.</p>

Обтекание картинки текстом с помощью свойства float

Свойство float может принимать значения right, left, none. Более подробно мы это разберем на последующих уроках, связанных с CSS.

Image Maps или карта изображения

Есть такой тег в html и называется он <map> . Его миссия в интернете, а конкретно для картинок — выделить нужную область изображения по координатам. Карта изображения — это некоторая выделенная интерактивная область. В примере ниже мы выделили область компьютера, чашки с кофе и телефоном:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

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

</map>

Карта изображения с помощью тега map

Можете создать отдельный пустой веб документ с расширение .html с помощью программы Блокнот рядом скопируйте данную картинку, скопируйте код и вы получите результат в браузере.

Атрибут name тега <map> связан с атрибутом usemap <img> и создает связь между изображением и картой. Внутри него содержится несколько тегов area , которые определяют области, на которые можно навести курсом мышки и покликать.

Очень часто данную технологию используют веб-разработчики для создания сайтов для застройщиков, где нужно выделить конкретную область (этаж или пролет) на рендере (картинке со зданием). В будущих уроках я об этом поговорю. Это будет очень интересно. Я расскажу про свое ноу-хау!

Фоновое изображение

При создании сайтов очень часто картинка может быть использована как фон (подложка). Чтобы сделать фоновое изображение вам необходимо прописать в стилях CSS следующее свойство под названием background-image :

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

<h2>Фоновое изображение</h2>

</body>

<h2>Фоновое изображение</h2>

</body>

Его мы задаем для элемента body

Получим такой результат:

Задаем фоновое изображение для нашей страницы веб-документа

Немного поясню, наша картинка в заданном размере просто замостила всю площадь веб-страницы.

А теперь еще один пример: зададим фоновое изображение для тега p (параграф)

<body>

<p style="background-image:url('clouds.jpg')">
...
</p>

</body>

<body>

...

</p>

</body>

Вот, что получим:

Задаем фон картинкой для тега параграфа

Элемент <picture>

В HTML 5 добавился новый элемент с названием <picture> для большей гибкости при указании ресурсов для изображений.

Элемент <picture> содержит внутри себя несколько элементов <source> , каждый из которых ссылается на разные источники изображений. Таким образом, браузер может выбрать изображение, которое наилучшим образом соответствует текущему виду и / или устройству.

Каждый элемент <source> имеет атрибуты, описывающие, когда их изображение является наиболее подходящим.

Браузер будет использовать первый элемент <source> с соответствующими значениями атрибутов и игнорировать следующие элементы <source> .

Пример ниже все наглядно показывает. В первом случае, если окно браузера имеет размеры минимум в 650px покажется одно изображение, а в другом случае если больше, чем 465 пикселей, то будет уже другая картинка.

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

</picture>

По умолчанию у нас отображается обычная картинка в теге img

Обычная картинка при стандартном разрешении экрана компьютера

А теперь начнем уменьшать наш размер экрана до планшетного состояния и получим первую картинку:

Достигли минимума в 650 пикселей и получили первую картинку

Затем продолжаем уменьшать размер экрана до мобильного формата и уже получаем другое изображение:

При уменьшении размера экрана уже появляется другое изображение

Примечание. Всегда указывайте элемент <img> в качестве последнего дочернего элемента <picture> . Элемент <img> используется браузерами, которые не поддерживают элемент <picture> , или если ни один из тегов <source> не был сопоставлен.

Читатели HTML экрана

Есть такие специальные программы — считыватели с экрана, которые сканируют код, преобразуют его в текст и позволяют пользователю как бы «слушать» содержимое страницы. Такой скриннинг полезен для слабовидящих людей, слепых или обученных инвалидов.

На этом все, что я хотел вам рассказать про изображения в html, я считаю, что донес в удобной форме. Вам остается только практиковаться в умении создавать простенькие странички, благодаря серии моих уроков. Совсем скоро встретимся с вами в новом выпуске. Следите за обновлениями блога! Удачного дня!

Рубрики: Обучение html