Документы электронной таблицы

Как и для документов текстовых процессоров, электронные таблицы выводятся в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Excel - и если программа Microsoft Excel (или специальная программа чтения файлов Excel) установлена в системе пользователя - электронная таблица открывается в окне браузера. Следующая ссылка открывает электронную таблицу Excel в том же окне браузера, что и вызывающая страница, как показано на рисунке 7.5.

<p><a href="ExcelDocument.xls">Вывод документа Excel</a></p>

Рис. 7.5. Документ Excel, открытый в окне браузера

Подмножество меню Excel добавляется в панель меню браузера, позволяя выполнять небольшое редактирование и сохранение документа на локальном компьютере. Кнопка Back используется для возврата на вызывающую страницу. Аналогичный вывод создается, когда ссылка выводится в отдельном окне браузера.

Документы презентации

Слайдовая презентация выводится в браузере, если на компьютере пользователя имеется соответствующее программное обеспечение. При соединении с документом Microsoft PowerPoint - если программа PowerPoint (или специальная программа чтения документов PowerPoint) установлена в системе пользователя - презентация открывается в окне браузера. Кнопка браузера Back предназначена для возврата на вызывающую страницу. Следующая ссылка открывает документ PowerPoint для вывода в окне браузера, как показано на рисунке 7.6.

<p><a href="PowerPointDocument.ppt">Вывод презентации PowerPoint</a></p>

Рис. 7.6. Документ PowerPoint, открытый в окне браузера

Документы, созданные текстовым процессором

Документы, созданные текстовым процессором, могут выводиться в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Word - если программа Microsoft Word (или специальная программа для чтения документов Word) установлена в компьютерной системе пользователя - документ Word открывается в окне браузера. Следующая ссылка открывает документ Word, заменяющий вызывающую страницу, как показано на рисунке 7.4.

<p><a href="WordDocument.doc">Вывод документа Word</a></p>

Рис. 7.4. Документ Word, открытый в окне браузера

Отметим, что программа Microsoft Word открывается внутри окна браузера и что в панель меню браузера добавляется подмножество меню Word. Пользователи могут выполнять основные операции редактирования документа Word и сохранять его на своем локальном компьютере. Они не могут, конечно, редактировать и сохранить исходный документ, только копию, выводимую в окне браузера. Кнопка браузера Back используется для возврата на вызывающую страницу. Если вызываемый документ открывается в отдельном окне браузера, то это окно тоже содержит подмножество меню редактирования Word.

Графические файлы

Изображения GIF, PNG, и JPEG можно выводить в браузере, используя прямые ссылки на эти графические файлы. Другими словами, чтобы вывести графическое изображение, не требуется встраивать его в страницу Web. При простом соединении с файлом с расширением .gif, .png и .jpg изображения открываются прямо в окне браузера.

Так как изображения не форматируются на странице Web, они выводятся в верхнем левом углу окна браузера со своим исходным размером. Следующая ссылка открывает файл изображения .gif, как показано на рисунке 7.7. Когда изображение открывается в том же окне браузера, кнопка Back используется для возврата на вызывающую страницу.

<p><a href="GraphicImage.gif">Вывод изображения GIF</a></p>

Рис. 7.7. Изображение GIF, открытое в окне браузера

Графические ссылки

Ссылки можно инициировать графическими изображениями, помещая тег <img/> внутрь тега <a>. Общий формат присваивания ссылок графическим изображениям показан ниже.

Листинг 7.11. Общий формат графической ссылки (html, txt)

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

<p> <a href="http://www.nascar.com"><img src="nascar.jpg" alt="NASCAR Link"/></a> <a href="http://www.nascar.com">NASCAR</a> </p>

<p> <a href="http://www.weather.com"><img src="weather.jpg" alt="Weather Link"/></a> <a href="http://www.weather.com">The Weather Channel</a> </p>

<p> <a href="http://www.microsoft.com"><img src="microsoft.jpg" alt="Microsoft Link"/></a> <a href="http://www.microsoft.com">Microsoft</a> </p>

Листинг 7.12. Код для создания графических и текстовых ссылок (html, txt)

Рис. 7.9. Графические и текстовые ссылки

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

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

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

p#B {border:dashed 3px blue}

span#C {border:solid 4px green} </style>

<div id="A"> <p id="B">This is a <span id="C">text string with borders</span> inside a paragraph with borders inside a division with four different borders.</p> </div>

Листинг 6.22. Код для различных стилей границы (html, txt)

Рис. 6.7. Границы, окружающие элементы страницы

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

Исключенные атрибуты <body>

Цвета ссылок страницы можно изменять, кодируя атрибуты в теге <body>. Существует три атрибута:

link="color" vlink="color" alink="color"

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

Эти атрибуты исключены в XHTML, поэтому следует отдать предпочтение применению подобных селекторов ссылок и свойствам таблиц стилей.

Исключенный атрибут name

Место назначения ссылки внутри страницы можно кодировать в формате <a name="name">, а не <a id="name">, используя атрибут name вместо атрибута id. Хотя атрибут name еще работает в современных браузерах, он не распознается стандартами XHTML 1.1. Атрибут name можно использовать, если документ не будет проверяться службами валидации W3C.

Исключенный атрибут target

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

Можно определить, как должна открываться вызываемая страница, кодируя в теге <a> атрибут target="_window". Чтобы указать окно для открытия страницы, в коде используются специальные значения, каждое из которых имеет в качестве префикса символ подчеркивания (_). Эти окна кодируются следующим образом:

_blank - новое окно _self - текущее окно (по умолчанию) _top - все окно браузера (применяется при использовании фреймов) _parent - родительский фрейм (применяется при использовании фреймов)

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

<a href="http://www.weather.com" target="_blank">The Weather Channel</a>

Атрибут target не действителен по стандартам XHTML 1.1. Тем не менее, открытие удаленных сайтов Web в отдельном окне браузера остается хорошей идеей. Можно разрешить эту ситуацию, не нарушая стандартов XHTML, с помощью описанной ниже техники.

Исключенный код usemap

Показанный выше общий формат атрибута usemap для тега <img/>

usemap="#mapname"

использует символ "#" в качестве префикса для mapname. Однако в стандартах XHTML 1.1 этот символ считается незаконным. Текущие стандарты требуют, чтобы атрибут записывался в упрощенном формате: usemap="mapname", без символа префикса. Проблема в том, что некоторые браузеры не соответствуют стандартам и не распознают рекомендованный формат. Поэтому может понадобиться использовать старый формат атрибута usemap, чтобы карты ссылок работали правильно. Единственный недостаток в том, что в этом случае страница не будет считаться корректной при проверке службой валидации W3C.

Карты ссылок

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

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

Рис. 7.10. Карта ссылок и сопровождающие текстовые ссылки

Код страницы с картой ссылок

Следующий листинг показывает код карты ссылок, описанной в текущем примере страницы. Текстовые параграфы присутствуют не полностью, только ссылки внутри страницы на эти разделы страницы.

Листинг 7.16. Код страницы с картой ссылок (html, txt)

Этот пример использует для карты ссылки внутри страницы. Атрибут href тега <area/> может точно также открывать внешний сайт Web в том же самом или новом окне браузера.

Кодирование карты ссылок

Изображение, которое станет картой ссылок, помещается на страницу с помощью тега <img/>. Кроме своих стандартных атрибутов этот тег содержит атрибут usemap="mapname", который указывает на названный этим именем тег <map>, задающий описания активных областей изображения для создания ссылок. Общий формат тегов <img/> и <map> показан на листинге 7.14.

Листинг 7.14. Связывание выводимого изображения с картой ссылок (html, txt)

В теге <img/> задается #mapname, чтобы связать изображение с тегом <map>, определенным с помощью mapname. Внутри тега <map> имеются теги <area/>, по одному для каждой отображаемой области в изображении. Эти теги определяют форму, координаты в пикселях и страницу ссылки для всех активных областей.

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

Листинг 7.15. Код создания карты ссылок (html, txt)

Обратите внимание на связь между usemap="#MyImageMap" в теге <img/> и id="MyImageMap" в теге <map>. Идентификатор id="MyImageMap" соединяет карту ссылок с графическим изображением. Также при кодировании окончательной страницы оба тега <img/> и <map> должны быть внутри блочного тега, такого, как <p> или <div>.

Теги <area/> задают координаты (cords) для определения отдельных геометрических фигур и для соединения адресов URL со щелчком мыши на этой фигуре. В этом примере адреса URL являются ссылками внутри страницы; но можно соединяться с другими страницами на сайте или с внешними сайтами Web.

Когда shape="rect" (прямоугольник), cords определяют четырьмя числами, разделенными запятыми. Эта запись представляет две пары координат h,v, первая пара задает координаты верхнего левого угла прямоугольника, а вторая - координаты нижнего правого угла (8,13,130,123).

Когда shape="circle" (круг), cords определяют тремя числами, разделенными запятыми. Первые два числа представляют координаты h,v центра круга, а последнее число является величиной радиуса в пикселях (228,123,62).

Когда shape="poly" (многоугольник), cords определяют координатами h,v вершин многоугольника. Числовые пары можно перечислять по часовой или против часовой стрелки вдоль периметра многоугольника; они разделяются пробелами (100,144 175,200 155,255 50,250 45,175).

Тег <map> может появиться на странице в любом месте. Где бы он не появился в теле документа, он связывается с соответствующим тегом <img> через имя отображения.

Даже если карта ссылок создается с атрибутом alt для каждой активной области вместе с текстом alt для самого тега <img/>, тем не менее, желательно предоставить множество сопоставимых текстовых ссылок для посетителей с программным обеспечением для чтения текста или для тех, кто отключает вывод графики в браузере.

Определение отображаемых областей

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

Рисунок 7.11 показывает изображение, из которого создана приведенная выше карта ссылок. Изображение выводится в программе Windows Paint, которая может отслеживать перемещение мыши по изображению.

Рис. 7.11. Определение горизонтальных и вертикальных координат на графическом изображении

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

В зависимости от формы отображаемой области, требуется различная информация о положении.

Для прямоугольника надо знать горизонтальные и вертикальные координаты верхнего левого (top-left) и нижнего правого (bottom-right) углов. Эти две координаты h,v можно определить, помещая указатель "карандаш" в каждый из этих углов и считывая координаты из строки состояния. В приведенном выше рисунке пиксельными координатами этих двух точек являются top-left = 8,13 и bottom-right = 130,123.

Для круга необходимо знать координаты центра и величину радиуса в пикселях. Координаты центра приведенного выше круга определяют, помещая указатель "карандаш" (приблизительно) в центре и считывая в строке состояния значения 228, 123. Радиус является расстоянием от центра до края круга. Радиус можно определить, считывая координаты правого края круга (на той же вертикальной координате, что и центр круга) и находя разность между горизонтальными координатами центра и края: радиус = (290 - 228) = 62.

Для многоугольника необходимо знать координаты каждой из его угловых точек, обходя по часовой или против часовой стрелки его ребра, начиная с любой угловой точки на многоугольнике. Обходя по часовой стрелке, начав с верха этого многоугольника, мы получаем координаты 100,144; 175,200; 155,255; 50,250; и 45,172.

Имея эти координаты фигур, теперь можно создавать код карты ссылок и присваивать адреса URL ссылок различным фигурам.

Переадресация страниц

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

Перекрывающиеся активные области

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

В примере на рисунке 7.12 щелчок в перекрывающейся области соединяет с адресом URL, заданным для shape="rect", так как его определение появляется в карте ссылок раньше shape="circle", хотя графическое изображение круга перекрывает и изображение прямоугольника.

Рис. 7.12. Приоритет перекрывающихся областей карты ссылок

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

Перемещение между папками

По мере накопления большого числа документов Web, скорее всего, потребуется организация различных приложений Web по отдельным каталогам, подчиненным корневому каталогу - который, в свою очередь, подчинен основному каталогу Web. Рисунок 7.14 иллюстрирует эту идею с помощью трех подкаталогов в корневом каталоге Website, каждый из которых содержит страницы Web. Папка Application3 содержит, кроме того, подкаталог Media для хранения всех графических файлов, относящихся к этому приложению.

Рис. 7.14. Пример структуры каталога Web

При кодировании атрибута src в теге <img/> или атрибута href в теге <a> необходимо проследить иерархию каталогов от страницы Web, содержащей тег до расположения определенных в ссылке реального изображения или страницы. Это означает, что может понадобиться спуститься на один или несколько уровней каталогов, чтобы найти изображение или присоединенную страницу; или что необходимо подняться по иерархии, чтобы найти изображение или страницу; или что необходимо подняться в иерархии в каталог более высокого уровня, а затем спуститься в папку, содержащую изображение или страницу ссылки.

Причина этого перемещения вверх и вниз по каталогам состоит в том, что присоединяемые страницы или изображения указываются относительно страницы, содержащей ссылку. Используя иллюстрацию, предположим, что PageA.htm в каталоге Application1 содержит тег <img/>, указывающий на Picture1.gif в подкаталоге каталога Application3. Чтобы создать ссылку src со страницы PageA.htm на Picture1.gif, необходимо пройти следующий путь доступа:

- перейти на один уровень вверх из папки Application1 в папку WebSite;

- перейти на один уровень вниз из папки WebSite в папку Application3;

- перейти еще на один уровень вниз из папки Application3 в папку Media.

Используется два типа спецификации пути доступа для перемещения в иерархии каталогов при определении местонахождения страниц Web и графических изображений:

- записывают две точки, за которыми следует наклонная черта ("../"), для каждого уровня при перемещении вверх по иерархии папок;

- записывают имя папки, за которым следует наклонная черта ("/"), для каждого уровня при перемещении вниз по иерархии папок.

Например, адрес URL для ссылки <img/> со страницы PageA.htm на Picture1.gif будет следующим:

Листинг 7.21. Соединение с графическим файлом, используя перемещение между каталогами (html, txt)

Из текущего каталога, содержащего PageA.htm, перемещаемся вверх на один уровень (../) из каталога Application1 в каталог WebSite. Из каталога WebSite спускаемся вниз по каталогам Application3/ и Media/, чтобы найти Picture1.gif.

Обычно спецификации путей доступа будут не такими сложными. Как правило, для папки, содержащей страницы Web, создают одну папку Media внутри папки страниц, в которой хранятся все изображения, используемые на этих страницах. Тогда ссылка src на изображение должна будет указывать вниз только на один уровень каталогов:

<img src="Media/Picture.gif"/>

Листинг 7.22. Соединение с графическим файлом в подкаталоге (html, txt)

Приведенный выше пример соединяет страницу Web с изображением. Тот же самый подход используют при соединении одной страницы с другой. В приведенной выше структуре каталогов ссылка на странице PageA.htm, указывающая на страницу Page2.htm, будет иметь вид:

<a href="../Application3/Page2.htm">На страницу Page2.htm</a>

Листинг 7.23. Соединение со страницей Web в другой папке (html, txt)

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

Слайд-шоу

В теге <meta/> с атрибутами http-equiv и content можно закодировать переход на ряд страниц, чтобы создать самовыполняющуюся демонстрацию слайдов (слайд-шоу), которая автоматически загружает одну страницу за другой. Каждый тег <meta/> определяет время просмотра страницы вместе со ссылкой на следующую страницу последовательности.

Следующая графическая ссылка загружает первую (Slide1.htm) из пяти страниц слайд-шоу, которые все расположены в текущем каталоге. Код этой начальной ссылки показан ниже.

Рис. 7.13. Ссылка на слайд-шоу

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

Листинг 7.19. Частичный код страниц слайд-шоу (html, txt)

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

Листинг 7.20. Вывод слайд-шоу в отдельном окне браузера (html, txt)

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

<head> <title>Slide 5</title> <meta http-equiv="refresh" content="3; url=begin.htm"/> </head> <body <h1>Toy Story 2</h1> <p><img src="ToyStory2.jpg" alt="Toy Store 2 Image"/></p> </body>

Листинг 7.19. Частичный код страниц слайд-шоу

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

<a href="#" onclick="open('Slide1.htm','','')"> <img src="Pixar.gif" alt="Просмотр слайд-шоу"/> </a>

Листинг 7.20. Вывод слайд-шоу в отдельном окне браузера

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

Соединение с документами других типов

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

Ссылки е-mail

Существует вариант атрибута href, который позволяет задать ссылку e-mail. Щелчок на этой ссылке открывает используемую по умолчанию почтовую программу посетителя для создания переписки с адресом, указанным в ссылке. Общий формат этой ссылки показан на листинге 7-10.

<a href="mailto:email@address">текст ссылки</a>

Листинг 7.10. Общий формат ссылки mailto: (html, txt)

За атрибутом href="mailto:" следует адрес e-mail, обычно адрес, по которому ведут переписку с посетителями. Следующая ссылка, например, открывает программу e-mail посетителя (которая задана как используемая браузером по умолчанию) и вводит указанный адрес e-mail в строку адреса.

<p><a href="mailto:anybody@mail.ru">Пишите мне</a></p>

Рис. 7.8. Открытая по ссылке href="mailto:" программа e-mail

Ссылки внутри страницы

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

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

Рис. 7.2. Ссылки на странице

Чтобы создать ссылки внутри страницы, необходимо закодировать пару анкерных тегов, показанных на листинге 7.5.

<a href="#name">текст ссылки</a> ... <a id="name">текст объекта ссылки</a>

Листинг 7.5. Общий формат тегов <a> для создания ссылок внутри страницы (html, txt)

Место, в которое делается ссылка (обычно боковой заголовок на странице, но можно использовать любой другой текст), помещается внутрь тега <a id="name">, содержащего текстовое значение для идентификации этого места назначения ссылки на странице. Текст, откуда делается ссылка, помещается внутрь тега <a href="#name"> , в котором это имя места назначения кодируется с предшествующим символом "#".

Следующий код показывает три ссылки в три различные места на странице. Позиции мест назначения имеют идентификаторы ITEM1, ITEM2, и ITEM3. Когда происходит щелчок на ссылке вверху страницы, браузер переходит к одной из этих указанных позиций назначения.

<div><a href="#ITEM1">Go to Item 1</a></div> <div><a href="#ITEM2">Go to Item 2</a></div> <div><a href="#ITEM3">Go to Item 3</a></div>

<div><a id="ITEM1"><b>Here is Item 1</b></a></div> ... <div><a id="ITEM2"><b>Here is Item 2/<b></a></div> ... <div><a id="ITEM3"><b>Here is Item 3</b></a></div> ...

Листинг 7.6. Код создания ссылок на странице (html, txt)

Даже хотя текстовые строки места назначения помещены внутри тегов <a>, они не окрашены и не подчеркнуты, как обычные ссылки. Они являются "невидимыми" целями ссылок (использующими атрибут id), а не самими ссылками (использующими атрибут href).

При создании ссылки из верхней части страницы Wеb в место, расположенное ниже на той же странице, желательно создавать ссылки для возврата к началу страницы. В данном примере каждый раздел ссылки (ITEM1, ITEM2, и ITEM3) сопровождается ссылкой возврата к началу (Top) страницы. Каждая из этих ссылок на странице кодируется следующим образом.

<div><a href="#">Top</a></div>

Листинг 7.7. Код ссылки для перехода к началу страницы (html, txt)

Отметим, что в URL ссылки (href="#") не задано имя места назначения на странице. Когда для ссылки на странице задается место назначения без имени, то браузер по умолчанию возвращается к вершине страницы.

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

<h1><a id="TOP">Top of Page</a></h1> . . . <div><a href="#TOP">Top</a></div>

Листинг 7.8. Код, определяющий место назначения с именем вверху страницы (html, txt)

Теперь, когда происходит щелчок на ссылке Top, страница перемещается к помеченному месту назначения заголовка "Top of Page.".

Можно создать ссылку на одной странице в определенное место на другой странице, объединяя внешнюю ссылку и ссылку на странице. Предположим, например, что необходимо создать ссылку на раздел страницы NextPage.htm, который идентифицируется тегом <a id="SECTION3">. Воспользуемся форматом для ссылки на странице <a href="#name"> и добавим просто в качестве префикса для места назначения #name имя страницы.

<div><a href="NextPage.htm#SECTION3">Go to Section 3 on Next Page</a></div>

Листинг 7.9. Код ссылки на помеченное место назначения на другой странице (html, txt)

Эта ссылка для перехода на страницу с именем NextPage.htm и последующего перехода на этой странице к тегу, помеченному как <a id="SECTION3">. Такой тип соединения обычно можно сделать только с собственными страницами. Вряд ли будут известны именованные разделы на удаленных страницах, даже если они и доступны для соединения.

Стили ссылок

Текстовые ссылки выводятся тремя различными цветами, чтобы определить три возможных состояния ссылки. Ссылка, которая еще не была посещена, выводится синим цветом, посещенная ссылка - пурпурным, а активная ссылка (кнопка мыши щелкнула при указании на текст ссылки) - красным цветом. Текстовые ссылки, кроме того, подчеркиваются.

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

Таблица 7.1. Селекторы ссылок и оформление

СвойствоЗначение

a:link a:hover a:active a:visited

Любое свойство текста

Селектор a:link определяет непосещенную ссылку, селектор a:hover - ссылку с расположенным над ней указателем мыши, селектор a:active - ссылку, на которой был сделан щелчок, а селектор a:visited - ссылку, которая была посещена. Это оформление состояния ссылок можно изменить с помощью любой комбинации свойств значений текстовых стилей. Следующая таблица стилей иллюстрирует возможные настройки для четырех состояний ссылок.

Листинг 7.4. Задание стилей для текстовых ссылок (html, txt)

Рис. 7.1. Оформление текстовых ссылок в соответствии с действиями пользователя

Обычная непосещенная ссылка выводится синим цветом, но без подчеркивания. Когда курсор мыши перемещается поверх ссылки, она изменяет свой цвет на зеленый, подчеркивается и выводится размером 14pt. Когда делают щелчок на ссылке, ее цвет изменяется на красный. Посещенная ссылка выводится серым цветом без подчеркивания и размером 12pt.

Тег <a>

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

<a href="url">текст ссылки</a>

Листинг 7.1. Общий формат тега <a> (html, txt)

Текст ссылки, по умолчанию, подчеркивается и выводится в браузере синим цветом, как визуальный указатель, что строка текста является ссылкой, реагирующей на щелчок мыши. Расположение страницы соединения задается атрибутом href (hyperlink reference - гипертекстовая ссылка).

Можно создать ссылку на собственную страницу или на страницу на удаленном сайте Web. Если локальная связанная страница находится в том же каталоге, что и вызывающая страница, то в качестве URL требуется только имя страницы. Если связанная страница находится на том же сервере Web, что и вызывающая страница, но в другом каталоге, то в качестве URL используется путь доступа к каталогу этой вызываемой страницы (относительная ссылка). Если вызываемая страница находится на другом сайте Web, то ссылка должна включать протокол и ссылку на домен "http://имя домена" (абсолютная ссылка). Можно соединиться с именем сайта, чтобы извлечь используемую по умолчанию домашнюю страницу, или, если известен адрес, с определенной страницей на этом сайте.

<a href="xhtml07-01.htm">Перезагрузить эту страницу</a> <a href="http://www.weather.com">Погода</a>

Листинг 7.2. Соединение с локальной и удаленной страницами Web (html, txt)

Вспомните, что тег <a> является линейным тегом и, чтобы соответствовать стандартам XHTML 1.1, должен быть заключен внутри блочного тега, такого, как тег <p> или <div>.

Тег <meta>

Переадресация выполняется с помощью тега <meta>, который присутствует в разделе <head> документа и используется обычно для предоставления информации о документе XHTML. Общая форма этого тега, применяемая для переадресации, показана ниже.

Листинг 7.17. Общая форма тега <meta/> (html, txt)

Атрибут http-equiv определяет такое использование тега <meta>, как обновление или перезагрузку текущей страницы. Атрибут content определяет количество секунд ожидания, прежде чем произойдет перезагрузка вместе с адресом URL страницы, на которую произойдет переадресация, когда текущая страница перезагрузится.

Например, страница с именем Redirect.htm расположена в каталоге, где находится страница xhtml07-04.htm. На странице Redirect.htm кодируется тег meta, который через пять секунд ожидания перенаправляет вызов на страницу xhtml07-04.htm.

В разделе <head> страницы Redirect.htm имеется следующий тег <meta> для перехода на страницу xhtml07-04.htm.

<head> <title>Redirect Page</title> <meta http-equiv="refresh" content="5; url=xhtml07-04.htm"/> </head>

Листинг 7.18. Код автоматической переадресации на другую страницу (html, txt)

Текстовые файлы

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

<p><a href="TextDocument.txt">Вывод текстового документа</a></p>

Рис. 7.3. Текстовый документ, открытый в окне браузера

В этом примере текстовый документ открывается в окне браузера, заменяя вызывающую страницу. Однако, когда документ с расширением файла .txt открывается в отдельном окне, он открывается программой, ассоциированной с этим типом файла. В случае файла .txt для открытия документа используется программа текстового редактора, обычно Notepad. Документ появится во внешнем окне Notepad. Если пользователь выбрал другую программу редактора в качестве используемой по умолчанию в системе, то документ откроется в окне этой программы.

Текстовые ссылки

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

Вывод в новом окне браузера

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

<a href="javascript:" onclick="open('http://www.weather.com','','')">The Weather</a>

Листинг 7.3. Открытие страницы в новом окне браузера (html, txt)

Приведенный выше код содержит "обработчик событий" JavaScript onclick, который перехватывает щелчок пользователя на тексте ссылки. Щелчок на ссылке приводит к выполнению оператора open() для открытия заданного URL в новом окне браузера. Атрибут href="javascript:" заменяет URL обычной ссылки на указание, что вместо соединения со страницей выполняется процедура JavaScript.

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