Сайт в Блокноте: как сделать HTML-сайт из двух страниц и выложить его в интернет

Чтобы создать сайт в Блокноте, заведите на компьютере папку, напишите в Блокноте HTML-код страницы и сохраните его как index.html в кодировке UTF-8. Двойной щелчок по файлу откроет страницу в браузере. Оформление выносится в отдельный файл style.css, вторая страница подключается обычной ссылкой, а готовую папку можно бесплатно выложить в интернет.

Ниже весь путь на одном примере: маленький сайт из двух страниц «Книжная полка Ани» с меню, картинкой и стилями. Весь код можно копировать в Блокнот целиком, по одному файлу. Если вы впервые слышите слово «тег», начните с короткого объяснения, что такое HTML, и возвращайтесь.

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

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

Устанавливать ничего не нужно. Всё уже есть в Windows, кроме разве что аккаунта для публикации, и тот нужен только в последнем шаге.

Где ещё искать Блокнот и что в нём поменялось в Windows 11, мы разобрали в статье про Блокнот Windows. Для сайта хватит базовых возможностей.

Шаг 1: папка сайта и видимые расширения

Создайте пустую папку kniznaya-polka. Имя пишите латиницей, строчными буквами и без пробелов. Внутри сразу заведите вложенную папку img для картинок.

Такие имена советует руководство MDN по работе с файлами: многие веб-серверы чувствительны к регистру, и MyImage.jpg с myimage.jpg для них разные файлы. Пробелы в именах некоторые серверы заменяют на %20, и ссылки ломаются. Слова лучше разделять дефисом.

Включите показ расширений файлов, иначе не увидите главную ловушку Блокнота: файл index.html.txt вместо index.html.

1. Откройте Проводник.
2. Выберите «Вид» → «Показать» → «Расширения имен файлов».

Как устроены расширения и какие бывают, рассказывает справка Microsoft о расширениях имён файлов.

Шаг 2: первая страница в Блокноте

Запустите Блокнот и вставьте код. Это минимальный каркас страницы: тип документа, язык, кодировка, заголовок вкладки и видимое содержимое.

<!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>Здесь я записываю книги, которые прочитала, и пару слов о каждой.</p>
  <h2>Сейчас читаю</h2>
  <p>«Мастер и Маргарита», Михаил Булгаков</p>
</body>
</html>

Строка <meta charset="UTF-8"> говорит браузеру, в какой кодировке читать текст. Строка с viewport нужна телефонам: без неё они показывают страницу уменьшенной копией экрана компьютера. Что делает каждый тег, подробно разобрано в статье об основных тегах HTML.

Теперь сохраните файл так, чтобы Блокнот не дописал своё .txt:

1. Выберите «Файл» → «Сохранить как».
2. Откройте папку kniznaya-polka.
3. В поле «Тип файла» выберите «Все файлы».
4. В поле имени впишите index.html.
5. В поле «Кодировка» выберите UTF-8, если там стоит другое значение, и сохраните файл.

Имя index.html выбрано не случайно. Сервер отдаёт файл с таким именем, когда посетитель открывает адрес сайта без указания страницы, поэтому главная почти всегда называется именно так. Подробнее о самом файле, а заодно о том, как сделать то же в TextEdit на Mac и в VS Code, рассказывает инструкция о создании HTML-файла.

С UTF-8 в новых версиях Windows проблем обычно нет. В конце 2018 года Microsoft сделала UTF-8 без BOM кодировкой по умолчанию для новых файлов Блокнота и вывела кодировку в строку состояния. Если внизу окна стоит что-то другое, например ANSI, пересохраните файл.

Шаг 3: открыть страницу и править её на ходу

Дважды щёлкните по index.html в Проводнике. Файл откроется в браузере по умолчанию, в адресной строке появится путь вида file:///C:/Users/…/kniznaya-polka/index.html. Другие способы, включая телефон, собраны в статье о том, как открыть HTML-файл.

Дальше работа идёт по кругу, и этот круг стоит запомнить с первого дня:

1. Поменяли что-то в Блокноте, нажали Ctrl+S.
2. Перешли в браузер, нажали F5 или Ctrl+R.
3. Посмотрели результат и вернулись в Блокнот.

Оба окна оставьте открытыми рядом. Остальные сочетания клавиш собраны в справке Chrome. Если правка не появилась, обновите страницу без кеша: Shift+F5 или Ctrl+Shift+R.

Шаг 4: оформление в отдельном файле стилей

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

Создайте в Блокноте новый документ (Ctrl+N), вставьте код и сохраните как style.css в ту же папку, с типом «Все файлы» и кодировкой UTF-8:

body {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  background: #fdfaf4;
}
nav a {
  margin-right: 16px;
  color: #8a4b08;
  font-weight: bold;
}
h1 {
  color: #8a4b08;
}
img {
  max-width: 100%;
  border-radius: 8px;
}

Что здесь происходит:

• max-width и margin: 0 auto собирают текст в колонку по центру, чтобы на широком мониторе строки не тянулись через весь экран;
• font-family, line-height и color задают шрифт, межстрочный интервал и цвет текста;
• правило nav a оформит ссылки меню, которое появится в следующем шаге;
• img { max-width: 100%; } не даёт картинке вылезти за край экрана телефона.

Чтобы стили заработали, в index.html внутри <head>, сразу после <title>, добавьте строку:

<link rel="stylesheet" href="style.css">

Сохраните, обновите страницу в браузере, и фон станет тёплым, а текст соберётся в колонку. Два других способа подключить CSS и проверку, что стили применились, мы описали в отдельной статье о подключении CSS к HTML.

Все свойства из этого файла входят в первые уроки любой программы по вёрстке. Если захочется разобрать их по порядку, в каталоге есть курсы по CSS разных школ.

Шаг 5: вторая страница, меню и картинка

Сайт отличается от одиночной страницы тем, что между страницами можно переходить. Добавим страницу со списком прочитанных книг и меню на обеих.

Положите любую картинку в папку img и назовите её polka.jpg. Затем замените весь код 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>
  <nav>
    <a href="index.html">Главная</a>
    <a href="knigi.html">Прочитанное</a>
  </nav>
  <h1>Книжная полка Ани</h1>
  <img src="img/polka.jpg" alt="Полка с книгами">
  <p>Здесь я записываю книги, которые прочитала, и пару слов о каждой.</p>
  <h2>Сейчас читаю</h2>
  <p>«Мастер и Маргарита», Михаил Булгаков</p>
</body>
</html>

Новый документ Блокнота сохраните как knigi.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>
  <nav>
    <a href="index.html">Главная</a>
    <a href="knigi.html">Прочитанное</a>
  </nav>
  <h1>Прочитанное</h1>
  <ol>
    <li><strong>«Шинель»</strong>, Николай Гоголь. Короткая, читается за вечер.</li>
    <li><strong>«Капитанская дочка»</strong>, Александр Пушкин. Перечитала после школы.</li>
    <li><strong>«Дом, в котором…»</strong>, Мариам Петросян. Самая длинная в списке.</li>
  </ol>
</body>
</html>

Обратите внимание на адреса в href и src. Это относительные пути: knigi.html означает «файл рядом», img/polka.jpg означает «файл в папке img рядом». По тем же правилам из MDN путь к файлу уровнем выше начинается с ../. Относительные пути работают и на компьютере, и после переезда сайта в интернет.

В итоге папка выглядит так:

kniznaya-polka/
├── index.html
├── knigi.html
├── style.css
└── img/
    └── polka.jpg

Как устроены ссылки и что значат target и rel, читайте в разборе ссылок в HTML. Про атрибуты картинки и размеры есть статья о том, как вставить картинку в HTML, а нумерованный и маркированный списки подробно описаны в материале о списках в HTML.

Сузьте окно браузера или откройте страницу с телефона: колонка подстроится под экран, картинка уменьшится.

Если хочется, чтобы на телефоне менялось расположение блоков, а не только ширина, понадобятся медиазапросы CSS.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Шаг 6: выложить сайт в интернет бесплатно

Пока сайт открывается только на вашем компьютере. Чтобы им можно было поделиться ссылкой, файлы нужно положить на сервер. Для сайта из одних HTML, CSS и картинок без базы данных подойдёт бесплатный хостинг статических страниц, например GitHub Pages. Интерфейс сервиса на английском, поэтому названия кнопок ниже даны как на экране.

1. Зарегистрируйтесь и создайте репозиторий с именем ваш-логин.github.io. Такое имя нужно для личного сайта, он откроется по адресу https://ваш-логин.github.io/.
2. На бесплатном тарифе выберите тип репозитория Public: по документации сервиса бесплатный аккаунт публикует сайт только из публичного репозитория.
3. В репозитории нажмите Add file → Upload files и перетащите в окно содержимое папки kniznaya-polka: оба HTML-файла, style.css и папку img. Через браузер принимается файл до 25 МиБ, для учебного сайта это с запасом.
4. Подтвердите загрузку кнопкой под списком файлов.
5. Откройте Settings → Pages. В блоке Build and deployment, в списке Source выберите Deploy from a branch, затем ветку main и нажмите Save. Если меню выглядит иначе, сверьтесь с инструкцией по источнику публикации.
6. Подождите и нажмите Visit site. По той же документации, изменения могут публиковаться до 10 минут.

Загружайте именно содержимое папки, а не саму папку kniznaya-polka. Сервис ищет index.html на верхнем уровне репозитория, и если главная окажется во вложенной папке, по основному адресу сайта она не откроется. Всё, что вы загрузили, увидит любой человек, поэтому личные данные в такой сайт не кладите.

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

Частые ошибки и что с ними делать

Больше всего времени обычно уходит на ошибку с регистром. По документации Microsoft файловая система Windows не различает регистр в именах, а Linux различает. Дома Polka.jpg и polka.jpg один и тот же файл, а на сервере, который обычно работает на Linux, это два разных, и картинка пропадает. Привычка писать имена строчными снимает проблему заранее.

Когда что-то не работает, а причина неясна, вставьте код страницы в валидатор W3C. Он покажет незакрытые теги и опечатки в атрибутах с номером строки.

Когда Блокнота станет мало

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

• VS Code подсвечивает теги, сам закрывает их и по символу ! с клавишей Tab вставляет каркас страницы. Как это сделать, показано в той же инструкции про HTML-файл.
• Готовые каркасы под визитку, лендинг или блог собраны в подборке шаблонов HTML.
• Больше примеров с формой обратной связи и сайтом из трёх страниц есть в статье про HTML-код сайта.

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

Где освоить HTML и CSS системно

Сайт в Блокноте показывает, как устроена веб-страница изнутри. Чтобы верстать сайты по макетам, делать адаптивную вёрстку и подключать JavaScript, нужна последовательная программа с практикой и проверкой заданий.

CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

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

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	36 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям36 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML