Помощен център

Препратка (линк, хипервръзка) в HTML

Един от най-често срещаните елементи в една HTML страница>, освен метатаговете, е тагът за хипервръзка. Често наричана и препратка, хиперлинк или линк. В един HTML документ може да се добавят препратки към други документи или ресурси, които се намират на същия сървър или на външен за сайта сървър.

Вижте още: Какво е хипертекст (hypertext)? | Help

HTML тагът за препратка е <a>, като на неговия атрибут href се задава за стойност URL адресът, към който води връзката. Тагът има затварящ таг </a>. Например:

<a href="https://vpsextra.com">връзка към vpsextra.com</a>

В прозореца на браузъра ще се вижда текста връзка към vpsextra.com, при кликване върху който ще се отвори началната страница на сайта vpsextra.com

По подразбиране връзките се показват в браузъра сини на цвят и подчертани, а посетените връзки – виолетови. Цветът им може да бъде променен чрез ползване на CSS код.

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

пример:

<a href="https://myvpssite.com/page.html">Връзка към страница page.html от сайта myvpssite.com</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>

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

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

3. Връзката от страницата 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 и т.н.

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

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

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

2. В горната част на страницата се поставя самата връзка, която ще води към вече направената котва. Тя трябва да изглежда така:

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

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

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

<a href="https://myvpssite.com/page.html#bottom">Връзка към долната част на страницата page.html от сайта myvpssite.com</a>

Препратка, която се отваря в нов прозорец

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

<a href="https://myvpssite.com" target="_blank">Връзка, която ще се отвори в нов прозорец</a>

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

Препратка към имейл адрес

Препратката към имейл адрес изглежда по следния начин:

<a href="mailto:name@myvpssite.com">name@myvpssite.com</a>

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

Изображения във вид на препратки

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

<a href="https://myvpssite.com"><img src="image.gif" /></a>

В случая се използва изображението image.gif, за да се направи връзка към сайта myvpssite.com.