Разрывы строк (br) и горизонтальные линии (hr)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 124
Автор
Рек. время прохождения 2 минуты
Упражнений 11
Комментарии 0
Тренажер HTML
Научитесь управлять разрывами строк и горизонтальными разделителями в HTML. В заданиях вы будете работать с тегами <br> и <hr>, добавлять их в нужных местах текста, управлять внешним видом разделителей и создавать правильную структуру контента. Все задания выполняются через заполнение пропусков в HTML-коде
Список тем

Базовый перенос строки

id: 37782_line-break-basic

В тексте отсутствуют переносы строк. Добавьте тег переноса между двумя предложениями, чтобы они отображались на разных строках.

CSS
body {
  font-family: Arial;
  padding: 20px;
}
HTML
<p>Это первое предложение.input1Это второе предложение.</p>
Используйте одинарный тег <br> без закрывающего тега. Вставьте его между предложениями в указанном месте.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Множественные переносы

id: 37782_multiple-line-breaks

Создайте вертикальный отступ между заголовком и основным текстом с помощью нескольких переносов строк.

CSS
h1 {
  margin-bottom: 0;
}

p {
  margin-top: 0;
}
HTML
<h1>Заголовок статьи</h1>
input1
<p>Основной текст статьи начинается здесь.</p>
Используйте несколько тегов <br> подряд. Обычно достаточно 2-3 тегов для заметного отступа.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Горизонтальный разделитель

id: 37782_horizontal-rule-basic

Добавьте горизонтальную линию между двумя абзацами текста для визуального разделения контента.

CSS
body {
  max-width: 300px;
}
HTML
<p>Первый раздел контента</p>
input1
<p>Второй раздел контента</p>
Используйте одинарный тег <hr> без закрывающего тега.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Перенос в адресе

id: 37782_address-line-breaks

Отформатируйте почтовый адрес с переносами строк между его компонентами для читаемого отображения.

CSS
.address {
  background-color: #f5f5f5;
  padding: 15px;
  display: inline-block;
}
HTML
<div class="address">
  Университетская наб., 7-9input1
  Санкт-Петербургinput2
  199034
</div>
Вставляйте тег <br> после каждого компонента адреса кроме последнего.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизованная горизонтальная линия

id: 37782_styled-hr

Добавьте горизонтальный разделитель и измените его внешний вид через CSS. Вам нужно только добавить тег в HTML.

CSS
hr {
  height: 3px;
  background-color: #4CAF50;
  border: none;
  border-radius: 2px;
}
HTML
<h2>Заголовок раздела</h2>
input1
<p>Контент после стилизованной линии</p>
Добавьте тег <hr> в указанное место. Стили уже определены в CSS.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинированное использование

id: 37782_combined-usage

Создайте структуру: заголовок, разделитель, текст с переносами и второй разделитель. Заполните все пропуски.

CSS
body {
  text-align: center;
}

hr {
  width: 70%;
  margin: 20px auto;
}
HTML
<h3>Важное объявление</h3>
input1
<p>Первая часть текстаinput2Вторая часть текстаinput3Третья часть</p>
input4
Используйте комбинацию тегов <hr> и <br> в указанных местах.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подпись к изображению

id: 37782_image-caption

Добавьте подпись к изображению с переносом строки между названием и автором фотографии.

CSS
.image-block {
  max-width: 300px;
  text-align: center;
}

img {
  max-width: 100%;
}
HTML
<div class="image-block">
  <img src="https://naytikurs.ru/img/5.png" alt="Пейзаж">
  <p>Осенний лесinput1Иван Петров</p>
</div>
Используйте тег <br> между элементами подписи.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Разделитель с текстом

id: 37782_hr-with-content

Создайте разделитель с текстом по центру. Допишите недостающие теги в HTML.

CSS
.divider {
  display: flex;
  align-items: center;
}

.divider hr {
  flex-grow: 1;
}

.divider-text {
  padding: 0 15px;
}
HTML
<div class="divider">
  input1
  <span class="divider-text">или</span>
  input2
</div>
Используйте теги <hr> по бокам от текста с CSS-классами.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сложная структура контента

id: 37782_complex-content

Создайте структуру: заголовок, подзаголовок с переносом, разделитель, основной текст и видео с подписью.

CSS
body {
  font-family: 'Segoe UI', Tahoma;
  max-width: 350px;
}

.video-caption {
  font-style: italic;
  text-align: center;
}
HTML
<h2>Туристические маршруты</h2>
<h3>Горныйinput1Крым</h3>
input2
<p>Основное описание маршрута...</p>
<video controls>
  <source src="https://naytikurs.ru/img/1.mp4" type="video/mp4">
</video>
<p class="video-caption">Обзор маршрутаinput3Дмитрий Семенов</p>
Комбинируйте теги <br> и <hr> в указанных местах.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Верстка цитаты

id: 37782_quote-formatting

Отформатируйте цитату с переносами строк и разделителями. Должны быть: разделитель, цитата с переносами, автор и финальный разделитель.

CSS
blockquote {
  font-style: italic;
  padding: 10px 20px;
  border-left: 3px solid #ccc;
}

.author {
  text-align: right;
  font-weight: bold;
}
HTML
input1
<blockquote>
  Первая строка цитатыinput2
  Вторая строка цитатыinput3
  Третья строка
</blockquote>
<p class="author">Александр Пушкин</p>
input4
Используйте теги <hr> для разделителей и <br> внутри цитаты.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Полная страница контента

id: 37782_full-page-layout

Создайте полную структуру страницы: заголовок, разделитель, основной текст с переносами, блок изображений и финальный разделитель.

CSS
body {
  padding: 20px;
  max-width: 350px;
}

.header {
  text-align: center;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gallery img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
HTML
<div class="header">
  <h1>Фотогалерея природы</h1>
  <p>Подзаголовокinput1Описание проекта</p>
</div>
input2
<p>Первая часть описанияinput3Продолжение описанияinput4Финальные мысли</p>
<div class="gallery">
  <img src="https://naytikurs.ru/img/7.png" alt="Природа 1">
  <img src="https://naytikurs.ru/img/8.png" alt="Природа 2">
  <img src="https://naytikurs.ru/img/9.png" alt="Природа 3">
</div>
input5
Комбинируйте все изученные элементы: заголовки, параграфы, переносы строк и горизонтальные разделители.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру