Урок 19. Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи. Текстові елементи веб-сторінки, теги та їх атрибути. Гіперпосилання

19.1. Мова гіпертекстової розмітки В 1989 році Тім Бернерс-Лі запропонував упровадити гіпертекстову систему документів. Наприкінці 1991 року він опублікував у Інтернеті перший загальнодоступний опис мови розмітки HTML — «HTML теги». Він же створив і першу програму для перегляду гіпертекстових документів — браузер. Бернерс-Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року Спеціальна Комісія Інтернет-розробок (IETF) офіційно визначила її такою, опублікувавши першу специфікацію HTML. Наразі більшість веб-документів створюють за допомогою мови розмітки гіпертексту HTML (англійською Hyper Text Markup Language — мова розмітки гіпертексту). Призначення HTML — описати зовнішній вигляд документа за умови, що розміри екрану і масштаб подання тексту можуть змінюватися у процесі перегляду. Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html. 19.2. Гіпертекстовий документ та його елементи Гіпертекст - це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань. Ці коди визначені у мові програмування HTML - мова гіпертекстової розмітки. Веб-сторінка - це документ у форматі HTML. Процес вставляння в текст кодів HTML називають розміткою. HTML-файл — це програма подання тексту, написана мовою HTML, яку опрацьовує браузер і подає результат у своєму програмному вікні. Дескрипторами називають ті теги, які вказують на спосіб відтворення інформації програмою-браузером. Теги — вказівки HTML — записують у «кутових» дужках, утворених символами «<» і «>» — «менше» й «більше». Контейнери — це парні теги. Контейнери позначають початок і кінець області дії відповідної вказівки. Між цими тегами може міститися текст та інші теги. Тег, що закриває область дії, порівняно з тим, що відкриває, має додаткову косу риску одразу після «кутової» дужки. Oпис властивостей контейнера записують у першому дескрипторі контейнера через пропуск після назви контейнера або з нового рядка. Нечислові значення параметрів прийнято записувати у лапках. Для створення HTML-файлу можна використати найпримітивніший текстовий редактор. Наприклад, Блокнот (NotePad) для ОС Windows. Інколи, у середовищі цих редакторів здійснено виділення кольором дескрипторів. Наприклад, у середовищі Kate для ОС Linux Mint KDE. Хоча привабливішим видається використання спеціалізованих редакторів з поданням сторінки різними способами. Наприклад, редактора Kompozer чи Sublime Text. 19.3. Текстові елементи веб-сторінки, теги та їх атрибути Структура HTML-документа (згідно зі стандартом HTML 4.01). Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом . Заголовок документа, розташований у межах контейнера , — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері. Тіло документа, розташоване у межах контейнера або , — містить основну інформацію про опис документа. Структура HTML-документа Змістовна частина документа Тег html вказує браузеру, що він опрацьовує HTML-код. Все, що розташовано між парними тегами і є HTML-документом. Атрибутом version можна задати версію HTML: ; Атрибутом lang можна задати основну мову документа, скажімо українську: . Назва документа — текст між тегами . До тексту назви не застосовують форматування. Назва має бути короткою, інформативною і адекватно відображати зміст документа. У заголовку документа можуть міститися деякі важливі дані, які використовуються браузерами, але в більшості випадків не відображаються, — метадані. Для цього використовується елемент meta, який задають одинарним тегом з такими атрибутами: name — назва змінної; content — значення змінної; charset — кодування документа, наприклад utf-8; lang — код мови, що визначає мову значень змінної; http-equiv — вказує назву додаткового параметра. Атрибут lang потрібно використовувати для створення списку ключових слів певною мовою, на які відгукнеться пошукова система при запиті. Наприклад, англійською: Значення атрибута http-equiv та опис дії атрибута content (після тире): Expires — задає дату і час оновлення документа; Content-Language — аналог атрибуту lang тега html; Content-Type — вказує тип документа та кодування символів; Refresh — задає інтервал у секундах між оновленнями вмісту документа. Приклади опису властивостей тега body: bgcolor="white" — задати білий колір тла; text="black" — задати чорний колір тексту; background="picture.jpg" — задати зображення для тла; bgproperties="fixed" — зображення тла не прокручувати; style="text-align:justify;" — вирівнювати текст за шириною. Крім цих атрибутів тега body використовують і такі: link — колір невідвіданих гіперпосилань; vlink — колір відвіданих гіперпосилань; alink — колір гіперпосилань, обраних користувачем; contenteditable — дозвіл (значення true) або заборона (значення false для елемента body або inherit для усіх інших елементів) користувачу редагувати HTML-документ у браузері. Для введення в HTML-документ зарезервованих символів мови HTML (наприклад, > або &) або символів, які неможливо ввести з клавіатури, передбачено механізм посилань на символи. Для найпоширеніших символів у мові HTML передбачено назви. У цій таблиці вказано деякі посилання і вигляд відповідного символу. Теги форматування символів (дескриптори стилів) завжди є парними: … — жирне написання; … — курсив; … — підкреслення; … — перекреслення; … — стала ширина літер; _… — нижній індекс; ^… — верхній індекс; … — збільшити шрифт; … — зменшити шрифт; … — логічний наголос … — цитування … — текст коду … — результат виконання програми … — виділення … — текст означення (залежно від браузера); … — назва змінної або параметра … — назва клавіші &#8230; —текст-зразок У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними. Форматування тексту мовою HTML виконують з використанням спеціальних тегів:

…

,

…

,

…

,

…

,

…

,

…

— відображення заголовків відповідно 1, 2, 3, 4, 5 і 6 рівнів — перелічено у порядку зменшення розміру шрифту.

…

— створення нового абзацу без відступу у першому рядку, між абзацами буде порожній рядок;

…

— відображення тексту у повній відповідності до форматування, здійсненого за допомогою текстового редактора (пропуски, невідтворювані символи кінця рядка); … — заборона перенесення слів, яку можна подавити тегом ; … — центрування;
— обривання рядка без пропуску рядка;

---

— проведення горизонтальної лінії. Перші два види тегів (з перелічених вище) мають атрибут align з такими можливими значеннями: center — центрування; justify — вирівнювання за шириною; left — вирівнювання за лівим краєм; right — вирівнювання за правим краєм і атрибут title — текст підказки. Крім цього тег

…

має атрибут tabindex, який задає порядковий номер абзацу при переміщенні HTML-документом у вікні браузера за допомогою клавіші Tab. Колір тексту можна задати його назвою англійською мовою: aqua — бірюзовий; black — чорний; blue — світло-синій; fuchsia — бузковий; gray — сірий; green — зелений; lime — салатовий; maroon — бордовий; navy — синій; olive — оливковий; purple — фіолетовий; red — червоний; silver — сріблястий; teal — сіро-зелений; white — білий; yellow — жовтий. Колір можна задати кодами кольорової моделі RGB, як це роблять при роботі з графічним редактором. Наприклад, #ff7800. Контактну інформацію записують у контейнері

…

. Коментар записують у контейнері … або використовують тег . Текст всередині цих тегів на екран браузера не буде показано. 19.4. Гіперпосилання Гіперпосилання - це один з найголовніших компонентів html-документів. Саме завдяки цим звичайним посиланням, Інтернет такий простий у використанні. Розглянемо найпростіші варіанти вставки гіперпосилань: посилання можуть бути як на сайті, так і на сторінці, як на свій сайт, так і на зовнішній, тому коди потрібно розрізняти між собою. Такий код буде працювати тільки на Вашому сайті, для зовнішніх посилань, він не підійде. 1. Для створення посилання на сайт, нам потрібно використовувати код: ***** Де, замість *** – посилання на сайт у форматі «http: // ….», а замість ***** – текст, під який поміщається гіперпосилання. Приклад: Журнал Як зробити все 2. Щоб створити гіперпосилання на сторінку, використовуємо такий же код, тільки тепер вказуємо повністю шлях до сторінки, на прикладі це виглядатиме так: Як зробити переказ Вебмані? 3. Як створити гіперпосилання в html на зовнішній сайт? Для зовнішніх посилань, код слід трохи змінити. Щоб зробити посилання на інший сайт, використовуємо код: ***** Де, замість *** – посилання на зовнішній сайт у форматі «http: // ….», а замість ***** – текст, під який поміщається гіперпосилання. Приклад: Головна сторінка групи Довідник HTML тегів Базові теги