Как создать сайт на HTML: уроки и код для начинающих

«Как создать сайт на HTML» и «как написать код для сайта» — два запроса, за которыми стоит одно и то же: хочется сделать страницу своими руками, а не собирать её в конструкторе. Причина понятная — свой код можно править как угодно, он не привязан к тарифу платформы и не исчезнет вместе с ней.

Разберу по-человечески: из чего состоит сайт, как выглядит код, какие уроки нужны на старте и как довести первую страницу до публикации. Без лишней теории — только то, что понадобится в первый вечер.

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

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

Три языка делают разную работу, и путать их не нужно.

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

Порядок изучения простой: HTML → CSS → немного JavaScript. Не наоборот. Человек, который начинает с JavaScript, пишет логику для страницы, которую ещё не умеет сверстать.

Минимальная страница — это несколько строк. Выглядит она так:

Что здесь важно:

• <!DOCTYPE html> — говорит браузеру, что это современный HTML.
• <head> — служебная часть: кодировка, заголовок вкладки, подключение стилей.
• <body> — всё, что видит посетитель.
• <h1>, <p>, <a> — теги. У каждого своё назначение: заголовок, абзац, ссылка.

Теги бывают парные (<p>...</p>) и одиночные (<img>, <br>). Открывающий тег говорит «здесь начинается», закрывающий — «здесь заканчивается». Если закрывающий потерять, браузер постарается угадать, но верстка поедет — это ошибка номер один у новичков.

Ниже короткий курс, который реально проходится за несколько вечеров. Каждый шаг — маленькая практика, а не лекция.

Урок 1. Каркас

Создайте папку проекта, в ней файл index.html и вставьте код выше. Откройте файл двойным щелчком — страница откроется в браузере. Это уже сайт, просто пока локальный.

Урок 2. Текст и структура

Разметьте текст так, как он должен читаться: заголовок первого уровня один на страницу, под ним — разделы через <h2>, обычный текст — в <p>, перечисления — в <ul> и <li>. Хорошая структура — это половина SEO: поисковик видит, где главное, а где пояснение.

Урок 3. Ссылки и картинки

Ссылка делается тегом <a href="адрес">текст</a>, изображение — тегом <img src="путь" alt="описание">. Атрибут alt обязателен: он показывает текст, если картинка не загрузилась, и помогает поисковикам понять, что на ней.

Урок 4. CSS — внешний вид

Чистый HTML выглядит как документ из 90-х. Стили подключаются отдельным файлом style.css:

А внутри style.css описывают правила:

CSS — это «селектор + свойства». Селектор body выбирает весь документ, h1 — все заголовки первого уровня. Классы (.card) и идентификаторы (#form) позволяют точнее навести порядок, когда страница растёт.

Урок 5. Проверка на телефоне

Откройте страницу на телефоне или сузьте окно браузера. Скорее всего, текст вылезет за край — это нормально. Лечится строкой <meta name="viewport"> в <head> и гибкой вёрсткой. Привычка проверять на телефоне с самого начала отличает аккуратного разработчика от самоучки.

Когда пять уроков пройдены, дальше важна последовательность, а не количество тегов.

• Разложите страницу на блоки. Шапка, первый экран, преимущества, форма, подвал. Пока это рисунок на бумаге — верстать ещё рано.
• Сверстайте каркас без стилей. Просто теги и текст. Если без CSS структура читается — разметка правильная.
• Добавьте CSS от общего к частному. Сначала типографика и отступы, потом цвет, потом мелочи.
• Проверьте на телефоне. До того, как добавите что-то новое.
• Опубликуйте. Код в папке на компьютере — не сайт. О публикации — ниже.

Главный принцип: один блок за раз. Новичок, который верстает всю страницу сразу и потом ищет, что поехало, теряет часы.

Нейросеть не отменяет уроки, но сильно ускоряет практику. Полезны два сценария: получить пример и получить объяснение.

Промпт, чтобы собрать страницу по описанию:

Промпт, чтобы понять чужой код — а это важнее:

Второй промпт ценнее первого. Первый даёт готовую страницу, которую новичок не может проверить; второй учит читать код — а именно это отличает человека, который умеет делать сайты, от человека, который умеет нажимать «сгенерировать».

Материала в интернете больше, чем можно пройти. Полезны четыре источника, и они бесплатны:

• Официальная документация. Справочники по HTML и CSS от MDN — первоисточник. Сухо, но точно и всегда актуально.
• Интерактивные тренажёры. Короткие задания прямо в браузере: пишешь код — видишь результат. Хороши для первых тегов.
• Видео на YouTube. Ищите свежие: интерфейсы инструментов меняются, а запись двухлетней давности показывает другое.
• Своя страница. Самый эффективный «урок» — делать не учебный пример, а настоящую страницу для себя или знакомого. Там сразу появляются задачи, которых нет в курсах.

Отдельно стоит сказать про вайб-кодинг: сборку сайта вместе с ИИ. Это не замена HTML, а способ быстрее пройти путь. Разбор форматов обучения — в статье «Обучение вайб-кодингу с нуля».

• Учить всё сразу. HTML, CSS, JavaScript, фреймворки, SEO вперемешку. Итог — каша и брошенный проект. Идите по одному шагу.
• Незакрытые теги. Браузер прощает, но верстка ломается. Проверяйте парность.
• Стили прямо в тегах. style="..." работает, но через десяток правок в этом невозможно разобраться. Держите CSS отдельно.
• Забыть про телефон. Больше половины посетителей придут с мобильного. Адаптив — не «потом», а часть работы.
• **Пустой alt у картинок.** Минус и к доступности, и к поисковой выдаче.
• Код, который никто не видит. Пока страница не опубликована, её нет. Публикация — часть создания сайта, а не отдельный этап «когда-нибудь».

Локальный файл видят только вы. Чтобы сайт открывался по адресу, нужны две вещи: домен (имя сайта) и хостинг (место, где лежат файлы). Оба стоят от нескольких сотен рублей в год.

Порядок такой: покупаете домен, берёте хостинг, загружаете файлы index.html и style.css в корневую папку через FTP или панель управления. Всё. Через несколько минут страница открывается по вашему адресу.

Полный путь от цели до публикации, включая бесплатные варианты, разобран в статье «Как создать сайт с нуля».

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

Формат — индивидуальные занятия один на один по вашему проекту. Не учебный «котик», а настоящая страница, которую не стыдно показать. Записаться на бесплатное первое занятие можно в форме на главной.

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

Уроки стоит брать бесплатно из документации и тренажёров, а нейросеть использовать как ускоритель — но с одним условием: код, который она выдаёт, нужно уметь прочитать. Тогда вы делаете сайты, а не просто жмёте кнопки.

Пять вопросов по статье. Отвечайте честно — это проверка, что стоит перечитать.