Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
39
Добавлен:
02.05.2014
Размер:
34.34 Кб
Скачать

My home page

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

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

Общий вид синтаксиса для перекрестных ссылок в WWW имеет вид:

КАК(Префикс):// КТО/ГДЕ/ЧТО (Документ)

По части адреса КАК (по ПРЕФИКСУ) броузер распознает, о каком виде связи идет речь в конкретном случае, т.е. как будут передаваться данные по коммуникационным линиям сети. Процедуру передачи определяет протокол.

Важнейшие префиксы для URL Префикс URL Функция FTP:// FTP-сервер HTTP:// WWW-сервер GOPHER:// GOPHER-сервер FILE://LOCALHOST Локальный диск Последний служит для встраивания в документ локальных файлов.

Часть адреса "КТО" содержит имя компьютера, в котором находится ресурс. Это имя называется именем хост-комньютера или просто именем хоста. Эта часть адреса Internet, которая содержит DSN адреса. Часть "КТО" просто присоединяется к части "КАК".

Третья часть адреса "ГДЕ" определяет полный путь каталога, где находится ресурс. Каталог нужно вставить в адрес URL и добавить в конце символ наклонной черты /.

Последняя часть адреса "ЧТО" содержит имя используемого файла. Для страниц Web используются имена документов, содержащих коды HTML и текст. Чтобы указать, что определенная гипертекстовая ссылка отсылает к файлу, находящемся на жестком диске компьютера, на котором Вы работаете, следует записать ссылку следующим образом:

file://localhost/путь.

После слова localhost указывается путь на компьютере с помощью принятой в оперционной системе транскрипции. Например, для DOS и Windows используется обратная косая черта (backspase - '\').

В частях адреса "КАК" и "КТО" можно применять прописные и строчные буквы. Но при вводе каталога и имени файла нужно соблюдать регистр, т.к. многие компьютеры Internet используют OS UNIX.

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

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

Основной командой для гипертектовых ссылок является дескриптор <A> и его инверсия </A>, названный по первой букве английского слова "anchor"( "якорь"). Между этими командами набирается текст, который должен быть выделен в документе в качестве гипертектовой ссылки, то-есть он маркитрует содержимое как гипертектовую ссылку. Причем в маркируемом блоке может находиться изображение, более сложные элеметы, такие как заголовки, но они не могут быть внутри якоря.

Якорь может содержать различные атрибуты, но как минимум один из двух: Name или HREF должен присутствовать, так как они фактически определяют цель гипертектовой ссылки.

Атрибут HREF="URL" (обязателен при отсутствии NAME) определяет цель якоря, а атрибут NAME="имя метки"(обязателен при отсутствии HREF) используется для маркировки в HTML-документе локальной гипертекстовой связи. Операнд "имя метки" называется фрагмент-идентификатор.

1. Внешние связи к далеким страницам Для встраивания внешних гипертекстовых ссылок в HTML-документе используется следующий общий синтаксис:

<A HREF="URL"> обозначение гипертекстовой ссылки </A>

В этом случае дескриптор <A> должен содержать URL с полным адресом нового документа.

а) Гипертекстовая ссылка на другой файл в рабочем компьютере. Для задания адреса гипертекстовой ссылки необходимо в начальную команду HREF="URL" добавить конкретный URL, взятый в двойные ковычки.

Эта запись будет выглядеть следующим образом:

<A HREF="file:localhost/c:\internet\local\dpi.htm"> Пример </A>

Теперь по ссылке Переход, осуществим переход в файл Primer2.htm

Пример 1

б) Гипертекстовая ссылка на метку в другой файл. Данную гипертекстовую ссылку можно встроить в любом месте своего HTML-документа. Чтобы перейти на метку, которая была предарительно объявлена в другом файле, то необходимо написать следующую команду:

<A HREF=URL#Метка> Текст </A>

Hапример,

<A HREF="ttp://dgtu.donetsk.ua/dgtu.htm#Метка Дпи> Перейти на компьютер ДПИ </A>

Осуществим переход в другой файл на заданную метку

Пример 2

Чтобы ссылаться на определенную область внутри другого HTML-документа, необходимо к URL, соответстующему атрибуту HREF гипертекстового якоря, добавить после символа # имя этой области.

в) Гипертекстовая ссылка на адрес электронной почты. Для этого необходимо написать команду следующего вида:

<A HREF="mailto:Internet_адрес"> Текст </A>

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

Адрес электронной почты

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

ВЫ МОЖЕТЕ ПОСМОТРЕТЬ ДРУГОЙ ДОКУМЕНТ

<A HREF="docum2.htm"> В ЭТОМ КАТАЛОГЕ </A>

при активации ссылки В ЭТОМ КАТАЛОГЕ будет осуществлен переход на документ 2.

Осуществим переход на имеющийся в этом же каталоге файл prog1.htm

Пример 3

3. Переход внутри документа В этом случае гипертекстовые ссылки не ведут к другому документу. Это часто используется в тех случаях, когда Ваш документ состоит из нескольких разделов или глав, и в начале текста идут ссылки на эти разделы (т.е. оглавление). Для обеспечения этого в тело документа вставляются именованнные метки переходов, а затем ссылки на этот переход.

а) для установки такой метки необходимо написать директиву <A> с атрибутом NAME:

<A NAME=Имя метки> </A>

Hапример, <A NAME=метка_1> </A>

Такое же действие выполняет атрибут ID директивы "Заголовок" (Hn).

Здесь Имя метки является тем именем, которое присваивается области текста, куда надо перейти. Желательно для имени использовать короткие имена. Например:

<A NAME="Секция_1"> Введение </A>

..... Текст введения ......

<A NAME="Секция_2"> Математическая постановка задачи </A>

...... Текст математической постановки задачи ...

<A NAME="Секция_3"> Алгоритм решения </A>

........ Текст алгоритма .......

Пример 4

б) Для подготовки оглавления можно создать связи к этим разделам, применяя обыкновенные команды гипертекстовых ссылок <A> с атрибутом HREF, которые ссылаются на имена разделов. А чтобы броузер не перепутал имена внутренних ссылок и внешних, перед именем внутренних ссылок указывается знак номера #.

Пример оглавления:

<A HREF="Секция_1"> Введение..........................3 </A>

<A HREF="Секция_2"> Математическая постановка задачи..8 </A>

<A HREF="Секция_3"> Алгоритм решения.................23 </A>

Т.е. чтобы поместить гипертектовую ссылку, которая указывает на именованную метку, необходимо выполнить директиву <A> с атрибутом HREF и с текстом, который при просмотре броузером будет выделен (т.е. текст, активируя который, Вы осуществляете переход).

Hапример, при написании в документе строки

<A HREF="#метка_1"> Это ссылка на метку 1 </A>

на экране будет выведено только

Это ссылка на метку 1

То-есть, если атрибуту HREF ставится в соответствии через знак равенства (=) ИМЯ с предшествующим знаком номера (#), то это означает, что ссылка на область в том же документе, которая помечена гипертекстовым якорем с атрибутом NAME, в котором после знака "равно" поставлено в соответствии то же самое имя.

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

Для использования в WWW элементов мультимедиа необходимо ввести ссылку на графический элемент, для чего надо воспользоваться дескриптором <IMG src="URL">. В этой директиве могут быть применены различные атрибуты.

Атрибут ALIGN= предназначен для задания позиции отображения графического изображения на экране. Он может принимать следующие значения:

- "ТОР" - текст за изображением будет выравнен по верхней границе изображения.

- "MIDDLE" - выравнивание по середине изображения.

- "BOTTOM" - выравнивание по нижней границе изображения. Данное значение принято по умолчанию.

- "LEFT" - прижимает изображение к левой границе.

- "RIGHT" - прижимает изображение к правой границе.

Атрибут SRC= указывет графический образ и предназначен для задания в двойных кавычках требуемого URL, где находится требуемый графический объект.

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

Атрибут ISMAP= (USEMAP=)указывает, что это активный образ. В случае атрибута ISMAP используется программа Web-сервера imagemap, а в случае USEMAP используется карта ссылок, описанных в элементе MAP.

Атрибут WIDTH= указывет ширину изображения в пикселях, если в атрибуте находится целое число, или в процентах от текущего окна экрана.

Атрибут HEIGHT= указывает высоту изображения в пикселях, если в атрибуте находится целое число, или в процентах от текущего окна экрана.

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

Атрибут BORDER= указывает толщину рамки вокруг изображения.

Атрибут HSPACE= задает перемещение курсора по изображению по горизонтали.

Атрибут VSPACE= задает перемещение курсора по изображению по вертикали.

Встраивание бинарных файлов в HTML-документ

Пример 5

Графическое изображение может являться гипертекстовой ссылкой. Для этого надо использовать якорь с меткой на это изображение.

Пример.

<a HREF="URL"> < IMG SRC="имя файла"> </A>

Пример 6

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

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

Данный дескриптор позволяет обтекать картинку текстом, так как в IMG только одна строка могла идти вместе с картинкой (или вверху, или внизу или в центре).

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

Приведенные проблемы и должен решить дескриптор FIG, в котором может быть 17 атрибутов, и мы рассмотрим только некоторые.

Атрибут ID - это аналог <A NAME="...">, принимает значение символьной строки.

Атрибут CLASS - используется при назначении стиля отображения. Принимает значения идентификатора класса блока.

Атрибут CLEAR - управляет обтеканием картинки текстом. Принимает значение "left", "right", "all".

Атрибут NOFLOW - запрещает обтекание картинки текстом. Значений не имеет.

Атрибут SRC - задает адрес картинки в терминах URL.

Атрибут ALIGN - задает горизонтальное выравнивание. Может принимать следующие значения:

- bleedleft - по левой границе окна;

- left - по левому отступу;

- center - центрировать внутри отступов, обтекание запрещено;

- rigth - по правому отступу;

- bleedrigth - по правой границе окна;

- justify - масштабирование по границам левого и правого отступов.

Атрибут WIDTH задает ширину картинки. Принимает значения в пикселях или в 'en'.

Атрибут HEIGTH задает высоту окна (pixel/en).

Атрибут UNITS задает единицы измерения высоты и ширины (по умолчанию pixels). Задается также в pixel/en.

Атрибут IMAGEMAP задает адрес URL программы обработки графических координат, например, imagemap.

Рассмотрим пример, который показывает использование FIG для описания чувствительных карт.

<FIG SRC="grapmenu.gif">

<H1> Test graphical menu </H1>

<P> Select please:

<UL>

<LI> <A HREF="guide.htm" SHAPE="rect 10,20,20,30"> User Help </A>

<LI> <A HREF="next.htm" SHAPE="rect 20,20,30,40"> Next Page </A>

<LI> <A HREF="prev.htm" SHAPE="rect 30,30,30,50"> Previous Page </A>

</UL>

</FIG>

В данном примере картинка "grapmenu.gif" размечается на несколько прямоугольных областей, каждая из которых является индетификатором гипертекстовой ссылки. В примере предполагается, что программа броузера сама способна определить, какую ссылку следует использовать. Если бы в дескрипторе FIG был указан атрибут IMAGEMAP, то координаты передавались бы программе, указанной в этом атрибуте:

<FIG SRC="grapmenu.gif"

IMAGEMAP="http://polyn.net.kiae.su/cgi-bin/imagemap">

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

Дескриптор OVERLAY При изучении элемента FIG следует рассмотреть еще одну возможность HTML, а именно загрузку перекрывающих графических образов. Данная возможность открывается при использовании элемента OVERLAY внутри элемента FIG:

<FIG SRC="image1.gif">

<OVERLAY SRC="image2.gif">

<P> Пример перекрытия

</FIG>

Элемент OVERLAY призван сократить объем передаваемых данных по сети за счет использования ранее переданных файлов. Дело в том, что определенный объем информации хранится в кэше броузера, что позволяет использовать эту информацию многократно без обращения к удаленному серверу. При использовании OVERLAY можно зажать смещение относительно верхнего левого угла исходной картинки: <OVERLAY SRC="image2.gif" x=100 y=50>

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

Дескриптор CAPTION Задает подпись под картинкой или таблицей. Имеет атрибут выравнивания ALIGN.

Дескриптор CREDIT Используется для указания источника цитирования или картинки.

Пример:

<FIG SRC="test.gif">

<CAPTION> Тестовая картинка </CAPTION>

<P> Пример применения дескриптора FIG

<CREDIT> П.Храмцов/KIAE,1996. </CREDIT>

</FIG>

В данном примере в текст документа встраивается картинка "test.gif" с подписью , заданной элементом CAPTION, и обтекающим его текстом с элементом <P>. Также здесь можно увидеть использование элемента CREDIT для ссылок на автора заимстовованного изображения.

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

Чтобы вставить в документ фоновое изображение необходимо в дескрипторе body заполнить атрибут BACKGROUND с именем файла, где находится необходимое изображение.

Пример

<body background="имя файла">

Пример 7

Активные графические образы ( карты изображения ) При создании Web-страниц часто используются активные графические образы, которые предназначены для того, чтобы при нажатии клавиши мыши на изображении, оно играло роль гипертекстовой ссылки. Таким активным (чувствительным) элементом может быть весь рисунок или некоторые его части. Например, активным изображением можно сделать карту города, где при нажатии клавиши в каком-то районе можно получить более подробную информацию о нем.

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

Активные изображения при этом запрашивают специальные средства как от клиента так и от сервера.

Клиент должен способен измерять координаты нажатия клавиши мыши и формировать эту информацию для пересылки по HTTP-серверу для обработки и выпонения.

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

Перед тем, как начать работу с активным образом, необходимо продумать следующее:

- необходимо, чтобы броузер мог просматривать графический файл;

- графический файл не должен быть большим, что бы загрузка его длилась недолго;

- с образом необходимо связать текстовую информацию, которая будет отображаться при текстовом альтернативном просмотре;

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

Достоинства:

- легче для восприятия, чем набор гипертекстовых ссылок;

- более привлекательны и полезнее для построения наглядных навигационных меню.

Недостатки:

- картинки пересылаются дольше, чем текстоваяи нформация;

- при работе с броузерами, не поддерживающими графику, пользователи не увидят карту изображения.

Карты изображения могут быть двух типов:

- серверная карта изображения;

- клиентская карта изображения.

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

Недостатки серверных карт изображения:

- необходимо время для передачи координат точки на сервер и получить ответ;

- работа пользователя замедляется и дополнительно загружает Web-сервер;

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

Клиентская карта изображения лишена этих недостатков. Вся необходимая броузеру информация для осуществления перехода располагается непосредственно в теле HTML-документа. Поэтому в строке состояния будет виден адрес, куда делается переход. Эти карты можно тестировать в режиме OFF-LINE.

Поэтому будем рассматривать только клиентские карты изображения.

Последовательность действия создания клиентских карт изображения I. С помощью дескриптора <IMG> вставляется картинка в формате GIF или JPG, которая будет базовой для карты изображения.

<IMG SRC="image.gif" ALT="Это карта изображения">

Атрибут ALT не является обязательным и задает текстовые данные, которые будут выводиться, если броузер не поддерживает графику.

II. В тело этого дескриптора добавляется атрибут USEMAP, который указывает, где находится описание "горячих" областей:

<IMG SRC="image.gif"

USEMAP="#map1"

ALT="Это карта изображения">,

где map1 - название карты изображения, которое используется для ее описания. Если описание карты находится в том же документе, что и дескриптор <IMG>, то аргумент атрибута USEMAP начинается с символа #. Если эта информация находится в другом файле, то перед знаком # необходимо указать URL этого файла. Это полезно в тех случаях, если данная карта изображения находится в нескольких страничках.

Пример.

Описание карты-изображения с названием map1 находится в файле maps.htm:

<IMG SRC="image.gif"

USEMAP="maps.htm#map1"

ALT="Это карта изображения">.

III. С помощью дескриптора <MAP> и его инверсии </MAP> описываются "горячие" области изображения и соответсвующие им адреса перехода. В общем виде это определение выглядит следующим образом:

<MAP NAME="имя_карты">

<AREA SHAPE="начертание" COORDS="х1,у1,..." HREF="адрес URL">

</MAP>

Дескриптор <MAP NAME="имя_карты"> определяет начало описания карты с именем "имя_карты" (оно используется в атрибуте USEMAP дескриптора IMG). Дескриптор </MAP> завершает описание карты-изображения.

Дескриптор <AREA ...> задает "горячие" области изображения. При этом может быть объявлено произврольное количество описаний AREA.

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

- "rect" - прямоугольник;

- "circle" - круг;

- "polygone" - многоугольник произвольной формы;

- "fefault" - по умолчанию (прямоугольник);

- "point" - точка.

Атрибут COORDS задает координаты объявляемой "горячей" области. Они разделяются запятыми и отсчитываются в пикселях относительно левого верхнего угла изображения, который имеет координаты (0,0).

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

Для круга задаются три координаты: две для центра и третья - радиус.

Для многоугольника задаются координаты всех вершин.

Пример.

Для описания квадрата с длиной стороны в 100 пикселей. у которого левый верхний угол совпадает с левым верхним углом всей картинки, необходимо написать:

<AREA SHAPE="rect" COORDS="0,0,99,99" ...>

Атрибут HREF задает адрес в формате URL, по которому будет осуществляться переход при активации определяемой области. Если необходимо, чтобы при активации не происходило никаких действий, то используется атрибут NOHREF. Он принимается по умолчанию, а также для всех неописанных участков изображения.

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

Пример Базовое изображение имеет размеры 400*300 пикселей.

<IMG SRC="image.gif" USEMAP="#map1">

<MAP NAME="map1">

<AREA SHAPE="rect" COORDS="0,49,99,149" HREF="doc1.htm">

<AREA SHAPE="circle" COORDS="199,99,50" HREF="doc2.htm">

<AREA SHAPE="rect" COORDS="299,49,399,149" HREF="doc3.htm">

<AREA SHAPE="rect" COORDS="0,0,399,299" NOHREF>

</MAP>

Здесь последней объявлена область, совпадающая по размеру со всем изображением, при описании которой был использован атрибут NOHREF. В принципе это делать необязательно, так как он задается по умолчанию.

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

MapThis! по адресу http://tucows.phoenix.net/files/mpthsBhere.

В ней можно сделать:

- открыть файл в формате GIF или JPEG;

- выделить "горячие" области;

- присвоить им адрес URL, по которому будет осуществляться переход;

- сохранить результаты в HTML-файле в формате CSIM (Client-Side Image Map).

Контрольные вопросы Структура HTML-документов.

Редактирование текста.

Списки в HTML-документе.

Виды гипертекстовых ссылок.

Встраивание бинарных файлов в HTML-документ.

Последовательность действий создания клиентских карт изображения.

Соседние файлы в папке Cправочник web-дизайнера