Как создать сайт на HTML/CSS с нуля: инструкция для начинающих

Как создать сайт на HTML и CSS с нуля: основы для начинающих

15.11.2025 Автор: Максим Габов написал в рубрике Уроки для начинающих. 0 Комментариев.

В этой статье мы разберем базовую структуру HTML-документа, создадим простой макет с помощью CSS и сверстаем главную страницу. Все это будет сопровождаться примерами кода, инструкциями и рекомендациями, которые помогут тебе быстро освоить основы веб-разработки.

Базовая структура HTML-документа

HTML (HyperText Markup Language) это язык разметки, который используется для создания структуры веб-страницы. Давай начнем с основ и разберем, из чего состоит HTML-документ.

Основные элементы HTML

Каждый HTML-документ начинается с объявления типа документа <!DOCTYPE html>, которое сообщает браузеру, что это документ HTML5. После этого идет тег <html>, который является корневым элементом всей страницы. Внутри него находятся два основных раздела: <head> и <body>.

<head>: В этом разделе содержится метаинформация о странице, такая как заголовок, описание, ключевые слова, ссылки на стили и скрипты.
<body>: Здесь находится основное содержимое страницы, которое отображается в браузере.

Пример базовой структуры HTML-документа:

<!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="styles.css">
</head>
<body>
    <header>
        <h1>Добро пожаловать на мой сайт!</h1>
    </header>
    <main>
        <p>Это мой первый сайт, созданный с нуля.</p>
    </main>
    <footer>
        <p>&copy; 2024 Максим</p>
    </footer>
</body>
</html>

Разбор структуры

<meta charset="UTF-8">: Указывает кодировку документа (UTF-8 поддерживает большинство символов).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Обеспечивает корректное отображение на мобильных устройствах.
<title>: Заголовок страницы, который отображается вкладке браузера.
<link rel="stylesheet" href="styles.css">: Подключает внешний файл стилей CSS.

Создание простого макета с помощью CSS

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

Подключение CSS

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

Внешний файл: Самый распространенный способ. Создаем файл styles.css и подключаем его в HTML-документе с помощью тега <link>.
Внутри HTML-документа: Стили можно прописать внутри тега <style> в разделе <head>.
Инлайн-стили: Стили можно прописать непосредственно в атрибуте style 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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Добро пожаловать на мой сайт!</h1>
        <nav>
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>О нас</h2>
            <p>Мы занимаемся созданием красивых и функциональных сайтов.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Максим</p>
    </footer>
</body>
</html>

CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
    border-radius: 5px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Разбор CSS

body: Задает шрифт, убирает отступы по умолчанию и задает цвет фона.
header: Задает цвет фона, текста, отступы и выравнивание текста по центру.
nav ul: Убирает маркеры списка и отступы.
nav ul li: Делает элементы списка строчными и задает отступы между ними.
nav ul li a: Задает цвет текста и убирает подчеркивание ссылок.
main: Задает отступы, цвет фона, отступы и скругление углов.
footer: Задает цвет фона, текста, выравнивание по центру и фиксирует подвал внизу страницы.

Пример верстки главной страницы

Теперь, когда мы разобрали основы, давай создадим более сложный пример верстки главной страницы. Представим, что это сайт портфолио веб-разработчика.

HTML:

<!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="styles.css">
</head>
<body>
    <header>
        <h1>Максим - Веб-разработчик</h1>
        <nav>
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Портфолио</a></li>
                <li><a href="#">Блог</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>Обо мне</h2>
            <p>Привет! Меня зовут Максим, и я занимаюсь веб-разработкой уже несколько лет. Я создаю красивые и функциональные сайты, которые помогают бизнесу расти.</p>
        </section>
        <section id="portfolio">
            <h2>Портфолио</h2>
            <div class="portfolio-items">
                <div class="item">
                    <img src="project1.jpg" alt="Проект 1">
                    <h3>Проект 1</h3>
                    <p>Описание проекта 1.</p>
                </div>
                <div class="item">
                    <img src="project2.jpg" alt="Проект 2">
                    <h3>Проект 2</h3>
                    <p>Описание проекта 2.</p>
                </div>
                <div class="item">
                    <img src="project3.jpg" alt="Проект 3">
                    <h3>Проект 3</h3>
                    <p>Описание проекта 3.</p>
                </div>
            </div>
        </section>
        <section id="contact">
            <h2>Контакты</h2>
            <form action="#" method="post">
                <label for="name">Имя:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <label for="message">Сообщение:</label>
                <textarea id="message" name="message" required></textarea>
                <button type="submit">Отправить</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Максим. Все права защищены.</p>
    </footer>
</body>
</html>

CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
    border-radius: 5px;
}

#about, #portfolio, #contact {
    margin-bottom: 40px;
}

.portfolio-items {
    display: flex;
    justify-content: space-between;
}

.item {
    width: 30%;
    text-align: center;
}

.item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

form {
    display: flex;
    flex-direction: column;
}

form label {
    margin-bottom: 5px;
}

form input, form textarea {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    padding: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Разбор верстки

Шапка (header): Содержит заголовок и навигационное меню.
Основное содержимое (main): Разделено на три секции: «Обо мне», «Портфолио» и «Контакты».
Портфолио: Используется Flexbox для создания сетки из трех элементов.
Форма контактов: Простая форма с полями для имени, email и сообщения.
Подвал (footer): Фиксируется внизу страницы и содержит информацию об авторских правах.

Сравнительные тесты

Давай сравним два подхода к верстке: с использованием таблиц и с использованием Flexbox.

Характеристика	Таблицы	Flexbox
Простота	Сложнее в поддержке	Проще и понятнее
Гибкость	Ограничена	Высокая
Адаптивность	Требует дополнительных усилий	Легко адаптируется
Поддержка браузерами	Устаревший подход	Современный и поддерживаемый
Использование	Устаревшие проекты	Современная верстка