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

Употребляйте тег <dfn> для выделения впервые появившихся в тексте
специальных терминов. Популярные броузеры обычно выводят текст
тега <dfn> курсивом. Впоследствии <dfn> поможет вам при составлении
индекса или словаря.

К примеру, используйте тег <dfn>, чтобы познакомить читателя с новым
термином:

Согласно результатам многолетних наблюдений, <dfn>спектроскопия кожуры</dfn>
может оказаться весьма полезной. Сравнение с ее помощью относительных уровней
содержания насыщенных гидрокарбонатов в плодах, снятых с соседних деревьев,
выявило, что спектроскопия кожуры оказалась эффективной в 87% случаев
для предупреждения водянки ствола у четырехлетних деревьев.

Заметьте, что мы выделили только первое вхождение «спектроскопии
кожуры» в тексте примера. Чувство стиля советует нам не засорять
текст излишней пестротой. Подобно другим тегам логической и физической
разметки, здесь справедливо правило: чем меньше, тем лучше. Как это
принято, особенно в технической документации, выделяйте новые
термины, когда они впервые вводятся, чтобы помочь читателю лучше
понять обсуждаемый вопрос, но воздержитесь от выделения этого
термина в дальнейшем.

Программисты привыкли к особому стилю представления своих исходных
кодов. Тег <code> создан для них. Он возвращает заключенный
в нем текст моноширинным шрифтом (как в пишущей машинке или
телетайпе), таким как Courier, знакомым большинству программистов
и читателей книжных издательств.

Следующий отрывок текста в теге <code> отображается моноширинным
шрифтом в результате работы Firefox.

The array reference <code>a[i]</code> is id
the pointer reference <code>*(a+i)</code>.

Тег <code> следует применять только для текста, который представляет
исходный код программы или другое содержимое, предназначенное
для машинного чтения. Обычно, когда тег <code> просто делает текст
моноширинным, подразумевается, что это исходный код программы,
и будущие броузеры сумеют добавить новые эффекты при его отображении.
К примеру, броузер программиста может искать сегменты в тегах <code>
и производить какое то дополнительное форматирование текста, типа
специального выделения отступами циклов и условных предложений.
Если единственный эффект, которого вы добиваетесь, состоит в выводе
текста моноширинным шрифтом, используйте тег <tt>. Если же вы хотите
представить код программы в виде четко отформатированного моноширинного
текста, пользуйтесь тегом <pre>.

Тег <acronym> означает, что заключенный в нем текст является акронимом – сокращением, составленным из первых букв каждого слова какого-то названия или фразы, например HTML или IBM. Как и в случае с тегом <abbr>, не все броузеры соответствующим образом отобразят текст в теге логической разметки <acronym>.

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

Тогда как другие системы обработки текста склонны к явному управлению
стилями и внешним видом, при использовании 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>