Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Текст фиксированного формата
Текст фиксированного формата
Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web- страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!
Новая Web-страница (листинг 2.10) будет посвящена тегу <TITLE>.
Листинг 2.10
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег TITLE</TITLE>
</HEAD>
<BODY>
<H1>Тег TITLE</H1>
<P>Тег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.</P>
<H6>Пример:</H6>
<P>!HEAD!!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</P>
</BODY>
</HTML>
Здесь мы поместили краткое описание тега <TITLE> и код примера, имеющий такой вид:
!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!/HEAD!
Вместо символов < и >, которые, как мы помним из главы 1, недопустимы в обычном тексте, мы поставили восклицательные знаки. В главе 3 мы узнаем, как все- таки вставить в текст недопустимые символы, и заменим их.
Сохраним набранный код в файле с именем t_title.htm и откроем его в Web-обозревателе. И что мы там увидим?
Рис. 2.1. Web-страница t_title.htm в Web-обозревателе. Обратим внимание на код примера
Как видно на рис. 2.1, Web-обозреватель вывел код примера в одну строку и без всяких отступов. Но ведь мы разбили его на три строки и создали отступы с помощью пробелов, чтобы HTML-код лучше читался и сразу была видна вложенность тегов! Что случилось?
Вспомним два правила, которыми руководствуется Web-обозреватель при выводе текста блочного элемента и которые были перечислены в разделе, посвященном абзацам. Эти правила гласят, что два или более следующих друг за другом пробела или переноса строки преобразуются в один пробел и перенос строки считается за пробел. Так Web-обозреватель и поступил: преобразовал переносы строки в пробелы, а последовательные пробелы — в один пробел. И вывел код примера в виде обычного абзаца, который у него поместился в одну строку.
Web-обозреватель все сделал правильно! Просто мы не указали ему, как следует выводить данный текст.
Специально для случаев, когда текст должен быть выведен именно так, как набран, с сохранением всех пробелов и переносов строк, язык HTML предусматривает парный тег <PRE>. Выводимый текст помещают внутри этого тега (листинг 2.11).
Листинг 2.11
<PRE>Я — текст, который будет выведен на Web-страницу
со всеми
отступами и
переносами строк.</PRE>
Такой текст называется текстом фиксированного формата.
Правила отображения текста фиксированного формата:
— для вывода используется моноширинный шрифт (у моноширинного шрифта все символы имеют одинаковую ширину, в отличие от пропорциональных, у которых ширина символов различна);
— все пробелы и переносы строк сохраняются при выводе (это мы уже знаем);
— если строка текста фиксированного формата не помещается в окне Web- обозревателя по ширине, она ни в коем случае не будет переноситься. Из-за этого может возникнуть потребность в горизонтальной прокрутке Web-страницы. (что, вообще-то, плохой стиль Web-дизайна…);
— возможно наличие HTML-тегов для выделения текста и гиперссылок (подробнее о них будет рассказано в главах 3 и 5).
Текст фиксированного формата также является блочным элементом.
Исправим HTML-код Web-страницы t_title.htm так, чтобы пример выводился в виде текста фиксированного формата (листинг 2.12).
Листинг 2.12
<!DOCTYPE html>
<HTML>
.
<H6>Пример:</H6>
<PRE>!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</PRE>
</BODY>
</HTML>
Откроем исправленную Web-страницу в Web-обозревателе и убедимся, что он выводится правильно (рис. 2.2).
Как правило, текст фиксированного формата используется для вывода исходных текстов программ и быстрой публикации в Сети документов, набранных обычным текстом. В качестве примера можно вспомнить библиотеку Мошкова (http://www.lib.ru), в которой все книги опубликованы как раз в виде текста фиксированного формата.
- Когда нужен постскриптум в бизнес-тексте?
- Текст по законам жанра
- Набор текста
- Определение пользовательского формата числовых данных
- «Высшая математика» в тексте
- 13.3.4. Поиск и замена текста
- Тексты для блогов и соцсетей
- 1.2 Процесс, контекст процесса и потоки
- 6.2. Заработок на контекстной рекламе Google AdSense
- 7.6. Оценка эффективности рекламного текста
- Особенности оформления текста книги
- Часть III Текст