Как сделать сайт на HTML в 2026: index.html, CSS и публикация

Сайт на HTML начинается с папки и файла index.html: создайте его в любом текстовом редакторе, вставьте шаблон главной страницы и откройте файл в браузере. Затем добавьте оформление на CSS и загрузите файлы на бесплатный GitHub Pages, который использует index.html как входной файл сайта. ИИ тоже может подготовить index.html по описанию; перед публикацией откройте файл в браузере и проверьте результат.

Что значит «сайт на чистом HTML»

HTML описывает структуру страницы с помощью тегов: заголовок, абзац, картинку, ссылку. Браузер читает разметку и рисует страницу, а за внешний вид отвечает CSS. «Чистый» HTML значит, что вы пишете разметку сами, без конструкторов и фреймворков. Понимать эту базу полезно, даже если позже вы соберёте сайт в конструкторе или с помощью ИИ: вы будете видеть, из чего состоит страница, и сможете её править.

Для простой страницы (визитка, лендинг из одного экрана, портфолио) чистого HTML и CSS хватает полностью. Для общей базы данных, приёма заявок и входа в личный кабинет нужен сервер или внешний сервис. Кнопки, меню и анимацию в браузере делают CSS и JavaScript, сервер для них не нужен.

Минимальная структура: файл index.html

Для минимальной страницы сохраните разметку в index.html. Главный файл выбирает веб-сервер или хостинг: когда адрес заканчивается на папку (/), сервер отдаёт из неё входной файл. У nginx по умолчанию задан index.html. Скопируйте этот минимальный шаблон HTML5:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет!</h1>
  <p>Это мой сайт на чистом HTML.</p>
</body>
</html>

Строка <!DOCTYPE html> в начале говорит браузеру, что это современный HTML5. Тег <html lang="ru"> содержит всю страницу, а атрибут lang сообщает язык. Внутри две части: <head> со служебной информацией, которую не видно на странице, и <body> с видимым содержимым. Главную страницу обычно хранят в index.html; в подпапках тоже можно размещать свои index.html.

В <head> строка <meta charset="UTF-8"> отвечает за корректный русский текст без «кракозябр». Строка с viewport подгоняет ширину страницы под ширину экрана. Без неё мобильный браузер может нарисовать страницу в виртуальном окне шириной около 980 пикселей и уменьшить её целиком, из-за чего текст получается мелким. Удобство на телефоне дальше зависит от CSS. Тег <title> задаёт заголовок вкладки в браузере. В <body> лежит то, что видит посетитель: <h1> задаёт главный заголовок, <p> обозначает абзац текста. У парных тегов пишите и открывающий, и закрывающий тег, например <p>текст</p>, чтобы проще было читать разметку и не запутаться.

В Windows откройте «Блокнот», вставьте шаблон и выберите «Файл → Сохранить как»: тип файла «Все файлы», имя index.html, кодировка UTF-8. Если оставить тип «Текстовые документы», файл может сохраниться как index.html.txt и открыться как текст, а Проводник со скрытыми расширениями покажет только index.html; включите показ расширений через «Вид → Показать → Расширения имён файлов», чтобы увидеть полное имя.

В macOS откройте TextEdit, выберите «Файл → Новый», затем «Формат → Конвертировать в простой текст», вставьте шаблон и сохраните файл с именем index.html. При вопросе о расширении выберите «Использовать .html».

Как добавить оформление на CSS

Чтобы оформить страницу, подключите CSS: он задаёт цвета, шрифты, отступы и расположение блоков. Голый HTML выглядит скучно: чёрный текст на белом фоне. В HTML есть три обычных способа добавить CSS: отдельный файл через <link>, блок <style> внутри <head> и атрибут style у отдельного тега. Для сайта удобны первые два.

1. Прямо в странице: внутри <head> добавьте блок <style> и опишите оформление там же. Быстро для одной маленькой страницы.
2. Отдельным файлом style.css рядом с index.html, а в <head> поставьте ссылку на него. Так удобнее, когда страниц несколько: стиль правится в одном месте.

Для оформления прямо в странице поместите этот блок внутрь <head>:

<style>
  body { font-family: sans-serif; color: #333; max-width: 720px; margin: 0 auto; padding: 16px; }
  h1 { color: #d85a30; }
</style>

Чтобы подключить внешний файл CSS, в <head> добавьте строку <link rel="stylesheet" href="style.css">, а в самом style.css напишите правила, например body { font-family: sans-serif; color: #333; }. Начинать можно с пары свойств: цвет текста, шрифт, отступы, и постепенно добавлять остальное. Свойства CSS и связку с HTML по шагам разбирает отдельная статья про CSS.

Для картинки с относительным путём положите photo.jpg в папку img рядом с index.html. Вторую страницу about.html сохраните рядом с главной. Добавьте в <body> этот код; меню из ссылок <nav> повторите на обеих страницах:

<img src="img/photo.jpg" alt="Описание фото">
<nav>
  <a href="index.html">Главная</a> <a href="about.html">Обо мне</a>
</nav>

Как открыть и как опубликовать сайт

Дважды кликните по index.html, чтобы открыть страницу в браузере. Пока файл лежит у вас на компьютере, его видите только вы. Это удобно для проверки, но по такому «адресу» из интернета сайт недоступен. После каждой правки сохраните файл и обновите вкладку браузера. Если стили не применились, проверьте, что style.css лежит в той же папке и имя в href совпадает буква в букву.

Чтобы страницу увидели другие, её нужно разместить на хостинге. Для статичного HTML бесплатно подходит GitHub Pages: он публикует сайт прямо из вашего репозитория на GitHub и выдаёт адрес вида username.github.io (документация GitHub Pages).

1. Заведите бесплатный аккаунт на github.com и создайте новый публичный репозиторий (для бесплатного плана исходники должны быть в публичном репозитории).
2. Загрузите туда файлы сайта через «Add file → Upload files»: как минимум index.html, а также style.css и картинки, если они есть. index.html должен лежать в корне репозитория, а не во вложенной папке. Подтвердите загрузку кнопкой внизу страницы, чтобы сохранить файлы в репозитории коммитом.
3. Откройте Settings → Pages и настройте источник публикации: в блоке Build and deployment в поле Source выберите Deploy from a branch, затем ветку (обычно main) и папку / (root), нажмите Save.
4. Публикация может занять до 10 минут. Если репозиторий назван username.github.io, где username заменён вашим логином маленькими буквами, сайт откроется по адресу https://username.github.io. Любое другое имя даёт адрес https://username.github.io/имя-репозитория.

Для GitHub Pages действуют разные ограничения: рекомендуемый размер репозитория до 1 ГБ, опубликованный сайт не больше 1 ГБ, мягкий лимит трафика 100 ГБ в месяц. Хостинг публикует только статичные сайты без серверного кода и собственной базы данных; на бесплатном плане репозиторий публичный. Для визитки, портфолио или лендинга этого с запасом хватает.

По теме: Как сделать сайт в Блокноте: один HTML-файл с нуля

Плюсы и минусы ручного HTML

Ручной HTML даёт полный контроль над страницей, но требует времени на код и дизайн.

• Плюсы: полный контроль над каждым элементом, ничего лишнего в коде, страница грузится быстро, публикация бесплатна, и вы реально понимаете, как устроен веб.
• Минусы: всё делается руками, поэтому долго; на сайте из многих страниц придётся копировать общие куски; дизайн с нуля отнимает время; динамику (обратную связь с сохранением, каталог, авторизацию) чистый HTML не даёт.

Современный путь: страницу можно сгенерировать ИИ

ИИ может написать готовый index.html вместе с CSS по вашему описанию страницы. Этот способ называют вайбкодингом: вы формулируете задачу на русском вместо ручного набора разметки. Так вы можете собрать сайт вайбкодингом или использовать инструкцию как сделать сайт с помощью Claude.

Промпт может быть простым: «Сделай одностраничный сайт-визитку фотографа на HTML и CSS: шапка с именем, блок «Обо мне», галерея из шести фото и кнопка «Написать». Верни готовый index.html». Полученный index.html откройте в браузере и проверьте перед загрузкой на тот же GitHub Pages. А базовое понимание HTML из этой статьи пригодится, чтобы прочитать, что сгенерировал ИИ, и точечно поправить: сменить текст, цвет или порядок блоков.

Начните с ручной страницы из десяти строк: так вы навсегда запомните, что такое теги и структура. А дальше отдавайте рутину ИИ, а сами проверяйте и правите. Это быстрее, чем печатать всё вручную, и надёжнее, чем слепо копировать чужой код.

Если код вам вообще не хочется трогать, есть и путь совсем без него: визуальные конструкторы. Сравните возможности и ограничения сайтов без программирования, чтобы выбрать конструктор. Если выбираете между ручным HTML, ИИ и конструктором, используйте сравнение способов создания сайта самому с нуля.

Частые вопросы

Нужно ли платить за сайт на HTML?

Сам HTML и CSS бесплатны, а базовый хостинг на GitHub Pages тоже бесплатный. Заплатить придётся только за красивый адрес (свой домен вместо username.github.io), и то по желанию.

В какой программе писать HTML?

Подойдёт любой текстовый редактор, даже «Блокнот». Удобнее в бесплатных редакторах кода вроде VS Code или Notepad++: они подсвечивают теги и подсказывают ошибки. А можно вообще не открывать редактор и попросить готовую страницу у ИИ.

Обязательно ли учить HTML, если есть ИИ?

Знать язык наизусть не нужно. Но базу (теги, структуру, что такое head и body) стоит понимать, чтобы читать сгенерированный код и вносить правки, не переписывая всё заново.

Чем HTML отличается от конструктора сайтов?

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