https://pastein.ru/t/yY8
Загрузка данных
/* Общие настройки страницы */
body {
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #f5f7fb;
color: #333333;
line-height: 1.6;
margin: 0;
padding: 30px 10px;
}
/* Главный центрирующий блок */
.container {
max-width: 850px;
margin: 0 auto;
background: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
h1 {
color: #2c3e50;
border-bottom: 3px solid #f0f2f5;
padding-bottom: 15px;
margin-top: 0;
text-align: center;
}
/* Оформление блоков с задачами */
.task {
margin-bottom: 45px;
padding: 25px;
border: 1px solid #e1e8ed;
border-radius: 8px;
background-color: #ffffff;
}
.task-title {
font-size: 1.25rem;
color: #2980b9;
margin-top: 0;
margin-bottom: 20px;
padding-left: 10px;
border-left: 4px solid #2980b9;
}
.description {
color: #7f8c8d;
font-style: italic;
margin-bottom: 15px;
}
/* Визуальная подсветка семантических тегов для наглядности */
header, footer, main, section, article, nav, aside {
border: 1px dashed #cbd5e1;
padding: 15px;
margin: 12px 0;
background-color: #fdfefe;
border-radius: 6px;
}
/* Цветные левые границы, чтобы различать теги визуально */
header { border-left: 5px solid #e74c3c; } /* Красный — Шапка */
main { border-left: 5px solid #2ecc71; } /* Зеленый — Главное */
section { border-left: 5px solid #3498db; } /* Синий — Секция */
article { border-left: 5px solid #9b59b6; } /* Фиолетовый — Статья */
footer { border-left: 5px solid #f1c40f; } /* Желтый — Подвал */
nav { border-left: 5px solid #1abc9c; } /* Бирюзовый — Меню */
aside { border-left: 5px solid #e67e22; } /* Оранжевый — Сайдбар */
/* Стили для таблицы (Задача 4) */
.layout-table {
width: 100%;
border-collapse: collapse; /* Схлопывание двойных рамок таблицы */
margin-top: 20px;
}
.layout-table td {
border: 1px solid #bdc3c7;
padding: 0; /* Сбрасываем внутренние отступы ячеек */
vertical-align: top;
}
/* Пропорции колонок в таблице */
.main-col {
width: 70%;
}
.sidebar-col {
width: 30%;
}
/* Сброс внешних отступов тегов внутри таблицы, чтобы они заполнили ячейки */
.layout-table .table-component {
margin: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-radius: 0;
height: 100%;
box-sizing: border-box;
}
.layout-table aside {
background-color: #fafbfc;
min-height: 150px;
}
.text-center {
text-align: center;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Практические задачи по семантике HTML5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Решение практических задач</h1>
<section class="task">
<h2 class="task-title">Задача 1: Структура страницы</h2>
<header>
<h1>Онлайн-курсы по веб-разработке</h1>
</header>
<main>
<section>
<h2>Наши курсы</h2>
<p>HTML, CSS, JavaScript...</p>
</section>
<section>
<h2>Об авторе</h2>
<p>Максим, разработчик с 10-летним опытом...</p>
</section>
</main>
<footer>
<p>Свяжитесь с нами: contact@example.com</p>
</footer>
</section>
<section class="task">
<h2 class="task-title">Задача 2: Разметка статьи</h2>
<article>
<header>
<h2>Семантика в HTML</h2>
<p>Автор: Максим</p>
</header>
<section>
<h3>Введение</h3>
<p>Семантические теги делают ваш код более понятным как для браузеров, так и для роботов.</p>
</section>
<section>
<h3>Основная часть</h3>
<p>Рассмотрим теги header, footer, section, article и nav.</p>
</section>
<footer>
<p>Опубликовано: 20 мая 2024</p>
</footer>
</article>
</section>
<section class="task">
<h2 class="task-title">Задача 3: Исправление ошибок (Замена <div>)</h2>
<p class="description">Безликие блоки <div> заменены на логические теги по стандарту HTML5:</p>
<header>
<nav>
<span>Навигационное меню (<nav>)</span>
</nav>
</header>
<main>
<article>
<span>Основная статья / пост (<article>)</span>
</article>
</main>
<footer>
<span>Нижняя панель / подвал сайта (<footer>)</span>
</footer>
</section>
<section class="task">
<h2 class="task-title">Задача 4: Табличная вёрстка сайта и семантические теги</h2>
<table class="layout-table">
<tr>
<td colspan="2">
<header class="table-component">
<h2>Шапка сайта (<header>)</h2>
<nav>Главная | Блог | Контакты</nav>
</header>
</td>
</tr>
<tr>
<td class="main-col">
<main class="table-component">
<article>
<h3>Статья в таблице (<article>)</h3>
<p>Этот блок находится внутри тега <main>, который помещен в левую ячейку таблицы-каркаса.</p>
</article>
</main>
</td>
<td class="sidebar-col">
<aside class="table-component">
<h3>Боковая панель (<aside>)</h3>
<p>Дополнительные ссылки и виджеты.</p>
</aside>
</td>
</tr>
<tr>
<td colspan="2">
<footer class="table-component text-center">
<p>© 2026 Все права защищены (<footer>)</p>
</footer>
</td>
</tr>
</table>
</section>
</div>
</body>
</html>
