коментариев
Поделиться статьей:

Как вставить картинку в HTML?

18.11.2022 107 на прочтение 5 минут

Вставка изображения на веб-страницу идет через  тег <img>  HTML-файла и  размещается внутри тега <body>. Элемент <img> является пустым  тегом, ему не требуется закрывающий тег, так как он не содержит никакого дополнительного содержимого кроме его атрибутов. Основной его синтаксис составляет атрибуты src и alt,  остальные атрибуты служат для изменения параметров вставленного изображение и предоставление информации о нем. 

<img src="image_url" alt="alternative_text">

В атрибуте src прописывается путь до изображения, которое необходимо добавить на страницу. Путь может быть:

  •  относительным; 
  •  абсолютным.

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

При использовании относительного прописывается только название самого изображения и его формат, но обязательным условием здесь есть размещение этой картинки в той же директории что и HTML-файл.

Еще один метод указание адреса источника изображение: через ссылку по которой его можно найти в браузере. Чтобы не столкнутся с проблемой авторских прав лучше брать картинки для своего сайта с специальных фотостоков. Подборку таких сайтов можно найти в нашей статье.

Пример вставки ссылки в код. 

<!DOCTYPE html>
<html>
<body>
<img  src="https://img.freepik.com/free-photo/beautiful-shot-sea-with-mountain-distance-clear-sky_181624-2248.jpg?w=2000" alt="Sea">
</body>
</html>

Здесь достаточно просто скопировать URL найденной картинки, например через инструмент Chrome DevTools.  
Html url image

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

 Атрибут alt это альтернативный текст к изображению, где кратко описывается что изображено на нем, не стоит пренебрегать им,  так как его используют поисковые системы для определения соодержимого на странице и выдачи его в поиске для пользователей. Также альтернативный текст может быть выведен на веб-странице если картинка по какой-то причине не отображается или повреждена.

Размер изображения

При необходимости сразу в теге можно задать высоту и ширину изображения через атрибуты:

  • width - используется для указания ширины изображения;
  • height - используется для указания высоты изображения.

Все значения для єтих атрибутов указываются в пикселях. 

<!DOCTYPE html>
<html>
<body>
<img   src="https://img.freepik.com/free-photo/beautiful-shot-sea-with-mountain-distance-clear-sky_181624-2248.jpg?w=2000" alt="Sea" width="300" height="200">
</body>
</html>  

Расположения изображения относительно текста

Свойство отображения display делает  вставленное изображение элементом уровня блока. В результате чего изображение переносится на отдельную строку, и все другое содержимое располагаться  только над и под изображением.

<head>
<style>
img {
  display: block;
}
</style>
</head>
<body>
<img src="https://img.freepik.com/free-photo/beautiful-shot-sea-with-mountain-distance-clear-sky_181624-2248.jpg?w=2000" alt="Sea" width="300" height="200">
</body>
</html>

Также можно разместить картинку слева или справа  относительно размещенных вокруг нее элементов, а остальное содержимое будет обтекать изображение по контуру. Для этого используется свойство float со значением left (размещение справа)  и right (размещение слева).

Дополнительно можно установить отступы от изображения окружающих его элементов с разных сторон:

  • margin-top - размер отступа сверху над изображением;
  • margin-right - размер отступа справа от картинки;
  • margin-bottom - размер отступа снизу под картинкой;
  • margin-left - размер отступа слева от изображения.

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
float: right;
margin-right:10px;
}
</style>
</head>
<body>
<img src="https://img.freepik.com/free-photo/beautiful-shot-sea-with-mountain-distance-clear-sky_181624-2248.jpg?w=2000" alt="Sea" width="300" height="200">
</body>
</html>


HTML float

Атрибут title 

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

<!DOCTYPE html>
<html>
<body>
<img   src="https://img.freepik.com/free-photo/beautiful-shot-sea-with-mountain-distance-clear-sky_181624-2248.jpg?w=2000" alt="Sea" width="300" height="200" title="mountains in the red sea">
</body>
</html>


HTML Images title

Приятной работы.

Если вашему проекту необходим недорогой хостинг советуем наши услуги от компании ГиперХост

Выбрать Хостинг


Close Screen
Maria Kholodnitska
Статей: 187
Оцените статью:


Спасибо за отзыв
Рейтинг: 5 из 5 Голосов: 1