 |
 |
Все о ссылках
В этой статье мы с Вами поговорим о ссылках. Употребляются они практически везде и без них существование самого Интернета было бы под большим вопросом. Чтобы создать простейшую ссылку надо вписать в Вашу страничку вот такую простейшую конструкцию:
<A HREF="URL документа">Текст ссылки</A>Вот реальный пример:
<A HREF="http://www.webmasteram.net.ru/">Портал для вебмастера</A> - Портал для вебмастераЧтобы при наведении на ссылку появлялась всплывающая подсказка придумали параметр TITLE. Вот как будет выглядеть наша ссылка после изменений:
<A HREF="URL документа" TITLE="краткое описание ссылки">Текст ссылки</A>Пример:
<A HREF="http://www.webmasteram.net.ru/" TITLE="Портал для вебмастера">Портал для вебмастера</A> - Портал для вебмастера
Для того, чтобы сделать ссылку на конкретное место в документе надо:
1. В нужное Вам место в документе вставить следующее:
<A NAME=anchor>текст</a>
2. Создать ссылку типа:
<a href=#anchor>Ссылка</a>
Теперь, щелкнув на 'ссылке' Вы переместитесь к 'тексту'.
Для того чтобы изменить цвет ссылки можно использовать CSS (об этом ниже) или использовать параметры тега BODY:
LINK - определяет цвет еще не посмотренной ссылкиVLINK - определяет цвет уже просмотренной ссылки
ALINK - определяет цвет активной ссылки
Пример:
<BODY LINK=red VLINK=blue ALINK=green>
Значениями этих параметров могут быть названия цветов (red, green, blue...) или их шестнадцатеричные эквиваленты (#ff0000, #00ff00, #0000ff…).
C помощью CSS можно сделать еще большие изменения:
a:link { color: red; } /* определяет цвет еще не посмотренной ссылки */a:visited { color: blue; } /* определяет цвет уже просмотренной ссылки */
a:active { color: green; } /* определяет цвет активной ссылки */
a:hover { color: lime; } /* определяет цвет ссылки, над которой установлен курсор мыши */
Между фигурными скобками могут использоваться те же параметры что и при форматировании текста (font-size, font-family, и др.).
Интересного эффекта можно добиться при использовании параметра background-color в CSS стилях. Обычно этот способ применяется при создании верхнего меню сайта:
a:link { color: #ffffff; background-color: #000099; text-decoration: none; font-weight:600; font-size: 12px; }a:visited { color: #ffffff; background-color: #000099; text-decoration: none; font-weight:600; font-size: 12px; }
a:active { color: #000088; background-color: #ffffff; text-decoration: none; font-weight:600; font-size: 12px; }
a:hover { color: #000088; background-color: #ffffff; text-decoration: none; font-weight:600; font-size: 12px; }
Что получилось, Вы можете просмотреть здесь.
