структура документа

Слово HTML являє собою скорочення від HyperText Markup Language - мова розмітки гіпертексту. В основному, HTML-документ є простим текстовим файлом, який містить текст і нічого більше. Так що створювати веб-сторінки можна в будь-якому текстовому редакторі.

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

Для позначення тегів використовується символ <тег>. Теги бувають двох видів: парні, які виділяють блок тексту, також називаються ще контейнером (приклад 1) і поодинокі. Контейнер вимагає закриває тега, що позначається </ тег>. Теги нечутливі до регістру, тому запис <B> і <b> еквівалентна.

Приклад 1. Використання парних тегів (контейнера)

Дійсний код
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Контейнери </ title>
</ Head>
<Body>

<p> <b> Жирний шрифт </ b> в тексті. </ p>

</ Body>
</ Html>

Оскільки одночасно можна використовувати будь-який розумний поєднання тегів, слід пам'ятати про їх вкладеності (приклад 2). Один контейнер повинен знаходитися усередині іншого, і ніяк не перетинатися (приклад 3).

Приклад 2. Правильне поєднання тегів

Дійсний код
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Вкладення тегів </ title>
</ Head>
<Body>

<p> <b> <i> Жирний курсивний текст </ i> </ b> </ p>

</ Body>
</ Html>

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

Приклад 3. Неправильне поєднання тегів

невалідний код
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Помилка у вкладенні тегів </ title>
</ Head>

<Body>

<p> <i> <b> Жирний курсивний текст </ i> </ b> </ p>

</ Body>
</ Html>
В даному прикладі порушена вкладеність тегів один в інший. Хоча браузер і відобразить приклад коректно, самостійно «здогадавшись» що від нього хочуть, подібних помилок слід уникати, оскільки вони призводять до уповільнення роботи сторінки і до неправильної демонстрації сторінки в більшості випадків.

структура документа

Всі нормальні веб-сторінки складаються з двох розділів - заголовка (<HEAD>) і тіла документа (<BODY>). Розділ заголовка може містити текст і теги, але вміст цього розділу не показується безпосередньо на сторінці. Тіло документа призначене для розміщення тегів і змістовної частини (приклад 4).

Приклад 4. Найпростіший HTML-документ

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<! - Цей розділ призначений для заголовка сторінки і технічної інформації. ->
</ Head>

<Body>
<! - А тут треба розміщувати все, що хочеться побачити на сторінці. ->
</ Body>
</ Html>

DOCTYPE

Елемент <! DOCTYPE> призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже HTML існує в декількох версіях, крім того, є XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту), схожий на HTML, але розрізняються з ним по синтаксису. Щоб браузер «не плутався» і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати <! DOCTYPE>.

Існує кілька видів <! DOCTYPE>, вони розрізняються залежно від версії HTML, на яку орієнтовані. У табл. 1. наведено основні типи документів з їх описом.

Табл. 1. Допустимі DTD
DOCTYPE опис
HTML 4.01
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Перехідний синтаксис HTML.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd"> У HTML-документі застосовуються фрейми.
XHTML 1.0
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Перехідний синтаксис XHTML.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Frameset // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написаний на XHTML і містить фрейми.
XHTML 1.1
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN"> Розробники XHTML 1.1 припускають, що він поступово витіснить HTML. Як бачите, ніякого поділу на види це визначення не має, оскільки синтаксис один і підпорядковується чітким правилам.

Розділ заголовка документа (<HEAD>)

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

Заголовок сторінки (тег <TITLE>)

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

CSS (Cascading Style Sheets, Каскадні таблиці стилів)

Стилі зберігають набір елементів форматування, який застосовується до тексту документа, щоб швидко змінити його зовнішній вигляд.

Метатеги (тег <META>)

Метатеги використовуються для зберігання інформації призначеною для браузерів і пошукових систем. Наприклад, механізми пошукових систем звертаються до Метатеги для отримання опису сайту, ключових слів та інших даних. Хоча тег <META> всього один, він має безліч параметрів, тому для його звернення застосовується множина.

скрипти

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

Порядок тегів в заголовку документа особливого значення не має.

Тіло документа (<BODY>)

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

Коментарі

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

Коментарі починаються тегом <! - І закінчуються тегом ->. Все, що знаходиться між цими тегами відображатися на веб-сторінці не буде.