Як створити HTML-сторінку з нуля

Для HTML не потрібні спеціальні програми — підійде навіть звичайний Блокнот (Notepad) на Windows. Але для комфортної роботи краще використати редактор коду:

• Блокнот / TextEdit — працює, але без підсвітки синтаксису й підказок. Підійде для першого досвіду.
• VS Code — безкоштовний, підсвічує теги, підказує закриваючі елементи, показує помилки. Рекомендований варіант.

Головне правило: файл має зберігатися з розширенням .html, а не .txt.

Створіть файл index.html і вставте базовий каркас сторінки:

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

Збережіть файл і відкрийте його прямо в браузері (двічі клікнувши на файл) — цього достатньо, сервер не потрібен.

Створіть у тій самій папці файл styles.css і підключіть його в <head>:

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

У styles.css можна почати з простого правила:

body {
  font-family: sans-serif;
  max-width: 700px;
  margin: 0 auto;
}

Для простого сайту достатньо однієї папки з такою структурою:

my-site/
  index.html
  styles.css
  images/
    photo.jpg

Шляхи в HTML пишуться відносно розташування index.html, наприклад images/photo.jpg.

• Забутий закриваючий тег — браузер часто «пробачає» це, але верстка може зламатися.
• Файл збережено як index.html.txt — перевірте розширення у властивостях файлу.
• Шлях до CSS або зображення вказаний неправильно (регістр літер має значення на більшості серверів).
• Кирилиця показується «кракозябрами» — відсутній <meta charset="UTF-8">.