Как сделать сайт на HTML с нуля

Коротко. Сайт на HTML — это текстовые файлы с разметкой: index.html для главной, файл CSS для оформления, папка с картинками. Написать первую страницу можно за час в бесплатном редакторе кода. Чтобы сайт открывался в интернете, файлы загружают на хостинг, подключают домен и включают https. Так устроен и наш сайт.

Что такое сайт на HTML

Браузер умеет показывать HTML-файлы — текст с разметкой, где теги говорят, что это заголовок, абзац, ссылка или картинка. CSS отвечает за внешний вид: цвета, шрифты, отступы. Сайт на HTML — это просто набор таких файлов в папке.

Такой сайт называют статическим: у него нет базы данных и админки, сервер просто отдаёт готовые файлы.

Шаг 1. Редактор и папка

1. Поставьте бесплатный редактор кода, например Visual Studio Code. Можно и Блокнот, но в редакторе удобнее: подсветка тегов и подсказки.
2. Создайте папку для сайта, например my-site, а в ней — папку img для картинок.

Шаг 2. Первая страница

Создайте в папке файл index.html и вставьте:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Мастерская Ивана</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Ремонт часов в Твери</h1>
  <p>Чиню наручные и настенные часы.</p>
  <p>Телефон:
    <a href="tel:+79000000000">+7 900 000-00-00</a>
  </p>
</body>
</html>

Откройте файл двойным щелчком: он откроется в браузере. Это уже веб-страница.

Строка с viewport нужна, чтобы страница нормально выглядела на телефоне. Без неё телефон покажет уменьшенную «компьютерную» версию.

Шаг 3. Оформление

Создайте рядом файл style.css:

body {
  max-width: 700px;
  margin: 0 auto;
  padding: 16px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}
h1 { color: #0f6b4a; }

Обновите страницу в браузере — шрифт и отступы поменяются.

Шаг 4. Другие страницы

Создайте about.html и contacts.html по образцу главной и поставьте ссылки между страницами:

<a href="about.html">О нас</a>

Главная страница всегда называется index.html: именно её сервер показывает, когда открывают адрес сайта.

Шаг 5. Как сделать из HTML-файла сайт в интернете

1. Купите хостинг. Статическому сайту хватает самого дешёвого тарифа: какой хостинг выбрать, бесплатный хостинг.
2. Подключите домен: как подключить домен к хостингу. У многих хостингов домен .ru идёт в подарок при оплате за год.
3. Загрузите файлы в папку сайта на хостинге (обычно public_html): через файловый менеджер в панели или по FTP, например через FileZilla. Удалите заглушку хостинга, если она там лежит.
4. Включите https: выпустите бесплатный SSL-сертификат в панели: SSL-сертификат для сайта.
5. Добавьте сайт в поиск: Яндекс Вебмастер и Метрика.

Когда сайтов на HTML мало

• Много страниц с общим меню и подвалом. Править каждую вручную долго. Тогда используют генераторы статических сайтов (Astro, Hugo и другие): общие части пишутся один раз, а готовые HTML-файлы собираются автоматически.
• Нужна админка для людей, которые не знают HTML. Тогда лучше WordPress или конструктор.
• Нужен магазин с оплатой: как создать интернет-магазин.

Можно ли с помощью нейросети

Да. Нейросеть может написать HTML и CSS по описанию и объяснить, что делает каждая строка. Важно проверять результат в браузере и на телефоне: как создать сайт с помощью нейросети.

Наш опыт

HostAtlas — статический сайт из готовых HTML-файлов. Мы собираем его генератором Astro, а файлы сами выкладываются на хостинг Timeweb при каждом изменении в GitHub. Что это дало:

• весь сайт весит около 1,4 МБ, хватает младшего тарифа;
• страницы открываются быстро, в проверке Lighthouse — 98–100 из 100 по скорости;
• взламывать нечего: нет базы данных и админки.

По пути были грабли: хостинг показывал свою заглушку вместо нашего index.html, пока мы не указали его в файле .htaccess. Подробно — как мы запустили сайт на Timeweb через GitHub.

Читайте также

• Как создать сайт самому с нуля
• Как создать сайт с помощью нейросети
• Что такое хостинг простыми словами

Источники

• MDN Web Docs: ваш первый сайт — основы HTML и CSS; проверено 22.10.2026
• Собственный опыт: сайт hostatlas.ru, октябрь 2026