Що таке HTML і структура сторінки
Зрозумій з чого складається кожна веб-сторінка
HTML — це скелет будівлі
Кожна веб-сторінка має три шари: HTML (скелет — структура), CSS (дизайн — як виглядає), JavaScript (поведінка — що робить). HTML описує ЩО є на сторінці: заголовок, параграф, кнопка, зображення. Без CSS все сіре і без стилів, але структура вже є.
Структура HTML документу
Кожен HTML файл починається з однієї й тієї ж базової структури:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Назва сторінки</title>
</head>
<body>
<!-- Весь видимий вміст тут -->
<h1>Привіт, світ!</h1>
</body>
</html><!DOCTYPE html>— повідомляє браузеру що це HTML5<html lang="uk">— корінний елемент,langвказує мову<head>— мета-інформація (не видима користувачу)<body>— весь видимий вміст сторінки
Теги — будівельні блоки HTML
Тег — це команда браузеру яка виглядає так: <назва>вміст</назва>
Майже всі теги мають відкриваючий <p> і закриваючий </p> варіанти.
Основні текстові теги:
| Тег | Призначення | Приклад |
|---|---|---|
<h1> до <h6> | Заголовки (h1 — найбільший) | <h1>Головний заголовок</h1> |
<p> | Параграф тексту | <p>Звичайний текст</p> |
<strong> | Жирний текст | <strong>Важливо!</strong> |
<em> | Курсив | <em>Акцент</em> |
<br> | Перенос рядка (без закриваючого) | Рядок 1<br>Рядок 2 |
<hr> | Горизонтальна лінія | <hr> |
Ось повна базова сторінка. Зверни увагу на відступи (indentation) — вони допомагають читати структуру.
Відкрий будь-яку сторінку в браузері і натисни правою кнопкою → "Переглянути код" (або F12). Ти побачиш HTML цієї сторінки. DevTools — твій найкращий інструмент для вивчення верстки.