Изображения

Теперь рассмотрим ещё одну важную часть веб-страниц: изображения. В уроке об основных тегах HTML мы познакомились с элементом br, у которого есть только открывающий тег. Такие элементы без содержимого и без закрывающего тега называют пустыми, и изображение — ещё один из них. Изображение создаётся так:

<img src="адрес-изображения">

У элемента img (от image — «изображение») есть атрибут src (от source — «источник»), значение которого — адрес изображения. Как и в случае ссылок (элемент a), можно использовать и абсолютные, и относительные адреса.

Как и br, img мы пишем без косой черты. Вам может встретиться и запись <img src="адрес-изображения" />: это более старый способ записать то же самое.

Мы говорили, что в адресе ./dog.html часть ./ означает «в текущей папке»: браузер ищет dog.html в папке HTML-файла со ссылкой.

Относительный адрес может начинаться и просто с косой черты, например /dog.html. Тогда браузер ищет dog.html в корневой папке проекта — той, в которой лежат все остальные.

Адрес нашего изображения — /learn/html/cats.webp: оно лежит в корневой папке startcoder.com, в папке learn и её подпапке html. (.webp — формат изображений, как .jpg или .png.)