- •Основы web-дизайна
- •Составители а.В. Распопов, о.Е. Ефимова, д.В. Меркулов
- •Введение
- •1.2.1. Стандарты языка html
- •1.2.2. Браузеры
- •Редакторы html-документов
- •Контрольные задания
- •Синтаксис html-тегов
- •Структура html-документа
- •Адресация ресурсов
- •Контрольные задания
- •3.2.1. Комментарии
- •3.2.2. Символьные примитивы (&-последовательности)
- •4.2.1. Разбиение текста
- •4.2.2. Форматирование символов
- •4.2.2.1. Логическое форматирование
- •4.2.2.2. Физическое форматирование
- •4.2.3. Параметры шрифта
- •4.2.4. Заголовки разных уровней внутри текста
- •5.2.1. Формы представления цвета
- •5.2.2. Цвет текста и фон документа
- •5.2.3. Графические форматы
- •5.2.4. Графические изображения
- •Контрольные задания
- •10.2.1. Описание структуры набора фреймов
- •10.2.2. Общий вид html-документа, задающего набор фреймов
- •10.2.4. Целевые фреймы
- •11.2.1. Простейшая форма
- •11.2.2. Типы элементов форм
- •Контрольные задания
- •Несколько советов
- •Библиографический список
- •Оглавление
- •Основы web-дизайна
4.2.1. Разбиение текста
Отображение текста html‑документа браузером имеет ряд особенностей.
Текст выводится в окно браузера слово за словом; при достижении правой границы окна очередное слово переносится на новую строку. Таким образом, по умолчанию (если не использованы специальные теги форматирования, например, <PRE>) горизонтальной полосы прокрутки не появляется. Вертикальная полоса прокрутки появляется, если документ не умещается в видимой части окна.
Весь так называемый пробельный материал (последовательно идущие пробелы, символы табуляции, символы перевода строки) отображаются браузером как один пробел. Например, пусть содержимое секции <BODY> имеет вид:
Пример 4.1
<BODY>
Попытаемся вывести лишние пробелы
и переводы строки
</BODY>
Тогда в окне браузера будет выведен текст без лишних пробелов и перевода строки: «Попытаемся вывести лишние пробелы и переводы строки».
Для того чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги. А именно:
каждый символьный примитив воспринимается как один пробел. Например, текст html-документа:
Пример 4.2
<BODY>
шесть пробелов
</BODY>
будет выглядеть как «шесть пробелов».
Тег <P> (от английского paragraph) начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом. Абзац не может быть пустым, то есть несколько последовательных тегов <P> интерпретируются как один.
Фактически, форматирование абзацев сводится лишь к выравниванию. . Вид выравнивания может быть задан с помощью атрибута ALIGN, который может принимать значения LEFT, CENTER и RIGHT, задающие выравнивание по левому краю, центру и правому краю окна браузера. Также по центру будет выровнен и текст, заключенный в теги <CENTER> ... </CENTER>.
Применение закрывающего компонента для тега <P> не обязательно. Если его нет, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, либо до конца документа.
Тег <BR> (от английского break) разрывает текстовый поток и вставляет новую строку. Несколько последовательных тегов <BR> интерпретируются как несколько пустых строк (в отличие от тега <P>). Межстрочный интервал одинарный. Закрывающего компонента тег не имеет.
Очень удобно использовать <BR> при публикации стихов:
Пример 4.3
<P>Однажды в студеную зимнюю пору<BR>
Сижу за решеткой в темнице сырой.<BR>
Гляжу - поднимается медленно в гору<BR>
Вскормленный в неволе орел молодой.</P>
<P>И шествуя важно, в спокойствии чинном,<BR>
Мой грустный товарищ, махая крылом,<BR>
В больших сапогах, в полушубке овчинном,<BR>
Кровавую пищу клюет под окном.</P>
Текст, заключенный между тегами <PRE> и </PRE> (от английского preformatted – предварительно форматированный), отображается браузером как есть: со всеми пробелами, символами табуляции и переносами строк. Это очень удобно при создании простых таблиц.
Текст, заключенный между тегами <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
Тег <HR> описывает следующую горизонтальную линию:
Он может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В следующем примере приведена небольшая коллекция горизонтальных линий:
Пример 4.5
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>.