Добро пожаловать на курс по вёрстке сайтов! Здесь вы с полного нуля научитесь создавать веб-страницы на HTML и CSS — двух главных языках, на которых держится внешний вид любого сайта в интернете. Мы не будем заваливать вас сухой теорией: с самого первого урока вы пишете настоящий код и сразу видите результат в браузере.

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

Зачем это нужно

Любой сайт, который вы открываете в браузере, в основе своей — текстовый файл с разметкой на языке HTML. Чтобы создавать такие файлы удобно, быстро и без ошибок, разработчики используют специальный редактор кода и набор простых правил оформления документа. Без правильно настроенной среды даже опытный разработчик теряет время на мелочах, а новичок — вдвойне.

После этого урока вы сможете создать HTML-файл с корректной структурой, вывести на страницу заголовок и текст и открыть результат в браузере — ровно так, как это делают в реальной работе.

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как установить и подготовить к работе редактор кода VS Code.
• Какие расширения упрощают жизнь начинающему верстальщику.
• Что такое HTML, тег и элемент.
• Как выглядит обязательный каркас HTML-документа и за что отвечает каждая его часть.
• Как вывести на страницу заголовок и абзац и запустить страницу в браузере.

Ключевые термины

• HTML — язык разметки, с помощью которого мы описываем структуру и содержимое веб-страницы.
• Тег — команда разметки в угловых скобках, например <p>. Чаще всего теги парные: открывающий <p> и закрывающий </p>.
• Элемент — открывающий тег, закрывающий тег и содержимое между ними как единое целое.
• Атрибут — дополнительная настройка тега, записанная внутри открывающего тега, например lang="ru".
• Редактор кода — программа для написания кода с подсветкой, подсказками и проверкой ошибок (у нас это VS Code).
• Браузер — программа, которая читает HTML-файл и превращает его в страницу, которую видит пользователь.

Устанавливаем редактор кода

Писать код можно даже в стандартном «Блокноте», но это неудобно и легко приводит к ошибкам. Разработчики используют VS Code (Visual Studio Code) — бесплатный редактор от Microsoft. Он подсвечивает разные части кода цветом, подсказывает названия тегов во время набора и сразу обращает внимание на опечатки.

Скачайте редактор с официального сайта code.visualstudio.com и установите его как обычную программу. Затем создайте на компьютере отдельную папку для проекта — например, my-site — и откройте её в редакторе через меню File → Open Folder. Именно в этой папке будут храниться все файлы вашего сайта.

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

Полезные расширения

Расширения (плагины) добавляют редактору новые возможности. Откройте вкладку Extensions — значок с четырьмя квадратиками на левой панели — и установите два расширения, которые пригодятся с первого дня:

• Live Server — запускает вашу страницу в браузере на локальном мини-сервере и автоматически обновляет её при каждом сохранении файла. Вам не придётся вручную перезагружать страницу после каждой правки.
• Prettier — автоматически форматирует код: расставляет отступы и приводит его к аккуратному единому виду.

Настраивать их для старта не нужно: сразу после установки они начинают работать. Позже вы сможете подстроить их под себя, но это не срочно.

Что такое HTML

HTML расшифровывается как HyperText Markup Language — «язык гипертекстовой разметки». Слово «разметка» здесь ключевое: мы не программируем логику, а размечаем текст, объясняя браузеру, где заголовок, где абзац, а где изображение.

Разметка задаётся тегами. Тег обычно состоит из двух частей — открывающей и закрывающей, — между которыми находится содержимое: <h1>Привет, мир!</h1>

Здесь <h1> — открывающий тег, </h1> — закрывающий (у него перед именем стоит слэш /), а «Привет, мир!» — содержимое. Всё вместе — открывающий тег, содержимое и закрывающий тег — называется элементом. Когда браузер встречает такой элемент, он понимает: перед ним заголовок первого уровня, и рисует его крупным жирным шрифтом.

Некоторые теги имеют атрибуты — дополнительные настройки внутри открывающего тега. С одним из них, lang, мы познакомимся уже в следующем уроке.

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

У каждой веб-страницы есть обязательный каркас — набор тегов, которые должны присутствовать всегда. Создайте в папке проекта файл index.html и впишите в него следующее:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой первый сайт</title>
</head>
<body>
  <h1>Моя первая страница</h1>
</body>
</html>

Разберём каждую строку каркаса:

• <!DOCTYPE html> — специальная строка в самом начале, которая сообщает браузеру, что перед ним современный HTML. Без неё браузер может отобразить страницу по устаревшим правилам.
• <html lang="ru"> — корневой элемент, внутри которого лежит вся страница. Атрибут lang="ru" указывает, что страница на русском языке (это помогает поисковикам и программам озвучивания текста).
• <head> — «служебная» часть документа. Всё, что здесь находится, не видно на самой странице, но влияет на её работу.
• <meta charset="UTF-8"> — задаёт кодировку UTF-8. Благодаря ей корректно отображается кириллица и любые другие символы.
• <title> — заголовок страницы, который виден на вкладке браузера (не путайте с заголовком <h1> внутри страницы).
• <body> — «тело» документа. Всё видимое содержимое страницы — тексты, картинки, кнопки — размещают именно здесь.

Запоминать этот каркас наизусть не нужно. В VS Code достаточно набрать восклицательный знак ! и нажать Tab — редактор сам подставит готовую заготовку.

Первые теги и запуск в браузере

Теперь наполним видимую часть страницы. Внутри <body> добавим заголовок и абзац текста:

<body>
  <h1>Моя первая страница</h1>
  <p>Это мой первый сайт. Я только начинаю изучать веб-разработку.</p>
</body>

Здесь используются два новых элемента. <h1> — заголовок первого уровня, самый крупный и главный на странице; такой заголовок обычно один. <p> (от англ. paragraph) — абзац обычного текста. Каждый из этих элементов браузер выводит с новой строки, поэтому заголовок и абзац не сольются в одну строку.

Чтобы увидеть результат, щёлкните правой кнопкой мыши по файлу index.html и выберите Open with Live Server. Откроется браузер с крупным заголовком и абзацем под ним. Попробуйте изменить текст и сохранить файл сочетанием Ctrl+S (на macOS — Cmd+S): страница обновится сама, без ручной перезагрузки. Это и есть тот быстрый цикл «изменил — сохранил — увидел», в котором проходит работа верстальщика.

Применяем в проекте

Заложим фундамент нашего сквозного проекта — учебного лендинга. Пусть это будет промо-страница курса по вёрстке. Оформим её титульный экран: главный заголовок и короткое описание под ним.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Курс по вёрстке</title>
</head>
<body>
  <h1>Научитесь верстать сайты с нуля</h1>
  <p>Практический курс по HTML и CSS для начинающих. От первой страницы до готового лендинга.</p>
</body>
</html>

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

Частые ошибки

• Забыли закрывающий тег.
  Каждому <h1> нужен </h1>, каждому <p> — </p>. Незакрытый тег нарушает структуру и «ломает» отображение всего, что идёт ниже.
• Пропущен <meta charset="UTF-8">.
  Без этой строки кириллица может превратиться в набор нечитаемых символов вроде привет.
• Файл назван не index.html.
  Главную страницу сайта принято называть именно так — это стандартное имя, которое сервер открывает по умолчанию.
• Открыли файл двойным кликом вместо Live Server.
  Страница откроется, но не будет обновляться автоматически при сохранении, и вы можете подумать, что правки «не работают».

Итоги

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

Пусть пока страница выглядит скромно — чёрный текст на белом фоне, — но именно так начинали абсолютно все. Дальше будет только интереснее. В следующем уроке мы наполним страницу жизнью: познакомимся с новыми текстовыми тегами, добавим списки, изображения и ссылки. Отдохните минутку, порадуйтесь первому успеху — и вперёд, к уроку 1.2!