Первая страница на HTML и CSS: ошибки новичков и как их обойти

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

Половина проблем у новичков — не в незнании тегов, а в мелочах, о которых нигде не предупреждают: файл сохранён не в той кодировке, стили не подключились из-за неверного пути, страница выглядит гигантской на телефоне. Их мы обойдём заранее.

Что нужно до начала

Никаких серверов и программ для установки не требуется. Достаточно трёх вещей.

• Текстовый редактор. Подойдёт бесплатный VS Code (актуальная версия на 2024–2025 год). Блокнот Windows тоже работает, но подсветку синтаксиса и автозакрытие тегов он не даёт — с редактором ошибок будет меньше.
• Браузер. Любой современный: Chrome, Firefox, Edge. В нём вы будете открывать результат.
• Папка под проект. Создайте отдельную папку, например my-site. Всё сложим туда: страница и файл стилей должны лежать рядом, иначе стили не подключатся — это ошибка номер один, к ней вернёмся.

Шаг 1. Каркас HTML

Создайте в папке файл index.html. Имя важно: index — это страница, которую сервер и браузер открывают по умолчанию. Вставьте туда каркас:

<!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>

</body>
</html>

Две строки внутри <head> решают самые частые беды новичков. charset="UTF-8" отвечает за то, чтобы русский текст не превратился в «кракозябры». viewport заставляет мобильный браузер показывать страницу в реальном масштабе, а не уменьшать её до нечитаемого. Без этой строки сайт на телефоне выглядит так, будто его отдалили в три раза.

Проверка: откройте index.html двойным кликом. Появится белая пустая страница, а во вкладке браузера — заголовок «Моя первая страница».

Шаг 2. Наполнение

Внутрь <body> добавьте структуру. Здесь важны семантические теги — header, main, footer. Они не только удобны для стилей, но и подсказывают браузеру и поисковикам, где что находится.

<header class="site-header">
  <div class="logo">МойСайт</div>
  <nav>
    <a href="#about">О нас</a>
    <a href="#contacts">Контакты</a>
  </nav>
</header>

<main>
  <h1>Привет, это моя первая страница</h1>
  <p>Здесь я учусь верстать на HTML и CSS. Пока немного,
     но всё впереди.</p>
  <img src="photo.jpg" alt="Описание картинки" width="300">
</main>

<footer class="site-footer">
  <p>© 2025 МойСайт</p>
</footer>

Про картинку: положите любой photo.jpg в ту же папку или уберите строку с <img>, если картинки нет. Атрибут alt — не для красоты: его читают скринридеры и поисковики, и он показывается, если картинка не загрузилась. Пустой alt оставляют только у чисто декоративных изображений.

Проверка: обновите страницу в браузере (F5). Появится текст, ссылки меню и картинка. Пока без оформления — сплошной чёрный текст на белом, ссылки синие с подчёркиванием. Это нормально: стилей ещё нет.

Шаг 3. Подключаем CSS

Создайте в той же папке файл style.css. Имя должно точно совпадать с тем, что вы написали в href="style.css" — с учётом регистра букв. На сервере Style.css и style.css — разные файлы, и на вашем компьютере под Windows это может «прощаться», а на реальном хостинге стили молча отвалятся.

/* сброс отступов по умолчанию */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #333;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #1a1a2e;
  color: #fff;
}

.site-header nav a {
  color: #fff;
  margin-left: 16px;
  text-decoration: none;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

main img {
  max-width: 100%;
  height: auto;
}

.site-footer {
  padding: 16px 24px;
  background: #f0f0f0;
  text-align: center;
}

Разберём три места, которые важнее остальных. box-sizing: border-box заставляет ширину блока включать в себя отступы и рамку — без этого элемент с width: 100% и padding вылезет за край экрана, и новичок не понимает, почему появилась горизонтальная прокрутка. max-width: 100% у картинки не даёт ей растянуть страницу шире экрана телефона. А margin: 0 auto у main центрирует контент по горизонтали — только для блока с заданной шириной, к обычному тексту это не относится.

Правило box-sizing: border-box в начале файла экономит новичку часы недоумения. Без него любой отступ внутри блока делает его шире, чем вы задали, — и всё начинает разъезжаться.

Проверка: обновите страницу. Шапка станет тёмной полосой с логотипом слева и меню справа, текст — по центру, подвал — серым внизу. Если ничего не изменилось — стили не подключились, идите в раздел ниже.

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

Пять ошибок, которые встречаются почти у всех.

• Стили не применились, страница осталась чёрно-белой. Скорее всего файл называется style.css.txt — Windows прячет расширения. Включите показ расширений в проводнике и уберите лишний .txt. Второй вариант — путь в href не совпадает с именем файла или файл лежит в другой папке.
• Вместо русских букв — «Ð¿Ñивеѻ. Файл сохранён не в UTF-8. В VS Code кликните по надписи с кодировкой в правом нижнем углу, выберите «Save with Encoding» → «UTF-8».
• Картинка не показывается, вместо неё иконка-заглушка. Файла photo.jpg нет в папке либо имя отличается (например, Photo.JPG). Проверьте точное имя и расширение.
• Страница на телефоне мелкая, приходится увеличивать пальцами. Потеряна строка <meta name="viewport"...> в <head>. Вернits.
• Горизонтальная прокрутка, часть контента уезжает вправо. Обычно виноват блок с padding без box-sizing: border-box или картинка без max-width: 100%. Проверьте, что сброс в начале CSS на месте.

Как проверить, что всё правильно

Откройте инструменты разработчика в браузере: клавиша F12. Вкладка «Console» покажет ошибки — например, если браузер не нашёл файл стилей, там будет красная строка с 404 по style.css. Кнопка с иконкой телефона (Toggle device toolbar, Ctrl+Shift+M в Chrome) переключает вид на мобильный — так вы увидите страницу глазами смартфона, не доставая телефон.

Что дальше

Когда каркас работает, двигайтесь по одной теме за раз, не хватаясь за всё сразу:

1. Разберитесь с Flexbox — вы уже применили его в шапке. Он отвечает за расстановку элементов в ряд и колонку и закрывает большинство задач вёрстки.
2. После него — CSS Grid для сеток из карточек и сложных раскладок.
3. Добавьте медиазапросы (@media), чтобы менять раскладку на узких экранах, — это следующий шаг к адаптивности.

Справочник, которому можно верить по синтаксису свойств, — MDN Web Docs. Не ищите ответы на форумах по устаревшим приёмам вроде вёрстки на float и таблицах: сегодня это Flexbox и Grid.