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

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

Но, в отличие от большинства процессоров, HTML и XHTML явным об
разом применяют теги раздела <div>, абзаца <p> и конца строки <br> для
управления выравниванием и потоком текста. Возврат каретки, хотя
и очень полезный для удобства чтения, обычно игнорируется броузе
ром, и авторы должны применять тег <br>, чтобы явно указать конец
строки. Тег <p>, который также вызывает переход на следующую стро
ку, несет в себе дополнительный смысл помимо возврата каретки.

Тег <div> несколько отличается от тегов <p> и <br>. Включенный впер
вые в стандарт HTML 3.2, он был задуман, чтобы служить простым
средством организации текста и разбивать документ на отдельные кус
ки. В силу смысловой неопределенности этого тега он оставался непо
пулярным. Но последние нововведения (атрибуты выравнивания и сти
лей, а также атрибут id для организации ссылок и автоматической об
работки) позволяют теперь яснее помечать отдельные фрагменты доку
мента, придавая им особый характер, равно как и управлять их
внешним видом. Эти возможности придали тегу <div> новый смысл и
стимулировали его использование.

Присваивая атрибутам id и class имена в разных секциях документа,
разграниченных тегами <div id=name> (так поступают и с дру
гими тегами, например с <p>), вы не только помечаете их для последую
щего обращения к ним при помощи гиперссылок или для автоматиче
ской обработки и поддержки (в частности, составления списка библио
графических данных по разделам), но можете также определить явно
различающиеся стили для этих частей документа. К примеру, можно
ввести класс разделов, содержащих аннотацию к документу (скажем,
<div >), другой класс – для основного текста, третий –
для заключения и четвертый – для библиографии (<div>).

Затем каждому классу может быть присвоен собственный способ ото
бражения как на уровне документа, так и с помощью внешней присое
диненной таблицы стилей: аннотация выводится с отступом и курсивом
(скажем, div.abstract {left margin: +0.5in; font style: italic}); основ
ной текст – выровненным по левому краю прямым шрифтом; заключе
ние – так же, как аннотация; библиография – с применением автомати
ческой нумерации и подходящим образом отформатированная.

Тег <blink>
Текст, содержащийся между тегом <blink> и его закрывающим тегом
</blink>, мерцает. Firefox, например, просто раз за разом меняет местами
цвет шрифта и цвет фона для заключенного в теге текста. Ни HTML, ни
XHTML не включают в себя <blink>. Первоначально он поддерживался
в качестве расширения только в версиях Netscape Navigator до шестой.
В версии 6 от него отказались, но потом он был восстановлен в версии 7
и последующих. Opera and Firefox тоже поддерживают его, и только
Internet Explorer игнорирует. Игнорируйте и вы. Мерцающий текст
сначала привлекает внимание читателя, но затем быстро надоедает, не
обещая ничего, кроме бесконечного раздражения. Забудьте о нем.

Тег <s>
Тег <s> – это сокращенная форма тега <strike>, поддерживаемая всеми
современными броузерами, несмотря даже на то, что она объявлена
устаревшей в HTML 4 и XHTML. Не пользуйтесь тегом <s>. Рано или
поздно он уйдет.

Тег <strike>
Большинство броузеров выводят текст, заключенный между тегом
<strike> и его закрывающим тегом </strike>, с добавлением горизонтальной
линии, проходящей сквозь буквы (зачеркивают текст). Подразумевается,
что это редакционная пометка, предлагающая читателю игнорировать
вычеркнутый текст, как напоминание о временах, предшествовавших
изобретению коррекционной ленты. Редко где вы встретите этот тег сегодня:
он признан нежелательным в HTML 4 и XHTML, как раз на расстоянии
одного шага до полного исключения из стандарта.

Тег <u>
Этот тег говорит броузеру, чтобы тот подчеркнул текст, содержащийся
между <u> и </u>. Подчеркивание состоит в том, что под текстом, включая
пробелы между словами и знаки препинания, проводится сплошная черта.
Этот тег признан нежелательным в HTML 4 и XHTML, но популярные
броузеры поддерживают его. Такой же эффект может быть достигнут с
применением таблиц стилей.

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

<cite><em>Deviant Style</em></cite>

На практике, многоуважаемый доктор Франкенштейн, броузер обычно
проигнорирует вашего монстра. Как нетрудно убедиться, набрав и
протестировав приведенный пример, Моби Дик будет цитатой без всякого
подчеркивания.
Стандарты HTML и XHTML не требуют от броузера поддержки всех
возможных комбинаций логических стилей и не определяют, как он
должен обращаться с такими комбинациями. Может быть, когда-ни-
будь… Пока же лучше выбрать один тег.

Подобно тегу <em>, тег <strong> используется для более выраженного
логического подчеркивания текста. Броузеры обычно отображают теги
<strong> и <em> различным образом, выводя, как правило, текст
в <strong> полужирным шрифтом (в отличие от курсива), так что
пользователи могут их различать. К примеру, в следующем тексте
подчеркнутое с помощью <em> «never» выводится в броузере Opera
курсивом, тогда как выделенное тегом <strong> слово «forbidden»
отображается жирными буквами.

One should <em>never</em> make a disparaging remark
about the noble fruit. In particular, mentioning
kumquats in conjunction with vulgar phrases is
expressly <strong>forbidden</strong> by
the Association bylaws.

Если здравый смысл подсказывает, что тег <em> должен употребляться
скупо, то тег <strong> должен появляться в тексте еще реже. Текст
в <em> похож на возглас. Текст в <strong> – это вопль. Подобно тому как
ярко звучит хорошо подобранный эпитет в устах обычно молчаливого
человека, употребленный по особенному случаю, <strong> будет замечен
и оценен.

Тег <em> сообщает броузеру, что его содержимое должно быть отображено
с визуальным выделением. Почти для всех броузеров это означает, что
текст будет выведен курсивом. К примеру, популярные броузеры выделят
курсивом слова «всегда» и «никогда» в следующем исходном HTML/XHTML
тексте:

Те, кто выращивают кумкваты, должны <em>всегда</em> называть их не
иначе как «благородный фрукт», но <em>никогда</em> – просто «фрукт.»

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

Хотя он и отображается всегда курсивом, тег <em> намекает на многое,
и броузеры завтрашнего дня, возможно, научатся воспроизводить его
с разными спецэффектами. Тег <i> прямо требует выделить текст курсивом;
применяйте его, если вам нужен именно курсив. В качестве альтернативы
вы можете включить в документ каскадные определения стилей.

Кроме постановки логического ударения подумайте о возможности
использования <em> при введении нового термина или постоянного стиля,
ссылающегося на определенный круг объектов или понятий. К примеру,
один из стилей в книгах O’Reilly предназначен для обозначения
имен файлов и устройств. Тег <em> можно применять (в отличие от простого
курсива) для акцентирования внимания на терминах.

Употребляйте тег <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 не определяют формат для
каждого из тегов логической разметки, требуя только, чтобы их отображение
отличалось по виду от основного текста в документе. Стандарты не настаивают
даже на том, чтобы логические стили были различно отражены на экране.
На практике вы обнаружите, что многиеиз этих тегов связаны очевидным родством
с типографскими обозначениями, обладая схожими значениями и обликом и
отображаясь одними и теми же стилями и шрифтами большинством броузеров.