Теория урока

4.1. Форматирование кода тегами PRE и CODE

На многих сайтах, которые связаны с программированием, есть, разумеется, код. Этот код чаще все выделяют при помощи тегов pre и code. Теперь разберем каждый тег отдельно.

О теге PRE

Тег pre применяется для форматирования текста. Такой текст отображается со всеми пробелами между словами (вы же знаете, что если в HTML коде написать много пробелов подряд, они все равно превратятся в один). То есть текст выведется в браузер так же, как написано между <pre> ... </pre>. Рассмотрим пример первый.

Пример 1

<pre>
    Текст      через пробелы!
</pre>

Внутри тега pre можно использовать любые элементы, кроме  <big> <img> <object> 

О теге CODE

А вот HTML элемент code нужен для выделения, в основном, одной строки программного кода. Чем отличается code от pre? Дополнительные пробелы и переносы строки не учитываются. Но внутри тега code можно использовать теги   и  ... . Смотрим пример два.

Пример 2

<code>var a = 120;</code>

Предыдущий урок «3.1. Плавающий фрейм IFRAME в HTML» Следующий урок «1.1. Что такое CSS?»

Возможно, вам это будет интересно: Строчной элемент SPAN в HTML

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

В данном HTML документе выделите фрагменты кода тегами code. То есть <code>какой-то код</code>. Например, это фрагмент кода <div>

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.