Рис. 3.6. Текст с полным сохранением форматирования
Если внимательно посмотреть на рисунок, то можно заметить, что текст отображается моноширинным шрифтом. Таков побочный эффект использования PRE.
Запрет разрыва строки
Иногда бывает нужно не разорвать строки в тексте документа, а, наоборот, не допустить разделения некоторых слов в строках. Для этого HTML позволяет использовать неразрывные пробелы и элементы NOBR.
Неразрывный пробел можно ввести в текст HTML‑документа с использованием соответствующей ссылки на символ: . Например:
Текст, отображаемый без переноса.
Если текст, слова которого разделены неразрывными пробелами, не помещается в окне браузера, то появится горизонтальная полоса прокрутки.
Когда необходимо выделить большой участок текста, для которого недопустим автоматический перенос слов, то целесообразнее использовать элемент NOBR. Ему соответствуют парные теги <NOBR> и </NOBR>. Весь текст, находящийся между этими тегами, будет отображаться браузером в одной строке, например:
<NOBR>
Этот текст отображается в одной строке независимо от ширины окна браузера
</NOBR>
Остерегайтесь создания слишком длинных неразрывных строк, поскольку необходимость горизонтальной прокрутки для прочтения таких строк только ухудшает чтение HTML‑документа. Для вставки разрывов строк в тексте, заключенном между <NOBR> и </NOBR>, можно использовать рассмотренный ранее элемент BR.
Переносы
При написании текста HTML‑документа автор имеет возможность явно указать места, в которых текст может или должен переноситься на следующую строку (обычно это используется только для указания места возможного разрыва слов, потому что даже с наличием символов переноса браузер автоматически переносит целые слова так, как было рассказано ранее). Указания мест переносов в тексте достигается вставкой специальных символов переноса.
HTML предоставляет два типа переноса: простой и мягкий. Простой перенос в тексте HTML‑документа обозначается символом –. Этот символ указывает, в каком именно месте должно разрываться слово, если оно не помещается в окне. Если же слово помещается в окне, то символ переноса все равно отображается (то есть простой перенос логично использовать только для указания дефисов в тексте, как это обычно и делается). При помощи мягкого переноса можно указать браузеру место, в котором слово можно разрывать при необходимости переноса его части на следующую строку. Мягкий перенос задается ссылкой на символ ­. При использовании мягкого переноса сам символ переноса (–) отображается браузером только в случае разрыва слова в указанном месте.
Ниже приведен небольшой пример использования простого и мягкого переноса в тексте HTML‑документа (пример 3.7).
Пример 3.7. Использование переносов
<TITLE>Использование переносов</TITLE>
<BODY>
Это длинное-длинное слово отображается браузером с дефисом и переносится в месте дефиса.<BR>
Слова этого текста могут раз­рывать­ся в указан­ных местах.<BR>
<NOBR>
А этот текст не разрывает­ся несмотря на нали­чие в нем символов пере­носа.
</NOBR>
</BODY>
Обратите внимание: внутри элементов NOBR (как в примере 3.7) и PRE переносы браузером игнорируются. Однако внутри элемента NOBR можно указать место возможного переноса текста. Делается это при помощи одиночного тега <WBR> (элемента WBR соответственно).
Например:
<NOBR>
Этот текст будет разорван браузером в указанном месте при <WBR>
необходимости (когда текст не поместится в окне).
</NOBR>
Обтекание текстом нетекстовых элементов
Далее рассмотрена еще одна возможность элемента BR, которая используется при вставке в текст документа различных изображений, таблиц и прочих нетекстовых элементов (сами эти элементы будут рассмотрены позже). Таким объектам можно задать выравнивание по правому или левому краю окна браузера (объекты с таким выравниванием называются плавающими).
Текст может обтекать плавающие объекты справа или слева. При необходимости принудительного разрыва строки с использованием элемента BR можно указать, где должна появиться следующая строка, задавая значения left, right, all или none атрибуту clear этого HTML‑элемента. Расшифровка этих значений следующая:
• none – используется по умолчанию, означает, что новая строка начнется нормально, то есть с минимальным промежутком по вертикали и выравниванием по нужному краю;
• left – следующая строка начнется под плавающим объектом, выровненным по левому краю (если объект выровнен по правому краю, то действует аналогично none);
• right – аналогично значению left, только наоборот;
• all – следующая строка начнется под плавающим объектом независимо от края, по которому выровнен объект.
3.3. Структурирование текста
Все, что рассматривалось ранее, – это простое физическое форматирование текста. Теперь пришло время заняться разбиением текста HTML‑документа на логически цельные, но различные между собой части, – сформировать структуру документа. В этом разделе будут рассмотрены основные возможности структурирования документа с использованием соответствующих HTML‑элементов, а также то, как роль текста в структуре документа влияет на его отображение.
Разбиение на абзацы
В предыдущих примерах весь текст HTML‑документов даже при наличии в нем элементов BR воспринимался браузером как один абзац. Чтобы действительно отделить абзацы текста друг от друга, используется специальный элемент P.
Элемент P задается при помощи парных тегов <P> и </P>. При этом следует отметить, что использование закрывающего тега </P> считается не просто необязательным, но даже нежелательным. При отсутствии закрывающего тега концом элемента P считается начало следующего абзаца (следующий тег <P>) или тег конца документа, если абзац последний.
Для элемента P можно задать несколько атрибутов. Список наиболее используемых атрибутов:
• align – задает горизонтальное выравнивание содержимого абзаца, может принимать значения: left (используется по умолчанию), right, center, justify;
• title – задает текст подсказки.
К тексту абзаца может применяться любое форматирование, однако оно не должно нарушать восприятие абзаца как единого целого. Обычно сами абзацы браузерами визуально отделяются друг от друга. Далее приведен небольшой пример, в котором используется разбиение текста на абзацы (пример 3.8).
Пример 3.8. Использование абзацев
<TITLE>Разбиение текста на абзацы</TITLE>
<BODY>
<P title = "Первый абзац">
Неформатированный текст
<P align = "right" title = "второй абзац">
Текст с <B>изменением <I>начертания</I></B>
<P align = "center" title = "третий абзац">
<FONT size = "+2" face = "arial">Текст с измененным шрифтом</FONT>
<P align = "justify" title = "четвертый абзац">
Текст этого абзаца автоматически выравнивается по ширине справа и слева при переносе слов
</BODY>
При обработке приведенного HTML‑кода получится документ, показанный на рис. 3.7.
Рис. 3.7. Использование различного оформления абзацев
При наведении указателя мыши на текст абзаца появляется подсказка, заданная атрибутом title.
Заголовки
Следующим важным этапом в структурировании HTML‑документа является использование заголовков (в их обычном понимании) для обозначения начала больших фрагментов текста.
В HTML поддерживаются шесть видов заголовков. Им соответствуют элементы H1, H2, H3, H4, H5 и H6. Номера определяют уровни заголовков от наиболее важного (1) до наименее важного (6). Элементы H1–H6 задаются при помощи соответствующих парных тегов. Например, для задания заголовка третьего уровня можно применить следующий код:
<H3>Текст заголовка третьего уровня</H3>
Для заголовков можно задать свойства:
• align – выравнивание текста заголовка (по умолчанию используется выравнивание по левому краю);
• title – текст подсказки.
Заголовки различных уровней обычно отображаются браузерами различными шрифтами и различного размера. При этом размер шрифта более важных заголовков обычно больше, чем размер шрифта менее важных.
На рис. 3.8 приведен пример того, как отображаются заголовки различного уровня (HTML‑код не приводится ввиду его чрезвычайной простоты).