Карта, как способ организации множественной гиперссылки.

Что такое URL?

В World Wide Web для задания местоположения файлов на других серверах сети Internet используется URL - Uniform Resource Locator.

URL включает в себя: метод доступа к ресурсу, т.е. протокол доступа (http, gopher, WAIS, ftp, file, telnet и др.); сетевой адрес ресурса (имя хост-машины и домена) и полный путь к файлу на сервере.

В общем виде формат URL выглядит так:

method://host.domain[:port]/path/filename

где method (или протокол) имеет одно из значений: file обозначает файл на вашей локальной системе, или файл на anonymous FTP сервере; http – файл в Интернет; telnet – выход в сеть telnet, в которой есть сервер и терминальные станции.

Параметр host.domain - адрес ресурса в сети Internet.

Параметр port – не обязательный идентификатор серверного приложения. На одном компьютере могут одновременно работать несколько программ-серверов, использующих один протокол. Для того чтобы ОС разобралась, какому приложению-серверу адресовать полученный пакет, в пакете указывается порт. Какой номер порта писать и надо ли его писать, вы должны узнать на host-узле.

В настоящее время зарезервированы номера портов до 65000, хотя пока и с пропусками. Например, 21 порт имеет FTP-сервер, 23 – Telnet, а 80 – HTTP.

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

Некоторые URI указывают на местоположение внутри ресурса. Этот тип URI заканчивается символом "#", за которым следует локальное имя фрагмента. Например, следующий URI указывает на фрагмент с именем main:

http://somesite.com/html/top.html#main

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

Относительные URI приводятся к полным URI с помощью базового URI. Пусть имеется базовый URI "http://www.acme.com/support/intro.html". Тогда относительный URI в ссылке:

<a href="suppliers.html">Suppliers</a>

будет преобразован в полный URI

http://www.acme.com/support/suppliers.html

Относительный URI в следующем фрагменте

<img src="../icons/logo.gif" alt="logo">

будет преобразован

http://www.acme.com/icons/logo.gif

Гиперссылки.

Гиперссылка – способ оформить фрагмент html-кода так, чтобы щелкнув по этому фрагменту, пользователь перешел в другое место текущего документа или в другой документ (в начало или в заданное место).

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

Тег – гиперссылка – это контейнер A (от слова anchor – якорь).

<p> Это очень важно. Если что-то осталось не понятным, перейдите в <a href=”details.htm#hyper”>раздел «Подробно».</a></p>

Пользователь распознает гиперссылку по следующему: 1) при наведении пользователем мышки на гиперссылку в нижней строке экрана (статус-строке) браузер показывает URI ресурса; 2) курсор меняет свой вид на указующий; 3) гиперссылка выделяется цветом и подчеркиванием. Кстати, всё это вы можете изменить в стилях, хотя это и не рекомендуется делать, чтобы не запутывать пользователя. Стили мы будем изучать несколько позже.

В приведенном примере указывается фрагмент с именем hyper в файле details.htm. Именование фрагмента делается тоже при помощи тега A, только с атрибутом name. Фрагмент файла detailes.htm может выглядеть так:

<p>Тег – гиперссылка – это контейнер A (от слова anchor – якорь).</p>

<p><a name=”details”> Гиперссылкой </a> становится весь фрагмент, заключенный в тег-контейнер. </p>

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

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

<tr>

<td><a href=”big/pic1.png”><img src=”small/pic1.jpg”></a></td>

<td><a href=” big/pic2.png”><img src=” small/pic2.jpg”></a></td>

<td><a href=” big/pic3.png”><img src=” small/pic3.jpg”></a></td>

</tr>

Карта, как способ организации множественной гиперссылки.

В тег А (гиперссылка) можно заключить картинку, но со всей картинкой связана только одна гиперссылка. Но на картинке много информации, хорошо бы воспринимать её как карту. И это можно сделать!

Сначала необходимо объявить картинку картой. Для этого используется один из двух атрибутов: usemap или ismap. Атрибут ismap объявляет карту, описание которой находится на web-сервере. Атрибут usemap используется в том случае, когда описание карты находится в текущем html-файле.

<a href=”make_card.php”>

<img src=”card_site.jpg” ismap>

</a>

Выше приведено описание серверной карты, обработка которой будет выполнена программой make_card.php. Вставьте подобный html-код в свой сайт, наведите мышку на картинку и посмотрите на появляющиеся в статус-строке координаты мышки. После щелчка на картинку на web-сервер передаются координаты мышки, обрабатывающая программа make_card.php должна подобрать ответ. В нашем случае ничего не произойдет, т.к. программы make_card.php пока нет.

Описание карты в теле html-документа дает нам возможность выполнить переходы по щелчкам на некоторые точки картинки.

<map name=”try_map”>

<area shape=”rect” coords=”50, 0, 150, 30” href=”rect.htm”>

<area shape=”circle” coords=”100, 75, 50” href=”circle.htm”>

<area shape=”rect” coords=”0, 0, 200, 150” nohref>

</map>

<img src=”card_site.jpg” usemap=”#try_map” width=”200” height=”150”>

Выше описана карта, которая задает переход на файл rect.htm при нажатии на фрагмент картинки прямоугольной формы, расположенный вверху, и переход на файл circle.htm при нажатии на фрагмент картинки в виде круга. Во всех остальных местах картинки не предусмотрены гиперссылки. Тип фрагмента определен значением параметра shape, а его местоположение – параметром coords. Для прямоугольного фрагмента задаются координаты левого верхнего и правого нижнего угла прямоугольника, причем, сначала координата x (по горизонтали), а потом координата y (по вертикали). Для фрагмента в форме круга задаются координаты центра и радиус круга.

При помощи рассмотренного механизма можно создать достаточно интересную карту сайта.

Теги div и span

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

<div title=”пояснения с применением всплывающей подсказки”>

<p>Тег <span title=”это фрагмент потока символов”>span</span> может быть совершенно <span title=”если не задана никакая разметка”> не заметен </span> для пользователя.</p>

<p>Остановите мышь в разных местах предыдущего абзаца, увидите подсказку.</p>

<p>А это – на будущее: тегами <span style=”color:red”>span и div </span> можно ограничить фрагмент, например, красного цвета.</p>

</div>

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

Пользователь увидит примерно следующее (всплывающие подсказки мы не можем показать).

Тег span может быть совершенно не заметен для пользователя.

Остановите мышь в разных местах предыдущего абзаца, увидите подсказку.

А это – на будущее: тегами span и div можно ограничить фрагмент, например, красного цвета.

Фреймы

Фреймы – достаточно интересный способ структуризации окна браузера с целью одновременного показа нескольких html-страниц (файлов). По непонятным причинам он плохо поддерживается браузерами, плохо обрабатывается поисковыми серверами и потому не очень распространен. Фактически вместо него в последние годы используется технология Ajax. Но для того, чтобы применить Ajax требуются навыки программирования на JavaScript и на PHP, а для применения фреймов достаточно владения html.

Описание деления окна на фреймы – рамки (фрагменты) должно быть сделано в отдельном файле. Пусть в файле «fr.htm» содержится следующий html-код.

<frameset rows="80,*">

<frame src="title.htm" name ="fr_title">

<frameset cols="100,*,100">

<frame src="menu.htm" name ="fr_menu">

<frame src="str1.htm" name ="fr_str">

<frame src="kont.htm" name ="fr_kont">

</frameset>

</frameset>

Тэг – контейнер frameset разбивает текущее окно на несколько колонок или строчек. Например, <frameset rows="100,20%,*"> разбивает окно на три части по горизонтали. Причем ширина верхней части равна 100 pt, ширина второй составляет 20% от ширины разбиваемого окна, а ширина третьей части – "то, что осталось". Аналогично можно задать и разбиение окна на столбцы, указав атрибут cols. Можно задать одновременное разбиение по двум направлениям, тогда окна образуют решетку.

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

Теперь, если этот файл показать в браузере, то окно будет выглядеть следующим образом (вместо содержимого показаны только имена файлов, расцветка фона приведена для примера):

Можно устроить «окно в другой файл» в некотором html-файле. Для этого используется тег-контейнер iframe. Этот тег может располагаться в произвольном месте вашего документа как блоковый фрагмент, но в нем будет показан файл, имя которого задано в атрибуте src.

<p>Вы можете увидеть фото любого преподавателя нашей кафедры. Щелкните по фамилии, приведенной в списке ниже.</p>

<iframe src=”foto0.htm” name=”wind” align=”left”></iframe>

<ul>

<li><a href=”foto3.htm” target=”#wind”> Иванов </a> Иван Иванович

<li><a href=”foto1.htm” target=”#wind”>Петров </a> Петр Петрович

</ul>

В примере показано не только как надо встраивать iframe в документ, но и как можно при помощи гиперссылок обновлять его содержимое. Для этого в теге гиперссылки применяется атрибут target, значение которого – имя окна, в котором надо показать файл с именем, заданным в значении атрибута href.

Аналогично по гиперссылке, расположенной в некотором файле, можно изменить содержимое одного из фреймов (см. файл fr.htm).

Существуют специальные зарезервированные имена окон, которые можно использовать в качестве значения атрибута target: «_top» – показать поверх самого верхнего уровня, «_self» – поверх текущего окна, «_parent» – поверх родительского окна, «_blank» – открыть новое окно.