Условие
В index.html соберите самостоятельную статью (законченный материал: пост/новость) из трёх частей внутри неё. Не собирайте всё из обычных div - у шапки, раздела и подвала статьи свои смысловые теги (см. Дополнительную информацию).
1. Шапка статьи. Заголовок первого уровня: «Заголовок статьи». Под ним дата публикации: на экране «1 мая 2024», для машин - атрибут с значением 2024-05-01. Дата должна быть оформлена именно как дата/время, а не обычный абзац.
2. Раздел статьи. Подзаголовок второго уровня: «Введение». Под ним абзац с текстом «Текст статьи».
3. Подвал статьи. Абзац с текстом «Автор статьи». Шапка, раздел и подвал - прямые дети статьи (друг под другом внутри неё). CSS уже готов. Ориентир - вкладка «Результат».
Что нужно сделать
- Создайте самостоятельную статью и внутри - шапку: «Заголовок статьи» + дата «1 мая 2024» (машинная
2024-05-01). - Добавьте раздел «Введение» с абзацем «Текст статьи».
- В подвале статьи укажите «Автор статьи».
Подсказка для новичка
Пишите под комментарием «Пишите код здесь». Порядок мысли: какой тег у самостоятельной статьи? → какой тег у её шапки, раздела и подвала? → как отметить дату публикации (видимый текст + машинная дата)? Ответы - в Дополнительной информации. Все три блока должны лежать внутри статьи.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Как в предпросмотре: заголовок и дата, введение и текст, автор
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>,<html lang="ru">,<head>,<meta charset="UTF-8" />,<title>,<link>,<body>- каркас документа.<article>- самостоятельная статья.<header>внутри article - шапка статьи с<h1>и<time>.<section>- раздел с<h2>и<p>.<footer>- подвал статьи с автором в<p>.- Атрибут
datetimeуtime- машинная дата. - В CSS:
font-family,margin,background,max-width,border,padding,margin-bottom,min-height,display,font-size,color.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили статьи, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
Стартовый CSS оформляет
body,
article,
блоки
header, section, footer,
отдельные цвета для
header /
section /
footer,
а также типографику
h1, h2, p, time
и отдельно
time.
CSS менять не нужно.
Правило body
-
font-family: Arial, sans-serif- шрифт страницы. -
margin: 16px- внешний отступ 16px. -
background: #f1f5f9- светло-серо-голубой фон страницы.
Правило article
-
max-width: 420px- статья не шире 420px. -
background: #fff- белый фон карточки статьи. -
border: 1px solid #cbd5e1- рамка вокруг статьи. -
padding: 12px- внутренний отступ 12px.
Правило header, section, footer
-
padding: 10px 12px- внутренние отступы блоков внутри статьи. -
margin-bottom: 8px- расстояние между header / section / footer. -
border: 1px solid #e2e8f0- светлая внутренняя рамка у каждого блока.
Отдельные правила цветов блоков
-
header { background: #e2e8f0; }- шапка статьи серо-голубая. -
section { background: #f8fafc; min-height: 48px; }- раздел светлый; минимальная высота 48px, чтобы блок не был слишком низким. -
footer { background: #fef9c3; margin-bottom: 0; }- подвал статьи жёлтоватый;margin-bottom: 0убирает лишний отступ снизу у последнего блока.
Правило h1, h2, p, time
-
margin: 0 0 6px- сверху и с боков 0, снизу 6px (ровные отступы между строками). -
display: block- каждый элемент на своей строке (в том числеtime).
Правило time
-
font-size: 13px- дата чуть мельче основного текста. -
color: #64748b- приглушённый серо-синий цвет даты (вторичная информация).
Семантика статьи: article, time, section
article
- законченный материал (пост, новость).
Внутри него
header
/
section
/
footer
описывают части
статьи, а не всей страницы.
time
с
datetime
даёт понятную дату и людям, и программам.
Коротко:
соберите
article
→
header
(h1
+
time datetime="…") →
section
(h2
+
p) →
footer
с автором.
Все отступы, рамки и цвета уже в
style.css.