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

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

Вложенные неупорядоченные списки
Элементы в каждом новом вложенном списке могут маркироваться по-своему, это зависит от броузера. К примеру, 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, как в предыдущем примере.

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

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

Недостаток карт со стороны сервера заключается, очевидно, в том, что для них необходим сервер. Это означает, что нужен доступ к http серверу или его каталогу /cgi-bin, а такими правами обычно обладают только владельцы и системные администраторы. Вдобавок карты, обрабатываемые со стороны сервера, ограничивают переносимость, так как не все программы, обслуживающие карты, работают одинаково.

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

С клиентскими картами не связано ни одно из этих затруднений. Создаваемые при помощи атрибута usemap тега <img> и определяемые специальными тегами расширений <map> и <area>, карты со стороны клиента позволяют авторам включать в их документы описания чувствительных областей изображения и ассоциированных с ними ссылок.
Броузер на компьютере клиента преобразует координаты мыши в некоторое действие, например в загрузку и отображение другого документа. При этом ряд предназначенных для работы с JavaScript атрибутов позволяет осуществить разнообразные эффекты для карт со стороны пользователя.

Для создания карты со стороны клиента включите в тег <img> атрибут usemap. Его значением должен быть URL сегмента <map> в HTML или XHTML документе, содержащий координаты на карте и соответствующие URL гиперссылок. Часть URL, указывающая на документ, сообщает, где содержится описание карты. Идентификатор фрагмента в URL сообщает, какое из описаний должно быть использовано. Чаще всего
описание карты содержится в том же документе, где и само изображение, и URL сводится к идентификатору фрагмента – значку решетки (#), за которым следует имя <map>-сегмента.

К примеру, следующий фрагмент исходного документа сообщает броузеру, что изображение map.gif – это карта со стороны клиента и что координаты чувствительных областей и соответствующее URL содержатся в <map>-фрагменте текущего документа:

<img src=»pics/map.gif» usemap=»#map»>

Изображение вставляется в якорь просто помещением тега <img> в тело тега <a>. В карту такое вложенное изображение превращается при добавлении в тег <img> атрибута ismap. Этот атрибут сообщает броузеру, что изображение представляет собой карту, содержащую более чем одну ссылку. (Броузер игнорирует атрибут ismap, если тег <img> не вложен в тег <a>.)

Когда пользователь щелкает мышью где то на изображении, броузер передает координаты указателя мыши по URL, указанному в теге <a>, серверу документа. Сервер рассматривает координаты указателя мыши, чтобы решить, какой документ отправить броузеру в ответ.

При использовании атрибута ismap атрибут href соответствующего тега <a> должен содержать URL приложения на сервере или для некоторых HTTP серверов ассоциированный с картой файл, содержащий информацию о координатах и ссылках. Если в href указан URL обычного документа, результатом может быть ошибка и нужный документ, вероятнее всего, не будет получен.

Координаты положения мыши представляют собой измеренные в пикселах расстояния, отсчитанные от левого верхнего угла изображения, принимаемого за (0, 0). Координаты дописываются в конец URL после вопросительного знака.

К примеру, если пользователь щелкнул мышью на 43 пиксела правее и на 15 пикселов ниже верхнего левого угла изображения, представляющего следующую гиперссылку:

<a href=»/cgi bin/imagemap/toolbar.map»>
<img ismap src=»pics/toolbar.gif»>
</a>

броузер пошлет HTTP серверу такие параметры поиска:

/cgi bin/imagemap/toolbar.map?43,15

В приведенном примере toolbar.map – это специальный файл карты в каталоге cgi-bin/imagemap, содержащий связь между координатами и ссылками. Специальный процесс обработки карты применяет этот файл, чтобы узнать, какой гиперссылке соответствуют переданные координаты (в нашем случае (43, 15)), и вернуть соответствующий до
кумент.

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

Стандарты HTML и XHTML предоставляют возможность разместить несколько ссылок над одним изображением. Щелчок мышью в разных местах объекта вызывает переход броузера к различным документам. Такие изображения, известные как карты, открывают широкий простор для творчества.

Существуют два типа карт: серверная карта и клиентская карта. Первый тип используется, когда применяется атрибут ismap тега <img>, и требует доступа к серверу и программным приложениям на нем, отрабатывающим информацию, связанную с картой. Другой способ запускается при включении в тег <img> атрибута usemap и применении тегов <area> и <map>.

Поскольку преобразование положения мыши на изображении в ссылку на другой документ происходит на машине пользователя, карты, работающие на стороне клиента, не требуют особого соединения с сервером и могут осуществляться даже без сети на локальном диске или с коллекцией документов на CD-ROM. Любой HTML/XHTML-код может реализовать клиентскую карту (usemap).