https://help.superhosting.bg/html-hyperlinks.html
  • bg

Хостинг, Домейни, Виртуални сървъри (VPS), Managed VPS, SSL сертификати

Хипервръзки, линкове в HTML

HTML
линкове, хиперлинкове, hyperlinks, links, a href, html a tag, html link, html anchor

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

HTML тагът за хипервръзка е <a>, като на неговия атрибут href се задава за стойност адреса, към който води връзката. Тагът има затварящ таг </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 и т.н.

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

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

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

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

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

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

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

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

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

Линк, който се отваря в нов прозорец

Обикновените хипервръзки зареждат страницата, към която водят, в същия прозорец на браузъра, от който е кликнато на връзката. Така се губи от поглед първата страница и трябва да се натиска "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>

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

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

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

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

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

500px270px
SuperHosting.BG

Коментари

avatar
  Абониране  
Уведоми ме при
Всички права запазени © 2005-2018 , www.superhosting.bg