1.3.8. Теги физического уровня форматирования текста

Тег <b>

С помощью данного тега-контейнера выполняется выделение полужирным шрифтом части текста в HTML-документе, например:

Это текст с полужирным шрифтом и обычный текст

На данный момент вместо тега рекомендуется использовать тег .

Тег <i>

Данный тег служит для выделения текста курсивом следующим образом:

Фрагмент текста, выделенный курсивом и обычный текст

Тег <u>

Выполняет подчеркивание части текста в окне браузера:

Подчеркнутый текст

Теги <strike> и <s>

Данные теги-контейнеры позволяют выводить перечеркнутый текст в окне браузера. Обычно вместо этих тегов используется тег <del>, если зачеркнутый текст следует представлять как результат редактирования. Если же это просто элемент оформления, то следует использовать <strike> или <s>:

Текст <strike>перечеркнутый</strike>

Теги и <sup>

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

Оформление нижнего индекса Оформление верхнего индекса

Тег <font>

Данный тег-контейнер позволяет задавать свойства шрифта при отображении текста в окне браузера. В настоящий момент не рекомендуется использовать тег для форматирования документа, т.к. он нарушает принцип спецификации HTML 4.0 по разделению вида документа от его содержания. Вместо него лучше применять стилевое оформление, заданные в каскадных таблицах стилей (css), о которых речь пойдет ниже. Тем не менее рассмотрим данный тег, т.к. он бывает весьма полезен в простых документах и дает представление о свойствах шрифта.

Тег относится к последовательным элементам и не может включать в себя теги уровня блоков, например, , <table>, <div> и т.п. Тег имеет следующие необязательные параметры:

Параметр	Пример	Описание
color="цвет"	<font color="red">	Устанавливает цвет текста
face="шрифт1, шрифт2,..."	<font face ="Arial, Tahoma">	Устанавливает шрифт выводимого текста
size="число"	<font size="4">	Устанавливает размер шрифта (целое число от 1 до 7)

<html> <head> <title>Пример тега font</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> Синий текст Красный текст со шрифтом Arial Зеленый текст со шрифтом Courier New и размером 4 </body> </html>

Рис. 1.9. Демонстрация работы тега

Тег <basefont>

Тег <basefont> задает значение свойств шрифта для всего текста документа и имеет те же свойства, что и тег , т.е. color, face и size. Данный тег не нуждается в закрывающем теге и может располагаться в любой части документа, включая раздел <head> и повторяться сколько угодно раз.

Следует отметить, что значения тега <basefont> могут переопределяться тегом и восстанавливаться после закрывающего тега , таким образом комбинируя возможные оформления в тексте HTML-документа.

Тег <img>

С помощью данного тега выполняется вывод изображений в окно браузера. Тег <img> имеет следующие наиболее распространенные необязательные параметры:

Параметр	Описание
align= "bottom \| left \| middle \| right \| top"	Способ выравнивания изображения в документе
alt="текст"	Задает альтернативное описание изображение (отображается при неудачной загрузке изображения)
border="толщина рамки"	Устанавливает толщину рамки вокруг изображения. Чтобы убрать рамку нужно поставить значение 0
height="высота"	Высота рисунка при отображении (в пикселах или процентах)
hspace="отступ по горизонтали"	Задает величину отступа по горизонтали
longdesc="URL"	Указывает адрес страницы с аннотацией к изображению
src="URL"	Адрес загружаемого рисунка
vspace="отступ по вертикали"	Задает величину отступа по вертикали
width="значение"	Ширина рисунка при отображении (в пикселах или процентах)

Приведем пример тега <img> для отображения графического файла logotk.jpg, находящегося по адресу http://its.alnam.ru/images/:

Пример логотипа: <img src="http://its.alnam.ru/images/ logotk.jpg" border=0 />

Рис. 1.10. Пример работы тега <img>

Как видно из примера изображение вставляется в строку текста, т.е. является объектом inline уровня. При этом, используя параметр align можно устанавливать способ выравнивания изображения по отношению к тексту, например:

align=middle: <img src="http://its.alnam.ru/images/logo.gif" border=1 align=middle /> align=top: <img src="http://its.alnam.ru/images/logo.gif" border=1 align=top /> align=bottom: <img src="http://its.alnam.ru/images/logo.gif" border=1 align=bottom />

Рис. 1.11. Примеры разного способа выравнивания изображения

Если же значение параметра align установить равным left или right, то изображение окажется «прижатым» к соответствующему краю окна браузера, а текст будет обтекать это изображение (рис. 1.12). При всех других способах выравнивания изображение является «встроенным» в строку текста и составляет с ним единое целое.

Рис 1.12. Пример работы параметра align=left тега <img>

В приведенных примерах использовались изображения в форматах JPEG (расширение jpg) и GIF (расширение gif). Также допускаются форматы PNG, BMP. Другие форматы изображений поддерживаются не всеми браузерами. Учитывая разнообразие графических форматов, возникает вопрос: какой формат лучше всего выбирать для хранения графической информации? Как правило, руководствуются следующими соображениями: во-первых, чем меньше размер сжатого изображения, тем быстрее оно будет загружаться, и, во-вторых, чем детальнее изображение, тем лучше оно воспринимается визуально «конечным» пользователем. Эти два условия взаимоисключающие. Очевидно, что при увеличении детализации будет увеличиваться объем файла и наоборот. Поэтому на практике поступают следующим образом. Если изображение соответствует фотографии с большим числом цветов, переходов яркостей, то такое изображение лучше хранить в формате JPEG с некоторыми потерями в качестве, которые, как правило, практически не заметны для глаза. Если же изображение содержит четко структурированную информацию, например, скан текста, простые графические схемы, черно-белые (монохромные) рисунки, то такое изображение лучше хранить в формате PNG или GIF, которые не приводят к потерям в качестве при восстановлении, если изображение содержит не более 256 различных цветов.

Тег <span>

Тег-контейнер предназначен для установки определенного стиля (формата) строчному фрагменту текста. Это тег inline уровня не приводит к разрыву текста и обычно используется для настройки собственных стилей, часто применяемых в HTML-документе. Для этого в таблице стилей (css) определяется нужный стиль и затем подключается через необязательный параметр class к тегу . (О том, как работать с каскадными таблицами стилей речь пойдет ниже).

Пример работы тега span

Тег <div>

Тег-контейнер <div> работает по тому же принципу, что и тег , но в отличие от него является элементом уровня блока, т.е. по умолчанию никакая другая информация справа или слева от него не располагается. Данный тег используется для назначения общих свойств отображаемому блоку информации, например, для задания общего цвета фона, шрифта, размера, цвета текста и т.п. Как правило, все свойства прописываются в каскадной таблице стилей (css) и подключаются через параметр class тега <div>.

Пример работы <div style="color:red">тега div</div> - тега уровня блока.

Рис. 1.13. Пример работы тега <div>