Домашнее задание: Изображения, видео и аудио

Кратко

Сделайте медиа-блок для страницы-резюме: фотография или иллюстрация с alt, подпись через figcaption, дополнительный аудио- или видеофрагмент с fallback.

Формулировка

Сделайте медиа-блок для страницы-резюме: фотография или иллюстрация с alt, подпись через figcaption, дополнительный аудио- или видеофрагмент с fallback.

Задание повышенной сложности

Подготовьте два формата видео через два элемента <source> (WebM и MP4) и подпишите комментарием, зачем это нужно (старые браузеры понимают не все форматы).

Целевой результат

<figure>
  <img src="images/me.jpg" alt="Моё фото для резюме"
       width="300" height="300" loading="lazy">
  <figcaption>Иван Иванов, фронтенд-разработчик</figcaption>
</figure>

<video controls width="480">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4"  type="video/mp4">
  Видео-визитка недоступна в вашем браузере.
</video>

Пошаговое решение

  1. Создайте папку урока, файл index.html и подпапку images/.
  2. Добавьте <figure> с картинкой (alt + width/height) и подписью.
  3. Добавьте <video> или <audio> с controls и fallback-текстом.
  4. Откройте страницу в браузере, затем в DevTools (F12) проверьте вкладку Network.
  5. Временно сломайте src картинки и убедитесь, что показывается текст alt.

Мини-проверка

Страница должна быть понятна без CSS; у каждой картинки есть осмысленный alt и размеры; у видео/аудио — controls и fallback. Текст под картинкой не «прыгает» при загрузке.