Типы гиперссылок
Гиперссылка - основа сети World Wide Web. Она является инструментом взаимодействия сайтов и навигации по сети.
На странице сайта могут быть разные по смыслу гиперссылссылки:
- 1. Внешняя ссылка
- 2. Внутренняя ссылка
- 3. Ссылка с анимированным подчеркиванием
- 4. Сcылка на электронную почту
Каждая из этих ссылок может быть оформлена в своем стиле для того, чтобы пользователь мог лучше ориентироваться на странице сайта.
1. Внешняя ссылка
Внешняя ссылка - ссылка на какой-либо внешний по отношению к текущему сайту ресурс в Интернете. При этом ссылка указывает на абсолютный адрес файла в Интернете href="http://na-lenskoy.ru", свойство target="_blank" определяет открытие нового окна для внешнего ресурса, свойство title="Читайте официальный сайт ДДЮТ" - всплывающая подсказка.
<html>
<head>
<title>Пример оформления внешней ссылки</title>
<style>
a.external {
font-family:arial;
font-size:18px;
color: #900;
text-decoration:none;
background:url(images/hyperssilki
/pictogramma.gif) no-repeat right top;
}
a.external:hover {
color: #A6C4EC;
text-decoration:underline;
}
</style>
</head>
<body>
<p>
<a class="external" href="http://na-lenskoy.ru" target="_blank" title="Читайте официальный сайт ДДЮТ "На Ленской">
http://na-lenskoy.ru</a>
</p>
<body>
</html>
Пример оформления внешней ссылки:
Ссылка оформлена с довавлением пиктограммы 
.
2. Внутренняя ссылка
Внутренняя ссылка - это ссылка на файлы, находящиеся на одном и том же сервере. В этом случае указывается относительный адрес связываемых документов. Такие ссылки еще называют обычными и создаются они с использованием якорного элемента <a>...</a>. Адрес ссылки href="page.html", свойство target="_self" указывает на то, что страница будет выводиться в родительское окно (в то же самое, а не в новое окно).
<html>
<head>
<title>Пример оформления обычной ссылки</title>
<style>
a {
font-family:arial;
font-size:18px;
color: #900;
text-decoration:none;
}
a:hover {
color: #A6C4EC;
text-decoration:underline;
}
</style>
</head>
<body>
<p>
<a href="page.html" target="_self" title="Переход на страницу page.html">
Новая страница</a>
</p>
<body>
</html>
Пример оформления обычной ссылки:
3. Ссылка с анимированным подчеркиванием
Интересный эффект можно создать с помощью изображений содержащих анимированную линию подчеркивания.
<html>
<head>
<title>Пример ссылки c анимированным подчеркиванием/title>
<style>
a {
font-family:arial;
font-size:14px;
color: #900;
padding-bottom:4px;
text-decoration:none;
background:url(../images/hyperssilki/
underline.gif) repeat-x left bottom;
}
a:hover {
color: #A6C4EC;
background:url(../images/hyperssilki/
Hyper1.gif) repeat-x left bottom;
}
</style>
</head>
<body>
<p>
<a href="page.html" target="_self"
title="Переход на страницу page.html">
Переход на новую страницу</a>
</p>
<body>
</html>
Ссылка оформлена с помощью анимированной линии подчеркивания.
4. Ссылка на электронную почту
Интересный эффект можно создать с помощью изображений содержащих анимированную линию подчеркивания.
<html>
<head>
<title>Пример оформления ссылки на почту</title>
<style>
a {
font-family:arial;
font-size:14px;
color: #900;
text-decoration:none;
background:url(../images/hyperssilki/
email.gif) repeat-x left bottom;
}
</style>
</head>
<body>
<p>
<a href="mailto:vasya@mail.ru"
title="Написать письмо автору">
Написать письмо автору
</a>
</p>
<body>
</html>
Здесь тоже добавлена пиктограмма 
, отличающая ее от обычной ссылки.
Скачать пиктограммы и анимированную линию подчеркивния.
