Создание и запуск первой HTML-страницы

Иван Корнев·26.05.2026·⏱5 мин

Чтобы создать HTML-файл и открыть его в браузере, нужно написать код в любом текстовом редакторе (например, Блокнот или VS Code), сохранить файл с расширением .html (выбрав тип «Все файлы» и кодировку UTF-8) и дважды кликнуть по нему. Браузер автоматически распознает формат и отобразит веб-страницу.

Этот процесс не требует установки сложного программного обеспечения или настройки сервера. Ниже приведена подробная инструкция для Windows и macOS, а также разбор частых ошибок, из-за которых код может не работать.

Оглавление

Что понадобится для старта

Для написания и просмотра HTML-кода нужны всего два инструмента, которые уже есть на вашем компьютере:

  1. Текстовый редактор. Подойдет стандартный «Блокнот» (Notepad) в Windows или TextEdit в macOS. Для более удобной работы лучше использовать специализированные редакторы кода, такие как Visual Studio Code (VS Code) или Sublime Text.
  2. Веб-браузер. Google Chrome, Mozilla Firefox, Microsoft Edge, Safari или любой другой современный браузер.

Разница между редактором кода и браузером проста: в редакторе вы видите исходный код (инструкции для компьютера), а в браузере — визуальный результат (то, что видит пользователь).

Способ 1: Создание файла в Блокноте (Windows)

Этот метод подходит, если вы не хотите устанавливать дополнительные программы.

Шаг 1. Написание кода

  1. Откройте «Блокнот» (нажмите Win, начните вводить «Блокнот» и выберите приложение).
  2. Скопируйте и вставьте следующий базовый шаблон:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ.</p>
</body>
</html>

Шаг 2. Правильное сохранение

Это самый важный этап. Если сохранить файл неправильно, браузер откроет его как простой текст.

  1. В меню выберите Файл → Сохранить как...
  2. Выберите папку для сохранения (например, «Рабочий стол»).
  3. В поле «Имя файла» напишите название с расширением .html, например: index.html.
  4. В выпадающем списке «Тип файла» обязательно выберите Все файлы (.).
  5. В поле «Кодировка» выберите UTF-8 (чтобы корректно отображались русские буквы).
  6. Нажмите Сохранить.

Если оставить тип файла «Текстовые документы (*.txt)», Блокнот добавит скрытое расширение .txt. Файл будет называться index.html.txt, и браузер не сможет его обработать как веб-страницу.

Способ 2: Работа в Visual Studio Code (Рекомендуемый)

VS Code — бесплатный и популярный редактор для веб-разработки. Он подсвечивает синтаксис и помогает избегать ошибок.

Шаг 1. Подготовка рабочего пространства

  1. Создайте на компьютере пустую папку (например, my-site).
  2. Запустите VS Code.
  3. Перетащите папку my-site в окно программы или выберите File → Open Folder.

Шаг 2. Создание файла

  1. В левой панели (Explorer) нажмите на иконку создания нового файла.
  2. Назовите файл index.html.
  3. VS Code автоматически определит тип файла и включит цветовую подсветку кода.

Шаг 3. Генерация шаблона

Вместо ручного ввода кода можно использовать встроенную функцию Emmet:

  1. В пустом файле наберите восклицательный знак !.
  2. Нажмите клавишу Tab или Enter.
  3. Редактор автоматически создаст полноценную структуру HTML5-документа.
  4. Добавьте свой контент внутрь тега <body>.

Как открыть файл в браузере

После сохранения файла у вас есть два способа посмотреть результат.

Метод 1: Прямой запуск (Двойной клик)

Найдите сохраненный файл index.html в папке через проводник (Windows) или Finder (macOS) и дважды кликните по нему. Система откроет его в браузере, установленном по умолчанию.

Метод 2: Через интерфейс браузера

Если двойной клик не сработал или вы хотите открыть файл в конкретном браузере:

  1. Запустите браузер (Chrome, Firefox и т.д.).
  2. Нажмите комбинацию клавиш Ctrl + O (Windows/Linux) или Cmd + O (macOS).
  3. В открывшемся окне выбора файла найдите ваш index.html и нажмите «Открыть».

Адресная строка браузера при этом будет содержать путь к файлу, начинающийся с file:///.

Частые ошибки и их решение

Даже опытные разработчики иногда сталкиваются с проблемами при локальном запуске файлов. Вот чек-лист для диагностики:

ПроблемаВозможная причинаРешение
Виден код, а не страницаФайл открыт в текстовом редакторе вместо браузера.Кликните правой кнопкой мыши по файлу → «Открыть с помощью» → Выберите браузер.
Кракозябры вместо русского текстаНеверная кодировка файла.Пересохраните файл в кодировке UTF-8. В Блокноте это делается при сохранении, в VS Code — клик по надписи编码 (Encoding) в правом нижнем углу.
Файл не открывается двойным кликомСкрыто расширение .txt.Включите отображение расширений файлов в настройках проводника и переименуйте файл, убрав .txt.
Изменения не видны в браузереБраузер показывает кэшированную версию.Нажмите Ctrl + F5 (или Cmd + Shift + R на Mac) для жесткой перезагрузки страницы.

FAQ

Можно ли редактировать HTML прямо в браузере? Нет, браузер только отображает готовый файл. Чтобы внести изменения, нужно отредактировать исходный файл в текстовом редакторе, сохранить его (Ctrl + S) и обновить страницу в браузере (F5).

Какое имя дать файлу? Главную страницу сайта принято называть index.html. Для остальных страниц используйте латиницу, цифры и дефисы, избегая пробелов и специальных символов (например, about-us.html).

Почему картинки не отображаются? Если вы добавляете изображения, убедитесь, что файлы картинок лежат в той же папке, что и HTML-файл (или в подпапке), и пути к ним прописаны верно. Локальные пути чувствительны к регистру букв на некоторых системах.

Нужен ли интернет для открытия HTML-файла? Нет. HTML-файлы работают локально на вашем устройстве. Интернет потребуется только если вы подключаете внешние ресурсы (шрифты Google Fonts, скрипты с CDN или картинки по ссылкам из интернета).