Часто при работе с сайтами требуется вставка картинки в HTML. В данном уроке мы научимся размещать изображения на страницах сайта и познакомимся с атрибутами, которые отвечают за форматирование изображений. Для вставки изображений на HTML-страницу используется специальный тег <img> (от англ. «image», изображение). Данный тег имеет определенные атрибуты.
Как делается вставка картинки в HTML?
Рассмотрим вставку картинки на странице с использованием трех атрибутов на примере. HTML код страницы будет иметь следующий вид:
<img src="картинка.jpg" width="300" height="250">
Атрибут «src» (от анг. «source», источник) указывает место, где хранится изображение. В случае, когда картинка находится не в корневой категории, необходимо указать полный путь до нее.
Атрибуты «width» (ширина) и height (высота) — задают размер изображения соответственно по ширине и высоте. Выравнивание в данном случае будет по умолчанию по левому краю.
Для того, чтобы сделать выравнивание по центру или по правому краю необходимо заключить тег вставки изображения в тег абзаца и прописать соответствующий атрибут.
<p align="center"><img src="картинка.jpg" width="300" height="250"></p>
Теперь рассмотрим более сложный пример:
<p><img src="картинка.jpg" width="300" height="250" border="1" border-color="red" align="left" hspace="10" vspace="10" alt="Бабочка"></p>
Ширина изображения — 300 пикселей, высота — 250 пикселей, толщина рамки — 1 пиксель, цвет рамки — красный. Изображение обтекает текст справа, отступ от изображения до текста по горизонтали и вертикали составляет 10 пикселей.
С помощью атрибута «border» задается рамка, «border-color» позволяет задать цвет рамки. Атрибут «align» прописан непосредственно в теге вставки изображения <img>, благодаря этому картинка обтекается текстом. Атрибуты «hspace» и «vspace» — это отступы от изображения до текста, соответственно, по горизонтали и вертикали. Атрибут «alt» позволяет указать описание для картинки.
Задача вставки картинки в HTML-документ стоит очень часто, это совсем не сложно. Однако, если вы вдруг забыли как это делается, то наш урок окажется весьма кстати.
