Создание web-сайта

10.  Теги форматирования текста:

                   перевод строки

                  отображение строки без переносов

При подготовке web-страниц обязательно следует помнить, что введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируются браузером при интерпретации html-документа.

Иными словами, такие элементы текста, как

данное       словосочетание

или

данное

словосочетание

на экране монитора будут выглядеть одинаковым образом:

данное словосочетание

Таким образом, любое количество пробелов между словами, отступ, выполненный посредством клавиши «Tab», или перевод строки по нажатии клавиши «Enter» преобразуются при компиляции документа в один символ пробела. Поэтому для форматирования основного текста на web-странице применяются специальные теги, которые мы изучим в рамках этого же урока. Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> — командой предварительного форматирования. Мнемоника записи этого тега выглядит следующим образом:

<PRE>

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

</PRE>

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

Очевидно также, что запись

<ТЕГ>текст

эквивалентна записи

<ТЕГ>текста запись

текст</ТЕГ>

идентична записи

текст</ТЕГ>В указанных случаях переводы строки также игнорируются.

                  выравнивание элементов страницы

Теперь настало время взяться за изучение основных директив HTML, которые позволят вам поместить в создаваемый документ какое-либо содержательное наполнение. Сначала поговорим о возможностях представления на web-странице текста.

Как вы уже знаете из предыдущего раздела, интерпретаторы HTML, встроенные в браузеры, в общем случае игнорируют пользовательскую разметку текстовых блоков, внесенную в код HTML при помощи клавиатуры. Разумеется, в этом случае должны существовать специальные команды, позволяющие отформатировать текст на экране именно так, как это необходимо web-мастеру. Подобные команды существуют, и первая из них — это тег обозначения стандартного абзаца.

Для того чтобы вывести в составе html-документа текстовый абзац, необходимо заключить соответствующий отрывок текста в теги <Р> и </Р>. Синтаксис записи такой команды выглядит следующим образом:

<Р ALIGN=APГУMEHT>

Текст, заключаемый в абзац

</Р>

Аргументом атрибута «ALIGN» может служить одно из четырех логических выражений, значение которых приведено ниже: RIGHT — выравнивание текста по правому краю экрана или столбца таблицы; LEFT — выравнивание текста по левому краю экрана или столбца таблицы; CENTER — выравнивание текста по центру экрана или столбца таблицы; JUSTIFY — выравнивание текста по ширине экрана или столбца таблицы.

Таким образом, текст, форматирование которого внутри абзаца задано тегом <Р ALIGN=JUSTIFY>, будет выровнен на экране компьютера по всей его ширине. Если при использовании тега <Р> не задано никаких атрибутов, по умолчанию используется левое выравнивание.

Можно не включать ни один из перечисленных выше аргументов в состав тега форматирования абзаца, поскольку язык разметки гипертекста позволяет использовать некоторые из них как самостоятельные теги, предназначенные для позиционирования нескольких объектов документа в окне броузера. Используются эти теги следующим образом:

<LEFT>

Часть кода HTML

</LEFT>

Все, что заключено между тегами <LEFT> и </LEFT> — текст, таблицы, графические объекты, — будет выровнено по левому краю экрана.

<CENTER>Часть кода HTML</CENTER>

Все, что содержится между тегами <CENTER> и </CENTER>, позиционируется по центру экрана.

<RIGHT>

Часть кода HTML

</RIGHT>

Все, что заключено между тегами <RIGHT> и </RIGHT>, будет выровнено по правому краю экрана.

                  выделение текста (жирным шрифтом, курсивом, подчеркиванием)

Иногда для расстановки логических акцентов в тексте создателю web-страницы приходится использовать контекстное выделение каких-либо слов или выражений шрифтом: жирным или курсивным. В этих случаях также необходимо использовать соответствующие директивы HTML:

<В>Текст. выделяемый жирным шрифтом</В>

<I>Текст, выделяемый курсивным шрифтом</I>

Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:

<В><I>Текст. выделенный жирным курсивным шрифтом</I></В>

Однако создатели спецификации языка HTML предостерегают программистов от злоупотребления этими тегами, поскольку интерпретаторы далеко не всех современных броузеров умеют их правильно распознавать. Именно поэтому рекомендуется использование аналогичных директив, называемых «командами логического выделения». Они выполняют те же функции, но синтаксис записи у них несколько иной:

<ЕМ>Текст. выделяемый курсивным шрифтом</ЕМ>

<STRONG>Tекст. выделяемый жирным шрифтом</STRONG>

Очевидно, что для выделения текста жирным курсивным шрифтом можно использовать вложение данных тегов друг в друга:

<STRONG>

<ЕМ>Текст, выделенный жирным курсивным шрифтом

</ЕМ></STRONG>

Для выделения текста подчеркиванием используется тег <U>. Синтаксис его записи также достаточно прост:

<U>Подчеркнутый текст</U>

Элемент подчеркивания может быть вложенным тегом, спецификация языка позволяет использовать его совместно с командами выделения текста жирным и курсивным шрифтом.

                  изображение надстрочного и подстрочного текста

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

<STRIKE> — директива, позволяющая отображать в окне броузера зачеркнутый текст. Синтаксис записи:

<STRIKE>Зачеркнутый текст</STRIKE><SUB> — тег, позволяющий отобразить подстрочный текст. Синтаксис записи: 

текст 1<SUB>текст 2</SUB>

Результат обработки такой строки кода будет иметь следующий вид:

текст1текст2 — тег, позволяющий отобразить надстрочный текст. Синтаксис записи:

текст1<SUP>текст 2</SUP> 

Результат обработки такой строки кода будет иметь следующий вид:

текст1текст2

                  увеличение и уменьшение размера шрифта

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

<ТТ>Текст. отображаемый "телетайпным" шрифтом</ТТ>

<BIG> — тег, позволяющий вывести часть текста крупным шрифтом.

ПРИМЕЧАНИЕ При обработке кода HTML интерпретатором броузера размер шрифта высчитывается не в пикселах, а в условных пунктах нелинейного размера, величина такого «пункта» зависит от используемой вами реализации броузера. «Нормальный» (подставляемый по умолчанию) шрифт имеет высоту три пункта.

Использование тега <BIG> увеличивает «нормальный» размер шрифта на одинпункт. Синтаксис записи этой команды таков:

<BIG>текст</BIG>

Чтобы увеличить размер шрифта более чем на один пункт, можно использовать последовательность из нескольких тегов <BIG>:

<BIG><BIG>тeкст</BIG></BIG>

Аналогично уменьшения размера шрифта на один пункт можно добиться с использованием тега <SMALL>. Мнемоника записи этого тега выглядит следующим образом:

<SMALL>текст</SMALL>

Допустимо также использование нескольких вложенных элементов <SMALL>, подобно тому, как это было показано для тега <BIG>.

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

                  тег FONT и его атрибуты

Как известно, размер шрифта в стандарте HTML обозначается условными, пунктами, причем всего их насчитывается семь. Однако не все броузеры понимают термин «пункт» одинаково. Например, при отображении документа в Microsoft Internet Explorer размеры всех шрифтов различны, за исключением пунктов 2 и 3 — они отображаются шрифтом одной высоты, которая равна величине, принятой по умолчанию, и зависит от пользовательских настроек броузера. В Netscape Navigator абсолютно одинаково отображаются пункты 4 и 5, а так же б и 7, они больше по высоте, чем пункт 3, который является «нормальным» размером шрифта.

ПРИМЕЧАНИЕ Следует помнить, что некоторые броузеры, например Microsoft InternetExplorer, позволяют настраивать параметры текста, отображаемого всоставе документов HTML, путем изменения размера шрифта, подставляемого интерпретатором броузера по умолчанию. Это значит, что параметры элемента <FONT>, равно как и других тегов, управляющих размером шрифта, могут изменяться в зависимости от пользовательских настроек. По той же причине возможен эффект нарушения компоновки страницы, оптимизированной для просмотра в броузере со стандартными настройками. Избежать этого можно, заключив все элементы документа в невидимую таблицу с фиксированной шириной, заданной в пикселах.

В общем виде синтаксис записи тега <FONT> выглядит следующим образом:

<FONT FACE="значение1" SIZE="значение 2" COLOR="значение 3">текст</FONT>

Значением атрибута FACE является название шрифта, который вы планируете использовать для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение!" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом.

ВНИМАНИЕ Помните, что набор шрифтов, установленных на компьютерах посетите- лей вашего сайта, может быть разным, и если вы укажете в атрибуте FACE тега <FONT> шрифт, отсутствующий в системе пользователя, текстна экране его монитора станет нечитаемым. Для того чтобы избежать ошибок при отображении текста в броузерах конечных пользователей, используйте указания только на стандартные шрифты, имеющиеся в составе большинства броузеров: Arial и New Times Roman. А лучше вообще опускать данный атрибут, позволив броузеру подставлять при интерпретации кода тот шрифт, который используется по умолчанию.

Атрибут SIZE указывает на размер шрифта, которым следует выводить текст. Параметр этого атрибута, обозначенный в нашем примере как "значение2", может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа в диапазоне от 1 до 6, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или -1), — это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого броузером по умолчанию. Так, запись <FONT SIZE="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа.

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

Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен. Примером записи такой команды может служить следующая строка кода HTML:

<FONT FACE="Arial" SIZE="+2" COLOR="#0000FF">

отрывок текста

</FONT>

ВНИМАНИЕ Помните, что некоторые броузеры старых версий не поддерживают директиву <FONT>. Среди них — текстовый броузер для UNIX-совместимыхплатформ, который носит название Lynx.

                  атрибуты тега BODY

О теге <BODY>, обозначающем тело (основную часть) документа HTML, мы уже говорили в начале этого урока. Необходимо добавить лишь то, что данная команда также может иметь атрибуты, использование которых в ряде случаев бывает весьма полезно, а иногда — просто необходимо.

В общем виде синтаксис записи тега <BODY> со всеми допустимыми атрибутами выглядит так:

<BODY BACKGROUND="URL" BGCOLOR="значение1" ТЕХТ="значение2" LINK="значение3" VLINK="значение4" ALINK="значение5">

тело документа HTML

<BODY>

Атрибут BACKGROUND позволяет дизайнеру поместить на web-страницу некий фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например,"http://www.server.ru/imaes/имя_файла.gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ".. images/имя_файла.gif"). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера.

СОВЕТ Для того чтобы избежать неадекватности отображения того или иного цвета различными броузерами, например, когда web-дизайнер решил применить на странице заливку какого-либо редко используемого оттенка, рекомендуется следующий подход: создайте в любом подходящем редакторе графический файл нужного цвета размерами 1x1 пиксел, после чего укажите его в качестве фонового изображения, включив URL этого рисунка в параметр атрибута BACKGROUND тега <BODY>.