Гиперссылки

Что такое гиперссылки? Гиперссылки, они же URL («урлы»), «линки» и прочая – основа всего интернета. Собственно, встречаете вы их на каждом шагу – вот хотя бы тут, в меню, при переходе на другую страничку, в другой раздел. В этой главе я расскажу не только банальное известное 90% сетянам "<a href=" но и про другие хитрушки, знакомые немногим. Но будем последовательны. Итак, URL:



так выглядит обыкновенная ссылка в коде. А в броузере мы увидим то, что находится в «контейнере» тега, то есть в нашем примере это – «наименование линка».
Пути в гиперссылке могут быть абсолютными или же относительными.
Что такое абсолютный путь?
Это ссылка вида <a href="http://google.ru/">Гугл</a> – ссылка, ведущая на гугл из любого места, даже будучи расположенной в сохраненном на винте документе она будет переправлять пользователя на забитый в нее адрес.
Что такое путь относительный?
– это путь, отсылающий юзера с учетом текущего его местоположения.

«Абсолютный» («жесткий») путь:
<a href="http://сайт.ru/директория/файл.html">имя ссЫлки</a>

Зависимый путь:
<a href="файл.html">файл</a>

Что же видим? Зависимый путь и короче (а следовательно, и меньше весит и его проще писать) и удобнее – не нужно припоминать весь путь – достаточно быть уверенным, что файл.html лежит в одной директории сайта с файлом, к которому (или из которого) мы обращаемся. Это облегчит юзеру работу, если он сохранит все файлы на диске.

Показываю на пальцах: –
в директории X есть два файла – Y и Z
так вот... в любом из этих файлов будет работать ссылка на другой, поставленная как просто
<a href="Y.html">название ссылки </a> или же 
<a href="Х.html">название ссылки </a>

Ну а что делать, если он лежит в другой директории?

Тут уже придется учесть часть пути – нужно представить себе «дерево».

Сайт.ru:

Поясню подробнее: На сайте две директории – X и Y. В директории Х лежат 4 файла. В директории Y лежит директория G, в которой лежит еще один файл. Задача – поставить ссылку, открывающую один из первых 4-х файлов из файла fail5.html

Абсолютный путь:
<a href="http://сайт.ру/X/fail1.html">название ссЫлки на 1-й файл</a> – ссылка этого вида сработает с любого места сайта, даже если конкретно эту HTMLьку перенести на совсем другой сайт.
абсолютный путь до файла file5.html в этом случае соответственно –
<a href="http://сайт.ру/Y/G/fail5.html">название ссЫлкина 5-й файл</a>

Зависимые пути:
до files1.html из файла files5.html:
<a href="../../X/fail1.html">название ссылки</a> – если перенести файл с такой ссылкой в другую директорию сайта – она уже не сработает.

до files5.html из файла files1.html:
<a href="../Y/G/fail5.html">название ссылки</a> – эта сслыка тоже не сработает, если ее местоположение внутри сайта изменится, например, в результате реформирования раздела.

Теперь пояснение – «../» это означает команду браузеру подняться из текущей директории на уровень выше. Сколько их у нас всего? Сайт.ру/X/Y/ считаем: Сайт – это у нас «корневой каталог» (как диск С:, например), в нем директория Y в которой еще и G. Две директории. Следовательно, «../» пишем два раза – без кавычек естественно(см. выше). Теперь браузер с текущего места (из файла fail5.html), откуда получила ссылку, выберется в корневую директорию (http://www.сайт.ru/), но отсюда надо идти в другие директории, опять вглубь сайта. Идем: /X/ – на директорию вглубь.

Еще вариант, если файл, в который ведет ссылка, находится в той же директории, можно написать просто <a href="fail4.htm">
В этом случае бродилка попробует запустить заданный в ссылке файл в этой же самой директории, где находится содержащий ссылку файл.

С fail5.html на другие файлы такая ссылка не прокатит.
(Она должна будет иметь вид ../../X/files1.html)

Но самое удобное, это ПУТЬ ОТ КОРНЯ, он же «относительный»
Мы просто указываем путь относительно корня (начала сайта)

То есть, если мы напишем /X/fail3.html, то при условии, что бродилка находится на сайте, а не смотрит на сохраненную пагу, мы попадем аккурат на файл3.html

Этот способ указания ссылок наиболее оптимален, так как нам не нужно высчитывать, на сколько уровней подниматься относительно директории с файлом, из которого мы идем. Мы просто указываем путь до того файла, который хотим видеть от КОРНЯ сайта.

Например, открыта у нас в Far`e или какой ее подобной оболочке директория Program Files. Написав в командной строке c:/windows/notepad.exe – в этом пути не учитывается ОТКУДА мы обращаемся к файлу такому-то. Учитывается только, где он лежит относительно корня. В нашем случае это диск С:. В случае вашей странички – http://страница.ru/
И вид у ссылки будет: <a href="/teach/html/index">начало уроков по HTML</a>

Что еще нужно знать про ссылки?
Иногда очень удобно бывает, чтобы ссылка открылась в новом окне, а та страничка, с которой мы пошли, осталась неизменной и никуда не пропала. В этом случае мы можем навести на линк курсор и, нажав правую кнопку мыши, выбрать в контекстном меню вариант «Открыть в новом окне» (для туканов: вторая сверху строка субменюшки*). А можно – облегчить посетителю жись и прописать эту опцию в своей ссылке самостоятельно:

<a href="http://сайт.ru/X/fail1.htm" target="_blank">открыть "fail1.html" в новом окне</a>

да-да. вот это самое target="_blank" Оно пишется через пробел после href="URL" и закрывается символом >.

какие виды target еще бывают?

_self – это загрузит линк в активное окно. То есть в то, в котором нажат линк. Он срабатывает по умолчанию.
_parent
_top

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

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

Разместив где-либо в тексте «якорь» вида <a name="число или имя (английскими буквами!)", вы можете позиционировать страничку этой меченой строкой по верхней кромке окна бродилки. Набираем в адресной строке имя нашего файла, но после концовки ставим дополнительное "#имя метки". Например, метку в файле file1.htm мы назвали metka 2 – обратиться к ней можно, вызывав файл /путь/file1.htm#metka2 – это можно сделать как вручную, набрав это в строке адреса, так и забив в ссылку вида <a href="file1.htm#metka2">обращение к метке №2</a>

Ссылки могут быть также прилеплены и на картинки. То есть, срабатывать при наведении/нажатии курсора на картинку.

<img src="название.gif" width="82" height="90" border="0" alt="картинка">

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