Условие
Представьте страницу дока StampDock. В index.html нужно собрать два смысловых блока: боковой блок контактов и подвал с датой. Не оборачивайте всё в обычные div - для каждой роли есть свой смысловой тег. Какие именно - разберитесь в Дополнительной информации.
Блок 1 - боковая колонка контактов. Это не главный сюжет страницы, а доп. блок сбоку. Внутри: абзац «Контакты дока» и email desk@stampdock.ru именно как контактные данные (не обычный абзац и не ссылка «на всякий случай»).
Блок 2 - подвал. Первая строка: «Открытие:» и дата - на экране «9 сентября 2026», а для машин - атрибут с значением 2026-09-09. Вторая строка: «Зона», код SD-4 (выделите его подсветкой-маркером), затем «· маршрут» и длинное слово северозападныйпирс. Перед этим длинным словом поставьте мягкую подсказку переноса (браузер сможет разбить слово, если не хватает ширины).
CSS уже готов. Ориентир по виду - вкладка «Результат».
Что нужно сделать
- Соберите боковой блок контактов: абзац «Контакты дока» и email desk@stampdock.ru как контактные данные.
- Соберите подвал: дата открытия («9 сентября 2026» + машинная
2026-09-09), подсветка SD-4 и подсказка переноса перед словом «северозападныйпирс». - Сверьте вид с вкладкой «Результат» и нажмите «Проверить».
Подсказка для новичка
Пишите под комментарием «Пишите код здесь». Порядок мысли: какой тег у бокового блока? → какой тег у контактных данных? → какой тег у подвала? → как отметить дату, подсветку и место переноса? Ответы с объяснением - в Дополнительной информации.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Боковой блок с адресом и подвал с датой
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<title>- текст на вкладке («StampDock»).<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; сюда пишете боковой блок и подвал.<aside>- боковой блок: контакты, заметки, не главный сюжет страницы.<p>- абзац: «Контакты дока» внутриaside; также строки вfooter.<address>- контактные данные (email desk@stampdock.ru).<footer>- подвал блока или страницы.<time datetime="…">- дата/время: видимый текст «9 сентября 2026» + машинный атрибутdatetime="2026-09-09".<mark>- выделение важного фрагмента маркером: вокруг «SD-4».<wbr>- мягкая подсказка браузеру: «здесь можно перенести» перед «северозападныйпирс».font-family,margin,background,color,padding,border,border-color,font-style- уже есть в стартовом CSS.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей и смысловых меток.
Файл style.css - что уже написано
В стартовом
style.css
семь блоков правил:
body { ... },
aside, footer { ... },
aside { ... },
footer { ... },
p, address { ... },
address { ... }
и
mark { ... }.
CSS менять не нужно - он уже оформляет боковой блок и подвал.
Правило body
-
font-family: Arial, sans-serif- шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif). -
margin: 16px- внешний отступ со всех сторон у страницы: 16 пикселей. -
background: #f8fafc- цвет фона страницы: светло-серый (#f8fafc). -
color: #0f172a- цвет текста по умолчанию: тёмно-синий (#0f172a).
Правило aside, footer
-
padding: 12px 14px- внутренний отступ блоков: 12px сверху/снизу, 14px слева/справа. -
margin-bottom: 12px- зазор снизу между блоками. -
background: #fff- белый фон (уasideиfooterниже переопределяется). -
border: 1px solid #cbd5e1- тонкая серая рамка (цвет рамки тоже уточняется ниже).
Правило aside
-
background: #ecfeff- светло-голубой фон бокового блока. -
border-color: #a5f3fc- цвет рамки бокового блока: бирюзовый.
Правило footer
-
background: #fefce8- светло-жёлтый фон подвала. -
border-color: #fde68a- цвет рамки подвала: жёлтый. -
margin-bottom: 0- без нижнего отступа у последнего блока.
Правило p, address
-
margin: 0 0 8px- внешний отступ снизу 8px у абзаца и адреса.
Правило address
-
font-style: italic- курсивное начертание контактных данных (как принято уaddress).
Правило mark
-
background: #fde68a- жёлтый фон подсветки кода SD-4. -
padding: 0 2px- маленький внутренний отступ слева и справа у подсвеченного текста.
Смысловые метки - зачем это нужно
Здесь важны роли тегов: боковой блок ≠ подвал, email ≠ обычный абзац, дата ≠ просто текст.
-
Боковой блок контактов →
aside(внутри абзац «Контакты дока» иaddressс email). -
Подвал →
footerсtime(текст «9 сентября 2026» +datetime="2026-09-09"). -
markвокруг SD-4 иwbrперед «северозападныйпирс».
Коротко:
в
index.html
соберите
aside
с
address
и
footer
с
time,
mark
и
wbr.
CSS уже готов: разные фоны у
aside
и
footer,
курсив у
address,
жёлтая подсветка у
mark.
Сверьте вид с вкладкой
«Результат».