Как создать сайт через блокнот: учебный путь от пустого файла до страницы
Создать сайт через блокнот можно без установки программ: вы пишете HTML в Блокноте Windows, сохраняете файл с расширением .html и открываете его двойным щелчком в браузере. Это хороший учебный путь, но сайт остаётся только на вашем компьютере, пока файлы не попадут на хостинг.
Ответ за 30 секунд
Через блокнот сайт создают так: пишут HTML, сохраняют файл как index.html в кодировке UTF-8 и открывают его в браузере. Этот путь учебный: страница видна только на вашем компьютере. Чтобы её открывали другие, нужны хостинг и домен, а для роста сайта понадобится редактор кода.
Для первого размещения хватит тарифа Year: 316 ₽ в месяц при оплате за год, бесплатный SSL, домен .RU в подарок и 10 дней на проверку (на 24 октября 2026).
Почему страница из блокнота открывается как текст или с кракозябрами6 шаговот пустого файла до страницы
.htmlрасширение файла вместо .txt
UTF-8кодировка при сохранении
01 · 1 мин
Как создать сайт через блокнот: шесть шагов#
- Создайте папку для сайта, например
moy-sayt. В ней будут лежать все файлы. Имена файлов и папок пишите латиницей без пробелов. - Откройте Блокнот через меню Пуск и вставьте код из примера ниже.
- Сохраните файл. Выберите Файл, Сохранить как, в списке «Тип файла» поставьте «Все файлы», имя укажите
index.html, а кодировку выберите UTF-8. - Откройте результат. Дважды щёлкните по
index.html: файл откроется в браузере как обычная страница. - Правьте и обновляйте. Меняйте текст в Блокноте, сохраняйте сочетанием Ctrl+S и нажимайте F5 во вкладке браузера.
- Добавьте стили. Вынесите оформление в файл
style.cssрядом сindex.html, как описано на странице создать сайт на HTML.
02 · 1 мин
Какой код вставить в блокнот для первой страницы#
Этот пример работает без стилей и картинок, поэтому подходит для проверки: если вы видите заголовок и список, значит, шаги выше пройдены верно.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой первый сайт</title>
</head>
<body>
<h1>Мой первый сайт</h1>
<p>Эта страница написана в Блокноте Windows.</p>
<h2>План на неделю</h2>
<ul>
<li>Выучить теги заголовков и абзацев</li>
<li>Добавить картинку</li>
<li>Подключить стили</li>
</ul>
<a href="about.html">Вторая страница</a>
</body>
</html>Строка с charset должна совпадать с кодировкой, в которой сохранён файл. Если они расходятся, вместо русских букв на странице появятся странные символы.
Инструмент · 1 мин
Почему страница из блокнота открывается как текст или с кракозябрами#
Три сбоя встречаются у новичков чаще остальных: лишнее расширение .txt, неверная кодировка и открытие файла не в том приложении. Укажите, что видите, и подсказка назовёт исправление.
Что вы видите после открытия файла из блокнота
Выберите вариант, подсказка назовёт причину и исправление
04 · 1 мин
Чего не хватает блокноту и когда переходить на редактор кода#
Блокнот открывает файл и сохраняет его, больше он ничего не делает. В нём нет подсветки тегов, подсказок и поиска по нескольким файлам, а опечатка в закрывающем теге видна только после открытия страницы в браузере.
Когда файлов станет больше трёх, поставьте редактор кода, например бесплатный Visual Studio Code или Notepad++. Принцип прежний: вы пишете текстовые файлы, а браузер их показывает. Всё, чему вы научились в блокноте, переносится в новый редактор целиком. Справочник по языкам разметки и стилей ведёт MDN Web Docs.
05 · 1 мин
Как выложить сайт из блокнота в интернет#
Файл на вашем диске открывается только у вас, потому что его адрес указывает на ваш компьютер. Чтобы сайт увидели другие, загрузите папку на хостинг: через файловый менеджер панели или по FTP, в корневую папку сайта.
Для начала достаточно тарифа Year у Таймвеб за 316 ₽ в месяц при оплате за год (на 24 октября 2026): SSL бесплатный, а домен .RU входит при годовой оплате. Для обучения можно взять GitHub Pages без своего домена. Порядок действий с привязкой адреса описан на странице как опубликовать сайт.
06 · 1 мин
Вопросы про сайт из блокнота#
Как правильно создать через блокнот сайт, чтобы он открывался на телефоне?
Добавьте в раздел head строку meta viewport и пишите стили так, чтобы колонки перестраивались на узком экране. Подробно: адаптивный сайт. Без этой строки телефон показывает страницу уменьшенной, как на компьютере.
Как создать веб сайт через блокнот из нескольких страниц?
Сохраните рядом ещё файлы, например about.html и contacts.html, и свяжите их ссылками вида <a href="about.html">О нас</a>. Файлы лежат в одной папке, поэтому путь состоит из одного имени.
Нужен ли специальный редактор вместо блокнота для создания сайта?
Не обязательно: сайт из блокнота работает так же, как из любого редактора. Но с подсветкой кода и подсказками писать быстрее и ошибок меньше, поэтому после первых страниц переходят на редактор кода.
Можно ли выложить сайт из блокнота бесплатно?
Да, для статичных файлов есть GitHub Pages, но адрес будет на его поддомене. Свой домен и хостинг платные, цены собраны на странице что нужно для создания сайта.
Почему этому можно верить
Как мы проверяли
Источники цифр на этой странице: Виртуальный хостинг Таймвеб, timeweb.com/ru/services/hosting, проверено 24 октября 2026; Домены Таймвеб, timeweb.com/ru/services/domains, проверено 24 октября 2026; MDN Web Docs: HTML, developer.mozilla.org/ru/docs/Web/HTML, проверено 24 октября 2026.
Разместите свой сайт
Для сайта на CMS или своём коде нужен хостинг. Виртуальный хостинг Таймвеб от 316 ₽ в месяц: NVMe, установка CMS в один клик, бесплатный SSL и домен .RU в подарок.
- Тарифы от 316 ₽ в месяц
- Популярные CMS в один клик
- Бесплатный SSL и домен .RU в подарок
- Бесплатный перенос и 10 дней теста