1.1 Элемент <img>
Мультимедиа в HTML играет важную роль в улучшении визуального восприятия веб-страниц. Вставка изображений является одним из ключевых аспектов мультимедиа в HTML. Чаще всего для этого используется элемент <img>. Рассмотрим его подробнее:
Элемент <img> предназначен для вставки изображений на веб-страницу. Это пустой элемент: у него нет закрывающего тега, и он включает только атрибуты.
Синтаксис
<img src="URL_изображения" alt="Описание" width="Ширина" height="Высота">
<img src="images/photo.jpg" alt="Описание изображения" width="500" height="300">
Давайте рассмотрим атрибуты элемента <img> немного подробнее
1.2 Атрибут src
Полное название атрибута src — это source (источник).
Атрибут src указывает путь к файлу изображения, который должен отобразиться на странице. Это может быть как абсолютный, так и относительный путь.
Примеры:
Абсолютный URL:
<img src="https://example.com/images/photo.jpg">
Относительный путь:
<img src="images/photo.jpg">
Абсолютный URL содержит полный адрес до изображения, включая протокол (http или https), домен и путь. Относительный путь указывает местоположение файла относительно текущего документа, что удобно при работе с локальными файлами.
1.3 Атрибут alt
Полное название: alternative text (альтернативный текст)
Атрибут alt предоставляет текстовое описание изображения. Этот текст отображается, если изображение не может быть загружено, и используется для улучшения доступности, так как программы экранного чтения используют его для описания изображения пользователям с нарушением зрения.
Примеры:
<img src="images/sunset.jpg" alt="Фотография красивого заката">
Хорошо составленный альтернативный текст помогает пользователям понять содержание изображения, если оно недоступно, и способствует улучшению SEO (поисковой оптимизации) страницы.
1.4 Атрибут width
Атрибут width задает ширину изображения в пикселях. Если атрибут height не указан, изображение сохраняет свои пропорции при изменении ширины.
Примеры:
<img src="images/photo.jpg" width="500">
Использование фиксированной ширины может быть полезно для контроля за размером изображения, но при этом важно учитывать адаптивность дизайна.
1.5 Атрибут height
Атрибут height задает высоту изображения в пикселях. Если атрибут width не указан, изображение сохраняет свои пропорции при изменении высоты.
Примеры:
<img src="images/photo.jpg" height="300">
Аналогично атрибуту width, использование фиксированной высоты может быть полезно, но необходимо учитывать адаптивность.
Пример использования атрибутов вместе
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
<img src="images/sunset.jpg" alt="Фотография красивого заката" width="500" height="300">
В этом примере изображение будет загружено из файла images/sunset.jpg, отображаться с шириной 500 пикселей и высотой 300 пикселей, а в случае, если изображение не загрузится, будет показан текст "Фотография красивого заката".
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ