Сайт в Блокноте можно сделать как обычный файл index.html: браузер прочитает разметку и покажет страницу без установки конструктора. Этот способ подходит для первой визитки и обучения, но не для магазина, личного кабинета или совместного редактирования большого проекта.
Что понадобится и что получится
Нужны Windows, Блокнот, браузер и отдельная папка проекта. В результате у вас будет локальная страница с заголовком, текстом, списком и кнопкой-ссылкой. Официальный учебник MDN также начинает первый сайт с файла index.html и базовой структуры HTML: пример разметки.
- Папка проекта, например
my-site. - Файл
index.html, а неindex.html.txt. - Браузер для проверки результата.
- Отдельная копия перед крупными изменениями.
Проверка имени файла важнее красивого кода: если Windows сохранила расширение
.txt, браузер покажет текст вместо сайта.
Создайте правильный файл
- Создайте папку
my-siteв Документах. - Откройте Блокнот и выберите «Файл», затем «Сохранить как».
- В поле имени укажите
index.html, тип переключите на «Все файлы». - Выберите кодировку UTF-8 и сохраните файл в папку проекта.
- В Проводнике включите показ расширений и проверьте окончание
.html.
Если Блокнот добавил .txt, переименуйте файл через Проводник. Не прячьте расширения: это простой способ отличать страницу, таблицу стилей и картинку. Общие правила работы с файлами проекта приведены в руководстве MDN.
Понимания, как это устроено, уже достаточно, чтобы начать. На бесплатном эфире сайт собирают за один вечер и показывают, как его выложить.
Посмотреть, как собратьВставьте безопасный минимальный шаблон
Скопируйте код целиком. В нём есть кодировка для русского текста, настройка ширины для телефона, понятная структура и ссылка вместо кнопки с неработающим действием.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Моя первая страница</title>
<style>
body { max-width: 760px; margin: 0 auto; padding: 32px 20px; font: 18px/1.6 Arial, sans-serif; color: #222; }
.button { display: inline-block; padding: 12px 18px; border-radius: 10px; background: #d85a30; color: white; text-decoration: none; }
</style>
</head>
<body>
<main>
<h1>Моя первая страница</h1>
<p>Здесь коротко объясните, кому и чем вы помогаете.</p>
<ul>
<li>Одна понятная услуга</li>
<li>Один способ связи</li>
</ul>
<a class="button" href="mailto:hello@example.com">Написать</a>
</main>
</body>
</html>Замените текст и адрес почты на свои данные. Не вставляйте в публичный HTML пароль, токен, паспортные данные или закрытый номер заказа. Всё, что находится в файле страницы, посетитель может увидеть через инструменты браузера.
По теме: Как сделать сайт на роутере: локально и без риска
Откройте страницу и проверьте результат
- Сохраните изменения сочетанием
Ctrl+S. - Дважды щёлкните
index.htmlв Проводнике. - Убедитесь, что браузер показывает заголовок, список и оранжевую ссылку.
- Измените одно слово, сохраните и обновите вкладку.
- Нажмите ссылку и проверьте, что открывается почтовое приложение.
Адрес в строке браузера начнётся с file://. Это означает, что страница открыта только на вашем компьютере. Другой человек по такому адресу сайт не увидит. Для публичной ссылки файлы нужно разместить на хостинге.
Добавьте картинку без битого пути
Создайте внутри проекта папку images, положите туда файл cover.jpg и добавьте перед списком строку ниже. Путь считается относительно index.html, поэтому регистр букв и расширение должны совпадать.
<img src="images/cover.jpg" width="720" height="480" alt="Описание изображения">- Если картинка не видна, откройте её из папки и сверьте имя.
- Не используйте путь вида
C:\Users\...: на хостинге его нет. - Сжимайте фотографию до разумного размера.
- Заполняйте
altсмыслом изображения, а не набором ключей.
Самое долгое в своём сайте это первый запуск: страницы, домен, публикация. На бесплатном вебинаре по вайбкодингу весь путь проходят вживую, от идеи, описанной словами, до работающего адреса. Опыт в программировании не нужен.
Пройти путь до сайтаДиагностика частых ошибок
Если браузер показывает код, проверьте расширение файла. Если русские буквы стали знаками, снова сохраните в UTF-8 и оставьте <meta charset="utf-8">. Если изменения не видны, нажмите Ctrl+F5 или откройте файл заново.
Если пропала часть страницы, ищите незакрытый тег рядом с последней правкой. Удалите добавленный фрагмент и возвращайте строки по одной. Это безопаснее, чем одновременно переписывать весь документ.
По теме: Как изменить курсор на сайте: CSS, картинка и проверка
Как сделать страницу удобной на телефоне
Не задавайте всему содержимому фиксированную ширину больше экрана. В примере контейнер ограничен через max-width. Больше проверок есть в инструкции по мобильному сайту.
- Увеличьте масштаб браузера до 200 процентов, текст не должен обрезаться.
- Переходите по странице клавишей Tab, ссылка должна получать фокус.
- Проверьте контраст текста и кнопки.
- Откройте файл хотя бы в двух браузерах.
Когда пора уйти из Блокнота
Блокнот подходит для одного небольшого файла. Когда появились отдельные стили, сценарии, несколько страниц и совместная работа, редактор кода покажет структуру и подсветит ошибки. Для формы с базой данных, оплаты или личного кабинета нужен сервер либо готовая платформа.
Если задача шире визитки, сравните варианты в базовом плане сайта с нуля. Готовую папку публикуйте по инструкции загрузки сайта. Для русского текста полезен чек-лист кодировки и шрифтов.
Частые вопросы
Можно ли сделать сайт бесплатно?
Локальный файл бесплатен. Для публичного адреса понадобится хостинг; бесплатные варианты обычно имеют ограничения по домену, объёму и функциям.
Почему кнопка ничего не отправляет?
HTML сам не принимает заявки. Ссылка mailto: только открывает почтовое приложение, а настоящей форме нужен обработчик или сервис форм.
Нужен ли интернет для проверки?
Для локального HTML без внешних ресурсов интернет не нужен. Он понадобится для внешних шрифтов, карт и публикации.
На воркшопе вы превратите простую страницу в опубликованный сайт и проверите его на телефоне.
Собрать сайт