Первые шаги в HTML: Вёрстка без боли и страданий

Установка редактора кода и браузера

Выбор редактора

Представь, что код – это твой холст, а редактор – кисть, которой ты рисуешь. Чем удобнее кисть, тем легче рисовать. Поэтому первым делом установим хороший текстовый редактор. Вот три популярных варианта:

VS Code – бесплатный, мощный и с кучей полезных расширений. Лучший выбор для новичков!
Sublime Text – лёгкий и быстрый, но требует платной лицензии.
Notepad++ – простой вариант для тех, кто любит минимализм.

Мой совет: скачивай VS Code с официального сайта – он действительно удобный.

Настройка рабочего окружения

После установки редактора сделай три вещи:

Включи подсветку кода (в VS Code это по умолчанию).
Добавь расширение Live Server – оно позволит запускать HTML-страницы без лишних движений.
Настрой автоотступы (в VS Code: File → Preferences → Settings → Editor: Tab Size = 2 или 4).

Выбор браузера

Браузер – это наш инструмент для проверки HTML-страниц. Лучший выбор для разработки – Google Chrome или Firefox. Оба поддерживают крутые инструменты разработчика.

Структура HTML-документа

HTML – это каркас веб-страницы. Как скелет у человека: без него всё рухнет. Давай разберёмся, из чего он состоит.

Базовая структура HTML

Любой HTML-документ начинается с основы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая HTML-страница.</p>
</body>
</html>

Что тут происходит?

<!DOCTYPE html> – говорит браузеру: «Это HTML5!»
<html lang="ru"> – начало HTML-документа. Атрибут lang="ru" указывает, что язык страницы – русский.
<head> – техническая часть страницы, где указываются мета-данные:
- <meta charset="UTF-8"> – поддержка русских букв.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> – адаптация для мобильных устройств.
- <title> – название вкладки в браузере.
<body> – всё, что увидит пользователь: заголовки, текст, картинки и прочее.

Как запустить HTML-страницу?

Создай файл index.html.
Скопируй код выше и вставь в файл.
Открой в браузере:
- В VS Code установи Live Server и нажми Go Live.
- Либо просто дважды кликни на index.html, и он откроется в браузере.

Использование комментариев

Комментарии помогают не запутаться в коде. Они не отображаются в браузере, но делают код понятнее.

Вот пример:

<p>Привет, мир!</p>

Используй комментарии, чтобы объяснить себе или другим, что делает тот или иной кусок кода.

Итог

Поздравляю, ты сделал первые шаги в HTML! Теперь ты знаешь:

Как выбрать и настроить редактор.
Как создать базовый HTML-документ.
Как запустить страницу в браузере.
Как использовать комментарии.