Как создать сайт с помощью HTML и CSS: подробная инструкция с примерами кода

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

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

Шаг 1. Понять, чем HTML отличается от CSS

Представьте строительство дома. HTML — это фундамент, стены и крыша: скелет здания. CSS — отделка: цвет стен, обои, шторы, освещение. Без HTML дома нет вовсе, без CSS он стоит, но выглядит как бетонная коробка.

Шаг 2. Установить инструменты

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

Оптимальный выбор для начинающего — Visual Studio Code. После установки рекомендуется добавить расширение «Live Server»: оно обновляет страницу в браузере автоматически при каждом сохранении файла.

Шаг 3. Написать первую HTML-страницу

В папке проекта создаётся файл index.html. Именно это имя браузеры и серверы считают главной страницей сайта. Внутрь помещается базовый «каркас»:

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

Двойной клик по файлу откроет его в браузере — и на экране появится первая страница. Каждая строка каркаса выполняет свою задачу:

Шаг 4. Освоить основные HTML-теги

Тег — это команда, записанная в угловых скобках. Большинство тегов парные: открывающий <p> и закрывающий </p>. Для полноценного сайта достаточно знать около двадцати тегов. Самые важные:

Шаг 5. Подключить CSS и оформить страницу

Стили записываются в отдельный файл style.css и подключаются одной строкой внутри <head>:

/* Селектор — то, что оформляем */
body {
    font-family: Arial, sans-serif;  /* шрифт */
    background-color: #fff0f1;      /* фон */
    color: #1a1a1a;               /* цвет текста */
}

h1 {
    color: #d80621;              /* красный заголовок */
    text-align: center;           /* по центру */
}

Три способа указать элемент для оформления

Шаг 6. Расставить блоки с помощью Flexbox

Современные макеты строятся на Flexbox — технологии, которая выстраивает блоки в ряд или колонку и равномерно распределяет пространство между ними. Достаточно трёх свойств:

.row {
    display: flex;                  /* включить Flexbox */
    justify-content: space-between; /* разнести по краям */
    gap: 20px;                     /* отступы между блоками */
}

Результат работы justify-content наглядно виден на схеме — три разных значения, три разных макета:

Шаг 7. Сделать сайт адаптивным

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

/* Если экран уже 600 пикселей… */
@media (max-width: 600px) {
    .row {
        flex-direction: column; /* блоки встают друг под другом */
    }
    h1 {
        font-size: 24px;        /* заголовок становится меньше */
    }
}

Шаг 8. Опубликовать сайт в интернете

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

Публикация через Netlify занимает меньше минуты: папка с файлами перетаскивается на страницу сервиса — и сайт сразу получает адрес в интернете. Позже к нему можно прикрепить собственный домен.

Итоговый чек-лист

Отмечайте выполненные этапы — прогресс отобразится в шкале:

Пять типичных ошибок новичков