Шаг 7. СсылкиПросмотров: 1413
13.04.2009 20:51
 
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <A>, который имеет обязательный параметр href. В качестве значения используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов).

Адрес может быть абсолютным и относительным. Абсолютные адреса должны начинаться с указания протокола и содержать имя сайта (домена), например, ссылка вида http://www.htmlbook.ru является абсолютной и ведет на главную страницу сайта htmlbook.ru. В примере 7.1 показано создание абсолютной ссылки на другой сайт.

Пример 7.1. Использование абсолютных ссылок


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Использование ссылок</title>
</head>
<body>
<a href="http://www.htmlbook.ru">Ссылка на сайт htmlbook.ru</a>
</body>
</html>


Для создания абсолютной ссылки в Nvu, выделите текст и нажмите на кнопку  на панели инструментов или выберите пункт меню Вставка > Ссылка (<Ctrl>+<L>). После чего откроется окно, где следует ввести полный адрес требуемой веб-страницы или сайта (рис. 7.1).

Рис. 7.1. Добавление адреса ссылки

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

При создании локальных ссылок надо понимать, какой путь (URL) в каком случае следует указывать, поскольку он зависит от расположения файлов. Рассмотрим несколько типичных вариантов.

1. Файлы располагаются в одной папке (рис. 7.2).

Рис. 7.2.

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Локальная ссылка</a>

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

2. Файлы размещаются в разных папках (рис. 7.3).

Рис. 7.3.

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано в примере.

<a href="../Ссылаемый документ.html">Локальная ссылка</a>

3. Файлы размещаются в разных папках (рис. 7.4).

Рис. 7.4.

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

<a href="../../Ссылаемый документ.html">Локальная ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 7.5).

Рис. 7.5.

Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.

<a href="Папка/Ссылаемый документ.html">Локальная ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Локальная ссылка</a>

Замечание

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

При создании локальной ссылки Nvu самостоятельно подставит нужный путь к файлу, вам требуется лишь выбрать файл, на который следует сделать ссылку (рис. 7.6).

Рис. 7.6. Создание локальной ссылки

При этом нужно поставить флажок на пункте ?Относительный URL?, чтобы путь к файлу был локальным.

Открытие ссылки в новом окне

По умолчанию, при переходе по ссылке документ открывается в текущем окне. При необходимости, это условие может быть изменено параметром target тега <А>. Если установить у target значение _blank, как показано в примере 7.2, то отроется новое окно и документ, на который ведет ссылка, загрузится в нем.

Пример 7.2. Открытие документа в новом окне

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<a href="http://www.htmlbook.ru" target="_blank">Ссылка открывает новое окно на сайт htmlbook.ru</a>
</body>
</html>


Чтобы указать в Nvu, что ссылка будет открываться в новом окне, при ее создании нажмите на кнопку ?Расширенные свойства? (рис. 7.6) и в дополнительном разделе выберите пункт ?в новом окне?, как показано на рис. 7.7.

Рис. 7.7. Изменение свойств ссылки

Автор: Влад Мержевич
Источник: htmlbook.ru