Гиперссылки
Гиперссылки - основа Интернета. Именно благодаря гиперссылкам Интернет стал "всемирной паутиной". Гиперссылки связывают воедино отдельные html-страницы в WEB-сайты из которых и состоит Интернет.
В окне бразуера стандартная текстовая гиперссылка выглядит как подчеркнутый текст синего цвета. При наведении курсора мышки на гиперссылку она принимает вид "указательного пальца". При щелчке на гиперссылке браузер обычно переходит к другой html-странице, URL-адрес которой указан в параметре гиперссылки. Гиперссылка может быть не только текстовой, но и графической.
Текстовые гиперссылки
Создать текстовую гиперссылку очень просто. Для создания гиперссылки достаточно заключить внутрь тега <А> любой фрагмент текста.
ПРИМЕР 1:
<p> Эта <a href="index.html">гиперссылка</a> ведет на главную страницу сайта. </p> |
Если ссылка должна быть открыта в новом окне браузера, используют атрибут target со значением "_blank":
ПРИМЕР 2:
<p> Эта <a href="index.html" target="_blank">гиперссылка</a> будет открыта в новом окне браузера. </p> |
Атрибут href со значением # формирует "пустую" ссылку, которая никуда не ведет.
ПРИМЕР 3:
<p> Эта <a href="#">гиперссылка</a> никуда не ведет. </p> |
Правила отображения стандартных гиперссылок:
- гиперссылка выделяется синим цветом;
- гиперссылка выделяется подчеркнутым текстом;
- гиперссылка, которую уже посетил пользователь, отображается темно-красным цветом;
- активная гиперссылка (выделенная курсором) отображается ярко-красным цветом;
- при наведении курсора мыши на гиперссылку, он приобретает форму указательного пальца.
Все эти значения можно изменить.
Почтовые гиперссылки
Щелчок на почтовой гиперссылке запускает почтовый клиент, который установлен в операционной системе на компьютере по умолчанию. Если нужно открыть почтовый адрес user@gmail.com - гиперссылка должна выглядеть следующим образом:
ПРИМЕР 4:
<p> Это <a href="mailto:user@gmail.com"> почтовая гиперссылка</a> </p> |
Обратите внимание, что атрибут href почтовой гиперссылки не должен содержать пробелов.
Графические гиперссылки
В качестве гиперссылки может выступать изображение или его фрагмент.
ПРИМЕР 5:
<p> <a href="index.html"><img src="image1.png"></a> </p> |
Правила вывода изображений-гиперссылок:
- изображение-гиперссылка окружается рамкой, которая имеет один из цветов, в зависимости от вида гиперссылки (смотри выше);
- при наведении курсора мыши на изображение-гиперссылку он приобретает вид указательного пальца.
Якоря
При помощи якорей отмечают определенные места в тексте html-страницы, на которые ссылаются из других мест.
Якорь создается, как и гиперссылка, но вместо атрибута href помещают атрибут ID. Атрибут ID должен быть уникальным в пределах текущей html-страницы.
Якорь является "пустым" тегом, внутрь него не помещается ничего.
<p> text <a ID="anchor-1"></a> text </p>
Гиперссылка, которая ведет на якорь, имеет следующий вид:
<a href="index.html#anchor-1">переход к якорю-1</a>
Если гиперссылка и якорь находятся на одной html-странице:
<a href="#anchor-1">переход к якорю-1</a>
Если гиперссылка и якорь находятся на разных сайтах:
<a href="http://site.index.html#anchor-1">переход к якорю-1</a>
При щелчке на такой гиперссылке браузер перейдет на нужную html-страницу, и прокрутит ее таким образом, что текст, отмеченный якорем, окажется вверху страницы.