Pastein: /* Общий CSS-стиль для лабораторной работы */ /* Базовый сброс */ * { box-sizing: border-box; margin: 0; padding: 0; } body { fon

Загрузка данных
/* Общий CSS-стиль для лабораторной работы */

/* Базовый сброс */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f7fa;
    padding: 20px;
}

/* Стили главных блоков */
header {
    background-color: #2c3e50;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 20px;
}

nav {
    background-color: #34495e;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

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

main {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eef2f3;
}

section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

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

p {
    margin-bottom: 12px;
}

footer {
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Стилизация статьи (Задача 2) */
article {
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 6px;
}

article header {
    background-color: #ecf0f1;
    color: #2c3e50;
    text-align: left;
    padding: 15px;
    margin-bottom: 20px;
}

/* Стилизация таблицы (Задача 4) */
.table-layout {
    width: 100%;
    border-collapse: collapse; /* Убираем двойные рамки */
    background-color: #ffffff;
    margin-top: 15px;
}

.table-layout td {
    padding: 20px;
    vertical-align: top;
    border: 1px solid #bdc3c7;
}

.table-layout header, .table-layout footer {
    margin: 0;
    border-radius: 0;
}

.sidebar {
    width: 25%;
    background-color: #f8f9fa;
}

.sidebar ul {
    list-style-type: none;
    margin-top: 10px;
}

.sidebar li {
    margin-bottom: 8px;
}

.sidebar a {
    color: #2980b9;
    text-decoration: none;
}

.sidebar a:hover {
    text-decoration: underline;
}

.content-cell {
    width: 75%;
}

.content-cell main {
    box-shadow: none;
    padding: 0;
    margin: 0;
}
Влвлалвлалалалаллалалалплал
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Задача 4: Табличная вёрстка</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Задача 4: Использование табличной верстки сайта и семантических тегов -->
    <table class="table-layout">
        <!-- Шапка сайта (Объединяет 2 колонки) -->
        <tr>
            <td colspan="2">
                <header>
                    <h1>Сообщество «Веб-Стандарты»</h1>
                    <nav>
                        <a href="task1.html">Главная</a>
                        <a href="task2.html">Статья</a>
                        <a href="task4.html">Табличный макет</a>
                    </nav>
                </header>
            </td>
        </tr>

        <!-- Средняя часть: Боковая колонка + Основной контент -->
        <tr>
            <!-- Левая колонка — Сайдбар -->
            <td class="sidebar">
                <aside>
                    <h3>Ресурсы</h3>
                    <ul>
                        <li><a href="#">Подкаст «Веб-Стандарты»</a></li>
                        <li><a href="#">Спецификации W3C</a></li>
                        <li><a href="#">Валидатор кода</a></li>
                    </ul>
                </aside>
            </td>

            <!-- Правая колонка — Контентная зона -->
            <td class="content-cell">
                <main>
                    <section>
                        <h2>История развития верстки сеток</h2>
                        <p>В начале 2000-х годов таблицы были единственным надежным способом выстроить сложную сетку сайта с боковыми панелями и колонками. Разработчики шли на огромные ухищрения, создавая громоздкие конструкции.</p>
                        <p>Позже появились блоки с float, затем Flexbox и современные Grid Layout. В рамках этой лабораторной работы мы объединили старый подход табличного каркаса и новые стандарты семантического кода внутри ячеек.</p>
                    </section>
                </main>
            </td>
        </tr>

        <!-- Подвал сайта (Объединяет 2 колонки) -->
        <tr>
            <td colspan="2">
                <footer>
                    <p>Материал подготовил: Вадим Макеев</p>
                </footer>
            </td>
        </tr>
    </table>

</body>
</html>
Ьчлвлалвлалалалл
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Задача 2: Разметка статьи</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Блог о веб-технологиях</h1>
        <nav>
            <a href="task1.html">Главная</a>
            <a href="task2.html">Статья</a>
            <a href="task4.html">Табличный макет</a>
        </nav>
    </header>

    <main>
        <!-- Задача 2: Разметка статьи -->
        <article>
            <header>
                <h2>Зачем вебу нужна доступность интерфейсов?</h2>
                <p><strong>Автор:</strong> Никита Дубко</p>
            </header>

            <section>
                <h3>Введение</h3>
                <p>Доступность (Accessibility или a11y) — это создание веб-страниц, которыми могут пользоваться абсолютно все люди, включая пользователей с ограниченными возможностями здоровья, тех, кто использует скринридеры, или просто людей со сломанной компьютерной мышью.</p>
            </section>

            <section>
                <h3>Основная часть</h3>
                <p>Основой доступности интерфейса является правильная семантическая разметка. Когда вместо обычных div-ов мы используем нативные теги вроде button, main, nav или article, браузер автоматически передает вспомогательным технологиям (например, экранным дикторам) правильное дерево доступности.</p>
                <p>Это не только помогает пользователям, но и колоссально улучшает SEO-показатели сайта, помогая поисковым роботам Google и Яндекс находить ключевую информацию на вашей странице.</p>
            </section>

            <footer>
                <p>Категория: Разработка | Опубликовано: 20 мая 2024</p>
            </footer>
        </article>
    </main>

    <footer>
        <p>&copy; 2026 Лабораторная работа по HTML5</p>
    </footer>

</body>
</html>
Лалалалалалалалалал
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Задача 1 и 3: Семантическая разметка</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Задача 3: Исправлено из <div class="top"> и <div class="menu"> -->
    <header>
        <h1>Образовательный IT-портал</h1>
        <nav>
            <a href="task1.html">Главная</a>
            <a href="task2.html">Статья</a>
            <a href="task4.html">Табличный макет</a>
        </nav>
    </header>

    <!-- Задача 1: Основное содержимое сайта с двумя секциями внутри main -->
    <main>
        <!-- Секция о курсах -->
        <section>
            <h2>Наши онлайн-курсы по фронтенду</h2>
            <p>Фронтенд-разработка стремительно развивается. Сегодня базовых знаний HTML и CSS уже недостаточно — современный специалист должен разбираться в архитектуре приложений, автоматизации сборки, методологиях стилизации и оптимизации клиентской производительности для обеспечения быстрой загрузки страниц.</p>
        </section>

        <!-- Секция об авторе -->
        <section>
            <h2>Об авторе курсов</h2>
            <p>Игорь Антонов — практикующий веб-разработчик, тимлид и технический писатель. Занимается коммерческой разработкой более 10 лет. Автор десятков профильных статей, обучающих программ и интерактивных тренажеров для начинающих программистов.</p>
        </section>
    </main>

    <!-- Задача 3: Исправлено из <div class="bottom"> -->
    <footer>
        <p>Свяжитесь с нами: contact@it-academy.example.com</p>
    </footer>

</body>
</html>
Оаоалалалалалалала
Больше возможностей при регистрации:
