032.3 Урок 1

Сертифікат:

Основи веброзробки

Версія:

1.0

Розділ:

032 Розмітка HTML-документа

Тема:

032.3 HTML-покликання та вбудовані ресурси

Урок:

1 з 1

Вступ

Будь-яка сучасна вебсторінка рідко складається лише з тексту. Вона містить багато інших типів вмісту, наприклад, зображення, аудіо, відео та навіть інші документи HTML. Разом із зовнішнім вмістом документи HTML можуть містити покликання на інші документи, що значно спрощує роботу в Інтернеті.

Вбудований контент

Обмін файлами через Інтернет можливий без вебсторінок, написаних у HTML, то чому тоді HTML є обраним форматом для вебдокументів, а не PDF чи будь-який інший формат обробки текстів? Однією з важливих причин є те, що HTML зберігає свої мультимедійні ресурси в окремих файлах. У такому середовищі, як Інтернет, де інформація часто надлишкова і поширюється в різних місцях, важливо уникати непотрібної передачі даних. У більшості випадків нові версії вебсторінки містять ті самі зображення та інші файли підтримки, що й попередні версії, тому браузер може використовувати раніше отримані файли замість того, щоб копіювати все знову. Крім того, роздільне зберігання файлів полегшує налаштування мультимедійного вмісту відповідно до характеристик клієнта, таких як розташування, розмір екрана та швидкість з’єднання.

Зображення

Найпоширенішим типом вбудованого вмісту є зображення, які супроводжують текст. Зображення зберігаються окремо і покликання на них всередині файлу HTML виконується за допомогою тега <img>:

<img src="logo.png">

Тег <img> не потребує закриваючого тегу. Властивість src вказує вихідне розташування файлу зображення. У цьому прикладі файл зображення logo.png повинен знаходитися в тому ж каталозі, що й файл HTML, інакше браузер не зможе його відобразити. Властивість джерела розташування приймає відносні шляхи, тому dot notation можна використовувати для зазначення шляху до зображення:

<img src="../logo.png">

Дві крапки вказують на те, що зображення розташоване всередині батьківського каталогу відносно каталогу, де знаходиться файл HTML. Якщо ім’я файлу ../logo.png використовується всередині файлу HTML, URL-адреса якого є http://example.com/library/periodicals/index.html, браузер запитає файл зображення за адресою http://example.com/library/logo.png.

Позначення крапками також застосовується, якщо файл HTML не є фактичним файлом у файловій системі; HTML-браузер інтерпретує URL-адресу так, ніби це шлях до файлу, але завдання HTTP-сервера – вирішити, чи стосується цей шлях файлу чи динамічно згенерованого вмісту. Домен і правильний шлях автоматично додаються до всіх запитів до сервера, якщо файл HTML надійшов із запиту HTTP. Аналогічно браузер відкриє правильне зображення, якщо файл HTML був відкритий безпосередньо з локальної файлової системи.

Розташування джерел, які починаються зі скісної риски /, розглядаються як абсолютні шляхи. Абсолютні шляхи містять повну інформацію про розташування зображення, тому вони працюють незалежно від розташування документа HTML. Якщо файл зображення знаходиться на іншому сервері, як у випадку використання Мережі доставки контенту (CDN, Content Delivery Network), доменне ім’я також має бути включено.

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

Якщо зображення не можна завантажити, HTML-браузер відобразить текст, наданий атрибутом alt замість зображення. Наприклад:

<img src="logo.png" alt="Логотип компанії">

Атрибут alt також важливий для доступності. Браузери, що відображають тільки текст та програми зчитування з екрана використовують його як опис відповідного зображення.

Типи зображень

Браузери можуть відображати всі популярні типи зображень, такі як JPEG, PNG, GIF і SVG. Розміри зображень визначаються, щойно зображення завантажуються, але їх можна попередньо визначити за допомогою атрибутів width та height:

<img src="logo.png" alt="Логотип компаніїІ" width="300" height="100">

Єдина причина включення атрибутів розміру до тегу <img> полягає в тому, щоб уникнути порушення макета, коли зображення завантажується занадто довго або коли його не можна завантажити взагалі. Використання атрибутів width та height для зміни оригінальних розмірів зображення може призвести до небажаних результатів:

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

SVG — єдиний формат, який не страждає від цих ефектів, оскільки вся його графічна інформація зберігається в числових координатах, які добре підходять для масштабування, а його розміри не впливають на розмір файлу (звідси назва Scalable Vector Graphics). Наприклад, для малювання прямокутника у SVG необхідні лише інформація про положення, розміри бічних сторін та його колір. Окреме значення для кожного окремого пікселя згодом буде визначатиметься динамічно. Фактично, зображення SVG подібні до файлів HTML у тому сенсі, що їх графічні елементи також визначаються тегами в текстовому файлі. Файли SVG призначені для представлення малюнків із гострими краями, таких як схеми чи діаграми.

Зображення, які не відповідають цим критеріям, слід зберігати як растрові (bitmaps). На відміну від векторних форматів зображень, растрові зображення заздалегідь зберігають інформацію про колір для кожного пікселя зображення. Зберігання значення кольору для кожного пікселя зображення створює дуже великий обсяг даних, тому растрові зображення зазвичай зберігаються у стиснених форматах, таких як JPEG, PNG або GIF.

Формат JPEG рекомендується для фотографій, оскільки його алгоритм стиснення дає хороші результати для відтінків і розмитого фону. Для зображень, де переважають суцільні кольори, більше підходить формат PNG. Тому формат PNG слід вибирати, коли необхідно перетворити векторне зображення в растрове.

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

Аудіо та відео

Аудіо- та відеоконтент можна додавати до HTML-документа майже так само, як зображення. Не дивно, що тегом для додавання аудіо є <audio>, а тегом для додавання відео є <video>. Очевидно, що лише текстові браузери не можуть відтворювати мультимедійний вміст, тому теги <audio> і <video> використовують закриваючий тег, щоб утримувати текст, який використовується як резервний для елемента, який не може бути показаний. Наприклад:

<audio controls src="/media/recording.mp3">
<p>Неможливо відтворити <em>recording.mp3</em></p>
</audio>

Якщо браузер не підтримує тег <audio>, замість нього буде показано рядок “Неможливо відтворити запис.mp3”. Використання закриваючих тегів </audio> або </video> дозволяє вебсторінці містити більш складний альтернативний вміст, ніж простий рядок тексту, дозволений атрибутом alt тегу <img>`.

Атрибут src для тегів <audio> і <video> працює так само, як для тега <img>, але також приймає URL прямої трансляції. Браузер займається буферизацією, декодуванням і відображенням вмісту в момент його отримання. Атрибут controls відображає елементи керування відтворенням. Без цього атрибута відвідувач не зможе призупинити, перемотати назад або іншим чином керувати відтворенням.

Універсальний контент

Документ HTML може бути вкладений в інший документ HTML, подібно до вставки зображення в HTML-документ, але за допомогою тегу <iframe>:

<iframe name="viewer" src="gallery.html">
<p>Цей браузер не підтримується</p>
</iframe>

Простіші текстові браузери не підтримують тег <iframe> і натомість відображатимуть вкладений до нього текст. Як і у випадку з мультимедійними тегами, атрибут src встановлює місце розташування вкладеного документа. Атрибути width та height можна додати, щоб змінити розміри за замовчуванням елемента iframe.

Атрибут name дає змогу посилатися на iframe і змінювати вкладений документ. Без цього атрибута вкладений документ неможливо змінити. Елемент anchor можна використовувати для завантаження документа з іншого місця всередині iframe замість поточного вікна браузера.

Покликання

Елемент сторінки, який зазвичай називають вебпокликанням (web link) , також відомий під технічним терміном anchor (якір), звідси використовується тег <a>. Якір веде до іншого розташування, яким може бути будь-яка адреса, підтримувана браузером. Місцезнаходження вказується атрибутом href (hyperlink reference):

<a href="contact.html">Контактна інформація</a>

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

<a href="contact.html"><img src="contact.png" alt="Контактна інформація"></a>

До місця розташування можна додати спеціальні префікси, щоб вказати браузеру, як саме потрібно відкрити. Наприклад, якщо якір вказує на адресу електронної пошти, його атрибут href повинен містити префікс mailto::

<a href="mailto:info@lpi.org">Зв'яжіться електронною поштою</a>

Префікс tel: вказує на номер телефону. Це особливо корисно для відвідувачів, які переглядають сторінку з мобільних пристроїв:

<a href="tel:+123456789">Зв'яжіться телефоном</a>

Після натискання покликання браузер відкриває вміст за цим розташуванням за допомогою асоційованого застосунку.

Найпоширенішим використанням якорів є завантаження інших вебдокументів. За замовчуванням браузер замінить поточний HTML-документ вмістом з нового розташування. Цю поведінку можна змінити за допомогою атрибута target (ціль). Ціль _blank, наприклад, повідомляє браузеру відкрити зазначену адресу в новому вікні або новій вкладці браузера, залежно від уподобань відвідувача:

<a href="contact.html" target="_blank">Контактна інформація</a>

Ціль _self встановлена за замовчуванням, якщо атрибут target відсутній. Це змушує документ, на який посилаються, замінити поточний документ.

Інші типи цілей пов’язані з елементом <iframe>. Щоб завантажити документ, на який посилаються, всередині елемента <iframe>, атрибут target повинен вказувати на назву елемента iframe:

<p><a href="gallery.html" target="viewer">Фотогалерея</a></p>

<iframe name="viewer" width="800" height="600">
<p>Цей браузер не підтримується</p>
</iframe>

Елемент iframe працює як окреме вікно браузера, тому будь-які покликання, завантажені з документа всередині iframe, замінять лише вміст iframe. Щоб змінити цю поведінку, елементи прив’язки всередині документа фрейма також можуть використовувати атрибут target. Ціль _parent, якщо використовується всередині документа фрейма, призведе до того, що адреса покликання замінить батьківський документ, що містить тег <iframe>. Наприклад, вбудований документ gallery.html може містити якір, який завантажується під час заміни батьківського документа:

<p><a href="gallery.html" target="_parent">Відкрити як батьківський документ</a></p>

Документи HTML підтримують кілька рівнів вкладення з тегом <iframe>. Ціль _top, якщо використовується як якір всередині документа фрейма, призведе до того, що адреса покликання замінить основний документ у вікні браузера, незалежно від того, чи є воно безпосереднім батьком відповідного <iframe> або попереднім предком в ланцюгу.

Розташування всередині документів

Адреса HTML-документа може додатково містити фрагмент, який можна використовувати для ідентифікації ресурсу всередині документа. Цей фрагмент, також відомий як URL якір, являє собою рядок, що йде після хеша # в кінці URL-адреси. Наприклад, слово History є якорем в URL-адресі "https://en.wikipedia.org/wiki/Internet#History".

Якщо URL-адреса має якір, браузер перейде до відповідного елемента в документі, тобто до елемента, атрибут id якого дорівнює якорю в URL-адресі. Якщо зазначена URL-адреса, https://en.wikipedia.org/wiki/Internet#History, браузер перейде прямо до розділу “Історія”. Досліджуючи HTML-код сторінки, ми виявляємо, що назва розділу має відповідний атрибут id:

<span class="mw-headline" id="History">Історія</span>

Прив’язки URL-адреси можна використовувати в атрибуті href тегу <a>, коли вони вказують на зовнішні сторінки, або коли вони вказують на розташування всередині поточної сторінки. В останньому випадку поставити знак хеш перед URL-фрагментом, як у прикладі <a href="#History">Історія</a>.

Warning

Атрибут id повинен не містити пробілів (пробілів, табуляції тощо) і має бути унікальним в межах документа.

Існують способи налаштувати, як браузер реагуватиме на прив’язки URL. Можна, наприклад, написати функцію JavaScript, яка прослуховує подію вікна hashchange і запускає налаштовану дію, таку як анімація або HTTP-запит. Однак варто зауважити, що фрагмент URL-адреси ніколи не надсилається на сервер разом із URL-адресою, тому HTTP-сервер не може використовувати його як ідентифікатор.

Вправи до посібника

Документ HTML, розташований за адресою http://www.lpi.org/articles/linux/index.html, має тег <img>, атрибут src якого вказує на ../logo.png. Який повний абсолютний шлях до цього зображення?
Назвіть дві причини, чому атрибут alt є важливим у тегах <img>.
Який формат зображення забезпечує хорошу якість зображення та зберігає невеликий розмір файлу, якщо він використовується для фотографій із розмитими точками і багатьма кольорами та відтінками?
Замість використання стороннього постачальника, такого як Youtube, який тег HTML дає змогу вставляти відеофайл у HTML-документ, використовуючи лише стандартні функції HTML?

Дослідницькі вправи

Припустимо, що HTML-документ має гіперпокликання <a href="pic1.jpeg">Перше зображення</a> та елемент iframe <iframe name="gallery"></iframe>. Як можна змінити тег гіперпокликання, щоб зображення, на яке воно вказує, завантажувалося всередині цього елемента iframe після того, як користувач натисне покликання?
Що станеться, коли відвідувач клацне гіперпокликання в документі всередині iframe, а атрибут target буде встановлено _self?
Ви помічаєте, що прив’язка URL-адреси для другого розділу вашої HTML-сторінки не працює. Яка ймовірна причина цієї помилки?

Підсумки

Цей урок розповідає про те, як додавати зображення та інший мультимедійний вміст за допомогою відповідних тегів HTML. Крім того, читач дізнався, як гіперпокликання можуть використовуватися для завантаження інших документів і вказівок на конкретні місця на сторінці. Урок охоплює такі поняття та процедури:

Тег <img> та його основні атрибути: src та alt.
Відносні та абсолютні шляхи URL.
Популярні формати зображень для Інтернету та їх характеристики.
Мультимедійні теги <audio> та <video>.
Як вставити вкладені документи, використовуючи тег <iframe>.
Тег гіперпокликання <a>, його атрибути href та target.
Як використовувати фрагменти URL, також відомі як хеш-якорі.

Відповіді до вправ посібника

Документ HTML, розташований за адресою http://www.lpi.org/articles/linux/index.html, має тег <img>, атрибут src якого вказує на ../logo.png. Який повний абсолютний шлях до цього зображення?

http://www.lpi.org/articles/logo.png
Назвіть дві причини, чому атрибут alt є важливим у тегах <img>.

Текстові браузери зможуть показати опис відсутнього зображення. Програми зчитування з екрана використовують атрибут alt для опису зображення.
Який формат зображення забезпечує хорошу якість зображення та зберігає невеликий розмір файлу, якщо він використовується для фотографій із розмитими точками і багатьма кольорами та відтінками?

Формат JPEG.
Замість використання стороннього постачальника, такого як Youtube, який тег HTML дає змогу вставляти відеофайл у HTML-документ, використовуючи лише стандартні функції HTML?

Тег <video>.

Відповіді до дослідницьких вправ

Припустимо, що HTML-документ має гіперпокликання <a href="pic1.jpeg">Перше зображення</a> та елемент iframe <iframe name="gallery"></iframe>. Як можна змінити тег гіперпокликання, щоб зображення, на яке воно вказує, завантажувалося всередині цього елемента iframe після того, як користувач натисне покликання?

Використанням атрибута target тегу a: <a href="pic1.jpeg" target="gallery">Перше зображення</a>.
Що станеться, коли відвідувач клацне гіперпокликання в документі всередині iframe, а атрибут target буде встановлено _self?

Документ буде завантажено всередині того самого iframe, що є поведінкою за замовчуванням.
Ви помічаєте, що прив’язка URL-адреси для другого розділу вашої HTML-сторінки не працює. Яка ймовірна причина цієї помилки?

Фрагмент URL після знака хеша не відповідає атрибуту id в елементі, який відповідає другому розділу, або id атрибут цього елемента відсутній.