belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

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

HTML >>>

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

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

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

В отличие от многих других элементов разметки для элемента '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="js/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 поступает иначе, отображая вместо изображения просто альтернативный текст.

Контрольные вопросы и задания

  1. Какой элемент используется для вставки изображений в html-документ?
  2. Опишите основные атрибуты элемента 'img'.

Словарь новых английских слов

interchange [ˈɪntətʃeɪndʒ] – обмен, чередование.
format [ˈfɔːmat] – формат.
image [ˈɪmɪdʒ] – изображение, изображать.
alternative [ɔːlˈtəːnətɪv] – альтернативный, другой.
portable [ˈpɔːtəb(ə)l] – портативный,
переносной, ручной.
network [ˈnɛtwəːk] – сеть.
graphics [ˈɡrafɪks] – графика, проектирование.
height [hʌɪt] – высота, рост.
width [wɪtθ] – ширина, полоса.
use [ˈjuːs] – использование, применение,
использовать, употреблять.
map [mæp] – карта, план.
area [ˈeəriə] – область, зона, участок.
shape [ʃeɪp] – форма, очертание.
coordinates [ˌkəʊˈɔːdɪneɪts] – координаты.
polygon [ˈpɒlɪɡ(ə)n] – многоугольник.
rectangle [ˈrɛktaŋɡ(ə)l] – прямоугольник.
canvas [ˈkanvəs] – холст, полотно.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх