Добавление картинок на веб-страницу делает сайт более наглядным и привлекательным для пользователя. Эта статья познакомит вас с основами добавления изображений в 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" />
Заключение
Изображения являются важным компонентом сайтов. Понимая атрибуты изображений вы можете сделать свои веб-страницы более доступными и улучшить взаимодействие с пользователем.
Комментарии
0