Код и предварительно форматированный текст (code, pre) [Модуль 2: Форматирование текста]: Тренажер HTML

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

На этой странице вы попрактикуетесь в использовании HTML-тегов, предназначенных для отображения компьютерного кода и предварительно форматированного текста. Часто на веб-страницах, особенно в блогах для разработчиков, статьях и документации, требуется вставить фрагменты кода, команды терминала или просто текст, в котором важно сохранить все пробелы и переносы строк, как в оригинале. Для этих задач в HTML существуют специальные теги. Вы научитесь различать, когда нужно выделить одно слово или короткую команду внутри обычного абзаца, а когда — оформить целый блок кода с сохранением его структуры и отступов. Эти упражнения помогут вам закрепить навыки семантически правильной и визуально аккуратной верстки технических материалов.

Список тем

Вставка инлайн-кода

id: 37794_code-pre-1

В тексте абзаца упоминается функция JavaScript. Ваша задача — семантически выделить её как фрагмент кода, используя соответствующий HTML-тег. Это изменит ее внешний вид согласно стилям.

CSS

p {
  line-height: 1.6;
  font-size: 16px;
}

code {
  background-color: #f0f0f0;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: Consolas, 'Courier New', monospace;
  color: #d63384;
}

                     <p>Для вывода простого сообщения в JavaScript можно использовать функцию <input1>alert('Hello, World!')</input1>.</p>

HTML

<p>Для вывода простого сообщения в JavaScript можно использовать функцию <input1>alert('Hello, World!')</input1>.</p>

Для выделения небольших фрагментов кода внутри строки, таких как имена переменных, ключевые слова или функции, используется тег `<code>`. Просто оберните `alert('Hello, World!')` в этот тег.

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

Результат

Сообщения

Выполнить

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

Отображение текста с сохранением пробелов

id: 37794_code-pre-2

У вас есть небольшой фрагмент ASCII-арта. Чтобы он отобразился корректно, сохранив все пробелы и переносы строк, его нужно обернуть в специальный тег для предварительно форматированного текста.

CSS

pre {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 15px;
  border-radius: 5px;
  font-family: 'Courier New', monospace;
  line-height: 1.2;
  color: #495057;
}

                     <input1>
  /\_/\
( o.o )
 > ^ <
</input1>

HTML

<input1>
  /\_/\
( o.o )
 > ^ <
</input1>

Тег `<pre>` (от preformatted text) отображает текст так, как он написан в HTML-коде, сохраняя все пробелы и переносы строк. Используйте его, чтобы обернуть ASCII-арт.

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

Результат

Сообщения

Выполнить

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

Классическая комбинация: блок кода

id: 37794_code-pre-3

Это стандартный способ демонстрации блока кода. У вас уже есть тег `<pre>`, который сохранит форматирование. Теперь добавьте внутрь него тег, который семантически обозначит содержимое как программный код.

CSS

pre {
  background-color: #272822;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
}

pre code {
  color: #f8f8f2;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 14px;
}

                     <pre><input1>function greet(name) {
  return "Hello, " + name + "!";
}</input1></pre>

HTML

<pre><input1>function greet(name) {
  return "Hello, " + name + "!";
}</input1></pre>

Общепринятой практикой для отображения блоков кода является вложение тега `<code>` внутрь тега `<pre>`. Это говорит браузеру и поисковым системам, что это не просто текст, а именно код. Оберните JavaScript-код в тег `<code>`.

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

Результат

Сообщения

Выполнить

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

Стилизация блока кода через класс

id: 37794_code-pre-4

Чтобы применить к блоку кода специальное оформление, часто используют классы. Добавьте блоку с кодом класс `code-block`, чтобы активировать заранее подготовленные стили и сделать его более заметным.

CSS

pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 10px;
  overflow-x: auto;
  border-radius: 5px;
}

.code-block {
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
}

code {
  font-family: Consolas, 'Courier New', monospace;
}

                     <pre class="input1"><code>// Этот блок кода должен получить синюю рамку
const pi = 3.14;
let radius = 5;
let area = pi * radius * radius;</code></pre>

HTML

<pre class="input1"><code>// Этот блок кода должен получить синюю рамку
const pi = 3.14;
let radius = 5;
let area = pi * radius * radius;</code></pre>

Чтобы добавить элементу класс, используется атрибут `class`. Впишите в пропуск `code-block`, чтобы тег `<pre>` выглядел так: `<pre class="code-block">`.

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

Результат

Сообщения

Выполнить

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

Написание технической инструкции

id: 37794_code-pre-5

Создайте небольшую инструкцию по работе с git. Команды, которые вводятся в терминал, выделите как инлайн-код, а вывод команды `git status` оформите как отдельный блок с сохранением форматирования.

CSS

p {
  margin-bottom: 1em; 
}

code {
  background: #eee;
  padding: 2px 4px;
  border-radius: 3px;
}

pre {
  background: #333;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
}

                     <p>1. Склонируйте репозиторий: <input1>git clone</input1>.</p>
<p>2. Перейдите в папку проекта: <input2>cd my-repo</input2>.</p>
<p>3. Проверьте статус:</p>
<input3>On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean</input3>

HTML

<p>1. Склонируйте репозиторий: <input1>git clone</input1>.</p>
<p>2. Перейдите в папку проекта: <input2>cd my-repo</input2>.</p>
<p>3. Проверьте статус:</p>
<input3>On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean</input3>

Короткие команды, такие как `git clone` и `cd my-repo`, следует обернуть в тег `<code>`. Для многострочного вывода из консоли используйте тег `<pre>`, чтобы сохранить отступы и переносы строк.

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

Результат

Сообщения

Выполнить

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

Добавление атрибута для языка

id: 37794_code-pre-6

Хорошей практикой является указание языка программирования для блока кода. Это может использоваться скриптами для подсветки синтаксиса. Добавьте атрибут, который присвоит класс `language-css`.

CSS

pre {
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  border: 1px solid #ccc;
  background: #f9f9f9;
}

pre[class="language-css"] {
  border-left: 4px solid #563d7c;
  background: #f0ebf8;
}

code {
  font-family: Consolas, 'Courier New', monospace;
}

                     <pre input1><code>body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}</code></pre>

HTML

<pre input1><code>body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}</code></pre>

Используйте атрибут `class`, чтобы задать элементу имя класса. Макрос `input1` заменяет всю конструкцию `атрибут="значение"`. Вам нужно вписать `class="language-css"`.

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

Результат

Сообщения

Выполнить

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

Восстановление правильной структуры

id: 37794_code-pre-7

В этом примере нарушена структура вложенности тегов для отображения блока кода. Внешний тег должен сохранять форматирование, а внутренний — семантически определять содержимое как код. Восстановите правильный порядок тегов.

CSS

input1 {
  display: block; /* Стили для input1 и input2, чтобы было видно что теги не применились */
  border: 2px dashed red;
  padding: 10px;
  margin-bottom: 5px;
}

input2 {
   display: block;
   border: 1px dashed orange;
   padding: 5px;
}

pre {
  background: #f4f4f4;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', monospace;
  color: #c7254e;
}

                     <input1>
  <input2>
import React from 'react';

const App = () => {
  return <h1>Hello, React!</h1>;
};
  </input2>
</input1>

HTML

<input1>
  <input2>
import React from 'react';

const App = () => {
  return <h1>Hello, React!</h1>;
};
  </input2>
</input1>

Правильная и наиболее распространенная структура: внешний тег `<pre>` и внутренний тег `<code>`. Замените `input1` на `pre`, а `input2` на `code`.

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

Результат

Сообщения

Выполнить

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

Комплексная задача: статья с кодом

id: 37794_code-pre-8

Перед вами фрагмент статьи. Вам нужно расставить все необходимые теги: выделить инлайн-код, оформить большой блок кода и указать для него язык программирования (python) с помощью класса.

CSS

p {
  line-height: 1.6;
  margin-bottom: 1em;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
}

pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 15px;
  overflow-x: auto;
  border-radius: 5px;
}

pre.language-python {
  background: #272822;
  color: #f8f8f2;
}

pre.language-python code {
  background: none;
  padding: 0;
}

                     <p>
  В Python для определения функции используется ключевое слово <input1>def</input1>.
  Для вывода данных в консоль есть функция <input2>print()</input2>.
</p>
<p>Вот пример простой функции на Python:</p>
<input3 class="input4"><code>def say_hello(name):
  message = f"Hello, {name}!"
  print(message)

say_hello("User")</code></input3>

HTML

<p>
  В Python для определения функции используется ключевое слово <input1>def</input1>.
  Для вывода данных в консоль есть функция <input2>print()</input2>.
</p>
<p>Вот пример простой функции на Python:</p>
<input3 class="input4"><code>def say_hello(name):
  message = f"Hello, {name}!"
  print(message)

say_hello("User")</code></input3>

1. Для инлайн-кода (`def`, `print`) используйте тег `<code>`. 2. Для основного блока кода используйте тег `<pre>`. 3. Тегу `<pre>` добавьте класс `language-python`.

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

Результат

Сообщения

Выполнить

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