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

Текст - параграфы и списки

В этой главе:

  1. Элемент P
  2. Элемент BR
  3. Списки: элементы OL, UL и LI
  4. Списки определений: элементы DL, DT и DD
  5. Элементы DIR и MENU

В этой главе рассматривается структуризация текста при помощи параграфов и списков. Для создания параграфов в HTML используется элемент P, а для списков – OL, UL, DL, DT, DD и LI. Кроме того, существует элемент BR, создающий разрыв строки.

Элемент P

Уже знакомый нам по ряду предыдущих примеров элемент P определяет параграф. Он не может содержать в себе иные элементы уровня блока, включая DIV, списки и вложенные элементы P. Как правило, браузеры создают отступ высотой приблизительно в одну строку между параграфами. Элемент P не может быть пустым (т.е. должен содержать какой-либо текст, рисунок, и т.п.), поскольку браузеры игнорируют пустые параграфы.

<p>В HTML 4 закрывающий тег необязателен. <p>Но по правилам XHTML он необходим, так что лучше его всегда закрывать</p> <p>А такое вот <p>вложение параграфов</p> недопустимо!</p>

В третьей строке выполнена недопустимая попытка создать «вложенный» параграф. При интерпретации такого кода браузер воспримет слово «Третий» как отдельный параграф, «Недопустимо!» будет четвертым, а последний закрывающий тег

окажется потерявшимся, и может вызвать ошибки при интерпретации дальнейшего содержимого документа. Следует также отметить, что параграфы могут содержать только строковые (inline) элементы, используемые для выделения текста (например, B, I, SAMP и т.д.). Таким образом, в него нельзя вкладывать не только его самого, но и любые другие блочные элементы (таблицы, списки и т.п.)

ПРИМЕЧАНИЕ
Хотя стандарт трактует элемент P как параграф, по своей сути в HTML этот элемент обозначает не более чем абзац. Действительно: параграф в обычном понимании может иметь совершенно произвольное содержание, включающее списки, таблицы и т.д. Такую, «полноценную», трактовку элемента параграфа мы получим лишь в XHTML 2.0, а, вернее - в HTML 5 (элемент section).

Таблица 2.15 Атрибуты элемента P
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
title, styleОбщиеОпределяет заголовок и стиль элемента
alignОтменен в XHTML 1.1Определяет выравнивание текста на странице
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

Подобно другим элементам уровня блока (DIV и заголовкам), элемент P имеет стандартный набор общих атрибутов и устаревший ALIGN, отвечающий за выравнивание текста (см. таблицу 2.15). Для параграфов, как и в других случаях, ALIGN может принимать все те же 4 значения: Center, Left, Right и Justify, которые заставляют текст выравниваться по центру, левому краю, правому краю и по ширине соответственно:

<p align="justify">Выровненный по ширине абзац</p> <p style="text-align: justify">Тоже выровненный по ширине абзац</p>
Свойства P

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

Элемент BR

Если элемент P фактически разделяет текст на абзацы, то элемент BR просто обрывает текущую строку и начинает новую.

<p>Начало параграфа. <br /> Продолжение параграфа с новой строки.</p> <br /><br /><br /> Интервал в три строки

Обратите внимание, что элемент BR, во-первых, всегда бывает пустым, а во-вторых, несколько подряд идущих тегов BR не принимаются за один, как P, а создают соответствующий отступ.

Поскольку элемент BR пустой, то список атрибутов для него весьма скромный. Это идентификаторы элемента (ID, CLASS) и заголовок со стилем (TITLE и STYLE), и никаких языковых или «поведенческих» атрибутов. Зато у него есть собственный атрибут CLEAR, который, правда, отменен в современных вариантах языков разметки. Он определяет, с какой позиции должна начинаться следующая строка для случая, когда текст обтекает встроенный объект (например, рисунок) и может принимать одно из значений, перечисленных в таблице 2.16.

Таблица 2.16. Допустимые значения атрибута CLEAR
ЗначениеОписание
NoneСледующая строка начинается как обычно. С таким значением атрибут CLEAR можно не указывать, т.к. он принят по умолчанию
LeftСледующая строка начинается с первой пустой строки с левого края от объекта
RightСледующая строка начинается с первой пустой строки с правого края от объекта
AllСледующая строка начинается с первой пустой строки после объекта

Различные варианты обрывов строк при обтекании объектов вы можете посмотреть в дополнительно примере, расположенном в Part_2/Text/p_br.html.

Свойства BR

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

Списки: элементы OL, UL и LI

Обычно списки используются для вывода информации в виде логической последовательности пунктов. В языке HTML для создания двух классических видов списков – нумерованных и ненумерованных служат, соответственно, элементы OL и UL. А элемент LI служит для обозначения элемента (строки) списка. Простейший ненумерованный список состоит из элемента UL и одного или более вложенных в него элементов LI:

<ul> <li>Строка – элемент ненумерованного списка</li> <li>Еще одна строка в списке</li> <ul>

Списки могут быть вложенными друг в друга, при этом они могут быть как одного типа, та и разного. Например, в нумерованный список может быть вложен нумерованный, а в него, в свою очередь, можно вложить еще один нумерованный список и так далее. В листинге 2.19 показан пример с вложенным списком (файл nestedlist.html)

Листинг 2.19. Вложенный список

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Вложенный список</title> </head> <body> <ol> <li>Первая строка нумерованного списка</li> <li>Вторая строка нумерованного списка</li> <ul> <li>Первая строка вложенного ненумерованного списка</li> <li>Вторая строка вложенного ненумерованного списка</li> </ul> <li>Последняя строка нумерованного списка. </ol> </body> </html>

В данном случае создается нумерованный список, который выделяется номерами своих элементов слева от строки. Среди вложенных в OL элементов LI создается ненумерованный список (UL), который, в свою очередь, выделяется маркерами в виде окружности. Таким образом, список, заданный элементом UL, является вложенным списком по отношению к элементу OL. Браузеры выделяют вложенные списки дополнительными отступами (рис. 2.8).

Вложенный список (UL в OL)

Рис. 2.8. Вложенный список

Элементы списков имеют стандартный набор атрибутов, а так же несколько специальных, отвечающих за оформление списка (и потому отмененных в HTML 4). Все они приведены в таблице 2.17.

Таблица 2.17 Атрибуты элементов OL и UL
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяют заголовок и стиль элемента
typeУстаревшийОпределяет вид маркера для ненумерованного списка или стиль нумерации – для нумерованного
startУстаревший, только для OLОпределяет номер первого элемента в нумерованном списке
valueУстаревший, только для LIОпределяет номер элемента LI в нумерованном списке
compactУстаревшийЗаставляет браузер выводить строки списка с обычным интервалом (Netscape 3 и более ранних версий выводил элементы списка с увеличенным интервалом)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

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

Для нумерованных списков выбор значений несколько больше:

  1. «1» – нумерация арабскими цифрами (принято по умолчанию);
  2. «A» – нумерация прописными латинскими буквами;
  3. «a» – нумерация строчными латинскими буквами;
  4. «I» – нумерация прописными римскими цифрами;
  5. «i» – нумерация строчными римскими цифрами.

Различные виды списков, оформленных при помощи атрибута TYPE, вы можете посмотреть на примере файла Text/lists_old.html.

Свойства OL, UL, LI

Закрывающий тег: OL, UL – требуется; LI – опционально в HTML, требуется в XHTML.
Совместимость: все.
Вложение: OL, UL – допустимо; LI – недопустимо.
Уникальный: нет.

Списки определений: элементы DL, DT и DD

Помимо обычных списков, существуют также списки-определения, задаваемые элементом DL. Они состоят из двух частей: определения (DT) и описания (DD). При помощи подобных списков удобно выводить, например, список терминов и их определений. Так, в листинге 2.20 приведен пример списка определений с основными терминами, связанными с тематикой этой книги (см. также файл def_list.html).

Листинг 2.20. Список определений

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>Списки определений</title> </head> <body> <dl> <dt>WWW</dt> <dd>Word Wide Web - Всемирная паутина</dd> <dt>HTML</dt> <dd>HyperText Markup Language - Язык разметки гипертекста</dd> <dt>Браузер</dt> <dd>Программа для просмотра документов HTML в WWW</dd> </dl> </body> </html>

В примере дан список определений для таких терминов, как WWW, HTML и браузер. На экране это будет представлено в виде, подобном тому, что мы встречаем в словарях или энциклопедиях (рис. 2.9).

Отображение списка определений DL

Рис. 2.9. Отображение списка определений

Что касается атрибутов, то для элементов, определяющих список определений, имеется все те же стандартные атрибуты, что и для обычных списков. Исключение составляют лишь отсутствие таких специальных атрибутов, как TYPE, START, VALUE и COMPACT.

Свойства DL, DT, DD

Закрывающий тег: DL – требуется; DT, DD – опционально в HTML, требуется в XHTML.
Совместимость: все.
Вложение: DL – допустимо; DT, DD – недопустимо.
Уникальный: нет.

Элементы DIR и MENU

Существовавшие в ранних версиях HTML элементы DIR и MENU дублировали, по сути, элемент UL: первый предназначался для создания списков файлов, второй – для вывода обычного одноколоночного списка. Поскольку браузеры все равно выводили все эти списки одинаково (как UL), то элементы DIR и MENU были отменены в HTML 4 вместе со всеми своими атрибутами. По своей структуре все эти элементы полностью идентичны UL:

<dir> <li>Строка 1</li> <li>Строка 2</li> </dir>

ПРИМЕЧАНИЕ
Что касается вывода, то браузер должен выводить список DIR точно так же, как это делает одноименная команда DOS с ключом /W. Но ни одна из графических программ просмотра все равно этого не делает, так что использование всех этих элементов не только нежелательно ввиду их исключения из стандарта, но и лишено всякого смысла.

Атрибуты тегов DIR и MENU, полностью идентичны тем, что определены для UL - см. таблицу 2.17.

Свойства DIR и MENU

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

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

Избранное

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