Условие
На странице должны появиться три смысловых блока друг под другом: шапка с текстом «Шапка сайта», основная часть «Основной текст» и подвал «Подвал сайта». Используйте семантические HTML-теги - не просто пустые универсальные блоки. CSS уже готов. У вас должно получиться так же, как во вкладке «Результат».
Что нужно сделать
- Сделайте шапку с текстом «Шапка сайта».
- Сделайте основную часть с текстом «Основной текст».
- Сделайте подвал с текстом «Подвал сайта».
Подсказка для новичка
Пишите код под комментарием «Пишите код здесь». Какие теги выбрать - в Дополнительной информации и во вкладке «Результат».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Три смысловых блока друг под другом
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<title>- текст на вкладке («Семантика»).<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; сюда пишете семантические теги.<header>/<main>/<footer>- шапка, основная часть, подвал (их нужно добавить).font-family,margin,background,padding,margin-bottom,border- уже есть в стартовом CSS.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
В стартовом
style.css
два блока правил:
body { ... }
и
header, main, footer { ... }.
CSS менять не нужно - он уже оформляет блоки, которые вы добавите в HTML.
Правило body
-
font-family: Arial, sans-serif- шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif). -
margin: 16px- внешний отступ со всех сторон у страницы: 16 пикселей (чтобы контент не прилипал к краю). -
background: #f5f5f5- цвет фона страницы: светло-серый (#f5f5f5(короткая запись цвета в формате HEX).
Правило header, main, footer
Один блок стилей сразу для трёх селекторов (через запятую) - одинаковое оформление для шапки, основной части и подвала.
-
padding: 12px 16px- внутренний отступ: сверху/снизу 12px, слева/справа 16px (текст не прилипает к краям блока). -
margin-bottom: 12px- отступ снизу 12px между блоками, чтобы они не слипались. -
background: #fff- заливка блока белым (на сером фоне страницы блоки выглядят как карточки). -
border: 1px solid #ddd- рамка:1px- толщина,solid- сплошная линия,#ddd- светло-серый цвет.
Семантика - зачем это нужно
Семантические теги - это HTML-теги со
смыслом.
Они не только рисуют блоки на экране, но и говорят браузеру, поисковику и скринридеру:
«это шапка», «это основной текст», «это подвал».
Обычный
<div>
такого смысла не несёт - только «прямоугольник».
-
У тега есть открывающая часть
<header>и закрывающая</header>(со слэшем). - Текст между ними - то, что видит пользователь («Шапка сайта», «Основной текст», «Подвал сайта»).
-
Порядок сверху вниз обычно такой:
header→main→footer.
Коротко:
в
index.html
добавьте
header,
main
и
footer
с нужным текстом.
CSS уже готов:
body
задаёт шрифт, отступ и фон, а
header, main, footer
- белые блоки с рамкой и отступами. Сверьте вид с вкладкой
«Результат».