1.6 Классификация элементов. - HTML - Каталог статей

Друзья сайта

Сайт для программиста.

Сайт о заработке в интернете.

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Главная » Статьи » HTML

1.6 Классификация элементов.

Набор элементов XHTML очень разнообразен. Для того, чтобы упорядочить наши будущие знания об элементах и их специфике, необходимо как нибудь их классифицировать. Именно этим мы и займемся в данном разделе урока.

Элементы блочной и линейной разметки

По способу форматирования содержимого элементы XHTML можно разделить на блочные и линейные. Грубо говоря, блочные элементы используются для выделения больших структурных блоков в тексте, таких как абзацы или заголовки. Линейные же элементв служат для выделения фрагментов текста внутри этих блоков. Для примера: абзац ("p") - блочный элемент, выделение текста жирным ("b") или курсивным ("i") начертанием - линейные элементы.

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

Листинг №1.6.1: Простой пример блочной разметки
... <body> <p>Первый абзац.</p> <p>И второй абзац.</p> </body> ...

Обе фразы предыдущего примера будут выведены c новой строки.

Принципы разбиения текста на блоки

Любой сложный многоуровневый документ можно разбить на разделы. Раздел принято начинать заголовком. Это будет первый уровень разбиения. Каждый раздел, в свою очередь, можно поделить на более мелкие структурные единицы - подразделы (второй уровень). И так далее. Наименьшей структурной единицей блочной разметки текста является абзац.

Ниже представлена графическая структура разметки сложного многоуровневого документа:

Рис. №1.6.1. Графическая структура разметки сложного многоуровневого документа

На рисунке разделы документа - виртуальные, в общем то, сущности - отмечены пунктиром.

Как же реализовать такую структурную разметку в терминах XHTML? Для этой цели используются следующие элементы:

<h1>, <h2>, ... , <h6> - элементы заголовков с первого по шестой уровень
<p> - абзац.

Абзац. Элемент "p"

Элемент <p> создает абзац в документе. Наличие закрывающего тэга является обязательным. Помимо стандартного набора атрибутов, элемент <p> может содержать атрибут align - выравнивание. Внимание: использование атрибута align считается устаревшим и заменяется стилем CSS, однако, для общего развития и сравнения мы, все же, его рассмотрим:

<p align="выравнивание"> ... </p>

Атрибут align может принимать такие значения:

left - по левой стороне (по умолчанию)
right - по правой стороне
center - по центру
justify - по ширине; последняя строка выравнивается по левой стороне

Заголовки. Элементы "h1" ... "h6"

Существует возможность выделять до шести уровней заголовка: с 1го по 6й. Заголовок 1го уровня - <h1> - является наиболее значимым и отображается большим по размеру шрифтом. Соответственно, заголовок 6го уровня - <h6> - наименее значим (ниже только абзацы...) и отображается шрифтом наименьшим по размеру.

Как и элемент <p>, помимо общего набора атрибутов, заголовки могут использовать устаревший атрибут align для выравнивания текста заголовка относительно страницы. Поддерживаются те же значения выравнивания (left, right, center, justify).

Обработка пробельных символов. Элемент "pre"

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

Суть предварительной обработки состоит в следующем: несколько идущих подряд символов пробела или табуляции "сворачиваются" в один пробел; все символы "перевод строки и возврат каретки" (Enter) удаляются. Исключением является только ,преформатированный текст (см. ниже).

Таким образом, следующая фраза

<p>
Эта фраза
 будет выведена одной
строкой с одним пробелом между
каждым
словом! 
</p>

... в браузере будет выглядеть вполне обычной:

Эта фраза будет выведена одной строкой с одним пробелом между каждым словом!

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

Лучшим выходом может являться использование элемента <pre> - preformated, преформатированный. Этот элемент выводит свое содержимое на страницу с сохранением исходного форматирования текста.

Например:

<pre>
 Элемент pre сохраняет исходное 
 форматирование фрагмента текста.

 [Из справочника по XHTML]
</pre>

В результате получим:

 Элемент pre сохраняет исходное 
 форматирование фрагмента текста.

 [Из справочника по XHTML]

Линейные элементы.

Линейные элементы обладают, скажем так, меньшей сферой влияния по сравнению с блочными. Их можно использовать, например, для выделения фрагмента усиленного значения, некоторой фразы или слова в текстовом блоке. К примеру, важность слов "Первый" и "второй" в следующем примере, подчеркивается элементом strong и отображаться они будут полужирным начертанием:

Листинг №1.6.2: Простой пример линейной разметки
... <body> <p><strong>Первый</strong> абзац.</p> <p>И <strong>второй</strong> абзац.</p> </body> ...
.

Линейные элементы могут свободно размещаться в одной строке и вкладываться друг в друга.

По принципу разметки информации, линейные элементы можно разделить на следующие два типа:

элементы физического форматирования
элементы логического форматирования

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

Примечание: Факт отсутствия визуального эффекта не должен вас беспокоить. В дальнейшем его можно добиться с помощью стилей CSS.

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

Элементы физического форматирования

<b> - элемент, выделяющий содержимое полужирным шрифтом. Специальные атрибуты отсутствуют.

Пример применения:

<p>Иногда что-то необходимо <b>выделить</b> из общего текста...</p>

<i> - элемент, выделяющий содержимое курсивом. Специальные атрибуты отсутствуют.

Пример применения:

<p>Иногда что-то необходимо <i>выделить</i> из общего текста...</p>

<u> - элемент, позволяющий выводить текст подчеркнутым. Специальные атрибуты отсутствуют. Данный элемент является устаревшим!

Пример применения:

<p>Иногда что-то необходимо <u>подчеркнуть</u>...</p>

<s> или <strike>- элементы, позволяющий выводить текст перечеркнутым. Специальные атрибуты отсутствуют. Данные элементы являются устаревшими!

Пример применения:

<p>Иногда что-то необходимо <s>зачеркнуть</s>...</p>

<big> - элемент, позволяющий выводить текст шрифтом больше базового. Специальные атрибуты отсутствуют.

Пример применения:

<p>Иногда что-то необходимо <big>выделить</big> из общего текста...</p>

<small> - элемент, позволяющий выводить текст шрифтом меньше базового. Специальные атрибуты отсутствуют.

Пример применения:

<p>Иногда что-то необходимо <small>выделить</small> из общего текста...</p>

<sub> - элемент, позволяющий выводить текст как нижний индекс (со смещением вниз от базовой линии). Специальные атрибуты отсутствуют.

Пример применения:

<p>Иногда что-то необходимо <sub>выделить</sub> из общего текста...</p>

<sup> - элемент, позволяющий выводить текст как верхний индекс (со смещением вверх от базовой линии). Специальные атрибуты отсутствуют.

Пример применения:

<p>Иногда что-то необходимо <sup>выделить</sup> из общего текста...</p>

<tt> - элемент, позволяющий выводить текст моноширным шрифтом (все символы имеют одинаковую ширину знакоместа). Специальные атрибуты отсутствуют.

Пример применения:

<p>Иногда что-то необходимо <tt>выделить</tt> из общего текста...</p>

Вы можете просмотреть, как приведенные элементы выглядят в браузере, воспользовавшись этой ссылкой: samples/example_1.6.3.html.

Для достижения комбинированного эффекта при форматировании (например - создания полужирного подчеркнутого курсива) можно вкладывать элементы друг в друга:

<p>Иногда что-то необходимо <b><i><u>выделить</u></i></b> из общего текста...</p>

В примере выше слово "выделить" бутет выведено полужирным подчеркнуым курсивом.

Элементы логического форматирования

<abbr>, <acronym> - элементы, идентифицирующие выделенный текст как аббревиатуру. Специальные атрибуты отсутствуют. Рекомендуется добавлять атрибут title для расшифровки значения аббревиатуры. Визуальный эффект форматирования по умолчанию отсутствует.

Пример применения:

<p><acronym title="World Wide Web Consortium">W3C</acronym> - международная 
организация, занимающаяся стандартизацией языков разметки.</p>

<address> - применяется для идентификации автора документа и указания адреса автора. Сюда же обычно помещаются и сведения об авторских правах, а также дата создания и последней модификации документа. Тег применяется обычно вначале или/и в конце документа. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

Пример применения:

<p><address>&copy; Артемов АН, 2004г. http://alexart.od.ua</address></p>

<cite> - элемент, идентифицирующий выделенный текст как цитату или ссылку на другой содержащий ее ресурс. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

Пример применения:

<p>Как сказал Марк Твен, <cite>"Бросить курить достаточно легко. 
Лично я проделывал это неоднократно..."</cite></p>

<code> - элемент, идентифицирующий выделенный текст как фрагмент программного кода. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается моноширным шрифтом.

Пример применения:

<p><code>if (a*10 == b) printf ("%d", a);</code></p>

<dfn> - элемент, используемый для выделения первого появления некоторого термина в документе. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

Пример применения:

<p><dfn>Абзац</dfn> - это блок текста, отмеченный элементом "р".</p>

<em> - emphasis (акцент). Используется для акцентирования внимания на некотором фрагменте текста. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

Пример применения:

<p><em>Абзац</em> - это блок текста, отмеченный элементом "р".</p>

<strong> - используется для обозначения фрагмента текста усиленной важности. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается полужирным начертанием.

Пример применения:

<p><strong>Абзац</strong> - это блок текста, отмеченный элементом "р".</p>

Резюме

Как можно заметить, некоторые элементы отличаются лишь названиями, форматируя свое содержимое одинаково (а то и вообще не форматируя). Используя стилевые правила CSS, вы сможете самостоятельно задать внешний вид любого элемента.

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 3000 | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]