Зачем нужны глобальные атрибуты HTML при вставке графических изображений

Сегодня, наверное, 99 из 100 создаваемых сайтов наполняются не только текстом, но и графическими изображениями.

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

Использовать картинки на сайте можно по-разному. Давайте рассмотрим 3 самых популярных варианта использования картинок на веб страницах, а затем обсудим их HTML атрибуты:

1. Иллюстрация к статье или товару. Такая картинка обычно размещается в верхней части страницы под «шапкой» сайта. В случае со статьей, напрямую или косвенно иллюстрирует описанные в статье события. Что касательно товара – тут все понятно, мало кто будет покупать товар, увидев на сайте только лишь текстовое описание. Изображение – неотъемлемая деталь страницы товара интернет магазина.
2. Картинки-фоны. На некоторых сайтах в качестве подложки под текстом либо по бокам используются фоновые изображения. Главное тут, чтобы эта картинка не отвлекала посетителя от основной контентной части и не мешала просмотру страницы.
3. Баннеры. Обычно картинки-ссылки. В современных сайтах используются даже не просто единичные изображения, а целая лента - так называемый слайдер.

Фоновые картинки обычно вставляются на сайт через таблицы стилей CSS. Иллюстрации и баннеры, как правило, внедряются через тег <img> с указанием определенных атрибутов языка HTML.

Основные атрибуты графических изображений и картинок в HTML

Для вставки графического изображения на сайт через тег img, вам необходимо указать 2 атрибута. Это src и alt. Первый указывает адрес файла картинки, второй – альтернативные текст, выводится, если по каким-то причинам возможности загрузить файл нет (например, файл не найден).

Картинки, как и другие теги, поддерживают глобальные атрибуты HTML. Наиболее часто используются глобальные атрибуты class, title, style, rel.

Class показывает принадлежность картинки в группе, для определения стилей изображения. Style – тоже стили, но уже для конкретного элемента. Rel используется, например, если нужно сделать возможность увеличения картинки при клике во всплывающем окне, но объяснять механизм rel стоит в отдельной статье.

Если необходимо задать название изображения – это можно сделать при помощи атрибута title. Название будет показано при наведении на картинку курсора мыши.

Дополнительно можно указать ширину и высоту картинки. Это делается при помощи атрибутов width и height. Размер может быть указан как в пикселях, так и в процентах.

Все глобальные HTML атрибуты указываются по необходимости. Обязательными являются только src и alt – это специальные атрибуты img.

Вставляйте картинки на свой сайт правильно и ваша статья, товар или просто страница получат преимущество в глазах посетителей.