Преглед на урок

Линкове (hyperlinks) в HTML

Линкове (hyperlinks) в HTML




Линкове (hyperlinks) в HTML


Този урок ще ви запознае с линковете (hyperlinks) в HTML.
Очаква се да знаете какво е таг, атрибут, стойност на атрибута, както и останалата част от основите на HTML.

Hyperlink или на кратко link е препратка към друга част на дадена уеб страница или към съвсем различна страница.
Думата Hyperlink има няколко еквивалента на български - връзка, линк или хиперлинк. Трите са синоними. В различни уроци или дискусии можете да ги срещате и в трите варианта. За мен най-удобно е линк, за това ще ползвам най-често него.


Основа на линковете

Линковете в HTML се задават чрез тага <a> където "а" е съкращение от anchor (от англ. котва, хвърлям котва)
Ето пример <a href="http://photoshop-bg.com">Photoshop-BG</a>
Това ще бъде изведено като - Photoshop-BG


HREF?!

Може би сте се зачудили какво всъщност атрибутът href означава. Е това е съкращение от Hypertext Reference (англ. текстова препратка)
Стойността на този таг е адресът, към който препраща даденият линк.


Препратка към друга част от същата страница

В началото написа, че линкът може да ви препрати към друга част от същата уеб страница. Ето как става това:
Да кажем, че имате няколко блока от по-дълги текстове и искате да направите така, че потребителите да се ориентират по-лесно. Ще направите линк към всеки един блок, така че да може от най-горната част на страницата (където ще поставите линковете) да се стига бързо и лесно до всеки един текстов блок, без да се налага да скролирате страници и страници.
За да направите всичко това, трябва само да поставите следния код пред някой от текстовите блокове (или неконкретно - на мястото, където искате да препраща линка):
<a name="ime_na_linka">...

След това, за да направите линк към тази позиция поставяте следния код:
<a href="#ime_na_linka">Otidete tam</a>

Както би трябвало да се досещате стойностите ime_na_linka и Otidete tam са само примерни и могат да бъдат сменени по всяко време.
В самия линк "#"-ът в началото дава информация на браузъра, че мястото, което ще посетим се намира в отворената страница.


Линк към друга страница

Да предположим, че имате две страници - stranica1.html и stranica2.html
За да поставите линк, който да води от stranica1.html към stranica2.html, трябва да използвате следния код:
<a href="stranica2.html">Stranica2</a> в stranica1.html

Аналогично, за да поставите линк, който да води от stranica2.html към stranica1.html, трябва да използвате кода:
<a href="stranica1.html">Stranica1</a> в кода на stranica2.html

За да направите линк към специфична част от друга страница се ползва почти същата техника. Поставяте <a name="middle"> в другата страница (която примерно се казва stranica2.html), връщате се на първата и поставяте следния код:
<a href="stranica2.html#middle">ime</a>
Началото на стойността на href задава към коя страница ще ни води линкът, а след # - към коя част от самата страница ще ни води линкът.


E-Mail Линкове

E-Mail линковете се ползват доста често. Те не са по-сложни за добавяне, ползване или овладяване...
Ето как изглежда един e-mail линк:
<a href="mailto:mail@adress.com">E-Mail</a>
Това ще изглежда като: E-Mail
В началото на стойността на атрибута href, казваме на браузъра, че в този линк ще въведем e-mail, чрез "mailto:".
След като цъкнете на този линк, браузърът ще отвори вашият e-mail клиент (по подразбиране) и ще въведе автоматично дадения e-mail в полето за получател.
Ако искате автоматично да бъдат попълнени и други полета, трябва да добавите още няколко неща към href стойността.
Например:
<a href="mailto:someone@adress.com?subject=Hello">Hello</a>
Ще промени темата на съобщението (subject) на Hello.

Ако искате да въведете текст в самото съобщение, ползвайте "?body=text" в края на линка. Това ще добави "text" към съобщението.

Естествено, можете да направите няколко модификации едновременно. Елементите се обединяват чрез "&". Например:
<a href="mailto:someone@adress.com?subject=Hello&body=Whats up?">Hello, whats up?</a>
Ще отвори мейл клиентът по подразбиране, като в полето на получателя ще бъде попълнено "someone@adress.com", в полето subject - "Hello", а в текста на съобщението "Whats up?"

Можете да направите линк, който да изпраща e-mail към повече от един e-mail адреса.
Това става като отделяте e-mail адресите със запетая:
<a href="someone@adress.com, another@adress.com, andanother@anotheradress.com">Mail them</a>

Това ще изпраща e-mail към адресите: someone@aderss.com, another@adress.com и andanother@anotheradress.com

Това е в общи линии!
Препоръчвам ви да прочетете урока един-два пъти и да се поупражнявате малко във въвеждането на всички видове линкове.
Линковете присъстват във всички добри сайтове. Ако искате да имате сайт, състоящ се от повече от една страница ще бъде задължително да ги ползвате.
За това е повече от препоръчително да ги овладеете добре!

Автор: GeorgeSG

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: GeorgeSG

Коментари

phony

Здравейте имам малко проблемче околу това пренасочване работя с Adobe Photoshop CS2 направих си сайта и го прехврлих в Adobe ImagReady о от там искам вече да си го пренасочвам кам страниците ..те са општо 6 и никак немога да намера как става пише нешто трябва да завършва на .htm правя го и това отварам директно на internet explorer и хубаво става само при мен вкъщи а като го кача на интернет страницата не иска да се местат страниците си стои само първата страница ....моля помогнете ми че ще полудея незнам колко време се мъча


Благодаря предваритлено

FINT

Извинявам се за можеби тъпия въпрос обаче тази част за препращане към по долна част осъщата страница не горазрбрах каде да напиша скрипта и какво точно? <a name="ime_na_linka">...

След това, за да направите линк към тази позиция поставяте следния код:
<a href="#ime_na_linka">Otidete tam</a>

на мястото на многоточието какво да напиша и каде да го поставя ще съм много благодарен ако ми обесните

Ne7WoRK

Не си написал че може да се слага и title на линка също и алт та значи ако сте сложили title когато отидете върху снимката ще ви излиза текста които сте написали примерно <a title="Влез сега!" href="http://abv.bg"></a> а alt когато още не е заредила картинката на неиното място да се появява текста които сте написали примерно <a alt="това е линк към абв.бг" href="http://abv.bg"></a> ... дано сам бил полезен ;)

counterbg

хаха <a href="http://vbox7.com/play:c8a1b813">Mnogo qko!!</a>

counterbg

:( неми става защо такааа :(((

counterbg

<a href="http://photoshop-bg.com">Photoshop-BG</a>

pi4agata91

<a href=*http://s4.bg.bitefight.org/c.php?uid=56049>Mn qka igra vlezte</a>

pi4agata91

nestaa

pi4agata91

<a href="#http://s4.bg.bitefight.org/c.php?uid=56049">Elate</a>

pi4agata91

незнам за вас но на мене не ми се получава ;(

BaSSHunteR

<a href="http://nagradata.com/vote.php?id=88">Click Here</a> пиша кода и не става кажете как да го направа плсс а е влезте тук http://nagradata.com/vote.php?id=88 моля ви мерси предварително :)

misho

BaSSHunteR, кажи че трупаш точки, да кликаме! :D

stanbsl

Вие глупави ли сте ве прочетете първо другите уроци

petiape

а как мога да направя линкове в сайта си, от които да могат да се свалят изработени от мен документи?искам да кача PDF файлове, които да могат да се свалят от сайта ми! Можете ли да ми помогнете?

demon_ef

Май не срещнахме тук : <a href="url" target="_blank">текст</a> отваря линка в нов прозорец? (url e адреса на страницата,а текст е каквото искате да се вижда)

sonk

<a href="http://s4.bg.bitefight.org/c.php?uid=56049">Elate</a>

sonk

тук не го изобразява линка инече бачка

hah4o

<a href="http://photoshop-bg.com">Photoshop-BG</a>

hah4o

<a href="http://photoshop-bg.com">Photoshop-BG</a>

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.