Изображения и Медиа

С возвращением.

В предыдущем уроке ты научился соединять страницы с помощью ссылок и навигации.

Теперь добавим изображения.

Потому что текст — мощный.

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

Изображения делают страницы более визуальными, личными и понятными.

Но их нужно добавлять правильно.

Иначе браузер покажет иконку сломанного изображения.

А эта маленькая иконка — способ браузера сказать:

“Я старался, но ты дал мне хаос.”

Что Ты Изучишь

В этом уроке ты узнаешь:

как добавлять изображения с помощью тега img;
что означает src;
что означает alt;
почему альтернативный текст важен;
как работают пути к изображениям;
как использовать изображения из папок;
как добавлять ширину и высоту;
частые ошибки с изображениями;
базовые идеи медиа в HTML.

Элемент img

Изображения добавляются с помощью элемента img.

Пример:

<img src="cat.jpg" alt="Милый кот сидит на стуле">

Тег img не требует закрывающего тега.

Это не нужно:

</img>

Элемент изображения обычно имеет два очень важных атрибута:

src;
alt.

Маленькие атрибуты.

Большие последствия.

Как забыть один винтик, когда собираешь стул.

Атрибут src

Атрибут src говорит браузеру, где находится файл изображения.

Пример:

<img src="photo.jpg" alt="Горный пейзаж">

Это означает:

Найди файл photo.jpg и покажи его здесь.

Если изображение находится в той же папке, что и HTML-файл, это работает:

project/
  index.html
  photo.jpg

HTML:

<img src="photo.jpg" alt="Горный пейзаж">

Просто.

Чисто.

Без драмы.

Редкий момент в web development.

Изображения в Папках

Обычно изображения хранят в папке.

Пример:

project/
  index.html
  images/
    profile.jpg

Чтобы показать profile.jpg, напиши:

<img src="images/profile.jpg" alt="Портрет человека">

Путь должен соответствовать реальному расположению изображения.

Если папка называется images, не пиши image.

Если файл называется profile.jpg, не пиши Profile.jpg.

Компьютеры строгие.

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

Атрибут alt

Атрибут alt даёт альтернативный текст для изображения.

Пример:

<img src="dog.jpg" alt="Коричневая собака играет в парке">

Текст alt используется, когда:

изображение не загрузилось;
screen reader читает страницу;
поисковые системы пытаются понять изображение;
пользователь не может хорошо видеть изображение.

Хороший текст alt описывает значение изображения.

Не только имя файла.

Плохо:

<img src="dog.jpg" alt="собака">

Лучше:

<img src="dog.jpg" alt="Коричневая собака играет в парке">

Хороший alt — это не декорация.

Это доступность.

А доступность не опциональна, если ты хочешь создавать нормальные сайты.

Декоративные Изображения

Иногда изображение только декоративное.

Например, фоновый узор или маленький визуальный орнамент.

В таком случае можно использовать пустой alt:

<img src="decoration.png" alt="">

Это говорит screen readers:

Это изображение декоративное. Его можно пропустить.

Но будь внимателен.

Не используй пустой alt для значимых изображений.

Если изображение передаёт информацию, опиши его.

Если оно просто декорация, пустой alt допустим.

HTML простой.

Но он ожидает честности.

Ширина и Высота

Можно задать ширину и высоту изображения:

<img src="profile.jpg" alt="Портрет человека" width="300" height="300">

Это говорит браузеру размер изображения.

Это может помочь странице загружать layout стабильнее.

Но не растягивай изображения случайно.

Так люди могут выглядеть, будто на них напал принтер.

Если оригинальное изображение квадратное, используй квадратные размеры.

Если оригинальное изображение широкое, используй широкие размеры.

Уважай изображение.

У изображения есть чувства.

Скорее всего, нет.

Но всё равно.

Создай Страницу для Практики

Создай новый файл:

touch images.html

Создай папку images:

mkdir images

Положи изображение внутрь папки и назови его:

profile.jpg

Теперь напиши это в images.html:

<!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>

  <p>Эта страница показывает, как добавить изображение в HTML.</p>

  <img src="images/profile.jpg" alt="Профильное фото для страницы практики" width="300">

  <p>Изображение выше загружается из папки images.</p>
</body>
</html>

Открой файл в браузере.

Если изображение появилось — отлично.

Если нет — проверь путь.

Браузер не злой.

Он просто потерялся.

Распространённые Форматы Изображений

Распространённые форматы изображений:

.jpg или .jpeg;
.png;
.webp;
.svg;
.gif.

Используй .jpg для фотографий.

Используй .png, когда нужна прозрачность или чёткая графика.

Используй .webp для современных оптимизированных изображений.

Используй .svg для логотипов и иконок, когда возможно.

Используй .gif осторожно.

Один анимированный gif может быть смешным.

Двадцать анимированных gif могут превратить сайт в цифровой цирк.

Имена Файлов Изображений

Используй простые имена файлов.

Хорошо:

profile.jpg
hero-image.webp
course-cover.png

Плохо:

My Final Image NEW VERSION 222!!!.jpg
photo from phone (copy).jpeg
IMG_20240318_174433.jpg

Простые имена легче использовать.

Используй маленькие буквы.

Используй дефисы вместо пробелов.

Пример:

my-profile-photo.jpg

Не так:

my profile photo.jpg

Пробелы в именах файлов могут создавать неприятные проблемы.

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

Интернет доставляет их каждый день.

Внешние Изображения

Можно также использовать изображение с другого сайта:

<img src="https://example.com/photo.jpg" alt="Пример изображения">

Но будь осторожен.

Внешние изображения могут исчезнуть.

Другой сайт может их заблокировать.

Они могут медленно загружаться.

Для собственного сайта обычно лучше хранить изображения в своём проекте.

Твои файлы.

Твой контроль.

Твоё маленькое королевство.

Изображения и Ссылки

Изображение также может быть внутри ссылки.

Пример:

<a href="about.html">
  <img src="images/profile.jpg" alt="Перейти на страницу обо мне" width="200">
</a>

Теперь изображение кликабельное.

Это полезно для логотипов, карточек, галерей и визуальной навигации.

Но текст alt должен описывать цель ссылки.

Не только само изображение.

Если клик по изображению ведёт на страницу “Обо мне”, alt должен помогать это понять.

Figure и Figcaption

HTML имеет figure и figcaption для изображений с подписями.

Пример:

<figure>
  <img src="images/mountain.jpg" alt="Горный пейзаж на рассвете" width="500">
  <figcaption>Горный пейзаж на рассвете.</figcaption>
</figure>

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

Текст alt помогает доступности.

figcaption даёт видимое объяснение для всех.

Они связаны.

Но это не одно и то же.

Базовые Медиа: Audio и Video

HTML также может показывать audio и video.

Пример audio:

<audio controls>
  <source src="audio/song.mp3" type="audio/mpeg">
  Твой браузер не поддерживает audio element.
</audio>

Пример video:

<video controls width="500">
  <source src="videos/demo.mp4" type="video/mp4">
  Твой браузер не поддерживает video element.
</video>

Атрибут controls показывает play, pause и volume controls.

Без controls пользователи могут не иметь контроля над медиа.

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

Частые Ошибки

Неправильный Путь к Изображению

Если файл здесь:

images/profile.jpg

Не пиши:

<img src="profile.jpg" alt="Профильное фото">

Используй:

<img src="images/profile.jpg" alt="Профильное фото">

Путь должен соответствовать месту расположения файла.

Отсутствующий alt

Это плохо:

<img src="profile.jpg">

Лучше:

<img src="profile.jpg" alt="Профильное фото владельца сайта">

Всегда думай про alt.

Даже если текст пустой для декоративных изображений.

Огромные Изображения

Не загружай гигантские изображения без мысли.

Фото на 10 MB может сделать страницу медленной.

Медленные сайты болезненны.

Пользователи не ждут.

Они уходят.

Как коты, когда ты пытаешься объяснить JavaScript.

Практика

Создай страницу с названием:

gallery.html

Она должна содержать:

один h1;
один вступительный абзац;
три изображения;
полезный текст alt для каждого изображения;
одно изображение внутри ссылки;
одно изображение с figure и figcaption.

Используй папку images.

Держи имена файлов простыми.

Без CSS.

Без JavaScript.

Только чистый HTML.

Мини-Задание

Создай простую персональную страницу с:

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

Используй осмысленный текст alt.

Не пиши alt="image".

Это не полезно.

Это HTML-версия пожимания плечами.

Итог

Сегодня ты узнал, что:

изображения добавляются элементом img;
src говорит браузеру, где находится файл изображения;
alt описывает изображение для доступности и запасного текста;
пути к изображениям должны соответствовать структуре папок;
имена файлов должны быть простыми и маленькими буквами;
width и height могут помочь контролировать отображение изображения;
figure и figcaption добавляют подписи;
audio и video можно добавить через audio и video;
хорошая структура медиа делает страницы полезнее и доступнее.

Изображения делают сайты живее.

Но только когда используются правильно.

Хорошее изображение поддерживает контент.

Плохое изображение просто сидит там как растерянная картошка.

Следующий Урок

В следующем уроке мы изучим таблицы.

Таблицы не для layout.

Таблицы — для данных.

Очень важно.

Очень часто используется неправильно.

Будем строгими.