Дом Гнома

В гости к Гному - www.ugnoma.NET...
Как это нет??? У Гнома всё есть!!!

Cсылки в HTML документах

 

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

Ссылка состоит из двух компонентов: так называемого якоря (anchor) или элемента привязки,и URL (Universal Resurse Locator - в простонаречье адрес веб-страницы) связанного с ним ресурсав сети Интернет. Первый компонент ссылки - якорь это текстовый или графический объект, который как правило служит органом управления на веб-странице. Каждый раз при просмотре веб-страниц мы видим множество различных элементов-якорей. Это и красочные рекламные баннеры, всевозможные кнопки и иконки, выделенные подчеркнутым курсивом элементы текста, адреса электронной почты.
Второй компонент ссылки не отображается веб-браузером, но служит конкретным указанием где в сети Интернет найти, и что сделать при активизации пользователем соответствующего ему якоря.
 

Что такое ссылка теперь вроде ясно. А какие они бывают и как задаются в HTML-документе ?
Ссылки в документах задаются при помощи контейнера ..., следующей структуры:

<Ahref="Ресурс" target="имя окна" title="Подсказка">Элемент - якорь</A> - это в общих чертах, теперь остановимся подробнее на каждом типе ссылок.

 

Гиперссылка на другую HTML страницу

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

Относительный адрес это адрес ресурса относительно компьютера и каталога загрузки HTML-документа, если иной базовый адрес не указан в заголовке документа, тег Относительный адрес задается в сокращенной форме (путь/файл). Например, если ваша начальная страница index.htm загружена браузером c httр://www.вашсайт.com, то использование в ней относительной ссылки index.htm означает загрузку httр://www.вашсайт.com/index.htm.

Абсолютные адреса используются для привязки к ресурсам других узлов Интернет и задаются полным форматом записи (httр://сервер/путь/файл). Например: httр://www.чейтосайт.ru/filename.htm.

При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.имясайта.домен/page.HTML). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.HTML, catalog/page.HTML). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

Для создания гиперссылки служит дескриптор

Пример:

HTML-код:

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


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

Отображение в браузере:

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

 

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

Гиперссылка в пределах HTML страницы

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

Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута name тега . Имя должно содержать только буквы и цифры.

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

Пример:

HTML-код:

К началу страницы

В то место, куда надо сделать переход надо вставить
HTML-код:

Отображение в браузере:


К началу страницы

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

Перейти к началу документа mist.htm

 

Почтовая гиперссылка

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

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

Пример:

HTML-код:

gnome@ugnoma.com
 

Отображение в браузере:

 

gnome@ugnoma.com

Открытие HTML страниц в новом окне

Ещё надо описать еще один важный атрибут тега ссылки, это атрибутtarget. При помощи атрибута targetможно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Данный атрибут задает окно либо фрейм (о фреймах ещё поговорим) назначения для документа заданного атрибутомhref. По умолчанию загрузка происходит в текущее окно браузера, но можно указать имя нового или существующего окна, а так же одно из предопределенных имен объектов браузера. Ниже используемые константы атрибутаtarget:
_blank -
открывает страницу в новом окне;
_self -
открывает ссылку в этом же окне (всегда работает в браузерах по умолчанию);
_parent -
загружает ссылку в родительском окне;
_top -
определённый объект в определённом окне браузера.

Пример:

HTML-код:

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

 

 

Отображение в браузере:


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

Цвет текста гиперссылок

Наверняка все сталкивались с тем, когда синие гиперссылки в веб-страницах при наведении указателя мыши меняют цвет (обычно на красный), или ссылки по которым вы уже пробегали, начинают отображаться другим цветом. В языкеHTML задают цвет шрифта гиперссылок атрибуты link,vlink, alink:

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

Атрибут vlink - уже посещенные ссылки.

Атрибут alink - выделяет активную гиперссылку.

 

Выведение подсказок в окне HTML-документа

Ещё один важный атрибут - это атрибут для выведения подсказки.Атрибутtitle задает текстовую подсказку в стиле ToolTip, отображаемую браузером при наведении курсора мыши в зоне элемента-якоря.

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

Заходите к нам за контентом - абсолютная ссылка: переход на сайт www.чейтосайт.ru, текстовый якорь - Заходите к нам за контентом, с подсказкой.

Товары нашего магазина - относительная ссылка: открытие станицыtovar.htm в подразделеShop относительно раздела основной страницы, текстовый якорь - Товары нашего магазина, без подсказки.

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

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

 

Порядок перехода по гиперссылкам

Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута tabindex тега <.A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту tabindex некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.

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

Итак, немного обобщим и подведём итоги:

Ссылки на наиболее часто используемые ресурсы:

- ссылки на другие документы HTML и файлы.
- ссылки на файлы FTP-сервера.
- ссылки на адреса электронной почты.
- ссылки на группы новостей.

При использовании графического файла в качестве элемента-якоря необходимо вместо текста в контейнере <.A>...<./A> использовать конструкцию <.IMG SRC="файл">. Примеры этого мы встречали когда изучали графику вHTML документах.


Вот пожалуй и все что я могу вам рассказать о ссылках. Разобрались? Потренировались? Хоть что-то запомнили? Тогда идём дальше.

 

 

Поделиться ссылкой на страницу:
В начало страницы