Форматирование текста
Для форматирования текста в HTML существуют два набора тегов: теги физического и логического форматирования. Теги физического форматирования определяли вид выделяемого фрагмента текста (полужирный или курсивный шрифт, начертание, цвет и т.д.). Данный способ является устаревшим и не рекомендуется к использованию, так как противоречит принципу разделения содержания и оформления. Мы не будем подробно останавливаться на этой группе тегов.
В данной статье рассмотрим вторую группу тегов, отвечающих за логическое форматирование HTML документа. Логическое форматирование означает, что фрагменты текста заключаются внутри смысловых элементов. Отображение этих элементов определяется с помощью стилей (т.е. отдельно от самого документа).
Далее рассмотрим список этих тегов. Для всех них обязательными являются и открывающий и закрывающий теги.
Каждый элемент может иметь следующие атрибуты:
- Идентификаторы id и class
- Информация об языке lang и направлении текста dir
- Свойство title (текст всплывающей подсказки)
- Подстрочный стиль style
- Внутренние события: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown и onkeyup
Рассмотрим примеры использования тегов логического форматирования.
Ударение 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. По умолчанию выделяется курсивом. В примере использованы символ умножения (точка, ·) и символ неразрываемого пробела ( )
Присвоим переменной <var>circle</var> значение 2 · <var>pi</var · <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 никак не выделяет , 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.
Примечание. Квадрат и куб числа можно задавать в помощью специальных символов ² и ³, соответственно. В отличии от элемента sup, использование этих символов не изменяет высоту строки (в сторону увеличения).
.
Третий закон Кеплера гласит, что отношение квадратов периодов обращения планет вокруг Солнца равно отношению кубов больших полуосей орбит планет: T²/t²=R³/r³.
<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.
Ссылки
- Обсудить статью на нашем форуме.
Автор: Ильдар Насибуллаев