Первая страница на HTML и CSS: что подготовить до начала

К концу этого гайда у вас будет страница, которая открывается в браузере: с заголовком, абзацем текста, картинкой и оформлением через CSS — цвета, отступы, шрифт. На всё уйдёт 20–40 минут, если вы делаете это впервые. Ничего платить и никуда регистрироваться не нужно: HTML и CSS — это обычные текстовые файлы, которые читает любой браузер.

Что нужно иметь до начала

Проверьте это до первой строки кода — иначе застрянете на середине.

• Браузер — подойдёт любой современный: Chrome, Firefox, Safari, Edge. Он уже стоит на вашем компьютере.
• Редактор кода — не «Блокнот» и не Word. Word сохраняет форматирование и ломает файл. Скачайте Visual Studio Code — бесплатный, работает на Windows, macOS и Linux.
• Папка для проекта — создайте где угодно, например на рабочем столе, папку с именем my-site латиницей, без пробелов и русских букв. В неё сложим все файлы.

Больше ничего не требуется. Ни сервера, ни хостинга, ни командной строки — файл открывается двойным кликом.

Как устроены два файла

Страница живёт в двух файлах. index.html — это содержимое: что написано, где картинка, где заголовок. style.css — это оформление: какого цвета текст, какие отступы, какой шрифт. Разделять их не обязательно, но так принято: правишь внешний вид — открываешь CSS, правишь текст — HTML.

HTML отвечает на вопрос «что это», CSS — на вопрос «как это выглядит». Заголовок остаётся заголовком, даже если вы покрасите его в зелёный или синий — смысл в HTML, цвет в CSS.

Собираем страницу по шагам

Открывайте VS Code, папку my-site через меню «Файл → Открыть папку», и по порядку.

1. Создайте файл index.html. В VS Code нажмите на иконку нового файла в панели слева, введите имя index.html с расширением. Вставьте в него это:

   <!DOCTYPE html>
   <html lang="ru">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Моя первая страница</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <h1>Привет, это моя страница</h1>
     <p>Первый абзац текста. Здесь можно написать что угодно.</p>
     <img src="photo.jpg" alt="Описание картинки">
   </body>
   </html>

   Проверка: файл сохранён (Ctrl+S / Cmd+S), в углу вкладки нет белой точки — значит, изменения записаны.

2. Откройте файл в браузере. Найдите index.html в папке через проводник и дважды кликните. Или в браузере нажмите Ctrl+O и выберите файл.

   Проверка: в браузере появился крупный заголовок «Привет, это моя страница» и под ним абзац. Вместо картинки, скорее всего, значок сломанного изображения — это нормально, файла photo.jpg у нас ещё нет.

3. Добавьте картинку. Положите любой файл изображения в папку my-site и переименуйте его в photo.jpg (или поправьте в HTML имя на своё). Имя в атрибуте src должно точно совпадать с именем файла, включая расширение.

   Проверка: обновите страницу в браузере (F5) — картинка отобразится.

4. Создайте файл style.css в той же папке. Вставьте оформление:

   /* Настройки для всей страницы */
   body {
     font-family: Arial, sans-serif;
     max-width: 700px;
     margin: 40px auto;
     padding: 0 20px;
     color: #333;
     line-height: 1.6;
   }
   
   /* Заголовок первого уровня */
   h1 {
     color: #2a5d84;
   }
   
   /* Картинка не вылезает за ширину контейнера */
   img {
     max-width: 100%;
     height: auto;
     border-radius: 8px;
   }

   Проверка: обновите страницу. Текст сузился до колонки по центру, шрифт сменился на рубленый, заголовок стал синим, картинка получила скруглённые углы. Если ничего не поменялось — значит, браузер не нашёл CSS. См. раздел ниже.

Как CSS находит нужный элемент

В CSS слева стоит селектор — имя элемента, к которому применяются правила. body — вся страница, h1 — заголовок, p — абзацы, img — картинки. Внутри фигурных скобок — пары «свойство: значение», каждая заканчивается точкой с запятой. Забытая точка с запятой — самая частая причина, почему одно правило «не сработало», а следующее вроде бы работает.

Если не получилось

• Оформление не применяется, страница выглядит как голый текст. Проверьте, что index.html и style.css лежат в одной папке, а в HTML написано ровно href="style.css" — без пути вроде css/style.css, если папки css у вас нет.
• Вместо картинки — значок с разрывом. Имя файла в src не совпадает с реальным. Windows часто прячет расширения: файл может называться photo.jpg.jpg. Включите показ расширений в проводнике и сверьте.
• Русский текст превратился в кракозябры (привет). Пропала строка <meta charset="UTF-8"> в <head>, либо редактор сохранил файл в другой кодировке. В VS Code кодировка UTF-8 стоит по умолчанию — проверьте её в правом нижнем углу окна.
• Файл открывается как текст с тегами, а не как страница. Расширение не .html, а, например, .txt. Переименуйте файл и убедитесь, что он оканчивается на .html.
• Правки в файле не видны в браузере. Вы забыли сохранить файл (Ctrl+S) или не обновили страницу (F5). Сохраняйте после каждого изменения.

Что попробовать дальше

Страница работает — теперь можно расширять. Ближайшие шаги, каждый займёт несколько минут:

• Добавьте ещё теги в <body>: <h2> для подзаголовка, <ul> с пунктами <li> для списка, <a href="https://...">текст ссылки</a>.
• Поиграйте со свойствами CSS: background-color для фона, text-align: center для выравнивания, padding и margin для отступов.
• Освойте инструменты разработчика: правый клик по элементу на странице → «Просмотреть код». Там видно, какой CSS применён к элементу, и можно править прямо в браузере, чтобы подобрать значения.

Ориентир для справки — MDN Web Docs: там описан каждый тег и каждое свойство с примерами. Раскладка проекта в несколько страниц и публикация в интернете — отдельные темы, здесь мы остановились на локальной странице в браузере.