Інтерактивні теги

Мультимедіа та інтерактивні теги в HTML - це елементи розмітки, які

дозволяють вставляти мультимедійний контент (такий як зображення, відео,
звук) на вебсторінку та надавати їй інтерактивність за допомогою різних
елементів та атрибутів.

Ці теги дозволяють розширити можливості відображення і взаємодії з

відвідувачами сторінки.

Тег <button>

Тег <button> (від. англ. button – кнопка) є основним засобом створення

інтерактивних кнопок на вебсторінці. Він може містити текст, зображення або
інші вкладені елементи. Кнопки <button> використовуються для сприяння
взаємодії користувача зі сторінкою, запуску дій та подій.

Тег <img>
Тег <img> (від англ. image – зображення) є основним способом вставлення
зображень на вебсторінку. Він використовується для відображення
фотографій, іконок, графіки та інших візуальних елементів.

Тег <select>

Тег <select> (від англ. select – вибір) використовується для створення

випадного списку, де користувач може обрати один із доступних варіантів.

Тег <canvas>
Тег <canvas> (від англ. canvas – полотно) надає можливість створювати
графічний контент, анімацію та інтерактивні ефекти на вебсторінці за
допомогою JavaScript. Він дозволяє реалізувати малювання, графіку та
візуалізацію даних безпосередньо на сторінці.

Тег <code>

Тег <code> (від англ. code – код) використовується для позначення

фрагментів коду або комп'ютерного тексту на сторінці. Він має
моноширинний шрифт, що робить його читабельним та зберігає
рівномірність розмірів символів.

Тег <iframe>
Тег <iframe> (від англ. inline frame - альтернативний фрейм) створює
плаваючий фрейм (область), що знаходиться всередині документа. Це може
бути корисно для вставки відео, карт або віджетів з інших сервісів.

Тег <progress>

Тег <progress> (від англ. progress - прогрес) використовується для створення

візуального відображення стану завершення завдання або процесу на
сторінці. Він надає користувачам інформацію про те, наскільки вони вже
виготовили завдання.
Тег, який перекладається як кнопка:

<img>

<button>

<progress>

<script>

Результат
Тег <button> (перекладається як кнопка) визначає кнопку на вебсторінці.

Тег, який перекладається як вибір:

<img>

<select>

<progress>

<button>

Результат
Тег <select> перекладається як вибір. Дозволяє зробити елемент
інтерфейсу у вигляді списку, що розкривається.

Тег, який перекладається як зображення:

<map>

<canvas>
 <script>

<img>

Результат
Тег <img> (від англ. image) перекладається, як зображення. Призначений
для відображення на сторінці файлів у графічному форматі .JPG, .PNG і тд.

Тег, який перекладається як полотно:

<select>

<canvas>

<source>

<script>

Результат
Тег <canvas> (полотно) використовується для створення графіки за
допомогою скриптів.

Тег, який перекладається як код:

<map>

<source>

<code>

<canvas>

Результат
 Тег <code> (від англ. код) використовується для визначення програмного
коду.

Тег, який перекладається як альтернативний фрейм:

<img>

<source>

<script>

<iframe>

Результат
Тег <iframe> (від англ. inline frame - альтернативний фрейм) створює
плаваючий фрейм (область), що знаходиться всередині документа.

Тег, який перекладається як прогрес:

<script>

<area>

<progress>

<embed>

Результат
Тег <progress> (перекладається як прогрес) дозволяє відображати
прогрес завершеності завдання.

Тег <area>
Тег <area> (від англ. area - область) використовується для визначення
областей на зображенні, які можуть бути взаємодійними елементами. Він
завжди використовується разом із контейнером <map>, де вказуються
посилання або дії для кожної області.

Тег <map>

Тег <map> (від англ. map - карта) задає карту зображень. Області
визначаються за допомогою тегу <area>, а контейнер <map> групує їх разом.
При кліку на область, визначену в <map>, виконується вказана дія.

Тег <audio>
Тег <audio> (від англ. audio - аудіофайл) використовується для вставки
аудіофайлів на вебсторінку. Він дозволяє відтворювати звуки та музику
безпосередньо на сторінці.

Тег <output>

Тег <output> (від англ. output - вивід) використовується для відображення

результату обчислень, вводу користувача чи інших дій на сторінці. Він може
бути корисним при розробці форм або інтерактивних додатків, де важливо
вивести результати дій у спеціальний відображуваний блок.

Тег <object>

Тег <object> (від англ. object - об’єкт) повідомляє браузеру, як завантажувати

та відображати об'єкти, які він не розуміє. Він може містити в собі зовнішні
або внутрішні ресурси, такі як зображення, відео або додаткові додатки.

Тег <video>
Тег <video> (від англ. video - відео) використовується для вбудовування відео
на вебсторінку. Він надає можливість перегляду різноманітних відеоуроків,
роликів, презентацій та іншого візуального контенту безпосередньо на
сторінці.

Тег <source>

Тег <source> (від англ. source - джерело) використовується разом із <video>

або <audio> для визначення різних джерел контенту, які підтримуються
різними браузерами та пристроями. Це дозволяє забезпечити оптимальний
вибір формату відео чи аудіо для користувача.

Тег, який перекладається як область:

<div>

<area>

<progress>

<script>

Результат
Тег <area> (перекладається як область) визначає область усередині карти
зображень - map.

Тег, який перекладається як карта:

<img>

<object>

<map>

<canvas>

Результат
Тег <map> (перекладається як карта) задає карту зображень.

Тег, який перекладається як аудіофайл:

<map>

<object>

<audio>

<area>

Результат
Тег <audio> (перекладається як аудіофайл) визначає звуковий файл.

Тег, який перекладається як вивід:

 <progress>

<object>

<canvas>

<output>

Результат
Тег <output> (перекладається як вивід) визначає область, у якому
виводиться інформація, переважно з допомогою скриптів.

Тег, який перекладається як об’єкт:

<object>

<img>

<area>

<script>

Результат
Тег <object> (перекладається як об'єкт) повідомляє браузеру як
завантажувати та відображати об'єкти, які він не розуміє.

Тег, який перекладається як відео:

<var>

<source>

<canvas>
 <video>

Результат
Тег <video> (перекладається як відео) дозволяє додавати, відтворювати та
керувати налаштуваннями відео в межах веб-сторінки.

Тег, який перекладається як джерело:

<var>

<source>

<link>

<script>

Результат
Тег <source> (перекладається як джерело) вставляє аудіо або відео файл
для тегів <audio> та <video>.

Тег <time>
Тег <time> (від англ. time - час) дозволяє вбудовувати дату та час у структуру
вебсторінки. Він може бути використаний для відображення дати публікації
статті, часу проведення події або іншого важливого моменту.

Тег <link>

Тег <link> (від англ. link - посилання) дозволяє встановити зв'язок із

зовнішніми елементами на кшталт файлів зі шрифтами чи стилями. Також
<link> може використовуватися для підключення сторінок з іконками або
сторінок з метаданими.

Тег <embed>
Тег <embed> (від англ. embedded - вбудований) використовується для
вставки різноманітного мультимедійного контенту на сторінку, як-от відео,
аудіо або інтерактивних додатків.

Тег <style>

Тег <style> (від англ. style - стиль) використовується для внутрішнього опису
стилів CSS на сторінці. Він дозволяє визначити вигляд та оформлення
елементів прямо в HTML-документі.

Тег <script>

Тег <script> (від англ. script - скрипт) використовується для вставки коду
JavaScript на сторінку. Він може бути використаний для реалізації
інтерактивності, обробки даних, анімацій і багатьох інших функцій на сторінці
та загального опису скриптів.

Тег <var>
Тег <var> (від англ. variable - змінна) використовується для виділення змінних
або математичних виразів у тексті. Він може позначати значення, які можуть
змінюватися або використовуватися в різних частинах сторінки.

Тег, який перекладається як час:

<img>

<source>

<script>

<time>

Результат
Тег <time> (перекладається як час). Текст усередині цього тега
позначається як дата чи час.

Тег, який перекладається як посилання:

<var>

<link>
 <area>

<canvas>

Результат
Тег <link> (перекладається як посилання) дозволяє встановити зв'язок із
зовнішніми елементами на кшталт файлів зі шрифтами чи стилями.

Тег, який перекладається як вбудований:

<var>

<embed>

<source>

<script>

Результат
Тег <embed> (від англ. embedded - вбудований) дозволяє вставити
зовнішнє посилання або додаток (не HTML) на сторінку.

Тег, який перекладається як стиль:

<style>

<progress>

<link>

<embed>

Результат
 Тег <style> (перекладається як стиль) призначений для визначення стилів
елементів веб-сторінки.

Тег, який перекладається як скрипт:

<progress>

<source>

<embed>

<script>

Результат
Тег <script> (перекладається як скрипт) призначений для опису скриптів.
Також може містити посилання на програму або її текст певною мовою.

Тег, який перекладається як змінна:

<img>

Меню курсу Пошук

<var>

<link>

<canvas>

Результат
Тег <var> (від англ. variable - змінна) застосовується виділення змінних
комп'ютерних програм.

Мультимедійні та інтерактивні теги є важливою частиною розвитку вебсайтів

і додання багатофункціональності до вебсторінок.

До наступного блоку