Условие
Представьте шапку сайта NavRail. В index.html нужно собрать шапку страницы, а внутри неё - блок навигации (меню сайта, не просто «ещё один блок»). В меню - маркированный список из двух пунктов-ссылок: «Расписание» (адрес #schedule) и «Контакты» (адрес #contacts). Не заменяйте меню обычными div - для шапки, навигации и списка есть свои смысловые теги (см. Дополнительную информацию). CSS уже готов. Ориентир - вкладка «Результат».
Что нужно сделать
- Сделайте шапку страницы и внутри неё блок навигации.
- В навигации соберите список из двух ссылок: «Расписание» (
#schedule) и «Контакты» (#contacts). - Сверьте вид с вкладкой «Результат» и нажмите «Проверить».
Подсказка для новичка
Пишите под комментарием «Пишите код здесь». Порядок мысли: какой тег у шапки? → какой тег говорит «здесь меню»? → как оформить пункты меню списком? Ответы - в Дополнительной информации.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Шапка со ссылками «Расписание» и «Контакты»
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<title>- текст на вкладке («NavRail»).<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; сюда пишете шапку с меню.<header>- смысловая шапка страницы (логотип, меню).<nav>- блок навигации: говорит браузеру и поисковику «здесь меню».<ul>/<li>- список пунктов меню.<a>- ссылка. Адрес задаётся атрибутомhref: у «Расписание» -#schedule, у «Контакты» -#contacts(якоря на этой же странице).font-family,margin,background,color,padding,border,padding-left,font-weight- уже есть в стартовом CSS.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей и навигации.
Файл style.css - что уже написано
В стартовом
style.css
четыре блока правил:
body { ... },
header { ... },
nav ul { ... }
и
nav a { ... }.
CSS менять не нужно - он уже оформляет шапку и ссылки меню.
Правило body
-
font-family: Arial, sans-serif- шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif). -
margin: 16px- внешний отступ со всех сторон у страницы: 16 пикселей. -
background: #f0fdf4- цвет фона страницы: светло-зелёный (#f0fdf4). -
color: #14532d- цвет текста по умолчанию: тёмно-зелёный (#14532d).
Правило header
-
padding: 12px 16px- внутренний отступ: 12px сверху/снизу, 16px слева/справа. -
background: #fff- белый фон шапки. -
border: 1px solid #bbf7d0- тонкая зелёная рамка вокруг шапки.
Правило nav ul
-
margin: 0- без внешних отступов у списка меню. -
padding-left: 18px- внутренний отступ слева: место под маркеры пунктов.
Правило nav a
-
color: #15803d- цвет ссылок меню: зелёный (#15803d). -
font-weight: 600- полужирное начертание текста ссылок.
Шапка и навигация - зачем это нужно
Смысловые теги
header
и
nav
говорят браузеру, поисковику и скринридеру: «это шапка» и «это меню», а не просто блоки текста.
-
Порядок вложенности:
header→nav→ul→li→a. -
Якоря
#scheduleи#contactsведут к якорям на этой же странице (даже если блоков с такимиidпока нет). - Текст ссылок должен быть точно «Расписание» и «Контакты».
Коротко:
в
index.html
соберите
header
→
nav
→
ul
со ссылками «Расписание» и «Контакты».
CSS уже готов:
body
задаёт фон,
header
- рамку шапки,
nav ul
- отступы списка,
nav a
- цвет ссылок. Сверьте вид с вкладкой
«Результат».