HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

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

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

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

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

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

Ряд тегов изменяют внешний вид текста и придают ему некий скрытый смысл.
В целом они могут быть разделены на две группы – теги физической и
логической разметки.

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

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

Вставить изображение в заголовок легко. К примеру, следующий
текст помещает пиктограмму «информация» в заголовок «For more information» («Дальнейшие справки»):

<h2>
<img src=»info.gif»>
For More Information</h2>

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

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

Заголовок может содержать любой элемент, допустимый в потоке тек
ста, включая слова и знаки препинания, гиперссылки (<a>), изображения
(<img>), теги новой строки (<br>), украшения шрифта (<b>, <i>, <tt>,
<strike>, <big>, <small>, <sup>, <sub> и <font>), а также компоненты
логической разметки (<acronym>, <cite>, <code>, <dfn>, <em>, <kbd>,
<samp>, <strong> и <var>). На практике, однако, изменения шрифта и стиля
в заголовке могут не оказывать действия, поскольку сам заголовок
предписывает броузеру изменение шрифта.

Раньше было принято ругать использование тегов заголовков для
управления размером шрифта во всем документе. Формально абзацы,
списки и другие «блочные» элементы не допускаются в заголовках
и могут быть ошибочно истолкованы броузером как обозначения их
конца. На практике большинство броузеров применяют стиль заголов
ка ко всем содержащимся в нем абзацам. Мы не одобряем такую практику,
поскольку она не только нарушает стандарты HTML и XHTML,
но как правило, безобразно выглядит. Представьте себе газету, напечатанную
одними заголовками!

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

Кроме того, мы настоятельно рекомендуем тщательно тестировать
свои страницы более чем на одном броузере и при нескольких различных
разрешениях. Можно ожидать, что ваш <h6> текст будет читаться
при разрешении 480×320, но пропадет при разрешении 800×600.

Большинство графических броузеров для представления заголовков
<h1>, <h2> и <h3> применяют более крупный шрифт, для заголовка
<h4> – такой же, как для отображения основного текста, и для заголовков
<h5> и <h6> – более мелкий. Авторы обычно используют последние
два размера для вывода стандартного текста, такого как уведомление
об авторских правах или отказ от ответственности. Хотя рекомендуется
применять стилевые правила, некоторые авторы употребляют мелкий
текст заголовков в оглавлении и в навигационной панели, расположенной
на главной странице сайта. Посмотрите, как типичный броузер выводит
информацию о защите авторских прав в следующем XHTML примере :

resulting in years of successful kumquat production
throughout North America.
</p>
<h6>This document copyright 2007 by the Kumquat Growers of
America. All rights reserved. </h6>
</body>
</html>

Тег <cite>, как правило, означает, что заключенный в нем текст является библиографической ссылкой, в частности названием книги или журнала.
Традиционно текст ссылки отображается курсивом.

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

Кроме того, тег <cite> обладает скрытой возможностью: он позволяет
автоматически выделять библиографию из документов. Легко вообразить
броузер, который автоматически создает таблицу ссылок, отображая их
в сносках или в виде отдельного материала. Семантика тега <cite> идет
гораздо дальше простого изменения внешнего вида охватываемого
текста, она позволяет броузеру представить содержимое тега
множеством полезных способов.

Впервые появившись в HTML 4.0, тег <abbr> («аббревиатура») указывает,
что заключенный в нем текст является сокращенной формой более длинного
слова или фразы. Броузер может использовать эту информацию для выбора
способа отображения заключенного в нем содержимого. Заметьте, мы сказали: «может». Не все популярные броузеры реагируют сейчас на текст, заключенный в тег <abbr>,
и мы не можем предсказать, как они будут его обрабатывать в будущем.

Разумно повторить название вашего документа в первом теге заголов
ка, поскольку оно не отображается в основном окне броузера, если было
определено в теге <head>.

Следующий HTML текст может служить хорошим примером пов
ния названия вашего документа в его заголовке и в теле:
<html>
<head>
<title>Выращивание кумкватов в Северной Америке</title>
</head>
<body>
<h3> Выращивание кумкватов в Северной Америке</h3>
<p>
Возможно, одним из самых привлекательных фруктов является…

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

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

Установив заголовок высшего уровня в документе, применяйте для
добавочных заголовков теги того же или более низкого уровня, обеспечивая структурированность документа и его читабельность. Если вы
выбрали третий уровень заголовка для названия документа, разбейте
текст на части с применением заголовков четвертого уровня. Если есть
необходимость в дальнейшем разбиении текста на подразделы, подумайте о том,
не использовать ли для названия документа заголовок второго уровня,
заголовок третьего уровня – для выделения разделов, а четвертого –
для подразделов.