Создание сайта на HTML и CSS: основы, инструменты и первые шаги

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

В этой статье разберём основы HTML и CSS, покажем структуру простого сайта с нуля, расскажем об инструментах и объясним, когда стоит создавать сайт вручную, а когда лучше выбрать конструктор или CMS.

Что такое HTML и CSS

HTML — скелет сайта

HTML (HyperText Markup Language) — язык разметки, который описывает структуру страницы. Он говорит браузеру: вот заголовок, вот абзац, вот изображение, вот ссылка. HTML не занимается внешним видом — только структурой и содержанием.

Файл HTML — это обычный текстовый файл с расширением .html. Браузер читает его и отображает как веб-страницу.

CSS — внешний вид сайта

CSS (Cascading Style Sheets) — язык стилей, который описывает, как должны выглядеть HTML-элементы. Размер шрифта, цвет фона, расположение блоков, отступы, анимации — всё это CSS.

Разделение структуры (HTML) и внешнего вида (CSS) — фундаментальный принцип веб-разработки. Это позволяет менять дизайн сайта, не трогая его содержание.

«HTML — это стены и перекрытия здания. CSS — это отделка, цвет стен и расстановка мебели. JavaScript — это электричество и лифты.»

Зачем учить HTML и CSS в 2025 году

Даже если вы не планируете становиться разработчиком, понимание HTML и CSS даёт практическую пользу:

Можете самостоятельно вносить правки в готовый сайт на WordPress или другой CMS
Понимаете, что просите у разработчика, и можете оценить качество работы
Можете создать простой лендинг или портфолио без конструктора
Основа для изучения JavaScript и полноценной веб-разработки

Хотите научиться создавать сайты?

Опишите задачу в Telegram — помогу выбрать оптимальный путь обучения или рассчитаю стоимость создания сайта под ключ.

Получить консультацию

Ответим в течение 2 часов. Консультация бесплатна.

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

Любая HTML-страница имеет фиксированную базовую структуру:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Описание страницы для поисковиков">
    <title>Название страницы</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <nav>
            <a href="/">Главная</a>
            <a href="/about">О нас</a>
            <a href="/contacts">Контакты</a>
        </nav>
    </header>

    <main>
        <h1>Главный заголовок страницы</h1>
        <p>Первый абзац текста.</p>
    </main>

    <footer>
        <p>© 2025 Название компании</p>
    </footer>

</body>
</html>

Что означает каждая часть

<!DOCTYPE html> — объявление типа документа. Сообщает браузеру, что это HTML5.

<html lang="ru"> — корневой элемент страницы. Атрибут lang указывает язык — важно для поисковиков и доступности.

<head> — служебная часть: метаданные, которые не отображаются на странице, но важны для браузера и поисковиков. Здесь прописываются кодировка, тайтл, описание, подключение стилей.

<meta charset="UTF-8"> — кодировка страницы. UTF-8 поддерживает кириллицу и все остальные символы.

<meta name="viewport"> — настройка отображения на мобильных устройствах. Обязательный тег для адаптивного дизайна.

<title> — заголовок страницы, который отображается во вкладке браузера и в результатах поиска. Один из важнейших SEO-элементов.

<body> — всё видимое содержимое страницы.

Основные HTML-теги

Заголовки

<h1>Главный заголовок — один на странице</h1>
<h2>Подзаголовок раздела</h2>
<h3>Подзаголовок подраздела</h3>

Заголовки H1–H6 образуют иерархию. H1 — один на странице, самый важный. Поисковики учитывают заголовки при определении темы страницы.

Текст и форматирование

<p>Обычный абзац текста.</p>

<strong>Жирный текст — важное выделение</strong>
<em>Курсивный текст — акцент</em>

<br> <!-- Перенос строки -->
<hr> <!-- Горизонтальная линия -->

Ссылки и изображения

<!-- Внешняя ссылка -->
<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>

<!-- Внутренняя ссылка -->
<a href="/about">О компании</a>

<!-- Изображение -->
<img src="photo.jpg" alt="Описание изображения" width="800" height="600">

Атрибут alt у изображений обязателен — он описывает картинку для поисковиков и незрячих пользователей.

Списки

<!-- Маркированный список -->
<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

<!-- Нумерованный список -->
<ol>
    <li>Первый шаг</li>
    <li>Второй шаг</li>
    <li>Третий шаг</li>
</ol>

Формы

<form action="/send" method="POST">
    <label for="name">Ваше имя:</label>
    <input type="text" id="name" name="name" placeholder="Введите имя" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="mail@example.com" required>

    <label for="message">Сообщение:</label>
    <textarea id="message" name="message" rows="5"></textarea>

    <button type="submit">Отправить</button>
</form>

Семантические теги HTML5

Семантические теги описывают смысл содержимого, а не только его внешний вид:

<header>   <!-- Шапка сайта или раздела -->
<nav>      <!-- Навигация -->
<main>     <!-- Основное содержимое страницы -->
<section>  <!-- Тематический раздел -->
<article>  <!-- Самостоятельная статья или материал -->
<aside>    <!-- Боковая колонка, дополнительный контент -->
<footer>   <!-- Подвал сайта или раздела -->

Использование семантических тегов улучшает SEO и доступность сайта.

Основы CSS

Подключение стилей

CSS можно подключить тремя способами:

<!-- Внешний файл стилей — правильный способ -->
<link rel="stylesheet" href="style.css">

<!-- Встроенные стили в теге <style> — для небольших проектов -->
<style>
    body { font-family: Arial, sans-serif; }
</style>

<!-- Инлайн-стили — только для исключений -->
<p style="color: red;">Красный текст</p>

Лучшая практика — выносить все стили в отдельный файл style.css. Это упрощает поддержку и позволяет использовать одни стили для всех страниц.

Синтаксис CSS

/* Это комментарий */

селектор {
    свойство: значение;
    другое-свойство: другое-значение;
}

Селекторы

/* Тег — применяется ко всем элементам этого типа */
p {
    color: #333;
    line-height: 1.6;
}

/* Класс — применяется к элементам с class="button" */
.button {
    background-color: #2E75B6;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
}

/* ID — применяется к одному элементу с id="header" */
#header {
    background-color: #1A1A2E;
    height: 80px;
}

/* Комбинированный — все <a> внутри <nav> */
nav a {
    text-decoration: none;
    color: #333;
}

Блочная модель (Box Model)

Каждый HTML-элемент — это прямоугольный блок с четырьмя зонами:

.box {
    width: 300px;          /* Ширина содержимого */
    height: 200px;         /* Высота содержимого */
    padding: 20px;         /* Внутренний отступ */
    border: 1px solid #ccc; /* Рамка */
    margin: 16px;          /* Внешний отступ */
}

Понимание блочной модели — основа вёрстки. Именно из-за неправильного расчёта отступов и рамок чаще всего «разъезжаются» блоки.

Flexbox — современный способ выравнивания

Flexbox решает задачи расположения элементов в строку или колонку:

/* Горизонтальное меню */
nav {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* Карточки в ряд с переносом */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px; /* Минимальная ширина 300px, растягивается */
}

/* Центрирование по вертикали и горизонтали */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Адаптивный дизайн через Media Queries

/* Стили по умолчанию — для десктопа */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Планшеты — экраны до 1024px */
@media (max-width: 1024px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобильные — экраны до 768px */
@media (max-width: 768px) {
    .cards {
        grid-template-columns: 1fr;
    }

    nav {
        flex-direction: column;
    }
}

Пример простого лендинга на HTML и CSS

Минимальная структура одностраничного сайта:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Разработка сайтов — быстро и качественно</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Шапка -->
    <header class="header">
        <div class="container">
            <div class="logo">МоёАгентство</div>
            <nav class="nav">
                <a href="#services">Услуги</a>
                <a href="#portfolio">Портфолио</a>
                <a href="#contacts">Контакты</a>
            </nav>
        </div>
    </header>

    <!-- Главный экран -->
    <section class="hero">
        <div class="container">
            <h1>Создаём сайты, которые продают</h1>
            <p>Разработка под ключ за 3 недели. Гарантия 6 месяцев.</p>
            <a href="#contacts" class="button">Получить КП</a>
        </div>
    </section>

    <!-- Услуги -->
    <section class="services" id="services">
        <div class="container">
            <h2>Наши услуги</h2>
            <div class="cards">
                <div class="card">
                    <h3>Лендинг</h3>
                    <p>Одностраничный сайт для рекламных кампаний</p>
                </div>
                <div class="card">
                    <h3>Корпоративный сайт</h3>
                    <p>Многостраничный сайт для бизнеса</p>
                </div>
                <div class="card">
                    <h3>Интернет-магазин</h3>
                    <p>Полноценный магазин с корзиной и оплатой</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Контакты -->
    <section class="contacts" id="contacts">
        <div class="container">
            <h2>Обсудим ваш проект</h2>
            <form class="form">
                <input type="text" placeholder="Ваше имя" required>
                <input type="tel" placeholder="Телефон" required>
                <button type="submit" class="button">Отправить заявку</button>
            </form>
        </div>
    </section>

    <!-- Подвал -->
    <footer class="footer">
        <div class="container">
            <p>© 2025 МоёАгентство</p>
        </div>
    </footer>

</body>
</html>

Инструменты для создания сайтов на HTML и CSS

Редакторы кода

VS Code — самый популярный бесплатный редактор от Microsoft. Подсветка синтаксиса, автодополнение, встроенный терминал, огромная библиотека расширений. Рекомендуется для всех уровней.

WebStorm — профессиональная IDE от JetBrains. Платная, но мощная: умное автодополнение, встроенный дебаггер, интеграция с Git. Хороший выбор для серьёзной разработки.

Sublime Text — лёгкий и быстрый редактор. Условно бесплатный (можно использовать без лицензии с периодическими напоминаниями о покупке).

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

Live Server — автоматически обновляет страницу в браузере при сохранении файла
Prettier — форматирует код по единому стандарту
Auto Rename Tag — при переименовании открывающего тега автоматически переименовывает закрывающий
CSS Peek — позволяет просматривать CSS-стили прямо из HTML

Браузерные DevTools

Инструменты разработчика, встроенные в Chrome и Firefox — незаменимый инструмент при вёрстке. Открываются по F12:

Elements — просмотр и редактирование HTML и CSS в реальном времени
Console — вывод ошибок JavaScript
Network — анализ загрузки ресурсов
Responsive Mode — проверка адаптивности на разных экранах

Что изучить после HTML и CSS

HTML и CSS — первый шаг. После их освоения логичный путь:

JavaScript — добавляет интерактивность: слайдеры, модальные окна, валидация форм, динамическое изменение контента без перезагрузки страницы.

Git — система контроля версий. Позволяет отслеживать изменения в коде, откатываться к предыдущим версиям, работать в команде.

Фреймворки CSS — Bootstrap, Tailwind CSS. Готовые системы стилей, которые ускоряют вёрстку.

Фреймворки JavaScript — React, Vue, Nuxt. Для создания сложных интерактивных интерфейсов и веб-приложений.

Когда создавать сайт на чистом HTML/CSS, а когда использовать CMS

Создание сайта на HTML и CSS с нуля имеет смысл в конкретных ситуациях:

Подходит когда:

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

Не подходит когда:

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

Ресурсы для обучения HTML и CSS

Освоить базовый HTML и CSS можно бесплатно за 4–6 недель при занятиях по 1–2 часа в день:

MDN Web Docs (developer.mozilla.org) — самая полная документация по HTML, CSS и JavaScript на русском языке
HTML Academy (htmlacademy.ru) — интерактивные курсы на русском языке
CSS-Tricks (css-tricks.com) — статьи и примеры по CSS на английском
Flexbox Froggy (flexboxfroggy.com) — игра для изучения Flexbox
Grid Garden (cssgridgarden.com) — игра для изучения CSS Grid

Готовы обсудить ваш проект?

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

Написать в Telegram и получить КП