Как начать с HTML и сделать первую страницу: пошагово и без сложных слов

Если вы хотите сделать первую веб-страницу за 1–2 вечера, то ответ простой: начните с чистого HTML (язык разметки для структуры страницы). Вам не нужны фреймворки, сложные настройки и сервер. Достаточно создать файл index.html, написать базовую структуру, добавить заголовок, текст, ссылку и картинку — и открыть файл в браузере.

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

Что нужно, чтобы начать (без лишнего)

Вам хватит трёх вещей:

1. Текстовый редактор (куда писать код). Подойдут: Visual Studio Code, обычный Notepad++ или любой редактор, где есть сохранение файла как *.html.
2. Браузер (куда смотреть результат). Chrome, Firefox, Edge — любые.
3. Файл на компьютере:

• создаёте папку, например my-first-page
• внутри создаёте файл index.html

Никакого интернета “для работы” не нужно. Сеть понадобится только если вы берёте картинку или ссылку на внешние сайты.

Структура HTML: каркас вашей страницы

HTML почти всегда начинается с одной и той же “рамки”. Смысл такой: браузер понимает, где документ в целом, где метаданные (служебная информация), а где видимая часть.

Вот минимальный шаблон, с него и начните:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Моя первая страница</title>
  </head>
  <body>
    <h1>Привет, я новичок</h1>
    <p>Это моя первая веб-страница.</p>
  </body>
</html>

Как читать этот код:

• <!doctype html> — “документ HTML5”.
• <html lang="ru"> — весь документ, язык страницы (для русской локали).
• <head> — настройки, которые не показываются как текст на странице (например, заголовок вкладки).
• <meta charset="utf-8"> — кодировка, чтобы русский текст отображался нормально.
• <title> — заголовок в вкладке браузера.
• <body> — всё, что увидит пользователь.
• <h1> — главный заголовок.
• <p> — абзац.

Если этот шаблон открыть в браузере — вы уже сделали первую рабочую страницу.

Добавляем самое нужное: ссылки и картинки

Теперь соберём “первую полноценную страницу”: заголовок, абзац, ссылка и картинка.

Ссылка в HTML пишется тегом <a>. У неё есть атрибут href (адрес, куда ведёт ссылка).

Картинка — тегом <img>. У неё важны src (путь к файлу картинки) и alt (короткое описание, которое показывается если картинку не загрузить).

Пример:

<h1>Моя первая страница</h1>
<p>Смотрите сайт про HTML по ссылке:</p>

<a href="https://example.com">Перейти на example.com</a>

<p>А вот картинка:</p>
<img src="cat.jpg" alt="Котик">

Что важно понять:

• <a href="...">Текст ссылки</a> — кликабельная строка.
• href="https://..." — внешний сайт. Если будет href="about.html", это ссылка на файл внутри вашего проекта.
• src="cat.jpg" — файл должен лежать рядом с index.html, иначе браузер не найдёт картинку.
• alt="..." — лучше писать осмысленно: это помогает и людям, и проверкам качества.

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

Чек-лист: как понять, что страница работает правильно

После того как вы открыли index.html в браузере, пройдитесь по простому списку. Он экономит время.

1. Открывается ли файл без ошибок?
   Если страница пустая или “что-то не то”, проверьте, что вы сохранили файл с расширением .html.

2. Русский текст отображается нормально?
   Если вместо текста “кракозябры”, значит проблема с кодировкой. Обычно помогает meta charset="utf-8" в <head>.

3. Заголовки и абзацы на месте?
   h1 должен быть крупным. p должен быть отдельными блоками с переносами.

4. Ссылка кликается и ведёт куда надо?
   Нажмите на ссылку. Если она открывается не там, проверьте href.

5. Картинка отображается?
   Если нет — проверьте:

• файл реально называется cat.jpg
• он лежит в той же папке, что и index.html
• src указан без опечаток

6. HTML не “разъехался” по тегам?
   Если забыть закрывающую скобку или перепутать закрывающий тег, верстка может стать странной. Визуально это будет заметно.

Если хотите двигаться дальше системно, можно параллельно пройти материал по курсу Основы HTML — он помогает не просто “написать один файл”, а понять логику тегов и собирать страницы по шагам.

Планы на 1–2 вечера: что делать по порядку

Чтобы не растекаться мыслью, держите простой план.

Вечер 1 (примерно 1–1.5 часа):

• Создайте папку и index.html.
• Вставьте базовый шаблон с doctype/html/head/body.
• Добавьте h1 и 2–3 абзаца текста.

Вечер 2 (примерно 1–1.5 часа):

• Добавьте ссылку через <a href="...">.
• Добавьте картинку через <img src="...">.
• Пройдитесь по чек-листу: текст, ссылка, картинка, кодировка.

Если что-то не работает — не паникуйте. Обычно проблема в одном символе: href, src или расширении файла.

С чего начать прямо сейчас

1. Создайте папку my-first-page и файл index.html. Вставьте туда минимальный шаблон из раздела про структуру HTML.
2. Откройте index.html в браузере и убедитесь, что виден h1 и абзац.
3. Добавьте ссылку и картинку (с href и src), после чего проверьте чек-лист: кликается ли ссылка и появляется ли изображение.

Если захотите продолжить после первой страницы, следующий шаг — углубиться в HTML и практику, например через Основы HTML.