HTML, XHTML и CSS на 100%, Квинт Игорь

HTML, XHTML и CSS на 100%

на обложку

Квинт Игорь

Шрифт:

Это небольшой заголовочный абзац, выровненный по центру

Здесь эпиграф

Этот абзац с текстом выровнен по левому краю, поэтому края с правого края будут рваными

Этот абзац с основным текстом, выровненный по ширине. Края этого абзаца прилегают к краям окна браузера

</body>

</html>

На рис. 2.2 показан результат обработки листинга 2.2, где видно различие между абзацами с разным выравниванием.

Рис. 2.2. Оформление абзацев

Для дальнейшего оформления текста абзацев используют каскадные таблицы стилей, для этого элемент P допускает использование атрибутов style и class.

2.3. Создание обрывов строк

С оформлением абзаца все понятно. Что же делать, если возникает необходимость оборвать строку, не закрывая абзац, например в том же эпиграфе для записи стихов?

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

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

В листинге 2.3 представлен пример кода для принудительного переноса строки.

Листинг 2.3. Обрыв строки

<html>

<head>

<title>Обрыв строки</title>

</head>

<body>

Наша Таня громко плачет,

Уронила в речку мячик.

</body>

</html>

На рис. 2.3 представлен результат обработки браузером кода из листинга 2.3.

Рис. 2.3. Обрыв строки

Из рис. 2.3 видно, что при использовании элемента BR пустая строка после переноса не добавляется.

Есть еще один вариант применения элемента BR. Его используют, когда нужно задать обтекание текстом таблицы, изображения или любого другого плавающего элемента страницы (то есть элемента, для которого задан атрибут align).

Для этого применяют атрибут clear элемента BR. Атрибут может принимать следующие значения:

• all – запрещает обтекание элемента с двух сторон;

• left – запрещает обтекание с левой стороны плавающего объекта, расположенного после элемента BR;

• right – запрещает обтекание с правой стороны плавающего объекта, расположенного после элемента BR;

• none – отменяет свойство.

Если обтекание запрещено, то текст, следующий за элементом BR, будет отображаться на строке после плавающего объекта.

Кроме обязательного переноса строки, иногда нужно использовать обратное действие, то есть гарантировать, что текст не будет перенесен на новую строку ни в коем случае. Для создания таких неразрывных строк предназначен элемент NOBR, который требует наличия закрывающего тега. Текст, расположенный внутри элемента, будет размещаться в одной строке. При необходимости браузер создаст горизонтальную полосу прокрутки.

Иногда строка может оказаться очень длинной и неудобной для чтения, поэтому внутри элемента NOBR можно использовать элемент WBR, который указывает место для возможного переноса строки.

В листинге 2.4 представлен пример использования элементов NOBR и WBR.

Листинг 2.4. Запрет переноса строки

<html>

<head>

<title>Обрыв строки</title>

</head>

<body>

Это очень важная строка, ее ни в коем случае нельзя переносить на другую строку, однако в этом месте возможно сделать перенос.

</body>

</html>

На рис. 2.4 показано отображение в браузере кода из листинга 2.4.

Рис. 2.4. Запрет переносов

Как видно на рис. 2.4, браузер создал горизонтальную полосу прокрутки и перенес строку в том месте, где было разрешено.

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

2.4. Создание списков

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

Списки – важный инструмент, они применяются для организации и группировки данных. Это может пригодиться при создании карты сайта (то есть его оглавления), описания сложных структур и других подобных объектов.

В HTML можно выделить несколько типов списков:

• маркированный;

• нумерованный;

• список определений.

Они отличаются по типам представления информации.

Маркированный список

Маркированные списки – это списки, в которых пункты отмечаются с помощью различных символов. Такие списки еще называют ненумерованными, или неупорядоченными, потому что для элементов данного списка последовательность неважна. Эти списки можно использовать для простого перечисления объектов или их свойств.