Как создать html страницу

Если вам нужно понять, как создать html страницу, начните с самого простого: это обычный текстовый файл с расширением .html, который браузер умеет читать как веб-страницу.

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

Для первой страницы не нужны сложные инструменты. Достаточно:

• Текстового редактора: Блокнот, VS Code, Notepad++ или любой другой;
• Браузера для просмотра результата;
• Папки на компьютере, где будут лежать файлы проекта.

Создайте новую папку, например my-site, и внутри неё новый файл index.html. Название 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>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая HTML-страница.</p>
</body>
</html>

Разберём по смыслу:

• <!DOCTYPE html> сообщает браузеру, что используется HTML5;
• <html> оборачивает весь документ;
• <head> хранит служебные данные: кодировку, заголовок вкладки, настройки отображения;
• <body> содержит то, что увидит пользователь.

Если вы впервые разбираетесь, как создать html страницу, полезно сразу добавить meta charset. Без него русские буквы могут отображаться некорректно, особенно если файл сохранён не в той кодировке.

Как сохранить и открыть файл

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

1. Откройте редактор.
2. Вставьте базовый код.
3. Сохраните как index.html.
4. Откройте файл двойным щелчком в браузере.

После открытия вы должны увидеть заголовок в окне браузера и текст внутри страницы. Если вкладка пустая или отображается код вместо страницы, проверьте расширение файла и то, не добавил ли редактор лишний текст при сохранении.

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

Проверка занимает меньше минуты. Убедитесь, что:

• Вкладка браузера показывает текст из тега <title>;
• На странице виден заголовок <h1> и абзац <p>;
• Русские символы отображаются правильно;
• Файл действительно называется с расширением .html.

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

Что добавить дальше

Когда базовая версия готова, можно расширять её без риска сломать страницу. Например:

• Добавить ещё один заголовок <h2> для разделов;
• Вставить ссылку через <a>;
• Использовать <img> для картинок;
• Разделить контент на блоки с помощью <div> или семантических тегов.

Главное — менять по одному элементу и сразу смотреть результат в браузере. Тогда будет проще понять, какой тег за что отвечает.

Если цель — именно как создать html страницу для учёбы или первого сайта, начните с минимальной разметки, откройте её в браузере и убедитесь, что текст отображается так, как вы задумали; дальше останется только наращивать структуру.