2.6. Текстовые элементы
Произвольный текст, находящийся внутри элемента BODY, отображается броузером в окне при помощи шрифта по умолчанию, но для форматирования существует большое число элементов. Для получения всех возможностей по форматированию надо использовать таблицы стилей.Большинство текстовых элементов поддерживает стандартные атрибуты: id, class, lang, dir, title, style и атрибуты событий.
Определенные проблемы вызывает конвертирование текста различных форматов (MS Word, MS Excel) в формат HTML. Не всегда для некоторого формата можно найти адекватную замену в виде элемента HTML. При конвертировании документов такое соответствие достигается при помощи большого количества стилей, и это приводит к увеличению объема HTML-файла. Поэтому Web-дизайнерам приходится исправлять код страниц, упрощая форматирование.
<BASEFONT>
Этот элемент определяет размер шрифта по умолчанию (базовый размер), что может использоваться, к примеру, для элемента FONT (см. ниже). Целесообразно помещать элемент сразу после элемента BODY. Во время просмотра страницы пользователь может изменять размер букв при помощи команд броузера (например, в Internet Explorer командой Вид ►Размер шрифта). Чаще всего по умолчанию используется шрифт размера 3 или 4 (величина для этого атрибута может лежать в пределах от 1 до 7). Другие атрибуты: id, color, face. Пример:<BASEFONT size=3 color="navy">
<FONT> </FONT>
Определение типа, размера и цвета шрифта при помощи атрибутов. Абсолютный размер шрифта задается при помощи атрибута size (размер). Этот атрибут может принимать значения от 1 до 7. На рис. 2.3 показано несколько образцов надписей, выполненных шрифтами разного размера.
Рис. 2.3. Примеры размеров шрифта
Размер шрифта может также задаваться относительно базового:size=+число
size=-число
При назначении величины для этого атрибута надо учитывать величину базового размера. В сумме эти две величины должны соответствовать одному из абсолютных размеров. Так, для базового размера, равного 3, относительный размер может находиться в пределах от -2 до +4. Если величина выходит за допустимый предел, то используется или шрифт размера 7, или шрифт размера 1.
Для элемента FONT можно использовать атрибут цвета:
color="цвет"
Атрибут face (вид) позволяет задавать определенный шрифт или несколько шрифтов (через точку с запятой), например:
face="Arial; Verdana; Tahoma"
Практика показывает, что использование этого атрибута может привести к тому, что текст, набранный не латиницей, станет нечитаемым. Это связано с тем, что на разных компьютерах для шрифтов с одинаковым названием используются разные наборы символов (национальных алфавитов). Поэтому примять этот атрибут имеет смысл только в случае необходимости.
Как известно, если не заданы конкретные шрифты, броузер использует заданные по умолчанию шрифты: один пропорциональный, другой моноширинный.
Элемент FONT может с успехом заменять элементы заголовка H1...H6. Для последних, например, не предусмотрено задание цвета букв с помощью атрибутов, поэтому необходимо использовать CSS. Для того чтобы заголовок, созданный на основе элемента FONT хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, B, I, P и т. д.
Дополнительные атрибуты: id, class, lang, dir, title, style.
Пример использования элемента FONT для создания центрированного заголовка синего цвета:
<CENTER><FONT size=+2 color="blue">Текст заголовка</FONT></CENTER>
<H1> </H1> ... <H6> </H6>
Элементы H1, H2, H3, H4, H5, H6 используются для создания заголовков (header). Существует шесть размеров заголовков. Шрифт заголовка выбирается броузером автоматически. На рис. 2.4 показаны размеры заголовков. По умолчанию заголовки выравниваются влево, поэтому для центрирования необходим соответствующий атрибут. Заголовок всегда занимает полную строку в окне броузера или в ячейке таблицы. Для форматирования заголовков целесообразно использовать CSS, например:<STYLE type="text/css">
H1 {color: #6565C3; letter-spacing: 4px}
H3 {color: #4545A3; letter-spacing: 3px}
</STYLE>
Рис. 2.4. Сравнительные размеры заголовков
Обратите внимание, что для размеров шрифта и размеров заголовков приняты разные системы: шрифт размера 7 — самый крупный, заголовок H6 — самый мелкий.<P> </P>
Элемент абзаца (paragraph). Если не задан конечный тег, то конец абзаца определяется по следующему элементу абзаца, таблице или заголовку, например:
<P>Первый абзац
<P>Второй абзац</P>
Атрибуты элемента P стандартные: id, class, lang, dir, title, style, align, атрибуты событий.
Этот элемент создает пустую строку перед абзацем, поэтому его используют и для дизайна. Данный эффект несколько усложняет создание традиционного вида текста (без разделительных строк между абзацами, но с «красными строками»).
Если надо создать текст из многих абзацев, с отступами первых строк абзацев и небольшими заголовками разделов, то этом случае весь текст может находиться внутри одного элемента P. Визуально конец абзаца будет создавать элемент разрыва строки BR, а красную строку — элементы неразрывных пробелов . Для форматирования подзаголовков можно использовать элемент FONT. Шаблон кода HTML (который вы можете заполнить своим текстом, создав любое количество абзацев), выглядит так.
<P align="justify">
<CENTER>
<FONT size=+1 color="blue">Подзаголовок 1</FONT>
</CENTER><BR>
Текст первого абзаца <BR>
Текст второго абзаца <BR>
Текст третьего абзаца <BR> <BR>
<CENTER><FONT size=+1 color="blue">Подзаголовок 2 </FONT></CENTER><BR>
Текст четвертого абзаца <BR>
Текст пятого абзаца <BR>
</P>
В результате текст приобретет вид, показанный на рис. 2.5. Здесь не указан конкретный размер букв, но с помощью атрибута size=+1 задано, что размер букв подзаголовков должен быть больше «на один размер» букв текста. Поэтому подзаголовки будут не очень крупные. Для подзаголовков выбран ярко-синий цвет. Для всех абзацев обеспечивается выравнивание по ширине. Каждый абзац начинается с четырех неразрывных пробелов и заканчивается элементом принудительного разрыва строки. Эффект «красной строки» заметен, если текстовый абзац состоит из нескольких строк. Перед подзаголовком необходимо ставить дополнительный элемент BR для создания пустой строки.
Описанных выше текстовых блоков может быть несколько. Например, если в тексте необходимо разместить рисунки и выровнять их по центру страницы, для каждого рисунка потребуется создать отдельный элемент P:
<P align="justify"><IMG ...></P>
Рис. 2.5. Текст, разбитый на абзацы
<BR>
Обозначение разрыва строки. Этот элемент можно использовать, чтобы определенный текст печатался с новой строки.Стандартные атрибуты: id, class, title, style.
Атрибут clear может быть использован для выравнивания объектов (например, рисунков) относительно текста, в котором использован элемент BR. Если элемент объекта содержит атрибут align, то расположенные рядом элементы BR должны использовать атрибут clear, например:
<BR clear="right">
Значения атрибута:
none — значение по умолчанию;
left — если объект выровнен влево;
right — если объект выровнен вправо;
all — для объекта, который может быть выровнен по любому краю.
Например, если надо поместить рисунок в правой части Web-страницы, а ниже расположить заголовок и текст (рис. 2.6,а), то код может быть таким:
<IMG align="right" src="test-1.gif" border=0 width=97 height=70>
<BR clear="right">
<CENTER><H1>Заголовок</H1></CENTER>
<P align="justify">Текст абзаца. Текст абзаца. Текст абзаца.</P>
Если же отказаться от использования атрибута clear, то элементы расположатся, как показано на рис. 2.6,б.
Рис. 2.6: а — использование в разметке конструкции <BR clear="right">; б — использование конструкции <BR>
<NOBR> </NOBR>
Текст внутри этого элемента выводится в одной строке. Если строка не умещается на экране, броузер активизирует горизонтальную полосу прокрутки.Этот элемент удобен для форматирования названий, марок товаров и всевозможных обозначений, если нежелательно разбиение этих конструкций по двум строкам.
Этот элемент не входит в официальную спецификацию HTML 4.01, но, тем не менее, часто используется Web-дизайнерами.
<B> </B>
Выделение текста полужирным шрифтом. Очень популярный элемент. Использование полужирного шрифта — прием, позаимствованный из текстовых редакторов.<I> </I>
Выделение текста курсивом.Пример. Для создания полужирного курсива требуется использовать два элемента:
<B><I>Текст</I></B>
или
<I><B>Текст</B></I>
<BIG> </BIG>
Увеличенный размер шрифта по сравнению со шрифтом по умолчанию. Этот элемент удобен для выделения фрагментов текста или отдельных абзацев.<SMALL> </SMALL>
Уменьшенный размер шрифта.<STRIKE> </STRIKE> ИЛИ <S> </S>
Элемент, создающий зачеркнутое начертание текста. В настоящее время его заменяют более простым в написании S.<U> </U>
Подчеркнутое начертание текста.<SUB> </SUB>
Элемент, создающий эффект нижнего индекса (subscript).<SUP> </SUP>
Элемент, создающий эффект верхнего индекса (superscript).На рис. 2.7. показаны примеры использования элементов SUB и SUP. С их помощью получаются такие конструкции, как физическая величина «метры квадратные» или математический символ «М второе». Оба элемента обеспечивают уменьшение размера шрифта — их можно использовать и для форматирования абзаца целиком, если надо, чтобы он был выведен мелким шрифтом.
Рис. 2.7. Использование элементов SUB и SUP
<TT> </TT>
Элемент, условно обозначающий текст телетайпа (teletype). Его особенность в том, что он использует моноширинный шрифт. Так можно внести некоторое разнообразие в оформление Web-страницы.<INS> </INS> и <DEL> </DEL>
Эти элементы позволяют выделить текст, который надо обозначить как вставленный (INS) или удаленный (DEL). Визуально вставленный текст выделяется подчеркиванием, а удаленный — зачеркиванием.Совместное использование этих элементов позволяет получить эффект зачеркивания и подчеркивания:
<INS><DEL>Текст будет подчеркнут и зачеркнут</DEL></INS>
Элементы используют стандартные атрибуты: id, class, lang, dir, title, style, атрибуты событий.
Кроме них имеются вспомогательные атрибуты, не влияющие на разметку Web-страницы. Для указания источника изменений, то есть документа, из которого был взят указанный внутри элемента текстовый фрагмент, или дано объяснение, почему в тексте появилась такая вставка, используется атрибут:
cite="Адрес (URL)"
Для указания даты создания или изменения текста предусмотрен другой атрибут:
datetime="Дата"
Пример начального тега:
<INS datetime="2005-08-21" cite="page001.htm">
<BDO> </BDO>
Этот элемент позволяет изменять направление текста. Он используется совместно с атрибутом dir, которому может быть присвоено одно из значений: LTR (слева направо) или RTL (справа налево). Например:<BDO dir="RTL">Запись текста справа налево</BDO>
<PRE> </PRE>
Элемент для обозначения текста, для которого запрещено форматирование броузером (preformatted). Текст будет выведен в том виде, как он был подготовлен пользователем. Например, учитываются символы конца строки, появившиеся при наборе текста в редакторе. Во всех других случаях броузер игнорирует эти символы. Возможен и обратный эффект: если пользователь введет текст, как одну длинную строку, то она не будет разорвана броузером, а уйдет за край окна программы. В этом смысле элемент PRE работает так же, как элемент NOBR. По умолчанию для отформатированного заранее текста выбирается моноширинный шрифт. Этот элемент удобно использовать для показа листингов программ или для вывода текстовых документов, переформатирование которых может привести к искажению их смысла.Элемент PRE позволяет набрать текст с использованием специальных символов форматирования, таких как «line feed» или «carriage return» (см. раздел 1.3).
Несмотря на повсеместное использование графических режимов, символы псевдографики еще иногда используются (например, для стилизации «под старину»). Если с помощью этих символов создана таблица или рисунок, то для их правильного отображения необходим этот элемент.
Существует атрибут, который позволяет задать ширину блока текста в символах:
width=число_символов
Этот атрибут не поддерживается некоторыми броузерами.
Стандартные атрибуты: id, class, lang, dir, title, style, атрибуты событий.
<MARQUEE> </MARQUEE>
Элемент бегущей строки.Цвет фона цвет задается с помощью атрибута:
bgcolor="цвет"
Если цвет фона задан, то элемент выглядит как цветная полоса, по которой двигается текст. Высота полосы задается двумя способами:
height=высота_в_пикселах
height=n%
Если высота полосы задается в пикселях, то можно порекомендовать задавать ее в диапазоне 30...50. Высоту можно задавать и в процентах. Процент определяет долю от высоты видимой части гипертекста внутри окна броузера. Эта величина, разумеется, не является постоянной и зависит от размера окна. Если высота полосы достаточно большая, имеет смысл использование атрибута align (его поддерживают не все броузеры) для выравнивания текста по верхнему краю, по середине или по нижнему краю полосы:
align="top"
align="middle"
align="bottom"
Ниже приведен пример полосы с золотистым фоном, высотой 45 пикселов, с выравниванием бегущего текста по середине:
<MARQUEE bgcolor="gold" height=45 align="middle">
Текст бегущей строки </marquee>
Направление движения строки задавать:
direction="left" — влево;
direction="right" — вправо.
Атрибут behavior определяет алгоритм движения текста. По умолчанию текст перемещается к краю окна, исчезает, а потом появляется с противоположной стороны. Явно этот режим задается так:
behavior="scroll"
Второй вариант движения заключается в следующем: строка появляется из-за края окна, достигает противоположного края и останавливается. Атрибут указывается так:
behavior="slide"
Третий алгоритм движения предполагает, что строка не исчезает с экрана, но и не останавливается. Она движется вправо или влево, «отражаясь» от края окна (конца и начала строки) и меняя направление движения. Атрибут в этом случае должен быть задан так:
behavior="alternate"
Всю полосу можно сдвинуть по горизонтали вправо:
hspace=смещение_в_пикселах
Выше и ниже полосы можно создать пустое пространство:
vspace=высота_в_пикселах
Количество проходов (m) строки по экрану можно ограничить. Выполнив необходимое число проходов, строка остановится. В данном случае отсчет начнется только после того, как пользователь увидит на экране бегущую строку. Значением атрибута является целое число:
loop=m
Скорость движения задает следующий атрибут:
scrollamount=число
Если число равно 1, то строка будет еле ползти по сравнению с режимом по умолчанию. Если число больше 10, то строка будет двигаться очень быстро. Данный атрибут задает скорость движения как число пикселов, которые проходит строка за каждый шаг.
Существует второй атрибут скорости, определяющий временной интервал (в миллисекундах) между шагами:
scrolldelay=число
© TEKCT.RU, А. Гончаров, 2007-2022
|
|