RUPIXEL.COM - Веб-дизайн в твоих руках
Русскоязычные документы веб-мастеру готовы к употреблению

PRE - предварительно отформатированный текст

Цель

Представить текст с использованием пробелов и переводов строк для последующего отображения его на экране. Это нужно, когда используется только текстовая информация, и мы хотим положить ее на страницу Web, предпочитая выбранную компоновку. Текст также может быть представлен так, как он формируется компьютерным выводом.

Типичное отображение

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

Основной синтаксис

<PRE>
отформатированный текст
</PRE>

Возможные атрибуты

имя атрибута возможные значения смысл примечания
WIDTH целое ширина текста в символах практически не поддерживается

Значение WIDTH должно быть равно или больше, чем длина самой длинной строки. В принципе, атрибут WIDTH должен обеспечивать броузер информацией, чтобы выбрать шрифт подходящего размера или скорректировать отступы для представления текста в требуемом виде. Но обычно это не делается броузерами, а сами Вы не можете установить размер шрифта, так как изменяющие размер шрифта элементы недопустимы в пределах PRE. Например, текст шире 80 символов будет отображен неправильно, даже если Вы используете атрибут WIDTH.

Допустимый контекст

Блоковый контейнер.

Содержимое

Любой текстовый элемент, за исключением изображений (IMG) и элементов изменений размера шрифта (BIG, SMALL, SUB, SUP, FONT).

Примеры

Простейший пример:

Пример PRE-1.html:

<PRE> To be or not to be, that is the question. </PRE>

Другой пример:

Пример PRE-2.html:

The printable characters of ASCII:
<PRE>
! " # $ % &amp; ' () * +, -. /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</PRE>

Попытка представить компьютерный листинг, подобный выводимому на принтер:

Пример PRE-3.html:

The printout from the program is the following. Each line contains ten
real numbers, each in a field of ten characters. Notice that when viewing
this document on WWW, the rendering of the printout can be unsatisfactory;
in such a case widen the WWW window, if possible.
<PRE WIDTH=100>
0.5138707 0.1757256 0.3086337 0.5345317 0.9476302 0.1717277 0.7022309 0.2264168 0.4947661 0.1246986
0.0838954 0.3896298 0.2772301 0.3680532 0.9834590 0.5353862 0.7656789 0.6464736 0.7671438 0.7802362
0.8229621 0.1519211 0.6254769 0.3146764 0.3469039 0.9172033 0.5197607 0.4011658 0.6067690 0.7854244
</PRE>

Пример элемента PRE, содержащего связи:

Пример PRE-4.html:

Contact information (phone and E-mail):
<PRE>
help desk     4344 <A HREF="mailto:atk-neuvonta@hut.fi">atk-neuvonta@hut.fi</A>
operators     4341 <A HREF="mailto:opr@hut.fi">opr@hut.fi</A>
WWW problems  4331 <A HREF="mailto:webmaster@hut.fi">webmaster@hut.fi</A>
</PRE>

Обсуждение представления взаимодействия с компьютером содержит добавочные примеры вложенной текстовой разметки.

Примечания

Как альтернативу использованию элемента PRE, рассмотрите использование обычного абзаца так, чтобы каждая строка переводилась элементом BR. Это не устраняет неудобств по разделению строк броузером (однако, если броузер разделяет строки, это означает, что они настолько длинны, что и для элемента PRE это тоже создаст проблемы) и не предохраняет от использования лидирующих пробелов или многократных пробелов в пределах строки . С другой стороны это дает гибкость, проявляющуюся, например, в использовании любых шрифтов.

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

Предыдущая версия HTML включала элементы XMP, LISTING и PLAINTEXT. Они сейчас устарели и взамен них используется элемент PRE.

Одно из обычных использований элемента PRE - представление таблиц (смотрите пример 3). Однако, элемент TABLE для этих целей может подойти больше. Вы также можете рассмотреть возможность представления Ваших таблиц в двух вариантах - используя TABLE в основной форме и обеспечивая форму PRE для тех читателей, которые используют нетабличные броузеры.

Хотя элемент A и фразы разметки (например, STRONG) можно использовать в пределах элементов PRE, способности броузеров в их представлении могут быть более ограничены, чем вне PRE. Смотрите также примечания к представлению взаимодействия с компьютером.

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

Хотя броузер должен показывать строки так, как они представлены в исходном коде, броузер может, например, использовать постоянный левый отступ для предварительно отформатированных абзацев.

В принципе тег P не должен находится внутри элемента PRE, так как P - блоковый элемент, а не текстовый. Однако, спецификация HTML 2.0 разрешает делать это. При этом броузеры осуществляют только перевод строки, без добавления пустой строки.

Если символы <, > или & встречаются в данных, то они должны быть выражены с использованием escape синтаксиса (как в примере 2). В частности, Вы должны делать так, когда включаете код HTML в Ваш документ для вывода исходного кода.

Стандарт SGML требует, чтобы синтаксический анализатор устранил пустые строки сразу за начальным тегом и непосредственно предшествующие конечному тегу. Таким образом, не имеет значения, напишите ли Вы тег <PRE> на отдельной строке или как префикс к первой строке текста.

[30.08.08] PERL статьи 16 новых статей.

[27.08.08] Добавлено более 50 новых статей про PHP и немного HTML

[24.07.08] CSS 3 статьи и 1 про html.

[16.07.08] HTML статьи 3 новых

[13.04.08] Урок Photoshop Обработка людей

[13.04.08] Веб-мастеру Что такое юзабилити?

[06.04.08] Урок Photoshop Клавиатурная кнопка.

[02.04.08] Скачать шрифты Более 100 новых шрифтов.

[21.03.08] Добавлен раздел FLASH и скрипты JavaScript

[19.03.08] Раскрутка Учебник по раскрутке сайтов.

[16.03.08] Скачать шрифты Добавлено более 1000 шрифтов.

[14.03.08] Урок Photoshop Красивый текст.

[11.03.08] Урок Photoshop Кубический эффект текста.

[10.03.08] Раскрутка сайта Добавил две интересные статьи.

Что нужно сделать с Саакашвили?
Повесить
Растрелять
Посадить
Утопить
Ничего
Дать медаль
Поблагодарить
     php хостинг    Rambler's Top100 Рейтинг@Mail.ru Яндекс цитирования
Александр Акимов
ICQ: 491368028
Mail: rupixel-com.tut.su