Якщо відкрити будь-яку веб-сторінку, то вона буде містити в собі типові елементи, які не змінюються від виду і спрямованості сайту. У прикладі 1 показаний код простого документа, що містить основні елементи.
Приклад 1. Вихідний код веб-сторінки
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Приклад веб-сторінки </ title> </ head> <body> <h1> Заголовок </ h1> <! - - Коментар -> <p> Перший абзац. </ p> <p> Другий абзац. </ p> </ body> </ html>
Скопіювати вміст даного прикладу і збережіть його в папці c: \ www \ під ім'ям example2.html. Після цього запустіть браузер і відкрийте файл через пункт меню (Ctrl + O). У діалоговому вікні вибору документа вкажіть файл example2.html. У браузері відкриється веб-сторінка, показана на рис. 1.
Мал. 1. Результат прикладу в браузері
Далі розберемо окремі рядки нашого коду.
<! DOCTYPE html>
Елемент <! DOCTYPE> (жарг. Доктайпів) призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже HTML існує в декількох версіях - сучасний HTML5 або застарілі HTML4 і XHTML. Щоб браузер «не плутався» і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати <! DOCTYPE>.
Оскільки ми в подальшому будемо працювати тільки з HTML5, то нам буде потрібно тільки один короткий і сучасний доктайпів.
Ми згадували, що імена елементів можна писати маленькими і великими літерами. До <! DOCTYPE> це правило теж відноситься і його можна записувати по різному. Проте, традиційно ім'я цього елемента пишеться у верхньому регістрі.
<Html>
Хто відкриває тег <html> визначає початок HTML-документа, всередині нього зберігається «голова» (<head>) і «тіло» документа (<body>).
<Head>
Вміст цього розділу не показується безпосередньо на сторінці, за винятком елемента <title>. Усередині <head> можуть розташовуватися такі елементи: <base>, <link>, <meta>, <script>, <style> або <title>.
<Meta charset = "utf-8">
Елемент <meta> є універсальним і додає цілий клас можливостей, зокрема, за допомогою метатега, як узагальнено називають цей елемент, можна змінити кодування сторінки, додати ключові слова, опис документа і багато іншого, призначене для браузера або пошукових систем. Зокрема, щоб браузер розумів, що має справу з кодуванням UTF-8 (Unicode transformation format, формат перетворення Юнікод) і додається даний рядок.
<Title> Приклад веб-сторінки </ title>
Елемент <title> визначає назву веб-сторінки. У браузері воно відображається на поточній вкладці (рис. 2).
Мал. 2. Назва веб-сторінок в браузері
Елемент <title> є обов'язковим і повинен неодмінно бути присутнім в коді документа. Усередині дозволяється писати тільки текст і ніяких інших елементів в <title> бути не повинно. Але припустимо додавати різні текстові символи, наприклад, так: <title> Adobe ™ Photoshop® </ title>.
</ Head>
Закриває тег </ head> показує, що «голова» документа завершена.
<Body>
«Тіло» документа <body> призначений для розміщення елементів і вмісту веб-сторінки.
<H1> Заголовок </ h1>
HTML пропонує шість текстових заголовків різного рівня, які показують відносну важливість розділу, розташованого після заголовка. Так, елемент <h1> представляє собою найбільш важливий заголовок першого рівня, а елемент <h6> служить для позначення заголовка шостого рівня і є найменш значним. За замовчуванням, заголовок першого рівня відображається найбільшим шрифтом жирного накреслення, заголовки подальшого рівня за розміром менше. Елементи <h1> ... <h6> відносяться до блокових елементів, вони завжди починаються з нового рядка, а після них інші елементи відображаються на наступному рядку. Крім того, перед заголовком і після нього браузер додає порожній простір.
<! - Коментар ->
Деякий текст можна заховати від показу в браузері, зробивши його коментарем. Хоча такий текст користувач не побачить, він все одно буде передаватися в документі, так що, подивившись його вихідний код, можна виявити приховані замітки.
Коментарі потрібні для внесення в код своїх записів, які не впливають на вигляд сторінки. Починаються вони тегом <! - і закінчуються тегом ->. Все, що знаходиться між цими тегами, відображатися на веб-сторінці не буде.
<P> Перший абзац. </ P>
Елемент <p> визначає абзац тексту.
<P> Другий абзац. </ P>
Елемент <p> є блоковим, тому текст завжди починається з нового рядка, абзаци йдуть один за одним розділяються між собою відбиттям (так називається порожній простір між ними). Це добре видно на рис. 1.
</ Body>
Слід додати закриває тег </ body>, щоб показати, що «тіло» документа завершено.
</ Html>
Останнім елементом в коді завжди йде закриває тег </ html>.
Перейти до завдань