Главная :: Веб разработка :: Учебник HTML :: Форматирование текста
Если твой компьютер завис - выдерни шнур, выдави стекло.

Форматирование текста

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

В данной статье рассмотрим вторую группу тегов, отвечающих за логическое форматирование HTML документа. Логическое форматирование означает, что фрагменты текста заключаются внутри смысловых элементов. Отображение этих элементов определяется с помощью стилей (т.е. отдельно от самого документа).

Далее рассмотрим список этих тегов. Для всех них обязательными являются и открывающий и закрывающий теги.

Каждый элемент может иметь следующие атрибуты:

Рассмотрим примеры использования тегов логического форматирования.

Ударение em и сильное ударение strong

Для выделения части текста вы можете использовать ударение em либо сильное ударение strong. По умолчанию ударение выделяется курсивом, а сильное ударение полужирным шрифтом. В примере, мы добавили к первым двум ударениям фрагментам текста всплывающие подсказки через свойство title. Последние два ударения мы сделали сильными.

Отказ от тегов <em title="т.е. визуального">физического</em> форматирования в пользу тегов <em title="т.е. смыслового">логического</em> форматирования обусловлено переходом к концепции отделения <strong>содержания</strong> страницы от <strong>оформления</strong>
Отказ от тегов физического форматирования в пользу тегов логического форматирования обусловлено переходом к концепции отделения содержания страницы от оформления.

Цитата cite

Цитаты и ссылки на источники указываются внутри элемента cite. По умолчанию выделяется курсивом.

Источник: <cite>проект "Веб-дизайн в примерах"</cite>
Источник: проект "Веб-дизайн в примерах".

Определение dfn

Элемент dfn используется для выделения определений. По умолчанию выделяется курсивом.

<dfn>Производная</dfn> функции есть предел отношения приращения функции к приращению аргумента при стремлении последнего к нулю.
Производная функции есть предел отношения приращения функции к приращению аргумента при стремлении последнего к нулю.

Код программы code

Для отображения кода (например, текст программы) используется элемент code. По умолчанию выделяется машинописным шрифтом.

Определим переменную содержащую элемент страницы следующим образом: <code>var InputTime = document.getElementById('MyTime'); </code>.
Определим переменную содержащую элемент страницы следующим образом: var InputTime = document.getElementById('MyTime');.

Пример выполнения программы samp

Тексты примеров выполнения программ заключают внутри элемента samp. По умолчанию выделяется машинописным шрифтом.

После запуска программы, на экране получим: <samp>Привет, мир!!!</samp>
После запуска программы, на экране получим: Привет, мир!!!.

Ввод текста kbd

Текст, который должен быть введен с клавиатуры заключают в элемент kbd. По умолчанию выделяется машинописным шрифтом.

После запуска консоли введите: <kbd>ls -a</kbd>.
После запуска консоли введите: ls -a.

Переменная var

Переменные заключают внутри элемента var. По умолчанию выделяется курсивом. В примере использованы символ умножения (точка, &#183;) и символ неразрываемого пробела (&nbsp;)

Присвоим переменной <var>circle</var> значение 2&nbsp;&#183;&nbsp;<var>pi</var&nbsp;&#183;&nbsp;<var>r</var>.
Присвоим переменной circle значение 2 · pi · r.

Аббревиатура abbr и акроним acronym

Аббревиатуры (сокращение названий, которые читаются по буквам) и акронимы (сокращения названий, читаемые как слова) заключаются внутри элементов abr и acronym, соответственно. В качества всплывающей подсказки можно указать полное название. По умолчанию выделяется подчеркиванием (в браузере IE6 не выделяется, а для элемента abbr не работает свойство title).

Одним из известных рекурсивных акронимов является <acronym title="GNU = GNU is Not Unix">GNU</acronym>. А вот язык гипертекстовой разметки текстов, <abbr title="HyperText Markup Language">HTML</abbr>, является аббревиатурой.
Одним из известных рекурсивных акронимов является GNU. А вот язык гипертекстовой разметки текстов, HTML, является аббревиатурой.

Цитаты blockquote и q

Цитаты могут быть подстрочными (элемент q) и блочными (элемент q). Вы можете указать источник с помощью свойства cite. Элемент q отображается с отступами со всех краев. Элемент q визуализируется в разных браузерах по разному (IE6 никак не выделяет что противоречит спецификации W3C, FF ставит графические кавычки, Opera ставит текстовые кавычки).

Как писал великий русский поэт, Александр Сергеевич Пушкин:
<blockquote cite="А.С.Пушкин. Собрание сочинений в 10 томах.">
Оковы тяжкие падут,
<br>Темницы рухнут — и свобода
<br>Вас примет радостно у входа,
<br>И братья меч вам отдадут.
</blockquote>
На что царь ответил: <q cite="Из непроверенных источников">Ага, как-же, мечтатели.</q>
Как писал великий русский поэт, Александр Сергеевич Пушкин:
Оковы тяжкие падут,
Темницы рухнут — и свобода
Вас примет радостно у входа,
И братья меч вам отдадут.
На что царь ответил: Ага, как-же, мечтатели.

Подстрочный sub и надстрочный sup индекс

Подстрочные (например, индекс массива) и надстрочные (например, степени) индексы заключают внутри элементов sub и sup, соответственно.

Формула для окружности на плоскости имеет следующий вид: (X<sub>1</sub> - X<sub>2</sub>)<sup>2</sup> + (Y<sub>1</sub> - Y<sub>2</sub>)<sup>2</sup> = R<sup>2</sup>.
Формула для окружности на плоскости имеет следующий вид: (X1 - X2)2 + (Y1 - Y2)2 = R2.

Примечание. Квадрат и куб числа можно задавать в помощью специальных символов &sup2; и &sup3;, соответственно. В отличии от элемента sup, использование этих символов не изменяет высоту строки (в сторону увеличения).
за комментарий спасибо DiGo.

Третий закон Кеплера гласит, что отношение квадратов периодов обращения планет вокруг Солнца равно отношению кубов больших полуосей орбит планет: T&sup2;/t&sup2;=R&sup3;/r&sup3;.
<br>Для сравнения: T<sup>2</sup>/t<sup>2</sup>=R<sup>3</sup>/r<sup>3</sup>.
Третий закон Кеплера гласит, что отношение квадратов периодов обращения планет вокруг Солнца равно отношению кубов больших полуосей орбит планет: T²/t²=R³/r³.
Для сравнения: T2/t2=R3/r3.

Ссылки

Автор: Ильдар Насибуллаев