Изображения

Элемент для добавления картинки чем-то похож на ссылку.

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

<!— ссылка -->
<a href=""></a>
<!— изображение -->
<img src="">

Первое отличие — путь к картинке указывается атрибутом src.

Второе отличие — изображение создаётся всего одним открывающим тегом. У <img> нет закрывающего тега, потому что нет смысла говорить браузеру, где заканчивается картинка: она и так имеет определённые размеры.

Для тега <img> есть ещё атрибут alt. У него сразу несколько предназначений.

Первое: текст из этого атрибута будет виден пользователю сайта, если картинка почему-то не загрузилась.

Второе: скринридер — специальная программа-помощник для людей с проблемами зрения — прочитает этот текст пользователю.

<!— Образец -->
<img src="desktop/image.jpg" alt="Кот в очках">

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

Опишем картинку. Добавьте ей атрибут alt со значением Ночные горы

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Добавляем альтернативное описание изображению</title>
  </head>
  <body>
    <h1></h1>
    <h2></h2>
    <p><a target="_blank" href=""</p>
    <p></p>
    <!— Добавьте в тег ниже атрибут альтернативного текста -->
    <img
      src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid"
    />
  </body>
</html>

Без указания размеров изображение загружается в своём исходном размере. Управлять размерами можно с помощью стилей.

Пока мы не добрались до CSS, сделаем картинку чуть меньше с помощью атрибута. Добавьте к тегу <img> атрибут width со значением 210. Картинка будет всего 210 пикселей в ширину

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Добавляем альтернативное описание изображению</title>
  </head>
  <body>
    <h1></h1>
    <h2></h2>
    <p><a target="_blank" href=""</p>
    <p></p>
    <!-- Тегу картинки добавьте атрибут ширины -->
    <img
      src="https://img.freepik.com/free-photo/starry-sky-night-with-landscape-mountains_23-2151614846.jpg?semt=ais_hybrid"
      alt="Ночные горы"
    />
  </body>
</html>

Обычно размерами управляют через стили — это более правильный способ. Об этом мы поговорим позже.