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

Встроенный стиль – это простейший способ применения стиля к тегу. Просто включите в тег атрибут style со списком свойств и их значений. Броузер использует их при выводе содержимого в соответствии с требованиями тега.

К примеру, следующий стиль предлагает отобразить текст заголовка уровня 1, «Я такой сииинииий!», применяя не только свойственные броузеру стилевые характеристики тега <h1>, но также синий цвет и курсив:

<h1 style=»color: blue; font style: italic»> Я такой сииинииий!</h1>

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

На самом простом уровне стиль – это не что иное, как правило, указывающее броузеру, как выводить содержимое какого то определенного HTML или XHTML-тега. У каждого тега есть ряд ассоциированных с ним стилевых свойств, значения которых определяют, как этот тег воспроизводится броузером. Правило приписывает определенное значение одному или нескольким свойствам тега. Например, большинство тегов имеют свойство color, значение которого определяет цвет, который современные GUI броузеры должны использовать при отображении содержимого тега. К числу других свойств относятся шрифт, интервал между строками, поля, рамки, громкость звука и тембр, которые будут детально рассмотрены ниже в этой главе.

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

Здесь мы обсудим основы синтаксиса каждого из трех типов таблиц стилей. А в конце главы остановимся на вопросах уместности употребления встроенных, документных и внешних таблиц стилей.

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

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

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

В начале 1996 года консорциум WorldWideWeb Consortium (W3C) собрал проектные разработки, определяющие каскадные таблицы стилей (CSS) для HTML. Этот проект быстро созрел до рекомендованного стандарта. В середине 1998 года W3C расширил изначальные спецификации и создал CSS2, который включил в себя стандарты представления для множества средств вывода информации, отличных от хорошо всем знакомых экранных броузеров, наряду с другими усовершенствованиями.

Консорциум W3C продолжает работать над младшей версией (2.1) и черновым проектом CSS3, но они пока не актуальны. Вообще, никакой современный броузер или другой веб клиент сети не отвечает вполне стандарту CSS2. Поскольку и так ясно, что согласие с детищем, предложенным W3C, будет в конце концов достигнуто, мы в этой главе за
тронем все компоненты стандарта CSS2. Как всегда, будет точно указано, что уже реально существует, что только предлагается и что в действительности поддерживается.

Используйте неупорядоченные списки для:

• Собраний гиперссылок
• Коротких, не связанных иерархически фрагментов текста
• Выделения ключевых моментов презентации
Используйте упорядоченные списки для:
• Оглавлений
• Перечня предписаний
• Последовательных разделов текста
• Присоединения номеров к коротким фразам, на которые, возмож
но, придется где то сослаться
Используйте списки определений для:
• Словарей
• Создания маркеров элементов списка (поместите в тег <dt> малень
кую пиктограмму)
• Любых списков вида имя/значение

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

Тег <dl>
Список определений заключен между тегами <dl> и </dl>. Внутри этого тега каждый элемент списка состоит из двух частей – термина и следующего за ним определения или объяснения. Вместо тега <li> для выделения элементов используется тег <dt> (содержащий термин) и следующий за ним тег <dd> (содержащий определение или объяснение).Если только вы не изменили характеристики отображения при помощи таблиц стилей, броузер будет выводить имя термина у левого края демонстрационного окна, а его определение ниже и с отступом. Если описываемый термин очень короткий (обычно не длиннее трех символов), броузер может поместить первую часть определения на той же строке.

<h3>Common Kumquat Parasites</h3>
<dl>
<dt>Leaf mites</dt>
<dd>The leaf mite will ravage the Kumquat tree, stripping it
of any and all vegetation.</dd>
<dt>Trunk dropsy</dt>
<dd>This microscopic larvae of the common opossum
chigger will consume the structural elements of the
tree trunk, causing it to collapse inward.</dd>
</dl>

Как и в списках других типов, можно увеличить расстояние между элементами, вставляя тег абзаца <p> или определяя для соответствующих тегов стили, задающие величину интервалов.

Тег <dt>
Этот тег устанавливает компонент, соответствующий термину списка определений. Он имеет смысл, только если находится в списке перед тегом <dd>, содержащим определение или объяснение термина.
Обычно определяемый термин, следующий за тегом <dt>, краток. Это слово или несколько слов. Формально он может иметь любую длину. Длинный термин броузер может продолжить за пределы окна или, разбив его на несколько частей, поместить окончание на ту же строку, где начинается определение.
Поскольку конец тега <dt> непосредственно предшествует началу соответствующего тега <dd>, пропуск </dt> не приведет к двусмысленности, и закрывающий тег не является обязательным в HTML документах.XHTML, однако, настаивает на его присутствии, поэтому привыкайте включать его в свои документы.

Тег <dd>
Тег <dd> отмечает начало описания в элементе списка определений. В соответствии со стандартами HTML 4 и XHTML тег <dd> может встречаться только внутри списка определений, непосредственно следуя за тегом <dt> и термином. Вслед за тегом <dd> идет определение или объяснение термина.

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

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

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

<ul>
<li>Morning Kumquat Delicacies
<ul>
<li>Hot Dishes
<ul>
<li>Kumquat omelet</li>
<li>Kumquat waffles
<ul>
<li>Country style</li>
<li>Belgian</li>
</ul>
</li>
</ul>
<li>Cold Dishes
<ul>
<li>Kumquats and cornflakes</li>
<li>Pickled Kumquats</li>
<li>Diced Kumquats</li>
</ul>
</li>
</ul>
</li>
</ul>

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

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

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

<ol type=»A»>
<li>A History of Kumquats
<ol type=»1″>
<li>Early History
<ol type=»a»>
<li>The Fossil Record</li>
<li>Kumquats: The Missing Link?</li>
</ol>
</li>
<li>Mayan Use of Kumquats</li>
<li>Kumquats in the New World</li>
</ol>
</li>
<li>Future Use of Kumquats</li>
</ol>

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

Атрибут type
Возможными значениями атрибута type в теге <li> являются те же значения, что используются для этого атрибута в тегах соответствующих списков: элементы неупорядоченного списка могут иметь типы circle (круг), square (квадрат) или disc (диск).

Будьте осторожны. В старых броузерах, таких как Netscape Navigator и Internet Explorer версии 4 и более ранних, изменение типа маркирования и нумерации одного элемента списка переносилось и на следующие за ним. Иначе обстоит дело с броузерами, поддерживающими стандарт HTML 4, такими как Netscape версии 6 и Internet Explorer версии 5 и более поздний, Firefox и Opera. Для них атрибут type действует локально
только на содержимое «своего» тега <li>. Стиль последующих элементов списка возвращается к принятому по умолчанию. Если вас это не устраивает, ставьте свои атрибуты type в последующие элементы списка.

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

<ol>
<li type=A>Changing the numbering type</li>
<li type=I>Uppercase Roman numerals</li>
<li type=i>Lowercase Roman numerals</li>
<li type=1>Plain ol’ numbers</li>
<li type=a>Doesn’t alter the order.</li>
<li> &lt; But, although numbering continues sequentially,</li>
<li> types don’t persist. See? I should’ve been a «g»!</li>
</ol>

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

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

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

HTML 3.2 ввел ряд средств для создания разнообразных упорядоченных списков. Можно изменять начальное значение и выбирать один из пяти различных стилей нумерации. Вот пример упорядоченного списка в XHTML:

<h3>Pickled Kumquats</h3>
Here’s an easy way to make a delicious batch of pickled ‘quats:
<ol>
<li>Rinse 50 pounds of fresh kumquats</li>
<li>Bring eight gallons white vinegar to rolling boil</li>
<li>Add kumquats gradually, keeping vinegar boiling</li>
<li>Boil for one hour, or until kumquats are tender</li>
<li>Place in sealed jars and enjoy!</li>
</ol>

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

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

Тег <li>
Вам должно быть уже совершенно ясно, что тег <li> определяет элемент списка. Этот универсальный тег применяется как в рассмотренных упорядоченных (<ol>) и неупорядоченных (<ul>) списках, так и в директориях (<dir>) и меню (<menu>).

В связи с тем, что завершение списка всегда может быть логически выведено из окружающей структуры документа, большинство авторов опускают тег </li>. В этом есть смысл, поскольку так легче добавлять, удалять и перемещать элементы списка. Тем не менее XHTML требует, чтобы закрывающий тег присутствовал, так что лучше включайте
его в документы.

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

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

Корректно написанные документы, полностью соответствующие стандартам HTML и XHTML, не должны допускать внутри упорядоченных или неупорядоченных списков, директорий и меню ничего, что не было бы заключено в тегах <li>. Большинство броузеров снисходительно относятся к нарушению этого правила, но нельзя винить броузер, если в исключительных случаях он позволит себе следовать стандарту.

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

Элемент заголовка <meta>
Познакомившись с уймой тегов заголовка, определяющих вид и связи документа, да еще таких, которыми большинство авторов не пользуются, впору было бы подумать, а не пора ли остановиться. А вот и нет!

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

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

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

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

<meta name=»keywords» content=»kumquats, cooking, peeling, eating»>

Если атрибут name отсутствует, имя для пары имя/значение берется из атрибута http-equiv.

Атрибут content
Атрибут content хранит компонент значения в паре имя/значение. Это может быть любая строка, которую необходимо заключить в кавычки, если она содержит пробелы. Атрибут content всегда определяется в паре либо с атрибутом name, либо с атрибутом http-equiv.
К примеру, можно поместить в документ имя автора, написав:

<meta name=»Authors» content=»Chuck Musciano & Bill Kennedy»>

Атрибут http-equiv
Атрибут http equiv хранит имя в паре имя/значение и предписывает серверу включить такую пару в MIME заголовок документа, передаваемый броузеру перед самим документом. Когда сервер посылает документ броузеру, он сначала отправляет несколько пар вида имя/значение. Хотя некоторые серверы могут передавать набор таких пар, как
минимум одну посылает каждый из них:

content type: text/html

Этот текст предупреждает броузер о скором прибытии HTML-документа. Когда тег <meta> применяется с атрибутом http equiv, сервер добавляет пары имя/значение в заголовок, описывающий содержимое файла, отправляемого броузеру. Например, следующий текст:

<meta http equiv=»charset» content=»iso 8859 1″>
<meta http equiv=»expires» content=»31 Dec 99″>

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

Атрибут charset
Internet Explorer версии 5 и более ранних явным образом поддерживает атрибут charset для тега <meta>. Присвойте атрибуту значение, являющееся названием набора символов, который должен употребляться в документе. Это не тот способ, который следует рекомендовать для определения выбранного набора. Мы советуем использовать вместо него атрибуты http-equiv и content, как в предыдущем примере.