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

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

Берегитесь поддаться «синдрому Эвереста», симптомом которого служит стремление вставить изображение только потому, что умеете это делать. Если вы или ваши читатели не могут с первого взгляда сказать, в каком отношении к документу находится ссылка, вы с ней ошиблись. Скупее употребляйте для гиперссылок замысловатые картинки, делайте это не бессистемно и только для того, чтобы помочь читателям обнаружить важную информацию. Задумывайтесь также над тем, что увидят в ваших страницах читатели, разбросанные по всей планете (а может быть, и за ее пределами), не забывая, что картинки
тоже по разному воспринимаются представителями разных культур. (Слышали ли вы, что означают для японцев пальцы, сложенные так, чтобы показать американцу «ОК»?)

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

Вот несколько советов по поводу гиперссылок:

Пусть содержимое ваших ссылок будет как можно короче

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

Никогда не располагайте две ссылки вплотную друг к другу

Большинство броузеров отобразят их так, что будет трудно сказать, где окончилась одна ссылка и началась другая. Разделяйте ссылки обычным текстом или размещайте их на разных строках.

Будьте последовательны

Используете встроенные ссылки? Пусть все ваши гиперссылки будут встроенными. Предпочитаете ссылочные списки? Применяйте либо длинную, либо короткую их форму. Не смешивайте стили в одном документе.

Попробуйте прочитать свой документ, из которого выброшен весь
текст, кроме гиперссылок

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

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

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

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

Лучший, более изысканный стиль встроенных гиперссылок требует, чтобы каждая из них содержала существительное или фразу, составленную из существительного и глагола, связанных с рассматриваемой темой. Сравните, как представлены ссылки, относящиеся к выращиванию и промышленной обработке кумкватов, и как кричат другие: «Меня! Меня!»

Быстрый просмотр немедленно выделяет полезные ссылки на «kumquat farming methods» (методы выращивания кумкватов) и «kumquat industry past ten years» (промышленная обработка кумкватов в прошедшее десятилетие). Нет необходимости читать окружающий текст, чтобы понять, куда перенесет вас гиперссылка. Действительно, непосредственно окружающий ссылки текст работает в этом примере, а также в случае большинства встроенных ссылок, как синтаксический сироп, в который погружены сладкие кусочки вложенных гиперссылок.

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

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

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

Если ссылочный список становится чрезмерно длинным, подумайте о том, чтобы разбить его на несколько подсписков, сгруппированных по темам. Читатели тогда смогут просмотреть темы (выделенные, например, <h3> заголовками), чтобы найти подходящий список, а уже затем искать в нем нужный документ.

Альтернативный стиль списков значительно информативнее, но и многословнее, так что постарайтесь не делать его чересчур громоздким:

<p>
Kumquat related documents include:
<ul>
<li>A concise guide to <a href=»kumquat_farming.html»>
profitable kumquat farming</a>, including a variety of business plans, lists of fruit
packing companies, and farming supply companies.
<li>101 different ways to <a href=»kumquat_uses»> use a kumquat</a>, including stewed kumquats and kumquat pie!
<li>The kumquat is a hardy tree, but even the greenest of thumbs can use a few
<a href=»news:alt.kumquat_growers»>growing tips</a> to increase their yield.
<li>The business of kumquats is an expanding one, as shown by this 10 year overview of the
<a href=»http://www.oreilly.com/kumquat_report/»>kumquat industry</a>.
</ul>

Иногда чтение исходных HTML документов утомляет, а XHTML документы – еще скучнее. Вообразите только, какой бы получился беспорядок, если бы мы использовали якоря с идентификаторами фрагментов для каждой подтемы в описаниях элементов списка! Тем не менее все это неплохо выглядит и удобно для целей навигации, когда
отображается броузером, таким как Opera.

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

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

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

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

Хотя существует столько же стилей введения гиперссылок, сколько авторов 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