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

Создание гиперссылки внутри одного и того же документа или на определенный фрагмент другого документа распадается на две части. Сначала надо создать фрагмент, который сможет служить целью гиперссылки, а затем – гиперссылку на фрагмент.

Для того чтобы снабдить фрагмент идентификатором, предназначен тег <a> с атрибутом name. Вот пример:

<h3><a name=»Section_7″>Раздел 7</a></h3>

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

<h3 id=»Section_7″>Раздел 7</h3>

Гиперссылка на фрагмент записывается при помощи тега <a> с атрибутом href, при этом значение атрибута – URL цели гиперссылки – заканчивается именем фрагмента, перед которым ставится знак решетки (#). Ссылка на идентификатор фрагмента из предыдущего примера может выглядеть так:

Смотрите <a href=»index.html#Section_7″>Раздел 7</a> для дополнительной информации.

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

Документ, выбранный нами в качестве образца, восхваляет жизнь и деяния могучего кумквата. Материал очень большой и сложный, включает в себя много интересных разделов и подразделов. Это документ, который надо читать и перечитывать. Чтобы поклонники кумкватов всего мира могли быстро находить интересующие их темы, мы
вставили идентификаторы фрагментов в заголовки всех главных разделов и поместили их упорядоченный список – оглавление, снабженное гиперссылочным механизмом, – в начало каждого документа библиотеки «Поклонников кумквата». Ниже приведен пример с образцами идентификаторов фрагментов. Многоточие (…) означает, конечно, что пропущен кусок содержимого:

…
<h3>Table of Contents</h3>
<ol>
<li><a href=»#soil_prep»>Подготовка Почвы</a>
<li><a href=»#dig_hole»>Рытье ям</a>
<li><a href=»#planting»>Посадка деревьев</a>
</ol>
…
<h3 id=soil_prep>Подготовка Почвы</h3>
…
<h3 id=dig_hole>Рытье ям</h3>
…
<h3 id=planting>Посадка деревьев</h3>
…
Поклонник кумквата может, таким образом, щелкнуть на понравившейся ему гиперссылке в оглавлении и прямо перескочить к интересующему его разделу, что позволяет избежать скучного пролистывания документа.

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

Используйте HTML/XHTML тег <a> для включения гиперссылок на другие источники и для создания в документах идентификаторов фрагментов.

Тег <a>
Чаще всего тег <a> будет применяться с атрибутом <href> для создания гипертекстовых ссылок или гиперссылок на другие места в том же документе или на иные документы. В таких случаях документ, в котором помещена гиперссылка, – это источник ссылки, а значение атрибута href, URL, – это цель.

Другой способ использования тега <a> состоит в применении атрибута name, чтобы отметить в документе цель гиперссылки или идентификатор фрагмента. Этот прием, хотя и является частью стандартов HTML 4 и XHTML, постепенно уступает место использованию атрибута id, с помощью которого можно пометить в качестве целей гиперссылок практически любой элемент, включая абзацы, разделы, формы и т. д.

Стандарты позволяют применять атрибуты href и name вместе в одном теге <a>, определяя в текущем документе ссылку на другой документ и идентификатор фрагмента. Мы рекомендуем так не делать, поскольку это нагружает один тег множеством функций, и некоторые броузеры, возможно, не сумеют в нем разобраться. Вместо этого используйте, если возникнет такая нужда, два тега <a>. Ваш исходный текст будет легче читать и модифицировать, и он будет лучше работать с большим числом броузеров.

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

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

Простой тег <a>, ссылающийся на другой документ, может выглядеть так:
The <a href=»http:growing_season.html»>growing season</a> for kumquats in the Northeast.

Отметьте, что фразу «growing season» броузер отображает специальным образом, давая читателю понять, что это ссылка на другой документ. Кроме того, пользователи обычно имеют возможность установить цвет, которым отображаются ссылки до и после употребления. Например, синяя изначально и лиловая после того, как она была хотя
бы раз использована.

Более сложные якоря могут включать в себя изображения:

<ul>
<li><a href=»pruning_tips.html»>
<img src=»pics/new.gif» align=center>
New pruning tips!</a>
<p>
<li><a href=»xhistory.html»>
<img src=»pics/new2.gif» align=center>
Kumquats throughout history</a>
</ul>

Большинство графических броузеров, таких как Internet Explorer (но не Opera), рисует вокруг изображений, являющихся частью якоря, специальную рамочку. Удалить эту рамку гиперссылки можно при помощи присвоения значения 0 атрибуту border тега <img>.

Порт – это номер коммуникационного порта сервера, через который подключается броузер клиента. Это понятие из области сетевых протоколов: серверы исполняют много различных функций – помимо предоставления веб документов и других веб ресурсов броузерам клиентов они отправляют и получают электронную почту, осуществляют пе
редачу документов с помощью FTP, работают в локальной сети и т. д. Хотя весь поток информации, связанной с этой деятельностью, может передаваться по одному кабелю, он обычно подразделяется на программно управляемые «порты», каждый из которых пропускает через себя сообщения, соответствующие его специализации. Это похоже
на абонентские ящики в местном отделении связи.

По умолчанию для веб серверов используется порт 80. Для защищенной передачи данных – Secure HTTP (SHTTP) или Secure Socket Layer (SSL) – употребляется порт 443. В настоящее время большинство веб-серверов применяют порт 80. Вы должны включить номер порта вместе с непосредственно предшествующим ему двоеточием в URL, если
указанный в нем сервер не использует восьмидесятый порт для коммуникаций в сети.

Когда сеть находилась в младенчестве, ее пионеры осуществляли свои «необузданные» (Wild Wild Web, сильно одичавшая паутина) соединения по самым разным номерам портов. Из технических представленийи соображений безопасности необходимы полномочия системного администратора, чтобы установить сервер на восьмидесятый порт. Не обладая таким уровнем ответственности, веб мастера прошлого выбирали другие, более доступные номера портов.

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

Сервер – это компьютерная система, хранящая и выдающая по внешнему запросу веб ресурс и обладающая уникальным в Интернете IP-адресом. Мы подозреваем, что в своих URL вы будете чаще пользоваться не IP-адресами, состоящими из особой последовательности цифр, а соответствующими этим адресам именами серверов, которые легче запоминаются.

Имя состоит из нескольких частей, включая собственное имя сервера и последовательность доменных имен, отделенных друг от друга точками. Типичное имя в Интернете выглядит как www.oreilly.com или hoohoo.ncsa.uiuc.edu.

Стало уже традицией, что веб мастера именуют свои серверы www для создания простого и ясного идентификатора в сети. К примеру, O’Reilly Media имеет сервер с именем www, который вместе с доменным именем издательства становится легко запоминаемым веб сайтом www.or-eilly.com. Подобным образом MobileRobots располагает сервером с именем www.mobilerobots.com. Являясь некоммерческой организацией, консорциум World Wide Web Consortium имеет сервер с другим домен
ным суффиксом: www.w3c.org. Традиционный способ формирования имен дает очевидные выгоды, которыми вам тоже следует воспользоваться, если придется создавать веб-сервер для своей организации.

Вы также можете указать адрес сервера, применяя его IP адрес. Он представляет собой последовательность четырех разделенных точками чисел, от 0 до 255 каждое. Реальный IP-адрес выглядит примерно так: 137.237.1.87 или 192.249.1.33.

Было бы скучно теперь рассказывать, что обозначает каждое число или как, зная доменное имя, вычислять IP адрес, тем более, что вам редко, если вообще когда нибудь, придется использовать их в URL. Лучше здесь поместить гиперссылку: возьмите какое-нибудь хорошее руководство в области интернет технологий, чтобы получить строгое изложение IP адресации, такое как «The Whole Internet User’s Guide and Catalog» (Общее руководство и каталог для пользователей Интернета) Эда Крола (Ed Krol) (O’Reilly).

Другая распространенная форма относительного URL не содержит ведущего слэша и одного или нескольких названий каталогов в начале пути к документу. Каталог базового URL автоматически подставляется на место опущенных компонентов. Это самое распространенное сокращение, поскольку большинство авторов размещают свои собрания
документов и подкаталоги со вспомогательными ресурсами в каталоге с тем же путем, что и у домашней страницы. У вас, например, может существовать подкаталог special, содержащий FTP файлы, на которые ссылается документ. Допустим, абсолютный URL этого документа таков:

http://www.kumquat.com/planting/guide.html

Относительный URL файла README.txt в подкаталоге special такой:

ftp:special/README.txt

В действительности вы запрашиваете:

ftp://www.kumquat.com/planting/special/README.txt

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

При помощи относительного URL вы указываете сокращенный адрес документа, который, автоматически комбинируясь с «базовым адресом», становится полным адресом документа. В относительном URL любой его компонент может быть опущен. Броузер автоматически заполняет все пропущенные элементы относительного адреса, используя
соответствующие компоненты базового URL. Этот базовый URL обычно является URL документа, содержащего относительный URL, но может быть и другим, определенным в документе при помощи тега <base>.

В дополнение к неотображаемым символам вам придется также использовать коды, вставляя в URL зарезервированные и небезопасные символы.

Зарезервированными называются символы, имеющие в самом URL специальный смысл. Наклонная черта, к примеру, в URL служит для отделения друг от друга элементов пути. Если нужно включить в поле URL символ наклонной черты, который не должен служить разделителем элементов, следует закодировать его последовательностью %2F:

http://www.calculator.com/compute?3%2f4

Этот URL ссылается на ресурс, именуемый compute, на сервере www.calculator.com и передает ему строку 3/4, предваренную вопросительным знаком (?). Предположительно, ресурс представляет собой программу со стороны сервера, производящую над переданным значением некоторые арифметические действия и возвращающую результат.

Небезопасными являются символы, которые, хотя и не имеют специального значения в URL, могут иметь особый смысл в контексте, включающем указатель ресурса. К примеру, URL, являющийся значением атрибута некоего тега, выделяется двойными кавычками (»"). Если бы вам случилось включить в URL двойные кавычки как таковые, то, вероятно, броузер оказался бы в замешательстве. Вместо этого, во избежание возможных конфликтов, следует закодировать символ двойной кавычки последовательностью %22.

В целом, применять коды символов следует всегда, когда есть сомнение, допустимо ли их помещать в URL. Мы советуем кодировать все, что не является цифрой, буквой или одним из символов: $ – _ . + ! * ‘ ( ). Кодирование символа не является ошибкой, если только он не имеет специального значения в URL. В частности, закодировав слэши в URL, вы заставите броузер думать, что это обычные символы, а не разделители элементов пути, что приведет к разрушению URL. Аналогичным образом кодирование амперсанда, используемого в качестве разделителя параметров в URL адресе, аннулирует это его предназначение. Записывайте амперсанды в форме &amp;, и вы достигнете своей цели.

Записывайте URL, применяя отображаемые элементы набора симво
лов US-ASCII. Вот пример простого URL:
http://www.bla-bla-bla.com
Если нужно включить в URL символ, не являющийся элементом набора US ASCII, то придется использовать его кодировку с помощью специальных обозначений. Код символа заменяет нужный символ тремя: знаком процента и двумя шестнадцатеричными цифрами, значение которых соответствует номеру символа в наборе ASCII.

Все это проще, чем кажется. Один из самых обычных специальных символов, пробел (пользователям Macintosh следует отметить это для себя особо), имеет своим номером в ASCII шестнадцатеричное3 число 20. Нельзя вставить пробел в URL (то есть можно, но ничего хорошего из этого не выйдет). Замените его в URL на %20: http://www.kumquat.com/new%20pricing.html
Данный URL позволяет получить документ new pricing.html с сервера
www.kumquat.com.

Каждый документ в Сети имеет уникальный адрес. (Вообразите-ка себе тот хаос, который бы непременно возник, если бы этого не было.) Адресом документа называют URL – универсальный указатель ресурсов (Uniform Resource Locator).

Несколько HTML/XHTML тегов имеют атрибуты, принимающие URL в качестве значений. Среди них – гиперссылки, встроенные изображения, формы. Все они используют один и тот же синтаксис URL для определения местоположения сетевого ресурса независимо от его типа и содержимого. Вот почему в его название входит слово uniform (унифицированный).

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

scheme:scheme_specific_part

Здесь scheme (схема) описывает тип объекта, на который указывает URL, а scheme_specific_part – это специфичная для каждой схемы часть. Необходимо отметить, что scheme всегда отделяется от scheme_specific_part двоеточием без пробелов между ними.

Фундаментальное свойство гипертекста состоит в том, что он позволяет связывать документы гиперссылками. Можно указать на определенное место внутри текущего документа, внутри какого то другого, хранящегося в локальном собрании, или внутри документа, находящегося где либо в Интернете. Документы превращаются в точки пересечения нитей информационной паутины. (Понимаете теперь, откуда взялась Всемирная паутина?) Документ, на который нацелена гиперссылка, обычно имеет какое то отношение к источнику ссылки и обогащает его содержание; элемент-носитель гиперссылки в исходном документе должен доносить до читателя эту связь.

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

Кроме того, гиперссылки указывают читателю источники дополни тельной информации по упомянутой теме, например «За дополнительными сведениями обращайтесь к „Кумкватам на параде“». Авторы используют гиперссылки, избегая повторения информации. В частности, мы рекомендуем подписывать все свои документы. Вместо того чтобы включать полную контактную информацию в каждый документ, свяжите гиперссылкой свое имя с одним единственным местом, содержащим ваш адрес, номер телефона и т. д.

Гиперссылки, или, как их обычно называют, якоря, выделяются тегом <a> и бывают двух видов. Первый тип, детально описанный ниже, создает в документе область, которая инициализирует переход по гиперссылке, если она была предварительно активизирована и выбрана (обычно при помощи мыши) пользователем. Броузер автоматически загружает и отображает другой фрагмент старого либо полностью новый документ или совершает какое то действие, связанное с Интернетом, например запускает программу, работающую с электронной почтой, или загружает из сети некий файл. Якорь другого типа создает метку, выделяющую в документе место, на которое можно указать
с помощью гиперссылки.

Кроме того, гиперссылки реагируют на некоторые инициируемые с помощью мыши события, обрабатывая которые с помощью JavaScript,можно совершать эффектные фокусы.