AcademyCloud — онлайн-курси програмування

Веб-сторінка — це текстовий файл, який браузер читає і перетворює на те, що ти бачиш. Жодної магії: HTML описує що на сторінці, CSS — як воно виглядає, JavaScript — як воно поводиться. Цей курс про перші два.

Що робить браузер

Коли ти відкриваєш сторінку, браузер:

Завантажує HTML-файл
Читає його зверху вниз і будує DOM — дерево елементів
Знаходить посилання на CSS, завантажує, будує дерево стилів
Рахує, де що розмістити (layout)
Малює пікселі (paint)

Розуміння цього порядку пояснює багато речей далі. Наприклад, чому <link> на CSS ставлять у <head>: щоб браузер дізнався про стилі до того, як почне малювати, і сторінка не блимнула нестилізованим текстом.

Перша сторінка

Створи файл index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя перша сторінка</title>
</head>
<body>
  <h1>Привіт!</h1>
  <p>Це моя перша сторінка.</p>
</body>
</html>

Відкрий файл у браузері подвійним кліком — воно працює. Локальний сервер поки не потрібен.

Розбір по рядках

<!DOCTYPE html> — каже браузеру працювати за сучасним стандартом. Без нього браузер вмикає «режим сумісності» зі старим інтернетом, і частина CSS поводиться дивно. Пиши завжди.

<html lang="uk"> — корінь документа. Атрибут lang реальний, не косметичний: за ним екранні читалки обирають вимову, а браузер — правила перенесення слів.

<head> — інформація про сторінку. На екрані її не видно.

<meta charset="UTF-8"> — кодування. Без нього кирилиця перетвориться на «кракозябри». Має стояти першим у <head>.

<meta name="viewport" …> — каже мобільному браузеру не вдавати, що екран шириною 980px. Без цього рядка сайт на телефоні виглядатиме як зменшена десктопна версія.

<body> — усе, що видно.

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

<a href="https://example.com" title="Приклад">Посилання</a>
 ↑    ↑                                        ↑        ↑
тег  атрибут                                вміст   закривний тег

Більшість тегів парні: <p>…</p>. Деякі — одинарні, бо їм нічого обгортати: <img>, <br>, <meta>, <input>.

Вкладеність має бути правильною. Так:

<p>Текст <strong>важливий</strong> далі</p>

Так не можна — теги перетинаються:

<p>Текст <strong>важливий</p></strong>

Браузер це «полагодить» на свій розсуд, і результат тебе здивує.

Коментарі

<!-- Це коментар, у браузері не видно -->

Але видно у вихідному коді сторінки. Не лишай там нічого зайвого.

Як дивитися, що відбувається

Найважливіший інструмент верстальника — DevTools. Відкрий сторінку і натисни F12 (або Ctrl+Shift+I, на macOS Cmd+Option+I).

Вкладка Elements показує живий DOM: клікаєш елемент — бачиш його стилі праворуч, можеш правити прямо там і одразу бачити результат. Зміни не зберігаються у файл — це пісочниця для експериментів.

Звикай працювати з відкритими DevTools. Верстка «наосліп» із перезавантаженням сторінки після кожної правки — найповільніший спосіб вчитися.

Структура проєкту

Далі знадобиться щось таке:

my-site/
├── index.html
├── styles/
│   └── main.css
└── images/
    └── logo.png

Підключення CSS — у <head>:

<link rel="stylesheet" href="styles/main.css">

Практика

Створи index.html за прикладом вище.
Додай другий заголовок <h2> і ще два абзаци.
Відкрий DevTools, знайди свій <h1> у вкладці Elements, зміни його текст прямо там.
Перезавантаж сторінку — зміна зникла. Зрозумій чому.

Підсумок

HTML описує структуру, CSS — вигляд, JS — поведінку
<!DOCTYPE html>, charset, viewport і lang — чотири рядки, які треба писати завжди
<head> — про сторінку, <body> — сама сторінка
DevTools відкриті постійно, а не «коли щось зламалося»

Далі — чому обгортати все підряд у <div> погана ідея.

Як влаштований веб: браузер, HTML, перша сторінка