Абзацы и текстовые блоки (p) [Модуль 1: Основы HTML-разметки]: Тренажер HTML

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

На этой странице вы потренируете навык работы с параграфами — HTML-элементом . Вас ждут восемь небольших практических заданий: от создания самого первого абзаца до добавления стилей, вложенных тегов и работы с классами. Все упражнения идут по нарастающей сложности, поэтому советуем выполнять их последовательно. Готовый CSS-код уже прилагается к каждому примеру: он отвечает за внешний вид, а ваша задача — дописать недостающие участки HTML-разметки вместо макросов input1, input2 и т.д. Чтобы проверить результат, введите решение и запустите код: корректная страница должна отобразиться без ошибок в небольшом iframe (≈ 372 × 300 px). Если застопоритесь — разворачивайте подсказку «Help»: там даны ориентиры, какие теги или атрибуты стоит использовать.

Список тем

Первый абзац

id: 37781_p-basic-001

Внутри серой области должен появиться текст, оформленный абзацем. Между текстом и краями контейнера предусмотрен отступ, который уже описан в CSS. Заполните пропуски так, чтобы в результате отобразился корректный абзац «Hello, world!».

CSS

.text-box {
  padding: 12px;
  background: #f0f0f0;
  color: #333;
  font-size: 16px;
  line-height: 1.4;
}

                     <div class="text-box">
  input1
    Hello, world!
  input2
</div>

HTML

<div class="text-box">
  input1
    Hello, world!
  input2
</div>

Используйте открывающий и закрывающий тег абзаца. Не забывайте, что закрывающий тег начинается со слэша.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Два абзаца — две мысли

id: 37781_p-basic-002

Необходимо разбить цитату и подпись автора на два отдельных логических блока. После выполнения задания цитата и подпись должны размещаться друг под другом с небольшим отступом.

CSS

.quote p {
  margin: 0 0 8px;
  font-style: italic;
}
.quote p:last-child {
  font-style: normal;
  text-align: right;
}

                     <div class="quote">
  input1
    "Courage is grace under pressure."
  input2
  input3
    — Ernest Hemingway
  input4
</div>

HTML

<div class="quote">
  input1
    "Courage is grace under pressure."
  input2
  input3
    — Ernest Hemingway
  input4
</div>

Добавьте по одному открытому и закрытому тегу для каждой части текста. Следуйте иерархии: первый абзац — сама цитата, второй — имя автора.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Выделяем заметку

id: 37781_p-class-003

Есть стилизованный жёлтый блок-подсказка. Вам нужно превратить строку текста в абзац и подключить к нему класс, отвечающий за оформление заметки.

CSS

.note {
  background: #fffae6;
  border-left: 4px solid #ffd54f;
  padding: 8px 12px;
  font-size: 15px;
}

                     input1
  Remember to save your work frequently.
</p>

HTML

input1
  Remember to save your work frequently.
</p>

Используйте тег с атрибутом class. В качестве значения атрибута укажите уже готовый селектор из CSS («note»).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Центрируем текст

id: 37781_p-center-004

Нужно сделать абзац с голубым текстом, выровненным по центру. CSS-класс уже содержит необходимые правила, осталось лишь применить его к нужному элементу.

CSS

.center {
  text-align: center;
  color: #0066cc;
  margin: 0;
}

                     input1
  Centered text looks nice in headlines.
</p>

HTML

input1
  Centered text looks nice in headlines.
</p>

Создайте параграф и подключите класс «center». Запомните синтаксис: .

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Сильный и выделенный текст

id: 37781_p-nested-005

Внутри рассказа нужно подчеркнуть два слова: «huge» — сделать полужирным, «sea» — курсивом. Завершите разметку так, чтобы оформление появилось именно на этих словах.

CSS

.story p {
  font-family: Georgia, serif;
  margin: 0;
  font-size: 15px;
}

                     <div class="story">
  <p>
    The ship was input1hugeinput2, yet the input3seainput4 was even bigger.
  </p>
</div>

HTML

<div class="story">
  <p>
    The ship was input1hugeinput2, yet the input3seainput4 was even bigger.
  </p>
</div>

Для выделения используйте или , а для курсива — или . Не забудьте как открыть, так и закрыть теги вокруг соответствующих слов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Абзац в статье с изображением

id: 37781_p-img-006

В готовом макете должна появиться фотография и подпись-абзац под ней. Изображение уже подключено, осталось добавить правильный абзац сразу под картинкой.

CSS

article {
  max-width: 340px;
  margin: 0 auto;
}
article img {
  width: 100%;
  border-radius: 8px;
}
article p {
  font-size: 14px;
  margin: 6px 0 0;
}

                     <article>
  <img src="https://naytikurs.ru/img/4.png" alt="Landscape">
  input1
    A calm view can reset your mind.
  input2
</article>

HTML

<article>
  <img src="https://naytikurs.ru/img/4.png" alt="Landscape">
  input1
    A calm view can reset your mind.
  input2
</article>

Сразу после тега <img> откройте абзац и не забудьте его закрыть.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Карточка с несколькими абзацами

id: 37781_p-card-007

Нужно собрать карточку-контейнер, в которой будут два абзаца. Первый уже готов, второй необходимо оформить самостоятельно, а также правильно открыть сам контейнер, чтобы применился серый фон и скруглённая рамка.

CSS

.card {
  border: 1px solid #e0e0e0;
  padding: 12px;
  border-radius: 8px;
  background: #fafafa;
  max-width: 360px;
}
.card p {
  margin: 8px 0;
}

                     input1
  <p>First paragraph inside card.</p>
  input2
    Second paragraph should be here as well.
  input3
</div>

HTML

input1
  <p>First paragraph inside card.</p>
  input2
    Second paragraph should be here as well.
  input3
</div>

Сначала откройте тег <div> с классом «card». Затем добавьте недостающие теги вокруг второго предложения. В конце не забудьте закрыть контейнер </div> — он уже есть.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку