Структура HTML-коду

Якщо відкрити будь-яку веб-сторінку, то вона буде містити в собі типові елементи, які не змінюються від виду і спрямованості сайту. У прикладі 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> є універсальним і додає цілий клас можливостей, зокрема, за допомогою метатега, як узагальнено називають цей елемент, можна змінити кодування сторінки, додати ключові слова, опис документа і багато іншого, призначене для браузера або пошукових систем. Зокрема, щоб браузер розумів, що має справу з кодуванням 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>.

Перейти до завдань

Статьи

Новости