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

Навигация по статье

Добавление изображений в HTML

Добавить изображение в HTML-документ очень просто. Вы можете сделать это с помощью тега <img>, который является самозакрывающимся тегом, не требующим закрывающего тега. Тег <img> требует наличия двух атрибутов: src и alt. Атрибут src указывает расположение файла изображения, а атрибут alt предоставляет альтернативный текст для изображения.

<img src="image.png" alt="A beautiful sunset">

Получится:

Дополнительные атрибуты

В дополнение к атрибутам src и alt существует несколько других атрибутов изображения, которые можно использовать для улучшения внешнего вида и доступности ваших веб-страниц.

Атрибут заголовка

Атрибут title предоставляет всплывающую подсказку, когда пользователь наводит курсор на изображение. Этот атрибут полезен, когда вы хотите предоставить дополнительную информацию об изображении.

Пример:

<img src="image.png" alt="A beautiful sunset" title="This is a beautiful sunset over the ocean">

Наведите на картинку:

Атрибуты ширины и высоты

Атрибуты width и height определяют размер изображения в пикселях. Вы можете использовать эти атрибуты, чтобы настроить размер изображения в соответствии с макетом вашей веб-страницы.

<img src="image.png" alt="A beautiful sunset" width="500" height="300">

Атрибут границы

Атрибут границы добавляет границу вокруг изображения. Вы можете указать ширину границы в пикселях.

В следующим примере, мы задаем рамку шириной 2px.

<img src="image.png" alt="A beautiful sunset" border="2" />

Атрибут выравнивания

Атрибут align определяет выравнивание изображения по отношению к окружающему тексту. Вы можете использовать атрибут align, чтобы выровнять изображение по левому, правому краю или по центру.

Выровняем картинку по правому краю:

<img src="image.png" alt="A beautiful sunset" align="right" />

Заключение

Изображения являются важным компонентом сайтов. Понимая атрибуты изображений вы можете сделать свои веб-страницы более доступными и улучшить взаимодействие с пользователем.