Условие
В index.html добавьте горизонтальный разделитель и абзац с полным текстом: «Сигнал важно мигает, а срочно звучит громче. Запомните код MB-7.» В абзаце выделите «важно» курсивом, «срочно» - жирным, а код MB-7 - жёлтой подсветкой-маркером (как выделение маркером на бумаге). Фразу «Запомните код …» тоже оставьте в абзаце - без неё задание неполное. CSS уже готов. Ориентир - вкладка «Результат».
Что нужно сделать
- Добавьте горизонтальный разделитель.
- Добавьте абзац с текстом: «Сигнал важно мигает, а срочно звучит громче.» и «Запомните код MB-7.»
- Выделите «важно» курсивом, «срочно» жирным, а код «MB-7» - жёлтой подсветкой-маркером.
- Нажмите «Проверить».
Подсказка для новичка
Пишите код под комментарием «Пишите код здесь». Чем отличаются курсив, жирный акцент и подсветка - в Дополнительной информации и во вкладке «Результат».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Разделитель и абзац с акцентами в тексте
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<title>- текст на вкладке («MarkBay»).<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; сюда пишете разделитель и абзац.<hr>- горизонтальный разделитель (линия).<p>- абзац текста: «Сигнал важно мигает, а срочно звучит громче. Запомните код MB-7.»<em>- акцент курсивом (логическое ударение): вокруг слова «важно».<strong>- сильный акцент (обычно жирный): вокруг слова «срочно».<mark>- жёлтая подсветка-маркер: именно вокруг «MB-7» (фон уже задан в CSS).font-family,margin,background,color,line-height,border,border-top,max-width,padding- уже есть в стартовом CSS.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили, менять не нужно). Ниже - разбор стилей и акцентов в тексте.
Файл style.css - что уже написано
В стартовом
style.css
четыре блока правил:
body { ... },
hr { ... },
p { ... }
и
mark { ... }.
CSS менять не нужно - он уже оформляет разделитель, абзац и подсветку.
Правило body
-
font-family: Arial, sans-serif- шрифт текста: сначала Arial, если его нет - любой рубленый (sans-serif). -
margin: 16px- внешний отступ со всех сторон у страницы: 16 пикселей. -
background: #f7fafc- цвет фона страницы: светло-серый (#f7fafc). -
color: #0f172a- цвет текста по умолчанию: тёмно-синий (#0f172a). -
line-height: 1.5- межстрочный интервал: в полтора раза выше размера шрифта (текст читается легче).
Правило hr
-
border: 0- сбрасывает стандартную рамку браузера у разделителя. -
border-top: 2px solid #94a3b8- рисует линию сверху: толщина 2px, сплошная, цвет серо-синий (#94a3b8). -
margin: 0 0 16px- внешний отступ снизу 16px перед абзацем.
Правило p
-
margin: 0- без внешних отступов у абзаца. -
max-width: 420px- максимальная ширина абзаца: 420 пикселей (строка не растягивается на весь экран).
Правило mark
-
background: #facc15- жёлтый фон подсветки (как маркер на бумаге). -
padding: 0 2px- маленький внутренний отступ слева и справа у подсвеченного текста.
Акценты в тексте - зачем это нужно
Вложенные теги внутри
p
выделяют смысл отдельных слов: курсив, сильный акцент и подсветка - это разные роли, а не просто «сделать красиво».
-
<em>- логическое ударение (обычно курсив): «важно». -
<strong>- сильная важность (обычно жирный): «срочно». -
<mark>- визуальная подсветка фрагмента: код «MB-7». -
<hr>- линия-разделитель перед текстом (отдельный блок, не внутри абзаца).
Коротко:
в
index.html
добавьте
hr
и
p
с акцентами
em,
strong
и
mark
внутри.
CSS уже готов:
body
задаёт шрифт и фон,
hr
- линию,
p
- ширину абзаца,
mark
- жёлтую подсветку. Сверьте вид с вкладкой
«Результат».