Блоковые элементы

Модуль Text

Элемент body

Часть документа, заключенная в контейнер <body>…</body>, содержит информацию Web-страницы, выводимую пользователю. В качестве атрибутов элемента body, помимо общих атрибутов class, dir, id, lang, style и title, могут быть заданы следующие атрибуты форматирования: alink (цвет активной гиперссылки), background (URL для изображения, которое будет служить в качестве фона Web-страницы), bgcolor (цвет фона Web-страницы), link (цвет не посещенной гиперссылки), text (цвет текста на Web-странице) и vlink (цвет посещенной гиперссылки). Однако параметры форматирования, задаваемые этими атрибутами, лучше задавать с помощью стилей.

В состав модуля Text входят элементы форматирования текста. Эти элементы можно разбить на три группы:

· блоковые элементы (h1, h2, h3, h4, h5, h6, address, blockquote, div, p и pre);

· строковые (inline) элементы (abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong и var).

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

Вывод содержимого заголовков и блоковых элементов всегда начинается с новой строки и, кроме того, текст после заголовка или блока также начинается с новой строки.

Для структуризации текста Web-страницы, как и в обычном текстовом документе, используются заголовки. В HTML определены шесть уровней заголовков, определяемые контейнерами <h1>…</h1>, <h2>…</h2>, <h3>…<h3>, <h4>…<h4>, <h5>…</h5> и <h6>…<h6>. Содержимое этих контейнеров зависит от используемого Web-браузера, однако заголовок всегда выводится жирным шрифтом и размер шрифта заголовка зависит от уровня заголовка (чем выше уровень, тем меньше размер шрифта).

Заголовки различных уровней обычно используются для выделения структурных единиц текста: наименования Web-страницы, наименований разделов, подразделов и т.п.,

Пример 4.3.3. Задание заголовка первого уровня:

<h1>Заголовок Web-страницы</h1>

Вывод этого заголовка в Web-странице имеет следующий вид:

Как уже говорилось выше, Web-браузер сам осуществляет форматирование содержимого Web-страницы: расставляет пробелы между словами и переносит текст на новую строку независимо от пробелов межу словами и переносов строк в исходном HTML документе.

Так же, как и в современных текстовых процессорах, структурной единицей текста в Web-странице является не строка, а абзац (Web-браузер сам осуществляет перенос строк абзаца). Чтобы в Web-страницах выделить абзацы, используется контейнер <p>…</p>. Содержимое абзаца помещается между начальным тегом <p> и конечным тегом </p>. Текст каждого абзаца начинается с новой строки и между абзацами выводится пустая строка.

Пример 4.3.4. Задание абзаца:

<p>Первый абзац Web-страницы</p>

Вывод этого абзаца в Web-странице имеет следующий вид:

Хотя использование закрывающего тега </p> не является, согласно спецификации HTML 4.01, обязательным, тем не менее, его рекомендуется использовать для завершения абзаца (в спецификации XHTML, как уже говорилось, все открывающие элементы должны иметь соответствующие закрывающие элементы).

Помимо общих атрибутов class, dir, id, lang, style и title в элементах заголовков и элементе p можно использовать атрибут align, задающий выравнивание в абзаце. Следует отметить, что в спецификации HTML 4.01 и в спецификации XHTML атрибут align объявлен устаревшим (вместо него рекомендуется использовать стили).

Иногда необходимо в нескольких идущих подряд заголовках или абзацах обеспечить одинаковое выравнивание. Для этого можно использовать контейнер <div>…</div>, в который можно поместить один или несколько элементов p. Для элемента div также можно задать атрибут align, но, как и в случае с элементами заголовков и абзаца, более удобным является использование стилей. Сам по себе элемент div не выполняет никаких действий и служит только для одинакового стилевого оформления нескольких блоковых элементов.

Как уже говорилось, Web-браузер сам форматирует текст. Для того, чтобы при выводе Web-страницы сохранить форматирование текста, приведенное в документе HTML, используется контейнер <pre>…</pre>. Обычно в Web-браузерах для вывода содержимого этого контейнера используется моноширинный шрифт (моноширинным шрифтом называется такой шрифт, все символы которого имеют одинаковую ширину). В этом элементе можно задавать только общие атрибуты class, dir, id, lang, style и title.

Пример 4.3.5. Задание элемента pre:

<pre>

Первая строка с сохранением форматирования.

Вторая строка с сохранением форматирования.

Третья строка с сохранением форматирования.

</pre>

Вывод этого фрагмента в Web-странице имеет следующий вид:

Для выделения на Web-страницы цитат и адресов служат два контейнера – <blockquote>…</blockquote> и <address>…<address>. В элементах blockquote и address можно задавать только общие атрибуты class, dir, id, lang, style и title. В Web-браузерах цитаты обычно выводятся с отступом слева, а адреса – курсивом.

Пример 4.3.6. Задание цитаты и адреса:

1. Цитата:

<p>Закон Паддера:</p>

<blockquote>Все, что хорошо начинается, кончается плохо. Все, что плохо начинается, кончается еще хуже.

</blockquote>

2. Адрес:

<p>Адрес абонента:</p>

<address>

Украина,

01053, Киев

ул. Ивановская, 27,

Иванов Иван Иванович

</address>

Вывод этих фрагментов в Web-странице имеет следующий вид:

Элементы blockquote и address в настоящее время практически не используются, поскольку адрес или цитата могут быть заданы с использованием элемента p и стилей.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: