Един от най-често срещаните елементи в една HTML страница, освен метатаговете, е тагът за хипервръзка. Често наричана и препратка, хиперлинк или линк. В един HTML документ може да се добавят препратки към други документи или ресурси, които се намират на същия сървър или на външен за сайта сървър.
Вижте още: 🔗 Какво е хипертекст (hypertext)? | Help
HTML тагът за препратка е <a>
, като на неговия атрибут href
се задава за стойност URL адресът, към който води връзката. Тагът има затварящ таг </a>
. Например:
<a href="https://superhosting.bg">връзка към superhosting.bg</a>
В прозореца на браузъра ще се вижда текста връзка към superhosting.bg, при кликване върху който ще се отвори началната страница на сайта superhosting.bg
По подразбиране връзките се показват в браузъра сини на цвят и подчертани, а посетените връзки – виолетови. Цветът им може да бъде променен чрез ползване на CSS код.
Когато препратката води до вътрешна страница от сайта, е необходимо да се укаже точен адрес на тази страница.
пример:
<a href="https://mysupersite.com/page.html">Връзка към страница page.html от сайта mysupersite.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://mysupersite.com/page.html#bottom">Връзка към долната част на страницата page.html от сайта mysupersite.com</a>
Препратка, която се отваря в нов прозорец
Обикновените препратки зареждат страницата, към която водят, в същия прозорец на браузъра, от който е кликнато на връзката. Така се губи от поглед първата страница и трябва да се натиска „Back“-бутона от менюто на браузъра за връщане в нея. За да се отвори страницата в отделен прозорец, към тага <a>
се добавя атрибутът target
и му се задава стойност _blank
:
<a href="https://mysupersite.com" target="_blank">Връзка, която ще се отвори в нов прозорец</a>
Като стойност на target може да се зададе и произволно избрано име, например target="mytarget"
и т.н. По този начин всички връзки (например 5 на брой), на които бъде присвоен атрибута target със стойност mytarget ще се отварят в един и същ прозорец.
Препратка към имейл адрес
Препратката към имейл адрес изглежда по следния начин:
<a href="mailto:name@mysupersite.com">name@mysupersite.com</a>
Ако посетителят на страницата няма на устройството си приложение за електронна поща, няма да може да изпрати директно писмо, а ще трябва да препише или копира адреса. Затова е препоръчително във видимата част на връзката да се изписва електронният адрес, а не надпис от рода на „изпратете имейл“ или нещо подобно.
Изображения във вид на препратки
Освен текст за препратките може да служат и изображенията (картинки, снимки и пр.). За да се ползва едно изображение като препратка, трябва да се напише код, подобен на следния:
<a href="https://mysupersite.com"><img src="image.gif" /></a>
В случая се използва изображението image.gif, за да се направи връзка към сайта mysupersite.com.
Уеб сайтовете са колекции от отделни html страници с хипертекст, свързани чрез препратките в тях. CMS платформите като WordPress генерират страниците на сайта и препратките им автоматично.
🔗 Твоят първи WordPress сайт в три стъпки | Blog