Условие
В index.html добавьте три заголовка друг под другом: заголовок первого уровня «Станция InkShelf», заголовок второго уровня «Читальный зал» и заголовок третьего уровня «Расписание смен». На странице должен быть ровно один заголовок первого уровня. CSS уже готов. Ориентир - вкладка «Результат».
Что нужно сделать
- Добавьте заголовок первого уровня «Станция InkShelf».
- Добавьте заголовок второго уровня «Читальный зал».
- Добавьте заголовок третьего уровня «Расписание смен».
Подсказка для новичка
Пишите код под комментарием «Пишите код здесь». Зачем нужна иерархия уровней заголовков - в Дополнительной информации и во вкладке «Результат».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Три заголовка: 1-й → 2-й → 3-й уровень
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<title>- текст на вкладке («InkShelf»).<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; сюда пишете заголовки.<h1>- главный заголовок страницы. Текст: «Станция InkShelf». На странице должен быть ровно одинh1.<h2>- заголовок раздела. Текст: «Читальный зал».<h3>- подзаголовок. Текст: «Расписание смен».font-family,margin,background,color,font-size- уже есть в стартовом CSS.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей и иерархии заголовков.
Файл style.css - что уже написано
В стартовом
style.css
четыре блока правил:
body { ... },
h1 { ... },
h2 { ... }
и
h3 { ... }.
CSS менять не нужно - он уже оформляет заголовки, которые вы добавите в HTML.
Правило body
-
font-family: Arial, sans-serif- шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif). -
margin: 16px- внешний отступ со всех сторон у страницы: 16 пикселей (чтобы контент не прилипал к краю). -
background: #f4f7fb- цвет фона страницы: светло-голубой (#f4f7fbв формате HEX). -
color: #0f172a- цвет текста по умолчанию: тёмно-синий (#0f172a).
Правило h1
-
margin: 0 0 8px- внешний отступ: сверху и по бокам 0, снизу 8px (зазор перед следующим заголовком). -
font-size: 28px- размер шрифта главного заголовка: 28 пикселей (самый крупный).
Правило h2
-
margin: 0 0 6px- внешний отступ: снизу 6px междуh2иh3. -
font-size: 20px- размер шрифта заголовка раздела: 20 пикселей. -
color: #1e3a5f- цвет текстаh2: синий (#1e3a5f).
Правило h3
-
margin: 0- без внешних отступов у подзаголовка. -
font-size: 16px- размер шрифта подзаголовка: 16 пикселей (мельче, чемh1иh2). -
color: #475569- цвет текстаh3: серо-синий (#475569).
Иерархия заголовков - зачем это нужно
Заголовки
h1–
h6
задают
уровни смысла
на странице: от самого главного к частным.
Браузер, поисковик и скринридер понимают структуру документа по этой иерархии.
-
У тега есть открывающая часть
<h1>и закрывающая</h1>(со слэшем). - Текст между ними - то, что видит пользователь («Станция InkShelf», «Читальный зал», «Расписание смен»).
-
Порядок сверху вниз:
h1→h2→h3(от главного к частному). -
На странице должен быть
ровно один
h1.
Коротко:
в
index.html
добавьте
h1,
h2
и
h3
с нужным текстом друг под другом.
CSS уже готов:
body
задаёт шрифт, отступ и фон, а
h1 /
h2 /
h3
- размер и цвет каждого уровня. Сверьте вид с вкладкой
«Результат».