4.5. Оформление текста
Для отображения текста в окне браузера не обязательно применять какие-либо тэги. Достаточно просто напечатать текст. Но когда его нужно разбить хотя бы на абзацы, тут без тэгов не обойтись. В начале каждого абзаца ставится тэг “<p>”. При этом тэг обладает некоторыми параметрами, одним из которых является параметр выравнивания “align”. Применение данного параметра позволяет прижимать абзац к левому или правому краю окна просмотра браузера, центрировать его или растягивать слова таким образом, чтобы текст равномерно занимал всю ширину отведенного ему места. Для этих целей используются значения “left”, “right”, “center” и “justify”, соответственно. Ниже в листинге 1.3 представлен HTML-документ с различными вариантами выравнивания текста.
<html>
<head>
<title>Горизонтальное выравнивание абзацев</title>
</head>
<body>
<p align=”left”>Для выравнивания абзаца по левому краю используется параметр "align" со значением "left"</p>
<p align=”right”>Для выравнивания абзаца по левому краю используется параметр "align" со значением "right"</p>
<p align=”center”>Для выравнивания абзаца по левому краю используется параметр "align" со значением "center"</p>
<p align=”justify”>Для выравнивания абзаца по левому краю используется параметр "align" со значением "justify"</p>
</body>
</html>
Листинг 1.3
На рисунке 49 представлены различные варианты выравнивания текста, созданные при помощи листинга 1.3.
Рисунок 49. Результат просмотра в браузере файла, приведенного в листинге 1.3.
Для увеличения расстояния между абзацами или для принудительного обрыва строки внутри одного абзаца следует применять тэг “<br>”. В листинге 1.4 приведен пример, в котором предложение за счет использования данного тэга разбито на несколько строк.
<html>
<head>
<title>Разбивка предложения на несколько строк</title>
</head>
<body>
Данное предложение<br>разбито<br>на три строки.
</body>
</html>
Листинг 1.4
Результат отображения данного листинга в браузере представлен на рисунке 50.
Рисунок 50. Результат просмотра в браузере файла, приведенного в листинге 1.4.
Для шрифтового оформления текста можно воспользоваться тэгом “<font>” с набором параметров, которые и будут определять внешний вид шрифта, применяемого для отображения фрагмента текста, находящегося после этого тэга. Прекращение действия данного тэга задается тэгом “</font>”. Тэг “<font>” обладает следующими, присущими именно ему параметрами: “size”, использующийся для указания размера применяемого шрифта, color – для установки цветов символа шрифта, и face, указывающий, какой именно шрифт будет применяться для отображения текста.
Значениями параметра “size” могут быть числа от единицы до семи. Они обозначают некий относительный размер символов, зависящий от шрифта, установленного на отдельном компьютере. В качестве значения параметра “size” можно задать изменение размера шрифта. Например, для того, чтобы увеличить размер шрифта на один уровень, следует использовать такую конструкцию:
<font size=”+1”>
Для уменьшения размера символов на два уровня применяется следующий код:
<font size=”-2”>
Для использования подобных конструкций необходимо отталкиваться от некоего базового размера. Для установки такого размера применяется тэг “<basefont>” с параметром “size”. Если же этот тэг не использовать, базовым размером символов будет третий уровень. Ниже, в листинге 1.5 приведен пример использования этих тэгов.
<html>
<head>
<title>Размер символов</title>
</head>
<body>
<p><font size=”7”>Шрифт седьмого размера</font></p>
<p><font size=”7”>Шрифт седьмого размера</font></p>
<p><font size=”7”>Шрифт седьмого размера</font></p>
<p><font size=”7”>Шрифт седьмого размера</font></p>
<p><font size=”7”>Шрифт седьмого размера</font></p>
<p><font size=”7”>Шрифт седьмого размера</font></p>
<p><font size=”7”>Шрифт седьмого размера</font></p>
<p><basefont size=2><font size=”+2”>Шрифт четвертого размера по отношению к базовому</font></basefont></p>
</body>
</html>
Листинг 1.5
Отображение данного листинга представлено на рисунке 51.
Рисунок 51. Результат просмотра в браузере файла, приведенного в листинге 1.5.
Для задания шрифта, например, зеленого цвета фрагмента текста, расположенного после тэга “<font>”, используется следующая конструкция:
<font color=”green”>
Еще один параметр “face” позволяет устанавливать вид применяемого шрифта. Можно указать, что текст надо выводить с помощью шрифта “Times New Roman” или “Arial”. Тем не менее, необходимо понимать, что браузер пользователя будет отображать текст посредством шрифтов, установленных в операционной системе удаленного пользователя, и если применить некий редкий шрифт для придания большей выразительности текста HTML-документа, то его может не оказаться в операционной системе данного пользователя. В этом случае браузер будет пользоваться собственными правилами шрифтового оформления. В каждом браузере есть раздел настроек, в котором пользователь указывает, какие именно шрифты применять для текстового содержимого загружаемых HTML-документов. В качестве значения параметра “face” часто применяется список из названий шрифтов, разделенных запятыми. Браузер пытается отыскать их в своей системе в том порядке, в котором они перечислены, и первый найденный шрифт используется для отображения текста. Чтобы отобразить текст, расположенный после тэга “<font>” с учетом применения всех вышеперечисленных параметров, можно воспользоваться следующей конструкцией:
<font size=4 color=”black” face=”Courier New, Arial Black”>
В этом тэге мы объявляем, что текст, расположенный после него, нужно отображать четвертым размером и символами черного цвета, а применяться должен шрифт Courier New или, если он в системе не установлен, Arial Black. Последовательность записи параметров в данном тэге “<font>” значения не имеет, но на первом месте должен стоять сам тэг.
При создании текстовых документов можно задавать не только размеры, цвет и вид шрифта., но и различные начертания. Можно сделать символы курсивными, полужирными, подчеркнутыми и перечеркнутыми.
Тэг <b> с закрывающим тэгом </b> задает полужирное начертание символов выбранного шрифта.
Тэги <i> и </i> обрамляют курсивные символы.
Тэги <u> и </u> заставляют браузер подчеркивать текст, расположенный между ними.
Тэг <strike> с закрывающим тэгом </strike> описывает перечеркнутый текст.
Тэги <tt> и </tt> обрамляют символы, которые браузер отображает шрифтом одинаковой ширины (моноширинным).
Тэги <small> и </small> указывают, что текст, заключенный между ними, необходимо отображать шрифтом уменьшенного размера.
Тэги <big> и </big>, наоборот, увеличивают размер символов, находящихся между ними.
В листинге 1.6 представлен пример HTML-документа, в котором использованы все вышеперечисленные тэги.
<html>
<head>
<title>Начертания символов</title>
</head>
<body>
<p><font face=”Times New Roman”>Текст бывает <b>полужирным</b> или <i>курсивным</i>.<br>А может быть одновременно и <b><i>полужирным и курсивным</i></b>.</p><p>Бывает <u>подчеркнутым</u> и <strike>перечеркнутым</strike>.</p><p>Или <tt>моноширинным</tt>.</p>
<p>Можно <big>увеличивать</big> и <small>уменьшать</small> размер символов.</p>
</body>
</html>
Листинг 1.6
Рисунок 52. Результат просмотра в браузере файла, приведенного в листинге 1.6.
Как видно из примера, можно сочетать различные начертания, но следует быть аккуратным при расстановке тэгов: открывающий и закрывающий тэги должны оба вкладываться как в футляр в другие тэги. Для некоторых категорий текста, которые отображаются предопределенным образом, в HTML предусмотрены специальные тэги, перечисленные ниже.
Выделение термина в тексте производится парой тэгов <em> и </em>.
“Усиленное” выделение, призванное привлечь внимание, создается с помощью тэга <strong> и его закрывающего напарника </strong>.
Тэги <cite> и </cite> указывают на то, что текст, расположенный между ними, - цитата.
Определение некоего термина выделяется тэгами <dfn> и </dfn>.
Пара тэгов <code> и </code> применяется для выделения исходного кода на каком-либо языке программирования.
Текстовая информация, выводимая программой, оформляется с помощью тэгов <samp> и </samp>.
Текс, вводимый пользователем, обозначается тэгами <kbd> и </kbd>.
Переменные в исходном коде программ выделяются с помощью пары тэгов <var> и </var>.
Тэги <abbr> и </abbr> обозначают аббревиатуры.
Устоявшиеся буквосочетания, не являющиеся аббревиатурами, т. е. акронимы, выделяются тэгами <acronim> и </acronim>.
Ниже приведен листинг.
<html>
<head>
<title>Стандартные варианты отображения</title>
</head>
<body>
<p><font face="Times New Roman">Это обычный текст</font></р>
<p>Это<em>выделение</еm>. И<strong> более заметное выделение</strong></p>
<p>Это <cite>цитата</cite>. А это <dfn>определение</dfn>.</р><p>Мы можем писать<code>код программы</соdе>, текст,<kbd> вводимый пользователем</kbd>,<samp>выводимый текст </samp>и <var>переменные </var>программы.</р>
<p>Так отображаются <abbr>аббревиатуры</abbr>. А так - <acronym>акронимы</acronym>.</р>
</body>
</html>
Листинг 1.7
Рисунок 53. Результат просмотра в браузере файла, приведенного в листинге 1.7.
Очень часто возникает необходимость разместить на Web-странице текст, заранее приготовленный с помощью какого-либо текстового редактора, который уже самостоятельно отформатировал текст. В этом случае формат текста, его переносы и размещение напрямую зависят от длины строки в символах, которая была установлена в этом текстовом редакторе. Если текст разместить на Web-странице с помощью обычных средств, это форматирование будет нарушено. Для таких предварительно отформатированных фрагментов был введен специальный тэг. Этот тэг “<pre>” обладает параметром “width”, в качестве значения которого указывается длина строки в символах. Желательно перед применением этого тэга принудительно установить именно тот шрифт, который использовался при форматировании текста. Итак, для вставки, предварительно отформатированного текста мы можем применить следующий фрагмент кода:
<pre width=60>Текст...</pre>
В данном примере мы указываем, что строка для отображения текста имеет длину шестьдесят символов. При этом в предварительно отформатированном тексте не действуют правила “сворачивания пробелов”. Когда браузер встречает в обычном тексте Web-страницы несколько идущих подряд пробелов, он их сворачивает в один пробел. Заранее отформатированный текст подобному преобразованию не подвергается, что и позволяет сохранять его форматирование, которое в простейших текстовых редакторах часто осуществляется пробельными символами. В HTML символ табуляции тоже считается пробельным символом.
Несколько слов о проблеме переносов. Обычно создатели Web-страниц даже не задумываются об этой проблеме, и браузеры не занимаются переносом слов. Если слово целиком не помещается в строке, оно просто переносится на другую строку. Но ведь это не единственно правильный способ отображения текста. Может возникнуть ситуация, когда понадобится отображать текст, пользуясь переносами слов. В HTML предусмотрено два вида переносов — явный и так называемый "мягкий". Явный перенос задается с помощью символа короткого тире, заменяемого обычно численными текстовыми подстановками “-” или “-”. Такой перенос неудобен тем, что при изменении размеров окна просмотра браузера может измениться и длина строки, а знак переноса все равно останется виден, даже если он будет находиться в середине строки. Чаще пользуются "мягкими" переносами. Они создаются с помощью текстовой подстановки ””. При этом символы мягких переносов в тексте не видны, и лишь в том случае, когда какое-либо слово, в которое были вставлены эти символы, не помещается целиком в строке, оно переносится с разбиением на слоги, согласно вставленным “мягким” переносам. Лишь один из символов мягкого переноса в этом слове становится виден.
Кроме того, HTML позволяет отображать верхние и нижние индексы. Для создания верхнего индекса используется пара тэгов “<sup>” и “</sup>”, а нижний индекс должен быть обрамлен тэгами “<sub>” и “</sub>”. Рассмотрим пример использования этих тэгов.
<html>
<head>
<title>Верхние и нижние индексы</title>
<body>
<р>Вода это H<sub>2</sub>0</p>
<р>Соотношение массы и энергии - Е=mc<sup>2</sup></p>
</body>
</html>
Листинг 1.8
Рисунок 54. Результат просмотра в браузере файла, приведенного в листинге 1.8.
К текстовому оформлению можно отнести горизонтальные линии, которыми часто отделяют значимые части текстового содержимого Web-страниц. Линия вставляется в текст HTML-документа с помощью тэга “<hr>”. Тэг обладает несколькими параметрами, которые позволяют достаточно детально определять внешний вид горизонтальной линии.
Параметр “align” задает горизонтальное выравнивание линии. Он может принимать одно из трех предустановленных значений — “left”, “right” и “center”, которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно. По умолчанию используется значение “center”. Если в состав тэга “<hr>” входит параметр “noshade”, то отображаемая горизонтальная линия не будет иметь тени. Последний параметр “width” устанавливает длину горизонтальной линии. По умолчанию используется значение “100%”. Высота линии в пикселах задается с помощью параметра “size”. Рассмотрим использование всех этих параметров на примере.
<html>
<head>
<title>Горизонтальные линии</title>
<body>
<p>Это обычная линия, отображаемая по умолчанию<hr></p>
<p>Это укороченная линия, прижатая влево<hr align="left" width="70%" size=5></p>
<p>Это укороченная линия, расположенная по центру<hr align="center" width="70%" size=5></p>
<p>Это укороченная линия, прижатая вправо<hr align="right" width="70%" size=5></p>
<p>Это утолщенная линия без тени<hr align="center" width="70%" noshade size=10></p>
</body>
</html>
Листинг 1.9
Рисунок 55. Результат просмотра в браузере файла, приведенного в листинге 1.9.