Вставка изображений в документ. Тег <img>
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

Вставка изображения в документ. Тег <img>

Тег <img> и его атрибут src

Для того, чтобы вставить изображение в документ используется элемент 'img' (от англ. image), формирующийся одиночным тегом <img>, и его атрибут src, который в качестве значения принимает полный или относительный адресный путь к файлу изображения. Браузерами 'img' отображается, как строчный элемент.

Атрибут alt тега <img>

Для случаев, когда загрузка изображений в браузере отключена либо не завершилась, предусмотрен атрибут alt (от англ. alternative), который устанавливает альтернативный текст изображения. При загрузке страницы сперва отображается альтернативный текст, а уже потом, в случае успешной загрузки, само изображение. Следует практически всегда задавать атрибут alt, так как грамотно составленное содержание атрибута (т.е. его значение), кроме всего, позволяет еще и продвинуть страницу в поисковых системах.

Атрибуты width и height тега <img>

В отличие от многих других элементов разметки для элемента 'img' в HTML 5 сохранились атрибуты height и width, которые задают, соответственно, высоту и ширину изображения. Кстати, если указать размеры изображения меньше, чем они есть на самом деле, то размер самого файла при этом меньше не станет. Так что это никак не повлияет на скорость загрузки изображения.

Рассмотрим вставку изображений в документ на примере 4.1. Отображение соответствующей страницы в браузере показано на рис. 4.2.

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<link rel="stylesheet" href="css/style_1.css">
	<script src="javascript/code_1.js"></script>
	<title>Элемент 'img'</title>
</head>
<body>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. 
	<img src="images/img_1.png" alt="House_1"> 
	Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение.
	<img src="images/img_2.png" alt="House_2" width="175px" 
	height="70px"> Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
	Это изображение. Это изображение. Это изображение.<br>
</body>
</html>

Пример 4.1. Использование элемента 'img'

Рис. 4.2. Отображение страницы с использованием элемента 'img' браузером

Из примера хорошо видно, что изображение отображается браузером по умолчанию, как строчный элемент. При этом высота строки подстраивается под высоту изображения. В виду отстутствия файла второго изображения по указанному пути, браузер отобразил вместо него альтернативный текст. А так как размеры изображения были заданы в атрибутах, браузер зарезервировал за ним область соответствующих размеров. Отметим, что браузер Firefox поступает иначе, отображая вместо изображения просто альтернативный текст.

Видеоуроки по курсу HTML

Комментарии (2)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Николай
По поводу атрибутов тега <img> width и height (вроде как за это сейчас отвечает CSS и их юзать не желательно) - читал где-то, что если их все же указывать в теге <img> и задавать им значения загружаемого изображения, то скорость загрузки изображения для его последующего отображения пользователю увеличивается.
№83 от 2017-11-29 13:51:21
Нравится ()
Ответить
Петр Романовский
Николай
Николай
По поводу атрибутов тега <img> width и height (вроде как за это сейчас отвечает CSS и их юзать не желательно) - читал где-то, что если их все же указывать в теге <img> и задавать им значения загружаемого изображения, то скорость загрузки изображения для его последующего отображения пользователю увеличивается.
2017-11-29 13:51:21
Да, Николай, не нужно их юзать, хотя они еще и остались. При чем в независимости от скорости загрузки. HTML нужно стараться использовать только для логической разметки. А вот для оформления использовать CSS.
№86 от 2017-11-29 20:48:19
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!