Зміст курсу

Знайомство з HTML

1. Веб Розробка

Світ Вебу Що таке Інтернет?Розуміння того, як Працює Інтернет Як Працює Веб-Сайт Frontend проти Backend Шлях до Успіху

2. Теги та Атрибути

Розкриття Потенціалу Тегів та Атрибутів HTML Теги Атрибути Парні та Одиночні теги Розмітка Тексту Челендж 1: Розмітка Тексту Челендж 2: Розмітка Тексту Челендж 3: Розмітка Тексту Розмітка Тексту Спеціального Призначення Челендж: Розмітка Тексту Спеціального Призначення Валідація

3. Структура Документа

Секрети Структурних Веб-сторінок Структура Head Документа Потік Документу Челендж: Структура Документа Інструменти Розробника

4. Медіа та Таблиці

Магія Мультимедіа та Динамічних Таблиць Зображення Челендж: Зображення Зображення Спеціального Призначення Графічні Формати Вбудовування Аудіо та Відео Челендж: Аудіо та Відео Таблиці Челендж: Таблиці

5. Форми

Сила Форм: Взаємодійте та Залучайте Основа для Створення Форми Label для Input Елемента Атрибути Елементу Input Типи Елементу Input Челендж: Input та Label Елемент Textarea Елемент Select Елемент Datalist Групування Елементів Форм

Знайомство з HTML

Вбудовування Аудіо та Відео

Вбудовування аудіофайлів

Для включення аудіофайлів на веб-сторінку ми можемо використовувати елемент <audio>. Розглянемо приклад:

index.html

index.css

index.js

У цьому прикладі ми маємо.

Елемент <audio> містить елемент <source>, який визначає URL-адресу і тип файлу аудіофайлу. Зазвичай підтримуються формати MP3 та OGG;
Атрибут controls відображає стандартні елементи керування відтворенням, такі як відтворення, пауза та гучність;
Якщо браузер користувача не підтримує аудіоелемент, буде показано відповідне повідомлення.

Додаткові атрибути, які зазвичай використовуються з HTML-елементом audio, включають

autoplay - починає відтворення аудіофайлу одразу після завантаження сторінки;
loop - змушує аудіофайл безперервно циклічно відтворюватися;
muted - вимикає звук за замовчуванням;
volume - задає рівень гучності аудіофайлу за замовчуванням, в діапазоні від 0.0 (беззвучний) до 1.0 (повний звук).

Ось приклад, що демонструє використання всіх цих атрибутів:

index.html

index.css

index.js

Вбудовування відео

Ми можемо використовувати елемент <video> для вбудовування відеофайлів на веб-сторінку. Розглянемо наступний приклад:

index.html

index.css

index.js

У цьому прикладі

Елемент <video> містить елемент <source>, який вказує URL-адресу і тип відеофайлу. Зазвичай підтримуються формати WebM, MP4 та OGG;
Атрибут controls відображає стандартні елементи керування відтворенням;
Якщо браузер користувача не підтримує елемент відео, буде показано відповідне повідомлення.

До найпоширеніших атрибутів HTML-елемента video відносяться

autoplay - починає відтворення відеофайлу одразу після завантаження сторінки;
loop - змушує відеофайл безперервно циклічно відтворюватися;
muted - вимикає звук за замовчуванням;
volume - задає рівень гучності аудіофайлу за замовчуванням, від 0.0 (без звуку) до 1.0 (повна гучність);
poster - вказує URL-адресу зображення, яке буде відображатися як мініатюра відео перед його відтворенням;
width та height - задають ширину та висоту відеоплеєра у пікселях.

Ось приклад, що демонструє використання всіх цих атрибутів:

index.html

index.css

index.js

Примітка
Крім того, існує багато бібліотек JavaScript та API, які надають додаткову функціональність для відтворення та маніпулювання відеоконтентом в Інтернеті.

Все було зрозуміло?

Секція 4. Розділ 6

Зміст курсу

Знайомство з HTML

1. Веб Розробка

2. Теги та Атрибути

3. Структура Документа

4. Медіа та Таблиці

5. Форми

Знайомство з HTML

Вбудовування Аудіо та Відео

Вбудовування аудіофайлів

Для включення аудіофайлів на веб-сторінку ми можемо використовувати елемент <audio>. Розглянемо приклад:

index.html

index.css

index.js

У цьому прикладі ми маємо.

Елемент <audio> містить елемент <source>, який визначає URL-адресу і тип файлу аудіофайлу. Зазвичай підтримуються формати MP3 та OGG;
Атрибут controls відображає стандартні елементи керування відтворенням, такі як відтворення, пауза та гучність;
Якщо браузер користувача не підтримує аудіоелемент, буде показано відповідне повідомлення.

Додаткові атрибути, які зазвичай використовуються з HTML-елементом audio, включають

autoplay - починає відтворення аудіофайлу одразу після завантаження сторінки;
loop - змушує аудіофайл безперервно циклічно відтворюватися;
muted - вимикає звук за замовчуванням;
volume - задає рівень гучності аудіофайлу за замовчуванням, в діапазоні від 0.0 (беззвучний) до 1.0 (повний звук).

Ось приклад, що демонструє використання всіх цих атрибутів:

index.html

index.css

index.js

Вбудовування відео

index.html

index.css

index.js

У цьому прикладі

Елемент <video> містить елемент <source>, який вказує URL-адресу і тип відеофайлу. Зазвичай підтримуються формати WebM, MP4 та OGG;
Атрибут controls відображає стандартні елементи керування відтворенням;
Якщо браузер користувача не підтримує елемент відео, буде показано відповідне повідомлення.

До найпоширеніших атрибутів HTML-елемента video відносяться

autoplay - починає відтворення відеофайлу одразу після завантаження сторінки;
loop - змушує відеофайл безперервно циклічно відтворюватися;
muted - вимикає звук за замовчуванням;
volume - задає рівень гучності аудіофайлу за замовчуванням, від 0.0 (без звуку) до 1.0 (повна гучність);
poster - вказує URL-адресу зображення, яке буде відображатися як мініатюра відео перед його відтворенням;
width та height - задають ширину та висоту відеоплеєра у пікселях.

Ось приклад, що демонструє використання всіх цих атрибутів:

index.html

index.css

index.js

Примітка
Крім того, існує багато бібліотек JavaScript та API, які надають додаткову функціональність для відтворення та маніпулювання відеоконтентом в Інтернеті.

Все було зрозуміло?

Секція 4. Розділ 6