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

Последнее обновление: 08.04.2016

Для вывода изображений в HTML используется элемент img. Этот элемент представляет нам два важных атрибута:

  • src: путь к изображению. Это может быть относительный или абсолютный путь в файловой системе или адрес в интернете

  • alt: текстовое описание изображения. Если браузер по каким-то причинам не может отобразить изображение (например, если у атрибута src некорректно задан путь), то браузер показывает вместо самой картинки данное текстовое описание.

    Атрибут alt еще важен тем, что поисковые системы по текстовому описанию могут индексировать изображение.

Например, положим в ту же папку, где у нас лежит файл index.html, какой-нибудь файл изображения. И затем отобразим его на веб-странице:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Тег img в HTML5</title>
	</head>
	<body>
		<img src="dubi.png" alt="Зимняя равнина" />
	</body>
</html>
Тег img в HTML5

В моем случае файл изображения называется dubi.png, и он находится в одной папке с веб-странице index.html. При этом надо учитывать, что img является пустым элементом, то есть не содержим закрывающегося тега.

Используя стилевые особенности, в частности, отступы и обтекание, можно комбинировать изображения с текстом. Например:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Тег img в HTML5</title>
	</head>
	<body>
		<div>
			<img src="dubi.png" alt="Зимняя равнина" style="float:left; margin-right:10px;" />
			<h1>Lorem Ipsum</h1>
			<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. 
				Lorem Ipsum has been the industry....
		</div>
	</body>
</html>
Обтекание изображения текстом в HTML5

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850