Тег <img> и его атрибуты
Для работы с изображениями в HTML используется тег <img>. Это самозакрывающийся тег, не требующий закрывающего тега /. Сам по себе он ничего не отображает. Для работы необходимы дополнительные атрибуты.
Атрибут src
Наиболее важный атрибут – src. В него вставляется полный путь к изображению. Пример с изображением из интернета: найдите любое изображение (например, в Google), скопируйте его URL и вставьте в атрибут src:
<img src="URL_картинки">
Обратите внимание, что очень большое изображение может не поместиться на странице.
Атрибуты width и height
Для управления размером изображения используйте атрибуты width и height. Значения можно задавать в процентах от ширины экрана или в пикселях:
<img src="URL_картинки" width="500" height="200">
В этом примере ширина картинки 500 пикселей, а высота – 200. Неправильное соотношение сторон может привести к искажению изображения. Если указать только width, высота будет подобрана автоматически, сохраняя пропорции. Атрибут height также может использоваться самостоятельно; в этом случае ширина будет рассчитана пропорционально. Значение auto по умолчанию рекомендуется оставить без изменений.
Атрибут title
Атрибут title добавляет всплывающую подсказку при наведении курсора мыши на изображение:
<img src="URL_картинки" title="Навели на меня">
Атрибут alt
Атрибут alt задает альтернативный текст, отображаемый, если изображение не загрузилось, или для пользователей программ чтения с экрана. Он важен для SEO-оптимизации сайта. Всегда добавляйте атрибут alt:
<img src="URL_картинки" alt="Долина">
Встраивание изображений из проекта
Чтобы встроить изображение из проекта, добавьте его в папку проекта. Например, создайте папку images и поместите туда изображение html.jpg. Затем укажите путь к изображению в атрибуте src:
<img src="images/html.jpg" alt="HTML">
Убедитесь, что путь указан корректно.
Работа с изображениями в HTML проста и интуитивно понятна. Используйте атрибуты src, width, height, title и alt для полного контроля над отображением изображений на веб-странице.