Вставка изображений в HTML. Тег <img>
Для вставки изображений в HTML используется тег
<img>. Этот тег является одиночным, то есть у него нет закрывающего тега. Основные атрибуты тега
<img>:
src: указывает на источник изображения (путь к файлу).alt: альтернативный текст, который отображается, если изображение не загрузилось или для пользователей с ограниченными возможностями.title: всплывающая подсказка при наведении курсора на изображение.width и height: задают ширину и высоту изображения.
Существуют и другие атрибуты данного тега, но в современной веб-разработке частью этих параметров принято управлять через стили (CSS). Как правило обязателен только атрибут
src, а также желателен атрибут
alt.
При указании атрибутов
width и
height непосредственно в теге
<img>, вы можете использовать следующие значения:
- Пиксели (
px):
- Пример:
<img src="image.jpg" width="250" height="200" alt="Описание изображения" title="Всплывающая подсказка">
- Значения указываются в пикселях без суффикса
px.
- Проценты (
%):
- Пример:
<img src="image.jpg" width="50%" alt="Описание изображения">
- Значения указываются в процентах от родительского элемента. Если родительского элемента нет, проценты рассчитываются от ширины окна браузера для
width.
Примечание: В HTML5 разрешено использовать только пиксели для атрибутов
width и
height, но в практике также допускается использование процентов, как в HTML 4.01
Если задать только один размер (например, ширину), браузер автоматически рассчитает другой размер, сохраняя пропорции изображения.
Правильное указание пути к изображению
При указании пути к изображению в HTML, вы можете использовать как абсолютные, так и относительные пути.
Относительные пути
Относительные пути указывают на местоположение файла относительно текущего HTML-документа.
Текущий каталог: Если изображение находится в том же каталоге, что и HTML-файл, вы можете указать только имя файла.
<img src="image.jpg" alt="Описание изображения">
Подкаталог: Если изображение находится в подкаталоге, укажите имя подкаталога и имя файла.
<img src="images/image.jpg" alt="Описание изображения">
Родительский каталог: Если изображение находится в родительском каталоге, используйте
../ для перехода на уровень выше.
<img src="../image.jpg" alt="Описание изображения">
Абсолютные пути
Абсолютные пути указывают на полный URL-адрес изображения.
Полный URL: Если изображение находится на другом сайте или сервере, укажите полный URL.
<img src="https://example.com/image.jpg" alt="Описание изображения">
Советы
Используйте относительные пути, когда изображение находится на вашем сайте, чтобы упростить перенос проекта на другой сервер. При этом, желательно все изображения сохранять в папке images, расположенной в том же каталоге, что и файл html.
Используйте абсолютные пути, когда изображение находится на другом сайте или вы хотите обеспечить доступ к изображению независимо от местоположения HTML-файла.