Гиперссылки

Наверное, самый важный элемент веб-сайтов и интернета – гиперссылки. Щелкнув на гиперссылку, пользователь перейдет на соответствующий сайт. Чтобы сделать гиперссылку нужно использовать тег <a> с закрывающим тегом </a> и атрибутом href, значением которого должен быть адрес необходимого сайта. Например, разместив в коде веб-странички следующую запись
Код
<a href="http://www.yandex.ru">www.yandex.ru</a>

пользователь увидит гиперссылку (в дальнейшем просто ссылку): www.yandex.ru , и после того как он щелкнет по ней, браузер откроет сайт www.yandex.ru (знаменитая российская поисковая система). Данная ссылка относиться к внешней гиперссылке, на что указывает префикс "http://" в начале адреса веб-ресурса, указанном в атрибуте href. Если префикс "http://" не указан, то ссылка будет относительной, и в качестве отправной точки будет использоваться адрес текущего документа. То есть ссылка будет указывать на веб-документ (например, другую страницу сайта) расположенный на текущем сайте. Например, если на странице с адресом "www.mysite.ru/index.html" вставить следующий код
Код
<a href="mypage.html">Моя страничка</a>

то, щелкнув по ссылке «Моя страничка» браузер откроет страницу с адресом "www.mysite.ru/mypage.html".
То есть, при создании ссылки на другой сайт, нужно указывать префикс "http://" и полный путь к веб-документу. Если делается ссылка на другую страничку того же веб-сайта, данный префикс указывать не нужно и в качестве значения атрибута href нужно будет указать имя этой странички.
Бывают и другие префиксы, но сейчас ограничимся лишь этим.
Еще бывают локальные ссылки, то есть ссылки в другие места той же веб-страницы. Такие ссылки делаются аналогично, с использованием тега <a> и атрибутом href, но значение атрибута href должно состоять из символа "#" и имени якоря, то есть того места, которое должно отобразиться после щелчка по этой ссылке. Например
Код
<a href="#local_link">Подробнее о локальных ссылках</a>

В нужном месте ставится якорь с помощью все того же очень нами любимого тега <a>, но с атрибутом name. В качестве значения атрибута name должно выступать имя якоря, например
Код
<a name="local_link">Локальные ссылки</a>

Таким образом, когда пользователь щелкнет по ссылке с текстом «Подробнее о локальных ссылках», браузер прокрутит страницу так, чтобы якорь с текстом «Локальные ссылки» был виден пользователю (по возможности браузер отобразит якорь в самом верху окна).
Можно также совмещать локальные ссылки с другими, то есть можно поставить ссылку не только на другую страничку веб-сайта, но и указать имя якоря, к которому браузер должен прокрутить открываемую при щелчке по ссылке страницу. Например, если на странице с адресом "www.mysite.ru/mypage.html" поставить якорь
Код
<a name="local_link">Локальные ссылки</a>

то на странице с адресом "www.mysite.ru/index.html" где-либо в тексте можно будет установить следующую ссылку
Код
<a href="mypage.html#local_link">подробнее о локальных ссылках</a>

Тогда после щелчка по этой ссылке, браузер откроет страницу "mypage.html" и прокрутит страничку к якорю с текстом "Локальные ссылки".
Управление цветом гиперссылок

 

В большинстве браузеров по умолчанию текст гиперссылки отображается подчеркнутым и синим цветом. Большие возможности по управлению внешним видом ссылок дают CSS (каскадные таблицы стилей), но менять цвет можно и с помощью HTML. Задать необходимый цвет отображения гиперссылки можно атрибутом link тега <body>, установив в качестве его значения нужный цвет, например
Код
<body link="#008000" text="#408080" bgcolor="#E8E8E8">

Обычно браузер отображает ссылки, которыми пользователь еще не пользовался одним цветом, а «посещенные» другим цветом. Цвет «посещенной» ссылки можно установить атрибутом vlink тега <body>. А цвет активной ссылки, то есть той, на которой в данный момент происходит щелчок кнопки мыши, можно задать атрибутом alink. Например
Код
<body link="#008000" vlink="#FF00FF" alink="#000000" text="#408080" bgcolor="#E8E8E8">
Опубликовано 13 июня 2008 г.
Комментарии к публикации
Всего комментариев: 3
прохожий: Лустик | 20.09.2010, 09:54 #
Если страница довольно длинная по высоте, то локальный ссылки очень даже помогают в навигации.
прохожий: Kirill | 09.06.2011, 21:21 #
Статья тяжела в понимании, многое осталось за кадром так и не отложилось в голове. Если есть образец или ссылка на сайт где все будет показано наглядно, то я был бы очень признателен администрации сайта.
Суперадмин: | 12.06.2011, 07:50 #
В статье все очень подробно написано. Читайте до тех пор, пока не поймете ;)
Вход в аккаунт
Новости сайта