HTML Част 9 (Хипервръзки – link)

Хипервръзки
Тагът за хипервръзка е <a>, като на неговия атрибут href се задава за стойност адреса, към който води връзката. Тагът има затварящ таг </a>. ПРИМЕР:

<a href="http://web-tourist.net">Връзка към web-tourist.net</a>

В прозореца на браузъра ще се вижда надписа Връзка към web-tourist.net, при кликване върху който ще се отваря началната страница на web-tourist.net

По подразбиране връзките се показват в браузъра сини на цвят и подчертани, а посетените връзки – виолетови. Цвета им може да бъде променен чрез атрибутите link, alink и vlink на тага body (които са извадени от стандартите на езика и не се поддържат от XHTML 1.0 Strict DTD) или чрез ползване на CSS.

Когато хипервръзката води до вътрешна страница от някакъв сайт, е необходимо да се укаже точния адрес на тази страница.

ПРИМЕР:

<a href="http://www.web-tourist.net/page.html">Връзка към страница page.html от сайта web-tourist.net</a>

ХИПЕРВРЪЗКИ КЪМ СТРАНИЦИ ОТ ЕДИН И СЪЩ САЙТ

Освен към външни страници хипервръзките могат да водят към страници от един и същ сайт – по този начин той ще изглежда като един цял документ. В този случай не е задължително да се указва пълния адрес на дадена страница. Как точно ще се зададе адреса зависи от това в коя точно папка се намира страницата, към която се прави хипервръзка.

Нека имаме следната структура на сайт:

• файл index.html, който се намира в основната директория (папка)
• файл page1.html, който се намира също в основната директория
• файл page2.html, който се намира в папка folder1

Основна директория (основна папка)
index.html
page1.html

folder1 (папка, вложена в основната)
page2.html

Тогава хипервръзките между тези страници трябва да изглеждат по следния начин:

1. Връзката от началната страница index.html към страница page1.html, която се намира в същата директория (папка), съдържа само названието на страницата, към която води:

<a href="page1.html">Връзка към страница page1.html от началната страница index.html</a>

Връзката от началната страница index.html към страницата page2.html, намираща се в папка folder1, трябва да съдържа наименованието на папката (folder1) и наименованието на страницата (page2.html), отделени с наклонена надясно черта:

<a href="folder1/page2.html">Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a>

Връзката от страницата page2.html, намираща се в папка folder1, към началната страница index.html, трябва да съдържа две точки, наклонена надясно черта и наименованието на страницата, към която води (index.html):

<a href="../index.html">Връзка към страница index.html от страницата page2.html, намираща се в папка folder1</a>

ХИПЕРВРЪЗКИ КЪМ ЧАСТИ ОТ ЕДНА И СЪЩА СТРАНИЦА

Освен към външни страници и към страници от един и същ сайт хипервръзките могат да водят и към различни места от една и съща страница. Това е подходящо за дълги страници, за да не скролират посетителите в търсене на нужната информация.

Хипервръзка към друга част от една страница се прави по следния начин:

1. Създава се т.нар. „котва“ чрез атрибута name на тага а и се поставя на мястото от страницата, към което ще води връзката. „Котвата“ трябва да има следния формат:

<a name="Произволно зададено название на котвата"></a>

Ако например трябва да се направи връзка към долната част на страницата котвата може да изглежда така:

<a name="bottom"></a>

Bottom е „дъно“ на английски, но това название е избрано само за удобство – то може да бъде и всякакво друго, например kotva1, dolu и т.н.

1. Котвата се поставя в оная част от страница, към която ще води връзката. Ако например връзката ще бъде към дъното на страницата, котвата се поставя в долната част на секцията BODY на страницата. (За да има ефект тази хипервръзка страницата трябва да е дълга.)
2. В горната част на страницата се поставя самата хипервръзка, която ще води към вече направената котва. Тя трябва да изглежда така:

<a href="#bottom">Връзка към долната част на страницата</a>

Т.е. хипервръзката съдържа названието на котвата със знака диез (#) отпред.

Котвата от горния пример е невидима – между началния таг <a name=“bottom“> и затварящия таг </a> не е изписан никакъв текст. На котвата може да бъде зададен и текст, което да се вижда на екрана, например:

<a name="bottom">Това е название на "котва", което ще се вижда на екрана</a>

Ако в една страница са използвани такива хипервръзки може да се направи връзка към точно определено място от определена страница по следния начин:

<a href="http://www.web-tourist.net/page.html#bottom">Връзка към долната част на страницата page.html от сайта www.web-tourist.net</a>

Забележка: Предвижда се в бъдещите версии на XHTML атрибута name да бъде заменен от атрибута id.

ХИПЕРВРЪЗКА, КОЯТО СЕ ОТВАРЯ В НОВ ПРОЗОРЕЦ

Обикновените хипервръзки зареждат страницата към която водят в същия прозорец на браузера, от който е кликнато по връзката. Така се губи от поглед първата страница и трябва да се натиска „Back“-бутона от горното меню на браузъра за връщане в нея. За да се отвори страницата в отделен прозорец към тага <a> трябва да се добави атрибута target и да му се зададе стойност _blank:

<a href="http://web-tourist.net" target="_blank">Връзка, която ще се отвори в нов прозорец</a>

Като стойност на таргет може да се зададе и произволно избрано име, например target=“mytarget“ и т.н. По този начин всички връзки (например 5 на брой), на които бъде присвоен атрибута target със стойност mytarget ще се отварят в един и същ прозорец.

ХИПЕРВРЪЗКА КЪМ E-MAIL АДРЕС

Хиперръзката към e-mail адрес изглежда по следния начин:

<a href="mailto:name@web-tourist.net">name@web-tourist.net</a>

Ако посетителя на страницата няма на компютъра си програма за електронна поща няма да може да изпрати директно e-mail, а ще трябва да препише или копира адреса. Затова е препоръчително във видимата част на връзката да се изписва избрания адрес, а не надпис от рода на „изпратете имейл“ или нещо подобно.

ИЗОБРАЖЕНИЯ ВЪВ ВИД НА ХИПЕРВРЪЗКИ

Освен текст за хипервръзки могат да служат и изображенията (картинки, снимки и пр.). За да се ползва едно изображение като хипервръзка трябва да се напише код, подобен на следния:

<a href="http://www.web-tourist.net"><img title="Връзка към web-tourist.net" src="image.gif" /></a>

В случая се използва изображението image.gif за да се направи връзка към сайта www.web-tourist.net

За да се премахне рамката, която се появява около изображение, използвано като хипервръзка, към тага за изображения трябва да се добави атрибута border със стойност 0:

<a href="http://www.web-tourist.net"><img title="Връзка към web-tourist.net" src="image.gif" border="0"/></a>

Този УРОК е написан от мен за web-tourist.net