Эта тема посвящена работе с медиа – аудио, видео, фоновыми изображениями и галереями.
7.1. Как вставить аудио в HTML?
Пример кода:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио.
</audio>
Подробный разбор:
- <audio>:
Создает аудиоплеер, атрибут controls добавляет элементы управления. - <source>:
Указывает путь к аудиофайлу и его тип.
Советы:
- Оптимизируйте аудиофайлы для быстрой загрузки.
- Добавляйте резервный текст для браузеров, не поддерживающих аудио.
7.2. Как вставить видео в HTML?
Пример кода:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
Подробный разбор:
- <video>:
Создает область для видео с управлением. - Атрибуты width и height:
Определяют размеры видеоплеера. - Советы:Тестируйте видео в разных браузерах.
Используйте несколько форматов для максимальной совместимости.
7.3. Как добавить субтитры к видео?
Пример кода:
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
Ваш браузер не поддерживает видео.
</video>
Подробный разбор:
- <track>:
Добавляет субтитры к видео. Атрибуты kind, src, srclang и label задают параметры субтитров. - Советы:Субтитры повышают доступность.
Проверьте корректность пути к файлу субтитров.
7.4. Как сделать фон с изображением?
Пример кода:
<body style="background-image: url('background.jpg'); background-size: cover;">
<h1>Фоновое изображение</h1>
</body>
Подробный разбор:
- background-image: url('background.jpg');
Устанавливает изображение как фон. - background-size: cover;
Масштабирует изображение, чтобы оно покрывало всю область. - Советы:Используйте CSS для установки фонового изображения вместо inline-стилей, если требуется повторное использование.
Применяйте дополнительные свойства, такие как background-position, для точной настройки.
7.5. Как создать галерею изображений?
Пример кода:
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
width: 200px;
}
</style>
<div class="gallery">
<img src="img1.jpg" alt="Изображение 1">
<img src="img2.jpg" alt="Изображение 2">
<img src="img3.jpg" alt="Изображение 3">
</div>
Подробный разбор:
- Flexbox:
Класс .gallery использует Flexbox для создания адаптивной сетки. - flex-wrap: wrap;
Позволяет элементам переходить на новую строку. - gap задаёт расстояние между изображениями.
Советы:
- Используйте медиазапросы для адаптации галереи к разным экранам.
- Добавляйте подписи к изображениям с помощью <figcaption> внутри <figure>.