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

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

• Собраний гиперссылок
• Коротких, не связанных иерархически фрагментов текста
• Выделения ключевых моментов презентации
Используйте упорядоченные списки для:
• Оглавлений
• Перечня предписаний
• Последовательных разделов текста
• Присоединения номеров к коротким фразам, на которые, возмож
но, придется где то сослаться
Используйте списки определений для:
• Словарей
• Создания маркеров элементов списка (поместите в тег <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>. Большинство броузеров снисходительно относятся к нарушению этого правила, но нельзя винить броузер, если в исключительных случаях он позволит себе следовать стандарту.