Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках

Це стара версія документу!

HTML - це мова розмітки за допомогою тегів. Тобто, HTML документ буде складатися з деякої групи елементів, де кожен елемент буде визначатися (починатися та закінчуватися) певним тегом (Для деяких елементів кінцевий тег не є обов'язвовим)

Тобто, тег — це назва елементу, записана у кутових дужках (< >)

Кожен HTML тег має свою унікальну назву з визначеним синтаксисом, яка записується латинськими літерами і не чутлива до регістру.

HTML теґ <a> створює посилання на іншу сторіку (Зовнішне посилання) або на певний елемент цієї сторінки (Внутрішне посилання).

Найбільш важливим атрибутом <a> є атрибут href, який, власне, і вказує місце, куди буде посилатися створене посилання. В якості значення атрибута href використовується адреса документа (URL, Universal Resource Locator, універсальний покажчик ресурсів), на який відбудеться перехід

Оформлення посилань в CSS використовуються наступні псевдокласи:

a:link оформлення не переглянутого досі посилання
a:visited уже переглянутого посилання
a:hover посилання на яке наводять курсор
a:active активного посилання (при натисканні)

Пов'язана сторінка зазвичай відображається в поточному вікні браузера, якщо ви не вкажете інакше значення атрибуту target.

Використовуйте CSS для стилізації посилань.

Наступні атрибути: download, hreflang, media, rel, target та type не можуть бути присутніми, якщо атрибута href немає.

Посилання можуть бути абсолютними та відносними. Абсолютні адреси працюють скрізь і всюди незалежно від імені сайту чи веб-сторінки, де прописане посилання. Відносні посилання, як випливає з їх назви, побудовані відносно поточного документа або кореня сайту.

Приклад:

<a href="https://library.vpuhlukhiv.com.ua">...</a>

Теґ <img> призначений для відображення зображення на Web-сторінці (формати зображень gif, jpeg, png та інші).

Теґ <img> має два обов'язкові атрибути атрибути:

src використовується для завантаження зображення, а саме вказує шлях до зображення від файлу HTML.
alt задає альтернативний текст для випадку, коли картинка не завантажилась або у клієнта є обмеження на обсяг завантаженн.

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

Щоб зробити картинку посиланням на інший документ, просто вставте теґ <img> в теґ <a>.

По можливості вказуйте атрибути width і height - це дозволяє браузеру заздалегідь зарезервувати місце в макеті сторінки і браузер не буде сам остійно розраховувати розмір картинки, що позитивно позначається на швидкості завантаження сторінки. Вказавши ці атрибути, ви убезпечете свою сторінку від різких змін її макету (Коли зображення не завантажено місце в макеті для нього не зарезервоване, тому, що браузер не знає яку площу для нього потрібно зарезервувати, а як тільки зображення завантажене і браузер розрахував його розмір - зображення відразу з'являється на сторінці, зсовуючи всі елементи).

Не змінюйте розмір картинки атрибутами width і height - це спотворює зображення і не впливає на його вагу, використовуйте для таких цілей спеціальні редактори чи змінюйте розмір картинки на стороні сервера.

Приклад

<img src="URL" alt="альтернативний текст">

HTML тег <video> добавляє, відтворює та керує відеороликом на веб-сторінці.

Шлях до файлу задається через атрибут src або вкладений елемент <source>.

В даний час існує три формати відео, що підтимуються елементом <video>: MP4, WebM та Ogg.

Приклад

<video>
 <source src="URL">
</video>

HTML тег <audio> відтворює аудіозапис і керує ним на веб-сторінці.

Шлях до файлу задається через атрибут src або вкладений тег <source>.

Всередині контейнера <audio> можна написати текст, який буде виводитися в браузерах, які не працюють з цим тегом.

Формат	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Будь-який текст всередині <audio> буде відображатися в браузерах, які не підтримують тег <audio>.

Для збільшення шансів відтворити аудіо файл на різних браузерах, аудіо кодують за допомогою різних кодеків і додають всі ці файли через елемент <source>

Приклад

<audio src="URL"></audio>
 
<audio>
 <source src="URL">
</audio>

Власні атрибути

Атрибут	Опис атрибута
`autoplay`	Відтворювати музику відразу після завантаження сторінки.
`controls`	Додає панель керування до аудіофайлу.
`loop`	Циклічно повторює аудіофайл.
`muted`	Вказує, що звук має бути відключений
`preload`	Використовується для завантаження файлу разом із завантаженням веб-сторінки.
`src`	Вказує шлях до аудіо файлу.

HTML тег <canvas> (англ. canvas - полотно) - це контейнер для графіки.

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

Приклад

<canvas id="ідентифікатор">
 
</canvas>

Власні атрибути

Атрибут	Опис атрибута
`height`	Задає висоту полотна. Без задання 300 пікселів.
`width`	Задає ширину полотна. Без задання 300 пікселів.

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

Зміст тега <iframe> ігнорується браузерами, що не підтримують даний елемент. Для таких браузерів можна вказати альтернативний текст, який побачать користувачі. Він повинен розташовуватися між тегами <iframe> і </iframe>.

<iframe>...</iframe>

Довідник по HTML тегам

Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках

html теґ <a>

html теґ <img>

html теґ <video>

html теґ <audio>

html теґ <canvas>

html теґ <iframe>

Джерела