5. Гиперссылки
Гипертекстовый документ-это документ, содержащий ссылки, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Ссылка - это элемент страницы, содержащий скрытый адрес перехода к другому ресурсу. Таким элементом может быть слово, последовательность слов или изображение. Цвет текстового элемента может определяться автором или установками обозревателя. В качестве элемента ссылки можно использовать графическое изображение, по принципу действия графические ссылки не отличаются от текстовых ссылок, хотя они не подчеркиваются и не выделяются цветом.
Для организации гиперссылки используется тег
< a href = "адрес" > элемент страницы < /a >, где:
элемент страницы - текстовый или графический элемент документа,
адрес - указатель ресурса, на который выполняется переход. В качестве адреса чаще всего используется:
- URL- адрес ресурса в Интернете или путь/имя документа на диске,
- адрес электронной почты.
- метка внутри текущего документа,
Приведенный тег является тегом-контейнером, который охватывает элемент страницы, превращая его в гиперссылку. Следовательно, указание закрывающей части тега является обязательным.
5.1. Внешние ссылки
В примере на рис. 5-1. приведен HTML-код и вид страницы, содержащей гиперссылки на внешние ресурсы. Первые две ссылки выполняют переход на сайты Яндекса и почты, причем для почты элементом гиперссылки является совокупность изображения и текста. Третья гиперссылка обращается к файловому серверу для возможного обмена файлами. Последняя гиперссылка связана с заданным адресом электронной почты. Щелчок по такой ссылке запускает клиента электронной почты, установленного на компьютере пользователя, что позволяет создать сообщение, в котором уже автоматически введен адрес и остается только заполнить остальные поля сообщения. Можно в теге ссылки указать содержание других полей сообщения: cc - поле Копия, subject - поле Тема, body - текст сообщения.
Именно так реализована ссылка в коде на рис. 5-1. Следует обратить внимание, что в этом случае знак вопроса (?) отделяет адрес от остальной части записи, а содержания полей разделяются знаком амперсанд (&).
<html> <head><title>Гиперссылки</title> </head> <body> <a href="http://www.yandex.ru" target=_blank> Новости Яндекса</a> <br><br> <a href="http://www.mail.ru" target=_blank> <img align=middle src="Конверт.jpg" height=40> Моя почта </a> <br><br> <a href="ftp://ftp.vaio-link.com" target=_blank> Файловый сервер vaio-link </a> <br><br> <a href="mailto:ИМЯ@mail.ru? subject=Сообщение от посетителя сайта& body=Ваш сайт меня заинтересовал" target=_blank> Связаться с нами </a> </body> </html> |
|
Рис. 5-1. HTML-код гиперссылок на внешние ресурсы и вид страницы |
|
В теге вставки гиперссылки можно задать необязательный, но очень полезный параметр, который определяет целевое окно, где будет открыт новый документ. По умолчанию новый документ откроется в текущем окне обозревателя. Это означает, что посетитель вашего сайта, щелкнув мышью по гиперссылке на ресурс в Интернете, покинет ваш сайт. Избежать этого можно, настроив параметр target (целевое окно), который может принимать значения 5:
_blank - документ откроется в новом окне обозревателя,
_self - документ откроется в том же окне (или фрейме), что и текущая страница.
В примере все документы открываются в новом окне обозревателя.
5.2. Ссылки на метки внутри документа
Если создается большой документ, который займет несколько экранных страниц в окне обозревателя, то для удобства работы с ним полезно создать систему навигации, позволяющую переходить с помощью ссылок между разделами документа. Обычно такой документ имеет оглавление, каждый пункт которого должен являться ссылкой на соответствующий раздел. Для того чтобы по щелчку на пункте оглавления перейти на соответствующий раздел, необходимо пометить начало этого раздела меткой.
Таким образом, для создания предложенной системы навигации по документу требуется решить две задачи:
Создать метки в начале каждого раздела |
Сформировать ссылки из соответствующих пунктов оглавления на соответствующие метки |
Порядок решения этих задач не имеет значения - главное, чтобы правильно были расставлены метки разделов и правильно использованы метки в ссылках. Имена меток внутри страницы не должны повторяться.
Создание меток
Для вставки метки используется тег
<a name = "имя метки"> [элемент страницы] </a>.
В приведенной конструкции "элемент страницы" заключен в квадратные скобки, что указывает на возможность его отсутствия. Иначе говоря, метку можно оформить двояко, например:
<a name="Ch4"> Разд. 4. Форматирование </a> (далее идет текст раздела) |
<a name = "Ch4"> </a> Разд 4. Форматирование (далее идет текст раздела) |
В первом варианте меткой с именем Ch4 помечается текст заголовка раздела (перед текстом раздела), а во втором варианте метка Ch4 вставляется перед заголовком раздела, не затрагивая его текст. Оба эти варианта действуют одинаково. Аналогично организуются метки для каждого раздела документа.
Созданные метки позволяют переходить из оглавления к соответствующему разделу. Однако для удобства работы с документом не помешает обеспечить возможность возврата из каждого раздела к оглавлению. Для этого требуется создать метку в начале оглавления, например в следующем виде:
<a name = "Ch0"> Оглавление </a>
(далее идут пункты оглавления)
Используя созданную метку, можно организовать ссылку на оглавление из любого раздела.
Создание ссылок на метки в документе
Ссылка на метку внутри документа создается тем же тегом, что и обычная гиперссылка, где в качестве адреса указывается имя соответствующей метки. Например, для перехода из оглавления в "Разд. 4 Форматирование" необходимо создать гиперссылку из этого пункта оглавления:
< a href = "#Ch4" > Разд. 4. Форматирование < /a >
При щелчке по этой ссылке будет выполнена прокрутка текущей страницы до соответствующей метки.
Чтобы обеспечить возможность возврата из любого раздела в оглавление, в конце каждого раздела организуется ссылка вида:
< a href = "#Ch0" > К оглавлению … < /a >.
Следует отметить, что можно ссылаться на метку не только в текущем, но и в другом документе. В этом случае для параметра href в теге гиперссылки указывается имя файла и имя ссылки, например
< a href = "MyPage.html#Ch0" > К оглавлению … < /a >.
На рис. 5-2 приведен пример содания ссылок на метки внутри документа.
<html> <head> <title>Организация ссылок внутри документа </title> </head> <body bgcolor="#f1f1f1" text="#003366"> <a name=Ch_0> </A> <h2 align=center><font face="courier" color='553377'>Организация ссылок внутри документа </font></h2> <center> <a href="#Ch_1">Базовые сведения по языку HTML</a><br> <a href="#Ch_2">Основные понятия языка</a><br> <a href="#Ch_3">Структура HTML-кода</a><br> <a href="#Ch_4">Форматирование шрифта</a></center><br> <hr width=40% size=7 color="navy"> <p align=justify> Традиционно пользователи Интернета являются потребителями имеющихся ресурсов (новости, общение, форумы и т.д.). Однако многие пользователи хотят создать собственное представительство в сети. Это может быть простой сайт, состоящий из одной или нескольких статических страниц, связанных гиперссылками. </p> <a href="#Ch_0">К оглавлению</a> <hr> <a name=Ch_1> </A> <h3 align=center><I>Базовые сведения по языку HTML</I></h3> <p align=justify> Разработчиком языка HTML является британский учёный Тим Бернерс Ли, сотрудник Европейского центра ядерных исследований, Женева (Швейцария). HTML создавался как язык для обмена научной и технической документацией и был задуман как средство труктурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). С течением времени, основная идея платформонезависимости языка уступила свое место современным потребностям в мультимедийном и графическом оформлении Web-страниц. </p> <a href="#Ch_0">К оглавлению</a> <hr> <a name=Ch_2> </a> <h3 align=center><I>Основные понятия языка HTML HTML</I></h3> <p align=justify> HTML-файл страницы – это обычный текстовый документ, использующий стандартную шрифт кодировку MS DOS. Если анализировать содержание кода, то единственное, что мы можем понять в нем, - это текстовые фрагменты, которые отображаются на странице. Никакого форматированного текста, графических элементов, видео, звука мы не найдем. С другой стороны, на экране обозревателя мы видим полноценный мультимедийный документ, содержащий отформатированный текст, графику и т.д.. Такой эффект достигается за счет содержащихся в коде управляющих конструкций языка HTML, которые понимает обозреватель (например, Internet Explorer) и, в соответствии с ними, формирует на экране страницы заданного содержания и вида. </p> <a href="#Ch_0">К оглавлению</a> <hr> <a name=Ch_3> </a> <h3 align=center><I>Структура HTML-кода</I></h3> <p align=justify> В разделе <body> располагается все содержимое документа (контент): текстовые элементы, теги форматирования и добавления на страницу элементов графики, видео и т.д. В любом месте кода страницы может быть размещен комментарий - произвольный пояснительный текст, раскрывающий назначение тех или иных конструкций кода. </p> <a href="#Ch_0">К оглавлению</a> <hr> <a name=Ch_4> </a> <h3 align=center><I>Форматирование шрифта</I></h3> <p align=justify> face = "тип шрифта" - параметр служит для указания типа шрифта (гарнитуры), которым браузер пользователя будет выводить текст, если такой шрифт имеется на компьютере. Значением данного параметра служит название шрифта. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Список шрифтов просматривается слева направо. Если шрифта из списка не будет найдено, то будет использован шрифт, установленный обозревателем по умолчанию. </p> <a href="#Ch_0">К оглавлению</a> <hr> </body> </html> |
Рис. 5-2. HTML-код создания гиперссылок на метки внутри документа |
5.3. Карта-изображение
Для организации ссылок многие Web-страницы используют так называемые карты изображения. С помощью специальных средств6 на изображении выделяется одна или несколько областей, которые называются активными. Каждая из активных областей оформляется как гиперссылка на некоторый ресурс (страница, файл, Web-сайт и т.д.). Чтобы перейти к другому ресурсу надо просто выбрать нужное место на изображении и щелкнуть мышью. Иногда такой подход организации гиперссылок является более информативным, так как пользователь понимает назначение ссылки и представляет, что содержится в открываемом по ссылке документе. Карта-изображение внешне выглядит как обычное встроенное изображение и может иметь любой допустимый графический формат (gif, jpg, bmp).
Конфигурация карты-изображения описывается в виде обычного текста, являющегося частью HTML-документа. Описание конфигурации карты-изображения содержит координаты активных областей изображения, а также URL-адреса перехода, связанные с каждой из активных областей. Активные области могут иметь форму прямоугольника, круга или многоугольника. На изображении допускается любая комбинация этих фигур.
При размещении на странице карты-изображения следует учесть, что время загрузки страницы увеличится, и при этом нет возможности отметить другим цветом элементы гиперссылок, как это делается для текстовых ссылок.
Создание карт-изображений выполняется в два этапа:
- подготовка базового изображения, на котором в дальнейшем будут заданы активные области,
- разработка файла - конфигурации, описывающей геометрические параметры активных областей.
Подготовка базового изображения не отличается от работы по подготовке обычных изображений, встраиваемых на Web-страницах. Для этого можно воспользоваться любым графическим редактором или вставить в документ готовое изображение.
На втором этапе необходимо отметить активные области на изображении и сопоставить им соответствующие адресы для ссылок.
Описание конфигурации карты-изображения.
Подготовка файла-конфигурации является наиболее трудоемким и ответственным этапом в создании карт-изображений, что, в основном, связано с проблемой определения координат активных областей. В принципе возможен ручной способ определения и задания координат активных областей, используя простейший графический редактор. Считывая координаты ключевых точек активных областей, можно использовать их для создания файла описания геометрических параметров выбранных областей. Однако такой способ достаточно трудоемок.
Для автоматизации процесса разметки областей и генерации соответствующего HTML‑кода лучше использовать графический редактор или Web-редактор (например, Photoshop, Dreamweaver), что рассматривается ниже.
Структуру HTML-кода вставки карты-изображения в документ рассмотрим на примере кода конфигурации, приведенном на рис. 5-3.
|
<!-- Часть 1: Вставка базового изображения --> <img src="images/Auto.jpg" width="400" height="236" border="0" usemap="#Auto_Map">
<!-- Часть 2: Описание конфигурации карты-изображения --> <map name="Auto_Map"> <area shape="rect" alt="Электрооборудование" coords="17,102,62,141" href="Electro.htm" target="_blank"> <area shape="circle" alt="Ходовая часть" coords="359,163,33" href="Hodov.htm" target="_blank"> <area shape="poly" alt="Двигатель" coords="115,94, 77,102, 80,141, 105,141, 113,121, 169,94, 124,91, 77,102, 79,102" href="Dvijok.htm" target="_blank"> </map> |
Рис. 5-3. Изображение и HTML-код конфигурации карты |
Код состоит из двух частей:
В первой части с помощью тега <img> добавляет изображение на страницу. Параметр usemap ="#Auto_Map" указывает, что вставленное базовое изображение является картой. В качестве значения этого параметра указывается URL-адрес описания конфигурации карты. Если описание карты расположено в том же HTML-документе, то указывается имя этого описания (это параметр name тега <map> в части 2), перед которым добавляется символ #.
Вторая часть описывает конфигурацию карты и расположена внутри тега-контейнера <map> . . . </map>. В конфигурации каждая активная область описывается тегом <area>, который имеет следующие параметры.
shape - задает форму активной области и может принимать значения:
rect - область в виде прямоугольника,
circle - области в виде круга,
poly - области в виде многоугольника.
coords - указывает координаты контрольных точек активной области относительно левого верхнего угла изображения, которыми являются:
для shape -rect координаты левого верхнего и нижнего правого углов,
для shape -circle координаты центра и радиус,
для shape -poly координаты всех вершин многоугольника
нref - указывает URL-адрес ссылки на другой ресурс; может указываться абсолютный (например, href="http://www.mydomen.spb.ru) или относительный адрес (например, href="index.html"),
alt - задает текст всплывающей подсказки при наведении курсора мыши на активную область,
target - указывает, куда будет загружен документ при переходе по ссылке (см. разд. 5.1.).
Создание карты-изображения в графическом редакторе Photoshop
Выше была рассмотрена структура HTML-кода вставки карты-изображения, полученная с помощью графического редактора Photoshop8. Рассмотрим порядок создания карты. Далее считается, что имеется базовое изображение в файле Img_Auto.jpg, созданы файлы Electro.htm, Hodov.htm, Dvijok.htm, на которые выполняется переход щелчком в соответствующей активной области.
запуск приложения ImageReady одним из способов
непосредственно через меню Пуск |
запуск Photooshop, меню: Файл Редактировать в ImageReady |
открыть файл изображения Img_Auto.jpg..
Рис. 5-4. Вид экрана после загрузки
файла Img_Auto.jpg
После запуска программы и загрузки изображения экран содержит набор панелей и окон. Для решения нашей задачи потребуются инструменты, показанные на рис. 5-4.
перейти в режим создания карты,
Д
ля
этого щелкнуть на панели инструментов
кнопку, указанную на рис. 5-5.
Название кнопки
может отличаться от приведенного на
рисунке в зависимости от того, какая
область выделялась последней. После
этого на появившейся панели инструментов:
щелкнуть кнопку, соответствующую
заданному виду активной области и
выделить на рисунке эту область, например
прямоугольник (см. рис. 5-3).
задать параметры конфигурации области,
После выделения области указать необходимые параметры на вкладке "Карта ссылок", приведенной на рис. 5-6:
URL-адрес перехода по щелчку, например Electro.htm,
Цель - окно, в котором открывается новый документ, например _blank,
Alt
- альтернативный текст, который появляется
при наведении курсора на активную
область (формируется произвольно).
Имя области программа формирует автоматически и его можно не менять. Координаты контрольных точек области (параметр Coord в теге <img>) вычисляются программой и отображаются в поле "Размеры" на этой же вкладке.
аналогично выделить остальные области и задать их параметры конфигурации,
сохранить результат обработки изображения:
меню Файл Сохранить оптимизированный как … , выбрав тип файла: HTML и изображение (*.html).
После сохранения в корневой папке появится файл кода Web-страницы, а в папке Image - соответствующее оптимизированное изображение. Если необходимо, можно отредактировать полученную страницу, добавляя новые элементы, форматирование и т.д.