Показать Меню
falbar Основы HTML

Урок 13. Учимся управлять изображениями в HTML

Основы HTML

Управление изображениями в HTML одна из наиболее важных и незаменимых частей работы с документом. В статье мы разберем все принципы и способы этой работы.

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

Браузер анализируя HTML документ при встречи img создаёт безразмерную область, в которую в последствии загружает картинку. Во время загрузки изображения он определяет истинные её размеры и раздвигает эту область. Тут можно сделать промежуточный вывод: по возможности лучше всегда самому прописывать размеры картинок это избавит браузер от лишней работы и ускорит загрузку изображения.

Сама же запись элемента выглядит так, в неё входят два атрибута src(путь до файла) и alt(альтернативный текст, если изображение не найдено):

<img src="путь_до_файла" alt="картинка" />

Если нам необходимо указать размеры, то добавляем атрибуты width и height.

<img src="путь_до_файла" width="ширина" height="высота" alt="картинка" />

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

HTML вставка картинки

Если нам нужно выровнять изображение, то следует воспользоваться атрибутом align. Он может принимать пять значений: top(по верхнему краю), middle(по центру), bottom(стоит по умолчанию, по низу), left(по левому краю) и right(по правому краю).

<img src="img.jpg" align="middle" width="128" height="128" alt="image" />

HTML выравнивание картинки

<img src="img.jpg" align="bottom" width="128" height="128" alt="image" />

HTML выравнивание картинки №2

<img src="img.jpg" align="left" width="128" height="128" alt="image" />

HTML выравнивание картинки №3

<img src="img.jpg" align="right" width="128" height="128" alt="image" />

HTML выравнивание картинки №4

Чтобы указать отступы для изображения используются атрибуты vspace(верхний, нижний) и hspace(левый, правый).

HTML указание отступов

HTML указание отступов №2

HTML позволяет использовать изображение в качестве фона страницы. Это делается при помощи атрибута background у элемента body в значение, которого указывается путь до файла.

<body background="bg.png">

HTML указание фона

Вот и всё, что можно рассказать по работе с изображениями. В следующие статье мы разберём очень интересную возможность "Карты изображений".

Подписаться на обновления

Комментариев еще не оставлено