Примеры — Урок 07

Рабочие примеры

В каждом примере сверху — реальный результат, ниже — код. Картинок-файлов рядом нет (страница открывается с диска), поэтому в превью вставлен inline-SVG-«плейсхолдер». В коде показан настоящий синтаксис с путём к файлу — так пишут в реальном проекте.

1. <img> с осмысленным alt

Если файл не загрузится — пользователь увидит текст alt вместо картинки.

<img src="images/team.jpg"
     alt="Студенты обсуждают макет у экрана"
     width="220" height="130">

2. <figure> + <figcaption>

Картинка и видимая для всех подпись объединены в один смысловой блок.

Разбор структуры страницы на занятии.

<figure>
  <img src="images/layout.jpg"
       alt="Схема структуры страницы"
       width="240" height="120">
  <figcaption>Разбор структуры страницы на занятии.</figcaption>
</figure>

3. Адаптивное изображение: <picture>

Браузер выбирает source по ширине экрана; <img> — обязательный fallback.

<picture>
  <source media="(max-width: 600px)" srcset="sunset-phone.jpg">
  <source media="(min-width: 601px)" srcset="sunset-wide.jpg">
  <img src="sunset-wide.jpg" alt="Закат над морем" width="240" height="120">
</picture>

4. Видео с несколькими форматами

Превью — статичная заглушка плеера; реальный <video> показан в коде.

<video controls width="640" poster="preview.jpg">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4"  type="video/mp4">
  Ваш браузер не поддерживает встроенное видео.
</video>

5. Адаптивный CSS для медиа

Чтобы картинка не выходила за контейнер на узком экране — ограничивают ширину.

/* style.css */
img,
video {
  max-width: 100%;   /* не вылезать за контейнер */
  height: auto;      /* сохранять пропорции */
}

figcaption {
  color: #5d6b7a;
  font-size: 0.9rem;
}

Эксперимент: подмените в коде src на несуществующий файл и откройте страницу — браузер покажет текст alt. Это и есть страховка словами.