гиперссылки в html

Система навигации и гиперссылки

Навигация, для чего она нужна? Это была одна из главных идей при создании языка разметки html, чтобы люди могли очень быстро и просто переходить как от документа к документу, так и внутри документа. Соответственно видов навигации бывает 2 — внутренняя и внешняя.

Внутрення навигация: метки (якорь, anchor)

Внутрення навигация происходит по документу, который уже открыт. Например, мы открыли большой документ, появляется прокрутка, и чтобы сразу человека направить к нужному месту, мы применяем внутреннюю навигацию. Для этого мы должны то самое место, которое человеку хотим показать, снабдить меткой. Пример:

<a href="#метка">текст</a>
...
<a name="метка"></a>
<p id="метка">какой-то текст

Т.е. в этом примере мы использовали атрибут id. В любой элемент можно поставить элемент id. В этом атрибуте напишем любой значение (в примере — ‘метка’), а потом, чтобы к этому месту человека переместить, мы в элементе гиперссылка поставим нашу метку, а перед ней знак хэш (#). Теперь, когда человек кликает на ссылку, документ прокручивается так, чтобы наш параграф стал максимально высоко к верхнему краю области просмотра.

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

В значении атрибута id можно использовать любые буквы в разном регистре (кодировка юникод позволяет применять любые символы из любых языков), цифры, дефис, подчеркивание, точку, двоеточие. Значение атрибута id должно обязательно начинаться с буквы. Саму метку лучше указывать в кавычках.

Значение атрибута id уникальное. Т.е. на странице не должно быть двух и более элементов с одинаковым значением этого атрибута.

Внешняя навигация

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

<a href="имя_файла">текст</a>
<a href="1.html">Это ссылка на 1.html</a>
<a href="2.html">Это ссылка на 2.html</a>
<a href="3.html">Это ссылка на 3.html</a>

Адреса бывают двух видов: относительные (в примере выше) и абсолютные (когда указывается полный адрес документа с www).

В ссылках не надо указывать кириллицы, пробелов и верхнего регистра.

Файлы лежат в одной папке. В этом случае, если я хочу из одного документа открыть другой, я должен в нем указать в качестве пути ко второму документу просто его название (href=»target.html»). Относительный путь состоит из перехода по папкам. Поскольку мы уже находимся в той папке, в которой лежит целевой документ, мы его просто указываем в качестве имени.

Другая ситуация. Есть папка, где лежит текущий файл. Нам из него надо открыть целевой файл target.html, который лежит в папке folder, т.е. он находится в другой папке. Тогда пишем так: href=»folder/target.html».

Если наш текущий файл лежит в папке folder, а целевой файл в папке выше по уровню (например, в root), т.е. надо не спускаться по иерархии вниз, а наоборот, подняться выше. Используем для родительской папки абстрактное имя — две точки (..).

Примеры относительных путей:

href="../target.html"
"../folder/target.html"
"info.html"
"manual/info.html"
"manual"
"../help.html"
"../project/first.html"
"../../about/contact.html"
...
"/" - корень сайта
"/demo/"
"/images/pic.gif"
"./file/doc.html" = "file/doc.html"
...
<head> //В заголовке!
<base href="http://mysite.ru">

Переход к другому документу с меткой

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

<a href="путь к файлу#метка">текст</a>
<a href="1.html#а">Ссылка на файл 1.html с меткой "а"</a>
<a name="а">В этом месте поставлена метка</a>

Абсолютные адреса

Когда мы работаем на сервере, выше корневой папки подняться не сможем (пространство корневой папки задается доменами). Примеры:

Ссылка на HTML файл по протоколу HTTP:
<a href="http://www.site.ru/page1.html">Пример</a>
Ссылка на ZIP файл по протоколу HTTP:
<a href="http://www.site.ru:81/test.zip">Пример</a>
Ссылка на EXE файл по протоколу FTP:
<a href="ftp://site.ru/pub/install.exe">Пример</a>
Ссылка на e-mail, при помощи протокола mailto:
<a href="mailto:name@site.ru">Пример</a>

В каком окне открывать ссылку?

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

Откроется в новом окне
<a href="file.html" target="_blank">ссылка</a>
<a href="file.html" target="_self">ссылка</a>

Гиперссылки

Гиперссылки выделяются несколькими способами:

  • Цвет (синий — цвет необработанной ссылки, красный — цвет активной ссылки, фиолетовый — цвет отработанной ссылки).
  • Подчеркивание.
  • Курсор меняет свой внешний вид.

Цвета для ссылок в коде задаются так:

link="blue" - неотработанная ссылка
alink="red" - активная ссылка
vlink="purple" - посещенная ссылка



Добавить комментарий

Ваш e-mail не будет опубликован.