Ссылки

Любой веб-сайт в Интернет имеет адрес, называемый Universe Resource Locator, который обычно выглядит следующим образом: www.site.com. Чтобы создать ссылку на любой веб-ресурс, необходимо Universe Resource Locator ввести в тег «a», и выглядеть это будет следующим образом:

Пример 6:

<a href="www.site.com">Веб-сайт</a>

Как вы видите, код ссылки состоит из следующих элементов (табл. 2.1).

Таблица 2.1. Ссылка HTML

Элемент ссылки

Назначение элемента

<a> </a>

Двойной тег анкор.

href="www.site.com"

Веб-адрес документа, на который сделана ссылка.

Веб-сайт

Название сайта

Это «минимальная конфигурация ссылки». Исходя из конкретных задач, текст кода ссылки может быть модифицирован различными способами.

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

В обоих представленных ниже примерах сделана ссылка на файл file.htm. В первом случае – абсолютная ссылка. Такая ссылка работает как в пределах одного сайта, так и в пределах Интернет в целом. Во втором случае сделана относительная ссылка, которая применяется только в пределах одного сайта. Этот способ удобен тем, что вы, не внося изменений в HTML-код, сможете разместить свой сайт на нескольких серверах с разными названиями и адресами.

Абсолютная ссылка:

<a href"www.site.com/file.htm">Название документа</a>

Относительная ссылка:

<a href="file.htm">Название документа</a>

В данном случае ссылка ведёт на файл, находящийся в той же папке, что и файл, с которого делается ссылка. Но возможны случаи расположения файлов в разных папках. Чтобы сделать относительную ссылку на файл, находящийся уровнем выше, это необходимо указать браузеру при помощи последовательности знаков «../»:

<a href="../index.htm">ссылка вверх</a>

Аналогично, если файл находится двумя уровнями выше, то «../» прибавляется дважды:

<a href="../../index.htm">ссылка вверх через два уровня</a>

Чтобы дать ссылку на файл, находящийся уровнем выше, необходимо в коде ссылки указать название папки:

<a href="pravo/zakon0001.htm">ссылка вниз</a>

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

<a href="../documents/document0001.htm">ссылка через папку</a>

Создав нацеленные на другие веб-ресурсы на страницах своего сайта, вы рискуете потерять посетителя, так как, кликнув по ссылке, он откроет в браузере уже другой сайт. Чтобы этого не произошло, применяется способ организации внешних ссылок, который открывает вновь вызванный сайт в новом окне. Для этого в ссылку добавляется атрибут target=new, и вся ссылка предстанет следующим образом:

<a target="_blank" href="http://www.site.ru/index.htm">Новый сайт</a>

Для того, чтобы предоставить посетителю больше информации о том, на страницу с каким содержанием ведёт ссылка, в её код включается параметр «title». Текст, который является значением параметра «title», отобразиться на экране браузера при наведении на ссылку курсора мыши:

<a href="http://www.site.ru/index.htm" title="Как заработать миллион">Новый сайт</a>

В качестве гиперссылок может выступать текст или графическое изображение. Предыдущие примеры демонстрировали как раз текстовые ссылки. Сделать ссылку на основе графического изображения не представляется сложной задачей: необходимо просто заменить текстовую часть гиперссылки кодом вставки графического файла. В готовом виде такая гиперссылка выглядит следующим образом:

<a href="file.htm"><img src="http://www.site.com/pics/image.jpg"></a>

Пройдите курс по ссылке: Веб-технологии. Часть I