SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Структурирование текста в HTML

В этой главе:

  1. Элементы фразы
  2. Цитаты: элементы Q и BLOCKQUOTE
  3. Элементы SUB и SUP
  4. Элементы INS и DEL
  5. Элементы LISTING, PLAINTEXT, XMP

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

Элементы фразы

Элементы фразы определяют способ структурирования текста, или, иначе говоря, добавляют в документ информацию о структуре текста. К элементам фразы в HTML и XHTML относятся: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR и ACRONYM. Предназначение всех этих элементов, а так же типичный формат вывода браузерами приводятся в таблице 2.18.

Таблица 2.18. Назначение и типичное выделение элементов фразы
ЭлементЧто означаетКак выводится
emАкцентирование фрагмента текстаКурсивом
strongСильное акцентирование фрагмента текстаПолужирным начертанием
citeИдентифицирует цитатуКурсивом
dfnОпределение терминаКурсивом
codeВыделяет текст программы или фрагмент любого другого машинного кода в документеМоноширинным шрифтом
sampВыделяет данные, выводимые программойМоноширинным шрифтом
kbdОбозначает текст, который должен быть введен пользователем с клавиатурыМоноширинным шрифтом
varОпределяет переменную или аргумент программыКурсивом
abbrИдентифицирует аббревиатуруОбычным шрифтом
acronymИдентифицирует акроним (слово, составленное из первых букв слов некоторой фразы)Обычным шрифтом

На самом деле, браузеры могут по-разному форматировать текст, заключенный в эти элементы. Так, первые версии Internet Explorer почти все данные элементы выделял полужирным шрифтом. Тем не менее, в последних версиях как MSIE, так Netscape, Mozilla и Opera наблюдается редкостное единодушие по этому вопросу: указанный в таблице 2.16 стиль вывода будет одинаковым на все 100%. Для примера можно посмотреть, как это выводит Mozilla Firefox (рис. 2.10).

Выделение различных элементов фразы графическим браузером

Рис. 2.10. Выделение различных элементов фразы графическим браузером

Набор атрибутов для этих элементов стандартен и состоит из «джентльменского набора», определенного для всех элементов. Приведем его еще раз (таблица 2.19).

Таблица 2.19 Атрибуты элементов фразы
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Общие Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя
Свойства EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR и ACRONYM

Закрывающий тег: требуется.
Совместимость: ABBR – все, кроме MSIE 6, остальные – все.
Вложение: недопустимо.
Уникальный: нет.

Цитаты: элементы Q и BLOCKQUOTE

Для выделения в тексте цитат и высказываний используются элементы Q и BLOCKQUOTE. Элемент Q применяется для заключения в кавычки слова или фразы, а BLOCKQUOTE – для выделения достаточно объемной цитаты в качестве абзаца с отступом от края. При этом элемент Q является строковым (inline), а BLOCKQUOTE, соответственно, блочным.

<q>краткое высказывание</q> <blockquote> Большое высказывание, занимающее, как правило,<br /> несколько строк </blockquote>

К сожалению, элемент Q не распознается браузерами 4-го поколения, и, соответственно, до сих пор не поддерживается надлежащим образом в MSIE 6 и 7. Так, фрагмент текста, заключенного в контейнер Q, при выводе браузером должен заключаться в кавычки. Opera 6 и все Mozilla-браузеры так и делают, но в Internet Explorer полноценная поддержка элемента Q была реализована лишь в 8-й версии. На рис. 2.11 показано форматирование элементов Q и BLOCKQUOTE в Netscape 7.

Цитаты в Netscape 7

Рис. 2.11. Цитаты в Netscape 7

Теоретически (по стандарту HTML 4.01), браузеры не обязательно должны создавать отступ для текста, помещенного в контейнер BLOCKQUOTE. Однако на практике они это делают по той причине, что до недавнего времени среди создателей страниц была распространена порочная практика использовать данный элемент для создания отступа от края страницы для абзацев или даже для страницы целиком. На самом деле для создания отступов следует применять таблицы стилей в сочетании с элементами уровня блока (например, DIV). Поскольку до плотного исследования CSS мы еще не дошли, то перейдем к изучению атрибутов рассматриваемых элементов, для чего обратимся к таблице 2.20.

Таблица 2.20 Атрибуты элементов Q и BLOCKQUOTE
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
cite-Указывает URI оригинального (цитируемого) документа
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Общие Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

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

Свойства Q и BLOCKQUOTE

Закрывающий тег: требуется.
Совместимость: BLOCKQUOTE – все, Q – Mozilla, Opera, MSIE 8.
Вложение: допустимо.
Уникальный: нет.

Элементы SUB и SUP

Иногда для более наглядного представления текста необходимо приподнять или приспустить какой-либо символ или слово относительно всей строки. Для этих целей применяются, соответственно, элементы SUP и SUB. Рассмотрим применение этих элементов на примере (листинг 2.21).

Листинг 2.21. Применение верхнего и нижнего индексов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Верхний и нижний индексы</title> </head> <body> <p>Химические формулы: H<sub>2</sub>O; C<sub>2</sub>H<sub>5</sub>OH</p> <p>Математические выражения: 5<sup>3</sup>=625; F<sub>(x)</sub></p> <p>Время работы: 9<sup>30</sup> – 21<sup>00</sup></p> <p>Торговые знаки: Microsoft<sup>®</sup></p> </body> </html>

Браузеры выводят символы верхнего и нижнего индексов шрифтом чуть меньшего кегля, чем остальной текст (рис. 2.12). Если вам по каким-либо причинам надо изменить такое поведение, то можно явно задать размер шрифта для этих элементов, используя таблицы стилей.

Элементы SUB и SUP в действии

Рис. 2.12. Элементы SUB и SUP в действии

В этом примере мы впервые столкнулись с &-последовательностями – специальными ссылками на символы, которые могут отсутствовать в основной раскладке клавиатуры. Здесь это знак тире (–) и знак торговой марки (®). В принципе, любые текстовые символы можно указывать при помощи ссылок, но на практике применяют лишь некоторые из них. Список ссылок на символы приведен в приложении Б.

Что касается атрибутов, то поскольку для SUB и SUP предусмотрен лишь стандартный их набор (id, class, lang, dir, title, style и атрибуты поведения), то приводить лишнюю таблицу мы здесь не будем.

Свойства SUB, SUP

Закрывающий тег: требуется.
Совместимость: все.
Вложение: допустимо.
Уникальный: нет.

Элемент PRE

Элемент PRE обозначает блок предварительно отформатированного текста. Он стоит несколько особняком от иных элементов разметки и форматирования. Дело в том, что это – единственный элемент, который заставляет браузер воспринимать текст так, как он введен в HTML-файл, с сохранением всех пробелов, символов табуляции и переноса строк. Текст, заключенный между тегами <PRE> и </PRE> выводится моноширинным шрифтом. Все это делает PRE идеальным выбором для того, чтобы выводить тексты программ, например, как это показано в листинге 2.22.

ВНИМАНИЕ
Хотя элемент PRE является элементом уровня блока, он не может содержать ряд других элементов, в частности img, object, big, small, sub и sup.

Листинг 2.22. Элемент PRE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Предварительно отформатированный вывод</title> </head> <body> <h4>Часть программы на Object Pascal</h4> <p>Предварительно отфорамтированный текст (PRE):</p> <pre> function NewWindowProc(WindowHandle : hWnd; TheMessage : LongInt; ParamW : LongInt; ParamL : LongInt) : LongInt stdcall; var S: string; PC: array [0..255] of Char; A: atom; begin if TheMessage = MyMsg then begin ... end; </pre> </body> </html>

При просмотре этого документа (файл preformatted.html) в браузере мы увидим фрагмент кода точно таким же, как в исходном файле (рис. 2.13).

Вывод предварительно отформатированного текста

Рис. 2.13. Вывод предварительно отформатированного текста

Элемент PRE имеет стандартный набор атрибутов (id, class, lang, dir, title, style и атрибуты поведения). Кроме того, стандартом HTML 4 предусмотрен атрибут WIDTH, обозначающий ширину выводимого текстового блока в символах. Однако он объявлен устаревшим, и поддерживается только Mozilla-браузерами.

Свойства PRE

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

Элементы INS и DEL

Для выделения добавляемых или удаляемых фрагментов документа используют элементы INS и DEL. Подобный подход, связанный с сохранением удаленных фраз и выделением добавленных может пригодиться, например, в юриспруденции для просмотра изменений и в иных подобных случаях. Как правило, браузеры выводят находящийся в контейнере INS текст подчеркнутым, а в DEL – зачеркнутым. Но, опять-таки, вы можете переопределить стиль отображения текста при помощи таблиц стилей.

Еще одно замечание, касающееся этих элементов состоит в том, что они могут быть как блочными, так и строковыми, в зависимости от того, что в них содержится. Так, если, скажем, элемент DEL содержит лишь несколько слов, то он будет строковым:

Строка текста, содержащая <del>удаленный фрагмент</del>.

Если же в него попадут параграфы, таблицы или иные элементы уровня блока, то браузер сочтет его блочным:

<del> <p>Здесь отсутствует целый параграф!</p> </del>

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

Листинг 2.23. Неверное использование DEL

<html> <head> <title>INS и DEL</title> </head> <body> <p>Первый абзац мы трогать не будем</p> <p>А вот второй абзац, <del>из которого мы удалим эту строку <div>И эту часть тоже удалим!</div> </del> </p> <ins><p>Зато добавим новый!</p></ins> </body> </html>

В данном случае ошибка заключается в том, что элемент DEL содержит недопустимый в данном случае элемент DIV, поскольку в этом примере он является строковым (т.к. вложен в контейнер P, для которого допустимо лишь строковое содержимое). В то же время элемент INS, вложенный в данном случае непосредственно в BODY, может быть блочным и в данном случае является им, поскольку содержит другой блок (P). Чтобы исправить допущенную ошибку, достаточно «поднять» DEL выше по иерархии документа:

<del> <p>А вот второй абзац, из которого мы удалим эту строку <div>И эту часть тоже удалим!</div> </p> </del>

Теперь с DEL проблем нет, но в данном случае остается проблема с вложением DIV в P. Поэтому следует исправить порядок вложения DIV и P:

<div>А вот второй абзац, <del>из которого мы удалим эту строку <p>И эту часть тоже удалим!</p> </del> </div>

Теперь все правильно – DEL теперь вложен в DIV, который может содержать любые элементы, и, следовательно, здесь DEL становится элементом уровня блока и может содержать в себе P.

Теперь перейдем к атрибутам. Помимо стандартных для всех элементов атрибутов, INS и DEL имеют два собственных – CITE и DATETIME, их описание приведено в таблице 2.21.

Таблица 2.21 Атрибуты элементов INS и DEL
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
cite-Указывает URI документа, на основании которого внесено изменение
datetime-Указывает дату и время внесения изменения
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Общие Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Если содержимое атрибута CITE вопросов не вызывает – это обычный URI, то со временем имеется некоторая накладка. Ранее, при исследовании элемента META было сказано, что время должно быть указано в формате «День недели, число месяц год часы:минуты:секунды часовой пояс», т.е., к примеру, «Mon, 23 Aug 2004 15:00:00 GMT». Однако это было скорее исключением из правил: во всех других случаях дату в атрибутах HTML следует писать в ином формате: «год-месяц-числоTчасы: минуты:секунды±смещение от времени по Гринвичу». В итоге мы получаем:

<ins cite="http://www.book.ru/news.html" time="2004-08-23T15:00:00"> </ins>
Свойства INS и DEL

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

Элементы LISTING, PLAINTEXT, XMP

Для вывода предварительно отформатированного текста, помимо PRE, в ранних версиях HTML были определены элементы LISTING, PLAINTEXT и XMP. Все они являются устаревшими и не должны использоваться в документах HTML 4.0, включая даже «переходный» вариант Transitional – вместо них следует использовать элемент PRE. Все эти элементы заставляют браузер выводить текст моноширинным шрифтом и не игнорировать пробелы. Отличия же заключаются в том, что если LISTING полностью идентичен PRE, то PLAINTEXT и XML еще и отключали интерпретацию тегов HTML.

Свойства LISTING, PLAINTEXT, XMP

Закрывающий тег: требуется (Opera и MSIE игнорируют закрывающий тег для PLAINTEXT).
Совместимость: все, однако в реализации различными браузерами есть отличия. Кроме того, эти элементы не могут использоваться в документах HTML 4.0 и выше.
Вложение: недопустимо.
Уникальный: нет (PLAINTEXT для Opera и MSIE – да).

2011-05-31 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru