Якщо відкрити будь-яку веб-сторінку, то вона буде містити в собі типові елементи, які не змінюються від виду і спрямованості сайту. У прикладі 4.1 показаний код простого документа, що містить основні теги.
Приклад 4.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=utf-8"> <title> Приклад веб-сторінки </title> </head> <body> <h1> Тема </h1> <! - Коментар -> <p> Перший абзац. </p> <p> Другий абзац. </p> </body> </html>
Скопіюйте вміст даного прикладу і збережіть його в папці c: \ www \ під ім'ям example41.html. Після цього запустіть браузер і відкрийте файл через пункт меню . У діалоговому вікні вибору документа вкажіть файл example41.html. У браузері відкриється веб-сторінка, показана на рис. 4.1.
Далі розберемо окремі рядки нашого коду.
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
Елемент <!DOCTYPE> призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як варто інтерпретувати поточну веб-сторінку, адже HTML існує в декількох версіях, крім того, є XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту), схожий на HTML, але розрізняються з ним по синтаксису. Щоб браузер « не плутався » і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати <!DOCTYPE> .
Існує кілька видів <!DOCTYPE> , вони відрізняються в залежності від версії HTML, на яку орієнтовані. У табл. 4.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-документі застосовуються фрейми. |
| HTML 5 | |
| <!DOCTYPE html> | У цій версії 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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Розробники XHTML 1.1 припускають, що він поступово витіснить HTML. Як бачите, ніякого поділу на види це визначення не має, оскільки синтаксис один і підпорядковується чітким правилам. |
Різниця між строгим і перехідним описом документа полягає в різному підході до написання коду документа . Строгий HTML вимагає жорсткого дотримання специфікації HTML і не прощає помилок. Перехідний HTML більш « спокійно » відноситься до деяких огріхів коду, тому цей тип в певних випадках використовувати краще.
Наприклад, в строгому HTML і XHTML неодмінно потрібна наявність тега <title> , а в перехідному HTML його можна опустити і не вказувати. При цьому пам'ятаємо, що браузер в будь-якому випадку покаже документ, незалежно від того, чи відповідає він синтаксису чи ні. Подібна перевірка здійснюється за допомогою валідатора і призначена в першу чергу для розробників, щоб відстежувати помилки в документі.
В подальшому будемо застосовувати переважно строгий <!DOCTYPE> , крім випадків, коли це обмовляється особливо. Це дозволить нам уникати типових помилок і привчить до написання синтаксично правильного коду.
Часто можна зустріти код HTML взагалі без використання <!DOCTYPE> , веб-сторінка в подібному випадку все одно буде показана. Проте, може статися, що один і той же документ відображається в браузері по-різному при використанні <!DOCTYPE> і без нього. Крім того, браузери можуть по-своєму показувати такі документи, в результаті сторінка « розсиплеться », тобто буде відображатися зовсім не так, як це потрібно розробнику. Щоб не сталося подібних ситуацій, завжди додавайте <!DOCTYPE> в початок документа.
<html>
Тег <html> визначає початок HTML-файла, всередині нього зберігається заголовок ( <head> ) і тіло документа ( <body> ).
<head>
Тема документа, як ще називають блок <head> , може містити текст і теги, але вміст цього розділу не показується безпосередньо на сторінці, за винятком контейнера <title> .
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Тег <meta> є універсальним і додає цілий клас можливостей, зокрема, за допомогою метатегов, як узагальнено називають цей тег, можна змінювати кодування сторінки, додавати ключові слова, опис документа і багато іншого. Щоб браузер розумів, що має справу з кодуванням UTF-8 (Unicode transformation format, формат перетворення Юнікод) і додається даний рядок.
<title> Приклад веб- сторінки </title>
Тег <title> визначає заголовок веб-сторінки, це один з важливих елементів призначений для вирішення безлічі завдань. В операційній системі Windows текст заголовка відображається в лівому верхньому кутку вікна браузера (рис. 4.2).
Тег <title> є обов'язковим і повинен неодмінно бути присутнім в коді документа.
</head>
Обов'язково варто додавати закриває тег </head> , щоб показати, що блок заголовка документа завершено.
<body>
Тіло документа <body> призначений для розміщення тегів і змістовної частини веб-сторінки.
<h1> Тема </h1>
HTML пропонує шість текстових заголовків різного рівня, які показують відносну важливість секції, розташованої після заголовка. Так, тег <h1> представляє собою найбільш важливий заголовок першого рівня, а тег <h6> служить для позначення заголовка шостого рівня і є найменш значним. За умовчанням, заголовок першого рівня відображається найбільшим шрифтом жирного накреслення, заголовки подальшого рівня за розміром менше. Теги <h1> ... <h6> відносяться до блокових елементів, вони завжди починаються з нового рядка, а після них інші елементи відображаються на наступному рядку. Крім того, перед заголовком і після нього додається порожній простір.
<! - Коментар ->
деякий текст можна заховати від показу в браузері, зробивши його коментарем. Хоча такий текст користувач не побачить, він все одно буде передаватися в документі, так що, подивившись вихідний код, можна виявити приховані замітки.
Коментарі потрібні для внесення в код своїх записів, які не впливають на вигляд страніци.Начінаются вони тегом <! - і закінчуються тегом -> . Все, що знаходиться між цими тегами, відображатися на веб-сторінці не буде.
<p> Перший абзац. </p>
Тег <p> визначає абзац (параграф) тексту. Якщо закриває тега немає, вважається, що кінець абзацу збігається з початком наступного блокового елемента.
<p> Другий абзац. </p>
Тег <p> є блоковим елементом, тому текст завжди починається з нового рядка, абзаци йдуть один за одним розділяються між собою відбиттям (так називається порожній простір між ними). Це добре видно на рис. 4.1.
</body>
варто додати закриває тег </body> , щоб показати, що тіло документа завершено.
</html>
Останнім елементом в коді завжди йде закриває тег </html> .