Лента StoryBay

ЛЕГКИЙ

Задача #89 · Семантика

Условие

Представьте ленту новостей StoryBay. В index.html соберите содержимое ленты: сначала главную часть страницы (то, ради чего человек открыл сайт), а внутри неё - ровно два блока с разным смыслом. Обычный div сюда не подходит: у каждого блока своя роль, и теги у них должны быть разные.

Блок 1 - новость «Новость дня». Заголовок второго уровня + короткий абзац. Спросите себя: «это можно вырезать и прочитать отдельно, как пост?» - да. Значит, здесь нужен тег отдельной публикации (новость/статья), а не просто «коробка» и не рубрика.

Блок 2 - раздел «Подборка». Тоже заголовок второго уровня + абзац. Но это уже не отдельный пост: это тематическая рубрика ленты («темы недели»). Значит, нужен тег раздела страницы со своим заголовком - другой, чем у новости. Два одинаковых тега подряд здесь ошибка по смыслу.

Как выбрать тег (не копируйте вслепую - подумайте): главная часть страницы → один общий «каркас» ленты; внутри - публикация для «Новость дня»; рядом - раздел для «Подборка». Имена этих тегов и короткое сравнение - в Дополнительной информации ниже (откройте и сопоставьте роль → тег). CSS уже готов. Ориентир по виду - вкладка «Результат».

Что нужно сделать

Создайте главную часть страницы и внутри неё публикацию «Новость дня» (заголовок + абзац).
Там же добавьте раздел «Подборка» (заголовок + абзац) - другим смысловым тегом, не тем же, что у новости.
Сверьте вид с вкладкой «Результат» и нажмите «Проверить».

Подсказка для новичка

Пишите под комментарием «Пишите код здесь». Три вопроса по очереди: куда кладём всю ленту? → какой тег означает «отдельная новость»? → какой тег означает «рубрика/раздел», а не второй пост? Откройте Дополнительную информацию и сами сопоставьте ответы с ролями блоков. Текст абзацев можно своими словами - важны заголовки и правильный смысл тегов.

Стартовый код

Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.

Вот так должно получиться

Два блока в ленте: новость «Новость дня» и раздел «Подборка»

Как пользоваться IDE

Предпросмотр — как выглядит ваша страница.
Результат — какой итог должен получиться.
Описание задачи — полное условие и справка.
Задание — краткие шаги 1–2–3 снизу.
Помощник — подсказки по шагам.
Черновик — ссылка на ваш код.
Сброс кода — стартовый шаблон.

Теги и свойства этой задачи

<!DOCTYPE html> - документ HTML5.
<html lang="ru"> - корень страницы; lang="ru" - язык русский.
<head> - служебная часть: кодировка, <title>, подключение CSS.
<meta charset="UTF-8" /> - кодировка текста.
<title> - текст на вкладке («StoryBay»).
<link rel="stylesheet" href="style.css" /> - подключение style.css.
<body> - видимое содержимое.
<main> - главная часть страницы (уже есть в старте; обычно одна на документ). Пишите код внутри неё.
<article> - отдельная публикация (новость, пост). Внутри: h2 «Новость дня» и p. Не путать с div.
<section> - раздел страницы со своим заголовком (рубрика ленты). Внутри: h2 «Подборка» и p.
<h2> - заголовок второго уровня («Новость дня», «Подборка»).
<p> - абзац под заголовком (текст можно своим).
font-family, margin, background, color, max-width, padding, border, margin-bottom - уже есть в стартовом CSS.

Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей и смысловых блоков ленты.

Файл `style.css` - что уже написано

В стартовом style.css пять блоков правил: body { ... }, main { ... }, article, section { ... }, h2, p { ... } и p:last-child { ... }. CSS менять не нужно - он уже оформляет блоки ленты.

Правило `body`

font-family: Arial, sans-serif - шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif).
margin: 16px - внешний отступ со всех сторон у страницы: 16 пикселей.
background: #fff7ed - цвет фона страницы: тёплый светло-оранжевый (#fff7ed).
color: #7c2d12 - цвет текста по умолчанию: коричнево-оранжевый (#7c2d12).

Правило `main`

max-width: 420px - максимальная ширина главной колонки: 420 пикселей.

Правило `article, section`

padding: 12px 14px - внутренний отступ блока: 12px сверху/снизу, 14px слева/справа.
margin-bottom: 12px - зазор 12px между блоками ленты.
background: #fff - белый фон карточки блока.
border: 1px solid #fed7aa - тонкая оранжевая рамка вокруг блока.

Правило `h2, p`

margin: 0 0 8px - внешний отступ снизу 8px у заголовка и абзаца (кроме последнего абзаца - см. ниже).

Правило `p:last-child`

margin-bottom: 0 - у последнего абзаца внутри блока убираем нижний отступ, чтобы не было лишнего пустого места.

Сначала смысл, потом тег

«Можно прочитать отдельно как пост?» → тег отдельной публикации: <article>. В этой задаче так оборачивают «Новость дня».
«Это рубрика / кусок страницы с заголовком, но не пост?» → тег раздела: <section>. Так оборачивают «Подборку». Не ставьте второй article - смысл другой.
«Куда положить всю ленту?» → главная часть страницы: <main>. Оба блока - внутри неё (тег уже есть в старте).

Проверка понимания: если поменять местами article и section, страница может выглядеть так же, но смысл для браузера и скринридера станет неверным - поэтому в задаче важен именно выбор тега по роли.

Коротко: внутри main добавьте article «Новость дня» и section «Подборка» (каждый со своим h2 и p). CSS уже готов: body задаёт фон, main - ширину колонки, article / section - рамку и отступы блоков. Сверьте вид с вкладкой «Результат».

Задание Переместить налево

Соберите ленту StoryBay в главной части страницы: отдельно читаемую публикацию «Новость дня» и рядом рубрику «Подборка» (у каждого — заголовок и абзац). Теги у блоков разные: не два div и не два одинаковых. Ориентир — вкладка «Результат».

Задачи:

Блок 1: главная часть + внутри публикация «Новость дня» (заголовок и абзац).
Блок 2: рядом — рубрика «Подборка» (заголовок и абзац). Подсказка по роли: тег раздела по-английски звучит как section — соберите сами, это не второй пост.
Нажмите Проверить.

Пишите в index.html. CSS менять не нужно.

Сначала решите роли блоков, потом откройте «Описание задачи» и сопоставьте роль → тег.

Автосохранение