🤔 З чого починається будь-яка веб-сторінка?

📜 Історія: від ідеї до Всесвітньої павутини

🔗 Гіпертекст і гіперпосилання

Ключова ідея гіпертексту: документи не ізольовані. Раніше, щоб знайти потрібну інформацію, треба було знати, у якій книзі чи папці вона лежить, і дістатися туди фізично. У гіпертексті достатньо натиснути на виділене слово — і ви вже в іншому документі.

Саме гіперпосилання зробили Всесвітню павутину павутиною: мільярди сторінок з’єдналися в одну величезну мережу, де кожна сторінка може вказувати на будь-яку іншу.

🌐 Що таке HTML

HTML — це не мова програмування

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

Тобто HTML не «думає» і нічого не обчислює. Він лише позначає: «це заголовок», «це абзац», «це посилання». А вже браузер вирішує, як саме це показати.

Навіщо взагалі потрібні теги?

Подивімося на два однакові тексти. Перший — звичайний текст без тегів. Другий — той самий текст, але з тегами.

❌ Без тегів

✅ З тегами

Різниця очевидна:

• У першому випадку браузер показує суцільний текст. Він не знає, де заголовок, а де абзац. Посилання не клікабельне.
• У другому випадку браузер бачить команди: <h1> робить текст великим заголовком, <p> розділяє абзаци, <a> перетворює слово на клікабельне посилання.

Тобто теги — це команди для браузера. Ми ніби кажемо йому:

• «Це — заголовок першого рівня, зроби його великим»;
• «Це — абзац, відокрем його від інших відступом»;
• «Це — посилання, зроби його клікабельним».

Саме завдяки тегам браузер перетворює звичайний текст на структуровану сторінку.

Тег, елемент, атрибут

Ці три поняття — фундамент HTML. Розберімо кожне окремо.

Теги бувають двох видів:

• Відкриваючий тег — початок елемента: <h1>.
• Закриваючий тег — кінець елемента, з косою рискою: </h1>.

На скріншоті з тегами вище видно, що весь текст усередині <h1>...</h1> став великим заголовком, а текст у <p>...</p> — абзацом. Посилання ж стало клікабельним завдяки атрибуту href, у якому вказано адресу переходу.

⚙️ Як браузер перетворює код на сторінку

Ми вже знаємо, що HTML описує структуру документа. Але як саме браузер перетворює текстовий файл із тегами на сторінку, яку ми бачимо на екрані? Розберімо цей процес покроково.

1. Запит до сервера. Коли ви вводите адресу сайту і натискаєте Enter, браузер надсилає запит на сервер, де зберігається цей сайт.
2. Отримання HTML-файлу. Сервер у відповідь повертає браузеру HTML-файл — звичайний текстовий файл із тегами, який ми з вами вже бачили.
3. Читання коду. Браузер читає цей файл згори вниз, рядок за рядком. Кожен тег він сприймає як інструкцію для побудови сторінки.
4. Побудова структури. На основі тегів браузер будує структуру сторінки — своєрідне дерево, де кожен елемент займає своє місце: заголовок, абзац, список, посилання.
5. Застосування стилів. Паралельно браузер застосовує стилі — окремий набір правил, який визначає, як саме виглядатимуть елементи: кольори, шрифти, розміри, відступи. Ці правила описані мовою CSS, яку ми вивчимо пізніше.
6. Малювання сторінки. І лише після цього браузер малює сторінку на екрані — так, як ви її бачите.

Це означає, що HTML не «фарбує» текст у червоний колір і не вирівнює його по центру. Він лише каже: «це заголовок», «це абзац», «це посилання». А вже CSS вирішує, як саме цей заголовок чи абзац має виглядати.

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

🏗️ Структура HTML-документа

Будь-який HTML-документ має обов’язковий каркас. Ось мінімальний приклад:

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8">
    <title>Моя перша сторінка</title>
  </head>
  <body>
    <h1>Привіт, світ!</h1>
  </body>
</html>

Розберімо кожен рядок.

Схематично структуру документа можна зобразити так:

<!DOCTYPE html>          ← оголошення типу документа
<html lang="uk">          ← корінь
  <head>                  ← службова інформація (не видно)
    <meta charset="UTF-8"> ← кодування
    <title>...</title>     ← назва вкладки
  </head>
  <body>                  ← вміст сторінки (видно)
    <h1>...</h1>           ← контент
  </body>
</html>

🔤 Кодування символів

Комп’ютер зберігає текст не як «літери», а як числа. Кожному символу відповідає певне число. Правило, за яким символ перетворюється на число (і навпаки), називається кодуванням.

Існує багато кодувань. Якщо браузер використовує одне кодування, а документ записано в іншому — символи відображаються неправильно. Замість «Привіт» можна побачити щось на кшталт «ÐŸÑ€Ð¸Ð²Ñ–Ñ‚». Це явище називають «крякозябрами».

Сучасний стандарт — UTF-8. Він підтримує символи практично всіх мов світу, включно з українською, китайською, арабською. Саме тому в <head> обов’язково вказують:

<meta charset="UTF-8">

📦 Вкладеність тегів

Теги бувають двох видів: парні та одиночні.

Парні теги

Парний тег складається з двох частин: відкриваючого та закриваючого тега.

• Відкриваючий тег — <em> — каже браузеру: «тут починається курсив».
• Закриваючий тег — </em> — каже браузеру: «тут курсив закінчується».

Навіщо це потрібно? Бо браузер має знати, де саме діє команда. Якщо ми напишемо лише <em> без закриваючого тега, браузер не знатиме, де закінчується курсив — і зробить курсивом усе, що йде далі. Саме тому парні теги завжди використовуються разом: відкриваючий — на початку, закриваючий — у кінці.

Приклади парних тегів:

• <em>...</em> — курсив;
• <strong>...</strong> — жирний;
• <p>...</p> — абзац;
• <h1>...</h1> — заголовок першого рівня.

Одиночні теги

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

Наприклад, <br> — це перенесення рядка. Він не «охоплює» текст, а лише каже браузеру: «перенеси рядок ось тут». Після цього дія завершується сама по собі.

Приклади одиночних тегів:

• <meta charset="UTF-8"> — кодування;
• <br> — перенесення рядка;
• <img> — зображення;
• <hr> — горизонтальна лінія.

Що буде, якщо не поставити закриваючий тег

Подивімося на два приклади.

❌ Без закриваючого тега:

Браузер не знайшов </em>, тому вважає, що курсив триває до кінця документа. Усе, що йде далі, буде курсивом.

✅ Із закриваючим тегом:

Тут браузер бачить </em> і розуміє: «курсив закінчується ось тут». Далі текст іде звичайним шрифтом.

Правило вкладеності

Коли теги вкладаються один в одного, діє правило вкладеності:

✅ Правильно:

<body>
  <h1>Заголовок</h1>
  <p>Абзац із <em>курсивом</em>.</p>
</body>

❌ Неправильно:

<body>
  <h1>Заголовок
</body>
  </h1>

💬 Коментарі в HTML

Іноді в коді потрібно залишити пояснення — для себе або для інших розробників. Для цього використовують коментарі.

<!-- це коментар, він не відображається на сторінці -->

Усе, що знаходиться між цими символами, браузер повністю ігнорує — не показує на сторінці й не застосовує як тег.

Навіщо потрібні коментарі

• Пояснення в коді. Можна залишити замітку для себе або колеги: що робить певна частина коду, чому вона саме така.
• Тимчасове «вимкнення» коду. Якщо потрібно перевірити щось без певного блоку, його можна не видаляти, а закоментувати — і браузер його проігнорує.
• Орієнтація у великих файлах. У довгих документах коментарі допомагають швидко знайти потрібну частину.

Приклад

<body>
  <!-- Тут починається заголовок сторінки -->
  <h1>Моя перша сторінка</h1>

  <!-- А тут — основний текст -->
  <p>Це абзац тексту про мене.</p>
</body>

На сторінці відобразяться лише заголовок і абзац. Коментарі залишаться тільки в коді.

🎯 Практична робота: створення першої веб-сторінки

Перейдіть за посиланням на онлайн-редактор (посилання дасть учитель).

Що ви побачите в редакторі

• Ліва частина — редактор коду з трьома вкладками: HTML, CSS, JavaScript. На цьому уроці ми працюємо лише з вкладкою HTML.
• Права частина — вікно попереднього перегляду. Воно оновлюється автоматично: щойно ви щось змінюєте в коді, одразу бачите результат.
• Внизу — поле для коментаря вчителю та кнопки «Зберегти чернетку» й «Здати на перевірку».

Завдання

У редакторі вже є заготовка HTML-документа з мінімальною структурою. Ваше завдання — доповнити її:

1. Змініть <title>. Замість Зайомство з HTML напишіть своє прізвище та ім’я. Перевірте — цей текст має з’явитися на вкладці браузера.
2. Змініть <h1>. Замість Прізвище та Ім'я учня впишіть своє прізвище та ім’я. Це буде головний заголовок сторінки.
3. Додайте абзац. Нижче заголовка, після коментаря <!-- Пишіть свій HTML-код нижче -->, додайте елемент <p> із коротким текстом про себе (2–3 речення). Наприклад: «Я навчаюсь у 11 класі. Цікавлюсь веб-розробкою. Хочу навчитися створювати власні сайти.»
4. Перевірте результат. Подивіться у вікно попереднього перегляду — там мають бути ваш заголовок і абзац.
5. Збережіть і здайте. Спочатку натисніть «Зберегти чернетку». Потім — «Здати на перевірку».

Приклад результату

Ось як приблизно має виглядати ваш код після виконання завдання:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Петренко Олег</title>
</head>
<body>
  <h1>Петренко Олег</h1>
  <!-- Пишіть свій HTML-код нижче -->
  <p>Я навчаюсь у 11 класі. Цікавлюсь веб-розробкою. Хочу навчитися створювати власні сайти.</p>
</body>
</html>

Якщо виникають питання під час виконання — залишайте їх у полі «Коментар до роботи» внизу редактора.