Мова гіпертекстової сторінки. Гіпертекстовий документ.

Всесвітня павутина (World Wide Web - WWW) є одним із сервісів, що працюють в Інтернет, глобальної мережі комп'ютерних мереж, яка існує в тій чи іншій формі з 1961 р

Мова гіпертекстової розмітки HTML (HyperText Markup Language) була запропонована Тімом Бернерс-Лі в 1989 р в якості одного з компонентів технології розробки розподіленої гіпертекстової системи.

World Wide Web використовує три нові технології:

1) HTML (HyperText Markup Language, мова розмітки гіпертексту) - для створення веб-сторінок;

2) HTTP (HyperText Transfer Protocol, мережевий протокол передачі даних) - для передачі і прийому веб-сторінок;

3) програму-клієнт Web-browser (браузер, програма перегляду) - для прийому інформації, її інтерпретації та виведення на екран комп'ютера.

3. Вивчення нового матеріалу
Гіпертекст – це текст, який містить зв'язки з іншими документами («гіперзв'язки» чи «гіперпосилання»); читач має змогу перейти до пов'язаних документів безпосередньо з вихідного (первинного) тексту, активізувавши посилання. Такі посилання створюються за допомогою спеціальних кодів.

HTML (англ. HyperText Markup Language — мова розмітки гіпертекстових документів) – текстова мова розмітки, призначена для розмітки документів, які містять текст, зображення, гіперпосилання, тощо. Процес розміщення в текст кодів НТМL називають розміткою.

Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html. Документи створені мовою HTML називають HTML-документи.

Тег (від англ. tag - "ярлик, бірка; розмічувати, маркувати") - це символ розмітки мови HTML, який подається в кутових дужках <>. Тег ще називають дескриптором.

За допомогою дескрипторів у HTML-документі можна форматувати такі елементи: параграфи, розділи, абзаци, списки, малюнки, таблиці, колонтитули, індекси, зміст тощо. Кожен елемент має свою унікальну назву, яка записується латинськими літерами. В загальному вигляді елемент має три складові:

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

Атрибути задають технічну інформацію про елемент.

Зміст елементу — це вся необхідна текстова та графічна інформація документу, яка буде відтворюватися браузером на екрані.

Розмітка документів – це опис різних фрагментів документа та їх взаємного розташування. Розмітка здійснюється за допомогою дескрипторів (тегів) мови HTML.

Переглянути розмітку будь-якого HTML-документа можна, якщо відкрити його у простому текстовому редакторі, типу Блокнот. Або, якщо документ відкрити у веб-оглядачі, наприклад, Опера, то достатньо клацнути правою кнопкою миші на документі та обрати команду «Исходный код».

Свої HTML-файли можна розробляти на локальному диску. При цьому комп`ютер може і не мати доступу до мережі Інтернет. Під час роботи, html-документ може бути одночасно відкритий і в Блокноті, і у веб-оглядачі. Збергіаючи зміни в Блокноті, потрібно натиснути кнопку оновлення сторінки, наприклад F5 чи Ctrl+R, щоб побачити ці зміни в HTML-документі.

Етапи роботи:

1. Відкрити програму Блокнот.

2. Відкрити вікно збереження документа.

3. Вибрати тип файла «Всі файли».

4. Ввести ім’я файла із зазначенням його розширення – html .

5. Ввести структуру документа та зберегти.

6. Закрити документ у програмі Блокнот.

7. Відкрити документ у веб-оглядачі.

Наступного разу, коли потрібно здійснити оновлення HTML-документу, цей файл потрібно відкривати за допомогою програми Блокнот.

Загальна структура HTML документа

HTML-документ складається з трьох основних елементів:

Декларація типу документу – на початку документа, в якій визначається тип документа.

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

Тіло документа (може знаходитися в елементах body), в якому містяться основні відомості документа, його зміст.

Елемент, обмежений кутовими дужками <> є дескриптором. Дескриптори можуть бути двох видів: початковий та кінцевий. Наприклад, для позначення типу документа, одного дескриптора <html> не достатньо, потрібен ще й кінцевий – </html>, який позначається так само, але перед ключовим словом додається знак «слеш».

<html></html>

Загальна структура HTML документа:

<html>

<head>

<title>Мій перший HTML-документ</title>

</head>

<body>

Хочу знати як створювати HTML-документ!

</body>

</html>

Приклади опису властивостей тега body:

• bgcolor="white" — задати білий колір тла;

• text="black" — задати чорний колір тексту;

• background="picture.jpg" — задати зображення для тла;

• bgproperties="fixed" — зображення тла не прокручувати;

• style="text-align:justify;" — вирівнювати текст за шириною.

Крім цих атрибутів тега body використовують і такі:

• link — колір невідвіданих гіперпосилань;

• vlink — колір відвіданих гіперпосилань;

• alink — колір гіперпосилань, обраних користувачем;

• contenteditable — дозвіл (значення true) або заборона (значення false для елемента body або inherit для усіх інших елементів) користувачу редагувати HTML-документ у браузері.

Теги форматування символів (дескриптори стилів) завжди є парними:

<b>…</b> — жирне написання;

<i>…</i> — курсив;

<u>…</u> — підкреслення;

<strike>…</strike> — перекреслення;

<tt>…</tt> — стала ширина літер;

_… — нижній індекс;

^… — верхній індекс;

<big>…</big> — збільшити шрифт;

<small>…</small> — зменшити шрифт;

<em>…</em> — логічний наголос

<cite>…</cite> — цитування

<code>…</code> — текст коду

<samp>…</samp> — результат виконання програми

<strong>…</strong> — виділення

<dfn>…</dfn> — текст означення (залежно від браузера);

<var>…</var> — назва змінної або параметра

<kbd>…</kbd> — назва клавіші

<xmp>…</xmp> —текст-зразок

Наприклад, жирний курсив задають таким чином: <b><i>текст</i></b>.

Форматування тексту мовою HTML виконують з використанням спеціальних тегів:

• <h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6> — відображення заголовків відповідно 1, 2, 3, 4, 5 і 6 рівнів — перелічено у порядку зменшення розміру шрифту. Як встановлено, заголовок буде вирівняно за лівим краєм вікна;

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

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

• <nobr>…</nobr> — заборона перенесення слів, яку можна подавити тегом <wbr>;

• <center>…</center> — центрування;

• <br> — обривання рядка без пропуску рядка;

• <hr> — проведення горизонтальної лінії.

Перші два види тегів (з перелічених вище) мають атрибут align з такими можливими значеннями:

• center — центрування;

• justify — вирівнювання за шириною;

• left — вирівнювання за лівим краєм;

• right — вирівнювання за правим краєм

Розміри символів шрифту можуть бути від 1 до 7 (перелічено від найменшого до найбільшого). Розмір 3 вважають стандартним, він приблизно відповідає 10 пунктам. Значення "+2" атрибута size означає, що розмір шрифту має бути на дві одиниці більший ніж стандартний, тобто п'ятий.

Колір тексту можна задати його назвою англійською мовою:

• aqua — бірюзовий;

• black — чорний;

• blue — світло-синій;

• fuchsia — бузковий;

• gray — сірий;

• green — зелений;

• lime — салатовий;

• maroon — бордовий;

• navy — синій;

• olive — оливковий;

• purple — фіолетовий;

• red — червоний;

• silver — сріблястий;

• teal — сіро-зелений;

• white — білий;

• yellow — жовтий.