База данных для веб-мастеров: Обучение: Основы создания HTML-документа

Основы создания HTML-документа: Форматирование шрифта

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

Физические стили

Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта.

                <B>   жирное начертание  </B>
                <I>   курсив             </I>
                <S>   зачеркнутый текст  </S>
                <U>   подчеркнутый текст </U>
                <TT>  моноширинный текст </TT>
                <SUB> _{нижний индекс}         </SUB>
                <SUP> ^{верхний индекс}        </SUP>
                <BIG>   Буквы большего размера </BIG>
                <SMALL> Буквы меньшего размера </SMALL>

Логические стили

При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

<EM>...</EM>

От английского emphasis - акцент. Текст отображается курсивом. Элементы EM и I аналогичны по своему действию.

<STRONG>...</STRONG>

От английского strong emphasis - сильный акцент. Текст будет отображен жирным шрифтом. Элементы B и STRONG аналогичны по своему действию.

<CODE>...</CODE>

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

<SAMP>...</SAMP>

От английского sample - образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. Используется для выделения нескольких символов шрифтом фиксированной ширины.

<KBD>...<KBD>

От английского keyboard - клавиатура. Элемент, выделяющий шрифтом фиксированной ширины текст, вводимый пользователем с клавиатуры.

<VAR>...</VAR>

От английского variable - переменная. Рекомендуется использовать для написания имен переменных. Текст между ними выводится курсивом.

<CITE>...</CITE>

Оформляет находящийся текст как цитату или ссылку на источник. Обычно используется для коротких цитат (в отличие от элемента BLOCKQUOTE). Цитируемый текст отображается курсивом.

<BLOCKQUOTE>...</BLOCKQUOTE>

Оформляет текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом.

<DIV>...</DIV>

Он позволяет выравнивать содержимое по левому краю, по центру или по правому краю. Для этого стартовый тег должен содержать соответствующий атрибут:

align=''left''
align=''center''
align=''right''

                <DIV ALIGN="выравнивание"> 
                Текст раздела
                </DIV>

Пример

Подытожим наши знания о логических и физических стилях с помощью примера 5. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные логические стили.

<html> 
<head> 
<title>Пример 5</title> 
</head> 
<body> 
<H1>Шрифтовое выделение фрагментов текста</H1> 
<P>Теперь мы знаем, что фрагменты текста можно выделять 
<B>жирным</B> или <I>наклонным</I> шрифтом. Кроме того, можно 
включать в текст фрагменты с фиксированной шириной символа 
<TT>(имитация пишущей машинки)</TT></P> 
<P>Кроме того, существует ряд логических стилей:</P> 
<P><EM>EM - от английского emphasis - акцент </EM>
 
<STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR> 
<CODE>CODE - для фрагментов исходных текстов</CODE><BR> 
<SAMP>SAMP - от английского sample - образец </SAMP><BR> 
<KBD>KBD - от английского keyboard - клавиатура</KBD><BR> 
<VAR>VAR - от английского variable - переменная </VAR></P> 
</body> 
</html>

Страницы >>

Автор: Казьмина Светлана