032.1 Урок 1

Сертифікат:

Основи веброзробки

Версія:

1.0

Розділ:

032 Розмітка HTML-документа

Тема:

032.1 Анатомія HTML-документа

Lesson:

1 з 1

Вступ

HTML (HyperText Markup Language) – це мова розмітки, яка повідомляє браузерам як структурувати та відображати вебсторінки. Поточна версія 5.0 була випущена у 2012 році. Синтаксис HTML визначається World Wide Web Consortium (W3C).

HTML розглядається як фундаментальний навик у веброзробці, оскільки він визначає структуру та значну частину зовнішнього вигляду вебсайту. Якщо ви хочете зробити кар’єру веброзробника, HTML, безумовно, є хорошим початком.

Анатомія HTML-документа

Базова HTML-сторінка має таку структуру:

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Page</title>
    <!-- Це заголовок документа -->
  </head>

  <body>
    <!-- Це тіло документа -->
  </body>
</html>

Тепер розберемо її детальніше.

HTML-теги

HTML використовує елементи та теги для опису та форматування контенту. Теги визначаються кутовими дужками навколо імені тегу, наприклад, <title>. Ім’я тегу не чутливе до регістру, хоча Консорціум W3C рекомендує використовувати малі літери в поточних версіях HTML. HTML-теги використовуються для створення елементів HTML. Тег <title> є прикладом відкриваючого тегу елемента HTML, який визначає заголовок HTML-документа. Однак елемент має ще два складники. Повний елемент <title> виглядає так:

<title>Моя HTML-сторінка</title>

Тут Моя HTML-сторінка слугує вмістом елементу, а `</title>`виконує роль закриваючого тегу, який оголошує, що цей елемент завершений.

Note	Не всі елементи HTML потрібно закривати; в таких випадках ми говоримо про порожні елементи, елементи, що самозакриваються.

Розглянемо інші елементи HTML з попереднього прикладу:

<html>: Охоплює весь HTML-документ. Він містить усі теги, з яких складається сторінка. Також зазначає, що вміст цього файлу написаний мовою HTML. Його відповідним закриваючим тегом є </html>.
<head>: Контейнер для всієї мета інформації про сторінку. Відповідним закриваючим тегом цього елемента є </head>.
<body>: Контейнер для вмісту сторінки та структурного представлення цього вмісту. Його відповідним закриваючим тегом є </body>.

Теги <html>, <head>, <body> та <title> також називають skeleton tags (тегами скелету), які забезпечують основну структуру HTML-документа. Зокрема, вони повідомляють браузеру, що він читає HTML-сторінку.

Note	З цих HTML-елементів тег `<title>` - єдиний, який є обов’язковим при перевірці HTML-документа.

Як бачимо, кожна HTML-сторінка є добре структурованим документом і може навіть бути співставлена з деревом, де елемент <html> представляє корінь документа, а елементи <head> і <body> це перші гілки. Приклад показує, що елементи можуть бути вкладеними: наприклад, елемент <title> вкладений в елемент <head>, який теж вкладений в елемент <html>.

Щоб упевнитись, що ваш HTML-код можна читати та підтримувати, переконайтеся, що всі елементи HTML закриті належним чином і в належному порядку. Браузери все ще можуть відображати ваш вебсайт, як очікувалося, але неправильне вкладення елементів та їхніх тегів є практикою, що породжує помилки.

Нарешті, окремо згадується декларація doctype у самій верхній частині прикладу структури документа. <!DOCTYPE> – це не тег HTML, а інструкція для браузера, що зазначає версію HTML, яка використовується в документі. У базовій структурі HTML-документа, що було показано раніше, використовувався <!DOCTYPE html>, і це вказує, що в цьому документі використовується HTML5.

HTML-коментарі

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

<!-- Це коментар. -->

<!--
    Це
    коментар, який
    займає кілька рядків.
-->

Приклад демонструє, що HTML-коментарі можуть бути розміщені в одному рядку, але також можуть охоплювати кілька рядків. У будь-якому випадку, результатом є те, що текст між  ігнорується браузером і, отже, не відображається на сторінці HTML. Виходячи із цих міркувань, ви можете зробити висновок, що проста сторінка HTML, показана в попередньому розділі, не відображає жодного тексту, оскільки рядки  і  – це лише два коментарі.

Warning

Коментарі не можуть бути вкладеними.

HTML-атрибути

HTML-теги можуть містити один або більше атрибутів для зазначення деталей HTML-елемента. Простий тег з двома атрибутами має такий вигляд:

<tag attribute-a="value-a" attribute-b="value-b">

Атрибути завжди повинні бути встановлені на початковому, відкриваючому тегу.

Атрибут складається з імені, яке вказує властивість, що слід встановити, знаку рівності та бажаного значення в лапках. Як одинарні, так і подвійні лапки допускаються, але рекомендується використовувати одинарні або подвійні лапки послідовно для всього проєкту. Важливо не змішувати одинарні та подвійні лапки для одного значення атрибута, оскільки браузер не розпізнає змішані лапки як один блок.

Note

Ви можете без проблем включити один тип лапок до іншого типу. Наприклад, якщо вам потрібно використати ' у значенні атрибута, ви можете загорнути це значення в ". Однак якщо ви хочете використовувати той самий тип лапок у значенні, що ви використовуєте для обгортки, вам потрібно використовувати " для " і ' для '.

Атрибути можна розділити на основні атрибути та специфічні атрибути, як пояснюється в наступних розділах.

Основні атрибути (Core Attributes)

Основні атрибути – це атрибути, які можна використовувати для будь-якого елемента HTML. Серед них:

title: Описує вміст елемента. Його значення часто відображається як підказка, коли користувач наводить курсор на елемент.
id: Пов’язує унікальний ідентифікатор з елементом. Цей ідентифікатор має бути унікальним в межах документа, і документ не перевірятиметься, якщо декілька елементів мають однаковий id.
style: Призначає графічні властивості (стилі CSS) елементу.
class: Визначає один або кілька класів для елемента списку імен класів, розділених пробілами. На ці класи можна посилатися в таблицях стилів CSS.
lang: Визначає мову вмісту елемента, з використанням стандарту двозначних кодів мов ISO-639.

Note	Розробник може зберігати персоналізовану інформацію про елемент, визначивши так званий атрибут `data-` , який позначається префіксом бажаного імені з `data-`, як у `data-additionalinfo`. Ви можете призначити цьому атрибуту значення, як і будь-якому іншому атрибуту.

Специфічні атрибути (Specific Attributes)

Інші атрибути є специфічними для кожного елемента HTML. Наприклад, атрибут src HTML-елемента <img> визначає URL-адресу зображення. Є ще багато специфічних атрибутів, які будуть розглянуті в наступних уроках.

Заголовок документа

Заголовок документа визначає метаінформацію про сторінку і описується елементом <head>. За замовчуванням браузер не відображає інформацію із заголовка документа. Хоча є можливість використовувати елемент <head> для розміщення HTML-елементів, які можуть відображатися на сторінці, робити цього не рекомендується.

Заголовок

Назва документа вказується за допомогою елемента <title>. Заголовок, зазначений між тегами, відображається в рядку заголовка браузера і є запропонованою назвою для закладки, коли ви намагаєтеся додати сторінку в закладки. Він також відображається в результатах пошуку як заголовок сторінки.

Приклад такого елемента:

<title>Моя тестова сторінка</title>

Тег <title> є обов’язковим у всіх HTML-документах і має бути присутнім лише один раз у кожному документі.

Note	Не плутайте заголовок документа із заголовком сторінки, який встановлюється в тілі документа.

Метадані

Елемент <meta> використовується для визначення метаінформації для подальшого опису вмісту HTML-документа. Це так званий самозакриваючий елемент, що означає, що він не має закриваючого тега. Окрім основних атрибутів, які дійсні для кожного елемента HTML, елемент <meta> також використовує такі атрибути:

name: Визначає, які метадані будуть описані в цьому елементі. У ньому можна встановити будь-яке спеціальне значення, але зазвичай використовуються значення author, description, та keywords.
http-equiv: Надає HTTP-заголовок для значення атрибута content. Поширеним значенням є refresh, пояснення якому буде надано пізніше. Якщо цей атрибут встановлено, атрибут name встановлювати не слід.
content: Надає значення, пов’язане з атрибутом name або http-equiv.
charset: Визначає кодування символів для HTML-документа, наприклад, utf-8, щоб установити Unicode Transformation Format – 8-бітний.

Додавання автора, опису та ключових слів

Використовуючи тег <meta>, ви можете зазначити додаткову інформацію про автора HTML-сторінки і описати вміст сторінки таким чином:

<meta name="author" content="Ім'я Прізвище">
<meta name="description" content="Короткий опис вмісту сторінки.">

Спробуйте включити в опис ряд ключових слів, пов’язаних із вмістом сторінки. Цей опис часто є першим, що бачить користувач під час навігації за допомогою пошукової системи.

Якщо ви також хочете забезпечити для пошукових систем додаткові ключові слова, пов’язані з вебсторінкою, ви можете додати цей елемент:

<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

Note

Раніше спамери вводили сотні ключових слів та описів, не пов’язаних із фактичним вмістом сторінки, щоб вона також з’являлася в пошукових запитах, незалежно від термінів, які шукали люди. Сьогодні теги <meta> мають другорядне значення і використовуються лише для консолідації тем, що висвітлюються на вебсторінці, тож більше неможливо ввести в оману нові та більш складні алгоритми пошукових систем.

Перенаправлення HTML-сторінки та визначення інтервалу оновлення документа

Використовуючи тег <meta>, ви можете автоматично оновити сторінку HTML через певний період (наприклад, через 30 секунд) таким чином:

<meta http-equiv="refresh" content="30">

Крім того, ви можете переспрямувати вебсторінку на іншу вебсторінку через той самий проміжок часу за допомогою наступного коду:

<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

У цьому прикладі користувач перенаправляється з поточної сторінки на http://www.lpi.org через 30 секунд. Значення можуть бути будь-якими. Наприклад, якщо ви вкажете content="0; url=http://www.lpi.org", переспрямування сторінки відбудеться негайно.

Зазначаємо кодування символів

Атрибут charset визначає кодування символів для HTML-документа. Типовий приклад:

<meta charset="utf-8">

Цей елемент визначає, що кодуванням символів документа є utf-8. Це універсальний набір символів, який включає практично будь-які символи будь-якої людської мови. Таким чином, використовуючи це кодування, ви уникнете проблем із відображенням деяких символів, які можуть виникнути при використанні інших наборів символів, наприклад ISO-8859-1 (латинський алфавіт).

Інші корисні приклади

Ще два корисних застосування тегу <meta>:

Встановити файли cookie, щоб відстежувати відвідувачів сайту.
Контроль області перегляду (видимої області вебсторінки у вікні браузера), яка залежить від розміру екрана пристрою користувача (наприклад, мобільного телефону або комп’ютера).

Однак ці два приклади виходять за рамки іспиту, і їх вивчення залишається допитливому читачеві для самостійного опрацювання.

Вправи до посібника

Для кожного з наступних тегів вкажіть відповідний закриваючий тег:

<body>

<head>

<html>

<meta>

<title>
Яка різниця між тегом та елементом? Під час пояснення використовуйте запис нижче:

<title>HTML Page Title</title>
Як виглядають теги, між якими можна розмістити коментар?
Поясніть, що таке атрибут і наведіть кілька прикладів для тегу <meta>.

Дослідницькі вправи

Створіть простий документ HTML версії 5 із заголовком My first HTML document і лише одним абзацом у тілі документа, який містить текст Hello World. Використовуйте тег абзацу <p> у тілі документа.
Додайте автора (Kevin Author) та опис (This is my first HTML page.) HTML-документа.
Додайте наступні ключові слова, пов’язані з документом HTML: HTML, Example, Test, та Metadata.
Додайте елемент <meta charset="ISO-8859-1"> до заголовка документа та змініть текст Hello World на японський (こんにちは世界). Що відбулося? Як ви можете вирішити проблему?
Після зміни тексту абзацу назад на Hello World, переспрямуйте HTML-сторінку на https://www.google.com через 30 секунд і додайте коментар із поясненням цих дій в заголовку документа.

Підсумки

На цьому уроці ви дізналися про:

Роль HTML.
HTML skeleton.
HTML-синтаксис (теги, атрибути, коментарі).
HTML-заголовок.
Теги meta.
Як створити простий HTML-документ.

На цьому уроці обговорювалися наступні терміни:

<!DOCTYPE html>: Тег оголошення.
<html>: Контейнер для всіх тегів, які складають сторінку HTML.
<head>: Контейнер для всіх елементів заголовку.

Контейнер для всіх елементів тіла документа.

<meta>: Тег для метаданих, який використовується для визначення додаткової інформації для сторінки HTML (наприклад, автора, опису та схеми кодування символів).

Відповіді до вправ посібника

Для кожного з наступних тегів вкажіть відповідний закриваючий тег:

<body>

</body>

<head>

</head>

<html>

</html>

<meta>

None

<title>

</title>
Яка різниця між тегом та елементом? Під час пояснення використовуйте запис нижче:

<title>HTML Page Title</title>

Елемент HTML складається з відкриваючого тегу, закриваючого тегу та всього, що розташовано між ними. Тег HTML використовується для позначення початку або кінця елемента. Тому <title>HTML Page Title</title> – це елемент HTML, а <title> та </title> - відкриваючий та закриваючий теги відповідно.
Як виглядають теги, між якими можна розмістити коментар?

Коментар вставляється між тегами  і може бути розміщений в одному рядку або може охоплювати декілька рядків.
Поясніть, що таке атрибут і наведіть кілька прикладів для тегу <meta>.

Атрибут використовується для більш точного визначення елемента HTML. Наприклад, тег <meta> використовує пару атрибутів name та content, щоб додати інформацію про автора та опис сторінки HTML. Натомість, використовуючи атрибут charset, ви можете вказати кодування символів для HTML-документа.

Відповіді до дослідницьких вправ

Створіть простий документ HTML версії 5 із заголовком My first HTML document і лише одним абзацом у тілі документа, який містить текст Hello World. Використовуйте тег абзацу <p> у тілі документа.
```
<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>
```

Додайте автора (Kevin Author) та опис (This is my first HTML page.) HTML-документа.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Додайте автора (Kevin Author) та опис (This is my first HTML page.) HTML-документа.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Додайте елемент <meta charset="ISO-8859-1"> до заголовка документа та змініть текст Hello World на японський (こんにちは世界). Що відбулося? Як ви можете вирішити проблему?

Якщо цей приклад виконано так, як описано, японський текст відображається неправильно. Це тому, що ISO-8859-1 представляє кодування символів для латинського алфавіту. Щоб переглянути текст, потрібно змінити кодування символів, скориставшись, наприклад UTF-8 (<meta charset="utf-8">).

Після зміни тексту абзацу назад на Hello World, переспрямуйте HTML-сторінку на https://www.google.com через 30 секунд і додайте коментар із поясненням цих дій в заголовку документа.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
    <meta charset="utf-8">
    <!-- Через 30 секунд ця сторінка перенаправляється на Google -->
    <meta http-equiv="refresh" content="30; url=https://www.google.com">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>