HTML. Гиперссылки

Гиперссылки

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

<a href=”http://что-то там.ру”>наименование линка</a>
так выглядит обыкновенная ссылка  в коде. А в браузере мы увидим то, что находится в “контейнере” тега, то есть в нашем примере это – “наименование линка”.
Казалось бы, все ясно, но есть нюансы..

Пути в гиперссылке могут быть абсолютными или же относительными.
Что такое абсолютный путь?
Это ссылка вида <a href=”/”>мой сайт</a> – ссылка, ведущая на мой сайт из любого места, даже будучи расположенной в сохраненном на винте документе она будет переправлять пользователя на забитый в нее адрес.
Что такое путь относительный?
– это путь, отсылающий юзверя с учетом текущего его местоположения. Например, мы имеем сайт site.ru . А в нем имеем пачку директорий, среди которых, например, XXX – гляньте в адресную строку бродилки (тем, кто в танке – это в самом верху ;0)) видим там примерно такое – site.ru/директория/файл.html (вообще обычно пага оканчивается на .html, или даже .shtml, а у пользующих php – вообще файлы “без расширения”, но это не суть важно).

В общем… – относительный путь (в конкретном случае следует рассматривать то, что после знака “равно”) читается как Сайт, директория “teach”, в ней директория html, и в ней уже лежит файло с именем links (окончание не пишу, потому как оно прописано в скрипте .php) со всей этой пургой. Итак… Рассмотрим ссылки на страничку “index” (файл “Бредисловие”):“Абсолютный” (“жесткий”) путь:
<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
fail1.html
fail2.html
fail3.html
fail4.html
/Y
/G
fail5.html

Для тех, кто в танке, поясню подробнее: На сайте две директории – 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 – в этом пути не учитывается ОТКУДА мы обращаемся к файлу такому-то. Учитывается только, где он лежит относительно корня. В нашем случае это диск С:. В случае вашей странички – https://site.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

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

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

Разместив где-либо в тексте “якорь” вида <a name=”число или имя (английскими буквами!)”, вы можете позиционировать страничку этой меченой строкой по верхней кромке окна бродилки.   Набираем в адресной строке имя нашего файла, но после концовки ставим дополнительное “#имя метки”. Например, метку в файле file1.htm мы назвали metka 2 – обратиться к ней можно, вызывав файл /путь/file1.htm#metka2 – это можно сделать как вручную, набрав это в строке адреса, так и забив в ссылку вида <a href=”file1.htm#metka2″>обращение к метке №2</a>
Вот, собственно, и все основное, что нужно знать о гиперлинках. А…, да, конечно же
  Ссылки могут быть также прилеплены и на картинки. То есть, срабатывать при наведении/нажатии курсора на картинку.
Вот это вставит в докУмент картинку название.gif шириной 82 пиксела, высотой 90 пикселов и имеющую бордюр в 0 пикселов. То есть, не имеющей оного :0) :
  <img src=”название.gif” width=”82″ height=”90″ border=”0″ alt=”картинка”>
но про картинки и фоны будет отдельная глава, так что наберитесь терпения и листайте по порядку ;0)