Загрузка данных

/* Базовые настройки */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
    padding: 20px;
}

/* Стили для всех страниц */
header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

nav {
    margin-top: 10px;
}

nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

main {
    background-color: white;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #ddd;
}

section {
    margin-bottom: 20px;
}

h2, h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 10px;
}

/* Специфические стили для статьи (Задача 2) */
article {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #fafafa;
}

article header {
    background-color: #eaeaea;
    color: #333;
    text-align: left;
    padding: 10px;
    margin-bottom: 15px;
}

article footer {
    background-color: transparent;
    color: #666;
    text-align: left;
    padding: 0;
    font-size: 0.9em;
}
Швлаоаоаоао
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Задача 2: Разметка статьи</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Раздел статей</h1>
        <nav>
            <a href="task1.html">Задача 1</a>
            <a href="task3.html">Задача 3</a>
            <a href="task2.html">Задача 2</a>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>Как устроен интернет</h2>
                <p><strong>Автор:</strong> Максим</p>
            </header>

            <section>
                <h3>Введение</h3>
                <p>Интернет — это огромная сеть соединенных между собой компьютеров. Когда вы вводите адрес сайта, ваш браузер отправляет запрос на сервер.</p>
            </section>

            <section>
                <h3>Основная часть</h3>
                <p>Сервер обрабатывает этот запрос и отправляет обратно файлы HTML, CSS и JavaScript. Браузер принимает их и собирает из этого кода красивую страницу, которую вы видите на экране.</p>
            </section>

            <footer>
                <p>Дата публикации: 28 мая 2026 года</p>
            </footer>
        </article>
    </main>

    <footer>
        <p>Конец страницы блога</p>
    </footer>

</body>
</html>
Овоаоаоаоала
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Задача 3: Исправление ошибок</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Полезный блог</h1>
        <nav>
            <a href="task1.html">Задача 1</a>
            <a href="task3.html">Задача 3</a>
            <a href="task2.html">Задача 2</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>Заголовок статьи</h2>
            <p>Текст статьи о том, почему важно использовать правильные теги вместо обычных дивов. Семантика помогает поисковым роботам лучше понимать структуру вашего сайта.</p>
        </section>
    </main>

    <footer>
        <p>Контакты: mail@example.com</p>
    </footer>

</body>
</html>
Ьвлвлалаоао
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Задача 1: Структура страницы</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Мой учебный сайт</h1>
        <nav>
            <a href="task1.html">Задача 1</a>
            <a href="task3.html">Задача 3</a>
            <a href="task2.html">Задача 2</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>Наши обучающие курсы</h2>
            <p>Этот курс посвящен изучению основ веб-разработки. Здесь вы научитесь создавать сайты с нуля, изучите основы работы с текстом, графикой и разметкой страниц по современным стандартам.</p>
        </section>

        <section>
            <h2>Об авторе курса</h2>
            <p>Автор курса — Максим, опытный фронтенд-разработчик. Он простыми словами объясняет сложные темы и помогает новичкам сделать первые шаги в профессии.</p>
        </section>
    </main>

    <footer>
        <p>Панель автора: Максим, 2026</p>
    </footer>

</body>
</html>