Урок 14 из 70 · 9 мин

Код, клавиши и вывод программ

code, pre, kbd, samp и var: как показывать код и технический текст.

Инструкция для администратор

Пишу инструкцию к программе: «нажми Ctrl+P», «программа ответит OK». Как это оформить?
Ника
Для этого есть целая семья тегов: код, клавиши, вывод программы.

Тег

<code>

Фрагмент кода

Что это: Код, имя файла, тег внутри текста.
Зачем: Моноширинный шрифт и смысл «это код».
Как: HTML
Открой файл <code>menu.html</code>
Так это выглядит

Тег

<pre>

Как есть

Что это: Сохраняет пробелы и переносы строк.
Зачем: Для блоков кода и текста, где важны отступы.
Как: HTML
<pre>Блокнот 250 Ручка 70</pre>
Так это выглядит

Тег

<kbd>

Клавиши

Что это: Клавиша или ввод пользователя.
Зачем: Одна клавиша — один kbd.
Как: HTML
Нажми <kbd>Ctrl</kbd> + <kbd>P</kbd>
Так это выглядит

Тег

<samp>

Вывод программы

Что это: Что показала программа или устройство.
Зачем: Отличить ответ кассы от того, что ввёл человек.
Как: HTML
Касса ответит: <samp>Оплата прошла</samp>
Так это выглядит

Тег

<var>

Переменная

Что это: Имя переменной в формуле или коде.
Зачем: Объяснить формулу понятно.
Как: HTML
Сдача = <var>внесено</var> − <var>цена</var>
Так это выглядит

Ваш ход

Задание

Инструкция к программе

Пишем памятку к программе. Оформи: файл zakaz.txt — как код (code), сочетание Ctrl + P — клавишами (kbd, по одной на клавишу), ответ программы «Оплата прошла» — как вывод (samp).

Файл в code — пока нет
Две клавиши в kbd — пока нет
Ответ кассы в samp — пока нет

<p>Открой zakaz.txt, напечатай чек через Ctrl + P. Касса ответит: Оплата прошла</p>

<p>Открой zakaz.txt, напечатай чек через Ctrl + P. Касса ответит: Оплата прошла</p>

Результат обновляется при вводе

ПрактикаОбязательное задание

Сохранить отступы

Выберите один ответ.

Какой элемент сохраняет пробелы и переносы строк в тексте как есть?

Домашнее заданиеДля закрепления

Сочетание клавиш