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

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

Оскільки в подальшому будемо працювати тільки з HTML5, то нам буде потрібно тільки один короткий і сучасний доктайп.

<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> визначає назву веб-сторінки. У браузері воно відображається на поточній вкладці
Елемент <title> є обов'язковим і повинен неодмінно бути присутнім в коді документа. Усередині дозволяється писати тільки текст і ніяких інших елементів в <title> бути не повинно. Але припустимо додавати різні текстові символи, наприклад, так: <title> Adobe ™ Photoshop® </ title>.

</head>

Закриваючий тег </head> показує, що «голова» документа завершена.

<body>

«Тіло» документа <body> призначений для розміщення елементів і вмісту веб-сторінки.

</body>

Слід додати закриваючий тег </body>, щоб показати, що «тіло» документа завершено.

</html>

Останнім елементом в коді завжди йде закриваючийє тег </html>.

Ключові слова

Є ціле сімейство тегів <meta>, які називаються мета-тегами. Їх можна використовувати всередині тега <head>. Мета-теги розрізняються набором атрибутів і їх значень, ось деякі з атрибутів: content, http-equiv, name і scheme.
Мета-теги зберігають корисну для браузерів і пошукових систем інформацію. Один з таких тегів - це опис ключових слів сторінки.
Задається він так:

<meta name="keywords" content="різні, ключові, слова">

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

Опис змісту сторінки

Ще один корисний для пошукових систем мета-тег - короткий опис сторінки. Він задається
так:

<meta name="description" content="короткий опис">

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

Коментарі на сторінці

Коментар в HTML-коді задається так:

<!-- будь який текст -->

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

Для коментування коду. Завжди корисно залишити підказку.
Для тимчасового відключення коду. Видаляти код незручно, так як його треба буде відновлювати, а закомментувати і потім розкоментувати - найкраще рішення.

Коментарі можна використовувати в будь-якому місці сторінки, крім тега <title> - всередині нього вони не працюють

Тест "Базова структура веб-сторінки"

ЗАВДАННЯ ДЛЯ САМОСТІЙНОГО ВИКОНАННЯ

ЗАВДАННЯ 1: Зкопіюйте код веб-сторінки і вставте в новий створенний файл struktura.html у вашій папці, відобразіть файл у браузері, внесіть зміни у код файлу, щоб текст у браузері можливо було прочитати:

<!DOCTYPE html>

<html>

<head>

<title>Кодування HTML-сторінки</title>

</head>

<body>

<h1>Кодування сторінки</h1>

<p>Коли кодування документа задана невірно, деякі символи відображаються як «ієрогліфи», а деякі ні</p>

</body>

</html>

ЗАВДАННЯ 2: розкоментуйте обидва тега <p> в розділі "Коментарі для пояснень". Закоментуйте будь який абзац <p> в розділі "Чи коли видаляти шкода"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML-коментарі</title>
</head>
<body>

<h1>Коментарі для пояснень</h1>



<h1>Чи коли видаляти шкода</h1>
<p>Іноді якийсь код дуже шкода або страшно видаляти.</p>
<p>Тому його можуть тимчасово закоментити.</p>

</body>
</html>

ЗАВДАННЯ 3: Самостійно задайте мета-інформацію сторінки:

Заголовок сторінки "Верстка для не-технарів"
Ключові слова: верстка, комп'ютерна грамотність, програмування.
Короткий опис: "Приклади того, що вивчення веб-технологій може бути корисно для всіх"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Для чого вивчають верстку</h1>

<p>Раніше термін «комп'ютерна грамотність» за своєю суттю означав уміння працювати з офісним пакетом, але життя не стоїть на місці, і тепер все більше експертів заявляють про те, що вкрай важливим навиком для широкого кола людей стає вміння програмувати.</p>

<p>При цьому програмування - величезна галузь знань, тільки невелика частина якої може дійсно стати в нагоді звичайній людині (тобто "не-технарю»). Ми вважаємо, що основу «нової комп'ютерної грамотності» має скласти знання верстки.</p>

</body>
</html>