Гіперпосилання

Категорії статей: HTML ; 11.07.2009

Напевно, найважливіший елемент веб-сайтів і інтернету - гіперпосилання. Клацнувши на гіперпосилання, користувач перейде на відповідний сайт. Аби зробити гіперпосилання потрібно використовувати тег <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">

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.42MB | 0.09Sec ad Google