HTML-изображение

HTML-тег img используется для отображения изображения на веб-странице. Тег HTML img — это пустой тег, который содержит только атрибуты, закрывающие теги не используются в элементе изображения HTML.
Давайте посмотрим на пример HTML-изображения.
<img src="good_morning.jpg" alt="Доброе утро, друзья" />

Атрибуты HTML-тега img

src и alt являются важными атрибутами HTML-тега img. Все атрибуты тега изображения HTML приведены ниже.

1) src

Это необходимый атрибут, описывающий источник или путь к изображению. Он указывает браузеру, где искать изображение на сервере.
Расположение изображения может быть в том же каталоге или на другом сервере.

2) alt

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

3) width

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

4) height

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

Использование атрибута width и height с тегом img

Вы узнали о том, как вставить изображение на свою веб-страницу, теперь, если мы хотим указать высоту и ширину для отображения изображения в соответствии с нашим требованием, мы можем установить его с помощью атрибутов width и height изображения.

Пример:

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

Как получить изображение из другого каталога/папки?

Чтобы вставить изображение в свою страницу, если изображение доступно в каком-то другом каталоге, вы можете получить к нему доступ следующим образом:
<img src="images/animal.png" height="180" width="300" alt="изображение животного">
данное изображение находится в папке images.
<img src="http://images.ru/animal.png" height="180" width="300" alt="изображение животного" >
изображение находится на другом сайте или на вашем просто полный путь.
<img src="../images/animal.png" height="180" width="300" alt="изображение животного">
если файл тоже находится в какой-то папке вы поднимаетесь на уровень выше.

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

Используйте тег <img> в качестве ссылки

Мы также можем использовать изображение в качестве ссылки. Для этого поместите тег <img> внутрь тега <a>.
пример:
<a href="https://bbcat.ru"><img src="robot.jpg" height="100" width="100"></a>