Технические элементы (kbd, samp, var)

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

Опубликовано 04.04.2025
Просмотры 30
Автор
Рек. время прохождения 4 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этом блоке заданий мы попрактикуемся в использовании специальных HTML-тегов, которые добавляют тексту семантическое значение. Семантика особенно важна в технической документации, инструкциях и учебных материалах. Мы сосредоточимся на трёх тегах: `<kbd>` для обозначения ввода с клавиатуры, `<samp>` для демонстрации вывода компьютерных программ и `<var>` для выделения переменных в тексте. Выполняя эти упражнения, вы научитесь не просто стилизовать текст, а делать его понятным и для пользователя, и для машины. Задания построены от простого к сложному: сначала мы отработаем каждый тег по отдельности, а затем научимся комбинировать их в более реалистичных сценариях.
Список тем

Обозначение ввода с клавиатуры

id: 37797_tech-elements-kbd-1

Представьте, что вы пишете инструкцию для пользователя. Вам нужно указать, что для сохранения файла необходимо нажать клавишу F5. Оформите название клавиши 'F5' с помощью подходящего семантического тега, чтобы он выглядел как кнопка на клавиатуре.

CSS
.tech-docs {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.tech-docs kbd {
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
  color: #333;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.9em;
}
HTML
<div class="tech-docs">
  <p>Для быстрого сохранения документа нажмите клавишу <input1>F5</input1>.</p>
</div>
Для обозначения текста, который пользователь должен ввести с клавиатуры (включая названия клавиш), используется тег <kbd>. Вам нужно обернуть 'F5' в открывающий и закрывающий тег <kbd>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Оформление вывода программы

id: 37797_tech-elements-samp-1

Вам необходимо показать пользователю, какой текст выведет консоль после выполнения команды. Оформите фразу 'File not found.' специальным тегом, предназначенным для демонстрации примера вывода программы или скрипта.

CSS
.tech-docs {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.tech-docs samp {
  font-family: 'Courier New', Courier, monospace;
  background-color: #282c34;
  color: #a9b7c6;
  padding: 5px 8px;
  border-radius: 4px;
  display: inline-block;
}
HTML
<div class="tech-docs">
  <p>Если скрипт не найдет указанный файл, он вернет ошибку:</p>
  <input1>File not found.</input1>
</div>
Чтобы показать пример вывода из компьютерной программы, используйте тег <samp>. Он семантически указывает, что этот текст является образцом (sample) вывода.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выделение переменной в формуле

id: 37797_tech-elements-var-1

Вы пишете статью о математике и хотите привести простую формулу площади прямоугольника: a * b = S. Выделите переменные 'a', 'b' и 'S' соответствующим тегом, чтобы показать, что это математические переменные.

CSS
.tech-docs {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.tech-docs .formula {
  font-size: 1.2em;
  text-align: center;
}

.tech-docs var {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  color: #005cc5;
  font-weight: bold;
}
HTML
<div class="tech-docs">
  <p>Формула площади прямоугольника:</p>
  <p class="formula"><input1>a</input1> * <input2>b</input2> = <input3>S</input3></p>
</div>
Для обозначения переменных в математических выражениях или в программировании используется тег <var>. Вам нужно обернуть каждую из трех переменных в этот тег.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинация: ввод и вывод

id: 37797_tech-elements-kbd-samp-1

Создайте инструкцию, которая показывает и действие пользователя, и результат этого действия. Нужно показать, что после ввода команды 'ping' в консоль, система отвечает 'PONG'. Оформите команду и ответ системы соответствующими тегами.

CSS
.tech-docs {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.tech-docs kbd {
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #b4b4b4;
  padding: 2px 6px;
  font-family: monospace;
}

.tech-docs samp {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f0f0f0;
  padding: 2px 4px;
  border: 1px dashed #ccc;
}
HTML
<div class="tech-docs">
  <p>Введите команду <input1>ping</input1> и система ответит:</p>
  <p><input2>PONG</input2></p>
</div>
Здесь нужно использовать два разных тега. Для команды, которую вводит пользователь ('ping'), используйте тег <kbd>. Для ответа системы ('PONG'), который является образцом вывода, используйте тег <samp>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинация: переменная в команде

id: 37797_tech-elements-kbd-var-1

Напишите пример команды для удаления файла. Команда — 'rm', а имя файла является переменной и должно быть обозначено как 'filename'. Оформите команду и имя файла-переменной правильными тегами.

CSS
.tech-docs {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.tech-docs code {
  background-color: #e8e8e8;
  padding: 3px 5px;
  border-radius: 4px;
}

.tech-docs kbd {
  font-family: monospace;
  font-weight: bold;
}

.tech-docs var {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  color: #d73a49;
}
HTML
<div class="tech-docs">
  <p>Для удаления файла используйте команду:</p>
  <code><input1>rm</input1> <input2>filename</input2></code>
</div>
Здесь нужно использовать два тега в одной строке. Сама команда 'rm' — это ввод с клавиатуры, используйте тег <kbd>. А 'filename' — это имя переменной, заполнитель, который пользователь должен заменить на реальное имя. Для него используйте тег <var>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вложенные теги клавиатуры

id: 37797_tech-elements-kbd-nested-1

Некоторые инструкции показывают комбинации клавиш, где каждая клавиша оформлена отдельно. Ваша задача — оформить сочетание клавиш 'Ctrl + C'. Внешний тег должен обозначать всю комбинацию как единый ввод, а внутренние теги — каждую отдельную клавишу.

CSS
.tech-docs {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.tech-docs kbd {
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
  color: #333;
  padding: 2px 6px;
  font-family: monospace;
}

.tech-docs kbd kbd {
  padding: 1px 4px;
  font-size: 0.9em;
}
HTML
<div class="tech-docs">
  <p>Чтобы скопировать текст, нажмите комбинацию клавиш: <input1><input2>Ctrl</input2> + <input3>C</input3></input1></p>
</div>
Это продвинутое использование тега <kbd>. Он может быть вложен сам в себя. Внешний <kbd> будет обрамлять всю конструкцию. А затем каждая клавиша ('Ctrl' и 'C') будет обернута в свой собственный, внутренний тег <kbd>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексное задание: инструкция по Git

id: 37797_tech-elements-all-in-one-1

Создайте небольшой фрагмент инструкции по работе с Git. Вам нужно правильно оформить команду для клонирования репозитория, где URL является переменной, и пример сообщения, которое система выведет после успешного выполнения. Также укажите, что для отмены операции можно нажать Ctrl+C.

CSS
.tech-docs {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.tech-docs code {
  background-color: #e8e8e8;
  padding: 3px 5px;
  border-radius: 4px;
}
.tech-docs kbd {
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #b4b4b4;
  padding: 2px 6px;
  font-family: monospace;
}
.tech-docs var {
  font-style: italic;
  color: #d73a49;
  font-weight: normal;
}
.tech-docs samp {
  font-family: 'Courier New', Courier, monospace;
  display: block;
  background-color: #282c34;
  color: #a9b7c6;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}
HTML
<div class="tech-docs">
  <h4>Клонирование репозитория</h4>
  <p>Для копирования репозитория введите команду:</p>
  <code><input1>git clone</input1> <input2>repository_url</input2></code>
  <p>В случае успеха вы увидите сообщение:</p>
  <input3>Cloning into 'repository_name'...</input3>
  <p>Для отмены операции нажмите <input4><input5>Ctrl</input5>+<input6>C</input6></input4>.</p>
</div>
Это задание объединяет все три тега. Для команды `git clone` используйте `<kbd>`. Для `repository_url` используйте `<var>`, так как это переменная. Для сообщения о результате `Cloning into 'repository_name'...` используйте `<samp>`. А для комбинации клавиш `Ctrl+C` примените вложенную конструкцию с тегами `<kbd>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру