структура документа
Слово HTML являє собою скорочення від HyperText Markup Language - мова розмітки гіпертексту. В основному, HTML-документ є простим текстовим файлом, який містить текст і нічого більше. Так що створювати веб-сторінки можна в будь-якому текстовому редакторі.
Коли веб-сторінка відкривається в браузері, він переглядає код HTML, знаходить спеціальні символи, звані тегами, і використовує їх для вставки зображень, зміни виду тексту, створення посилань на інші веб-сторінки і ін.
Для позначення тегів використовується символ <тег>. Теги бувають двох видів: парні, які виділяють блок тексту, також називаються ще контейнером (приклад 1) і поодинокі. Контейнер вимагає закриває тега, що позначається </ тег>. Теги нечутливі до регістру, тому запис <B> і <b> еквівалентна.
Приклад 1. Використання парних тегів (контейнера)
<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. Правильне поєднання тегів
<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. Неправильне поєднання тегів
<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-документ
<Html>
<Head>
<! - Цей розділ призначений для заголовка сторінки і технічної інформації. ->
</ Head>
<Body>
<! - А тут треба розміщувати все, що хочеться побачити на сторінці. ->
</ Body>
</ Html>
DOCTYPE
Елемент <! DOCTYPE> призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже HTML існує в декількох версіях, крім того, є XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту), схожий на HTML, але розрізняються з ним по синтаксису. Щоб браузер «не плутався» і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати <! DOCTYPE>.
Існує кілька видів <! DOCTYPE>, вони розрізняються залежно від версії HTML, на яку орієнтовані. У табл. 1. наведено основні типи документів з їх описом.
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, деякий текст можна приховати від показу в браузері, зробивши його коментарем. Хоча такий текст користувач не побачить, він все одно буде передаватися в документі, так що, подивившись вихідний код, можна виявити приховану інформацію.
Коментарі починаються тегом <! - І закінчуються тегом ->. Все, що знаходиться між цими тегами відображатися на веб-сторінці не буде.
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.