Хиперлинкове

Езика HTML ви позволява да правите препратки (хиперлинкове/ хипервръзки) към други страници, към части от същата страница, към файлове, картинки или електронна поща. Без тях един web сайт не би имал никакъв смисъл.

  • Хиперлинк се създава с двойката елементи <A> и </A>. Когато правите препратка към някакъв интернет адрес, трябва да използвате атрибута HREF на елемента <A>. Ето един пример, който препраща към адрес http://www.search.bg :

<HTML>
<HEAD>
 <TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
 <A HREF=“http://www.search.bg“>SEARCH.BG</A&gt;
</BODY>
</HTML>

  • С <A HREF= се задава адреса, към който води препратката. В случая това е адреса на search.bg, предхождан от http://. Този адрес се нарича още URL. След това изписвате текста, който ще води до съответния адрес, в случая текста е SEARCH.BG. На екрана ви този сайт трябва да изглежда така :

SEARCH.BG

  • Когато посочите с мишката този надпис, курсора се сменя от стрелка на сочеща ръка.
  • Ако кликнете върху него отивате директно на адреса на search.bg. Забележете, че цвета на  текста е син, а самия текст е подчертан без вие да сте задавали такива параметри. Това е така, защото браузъра по подразбиране показва хиперлинка подчертан и със син цвят. Ако кликнете върху него, отидете на search.bg и после пак се върнете на тази страница, цвета вече няма да бъде син, а лилав. Причината за това е, че браузъра визуализира посетените от вас линкове с лилав цвят. Можете да промените цвета на линка по ваше желание. Това става с атрибутите на елемента <BODY> LINK, ALINK и VLINK. LINK  задава какъв да бъде цвета на линка, ALINK (active link) задава цвета на активния линк (този, на който се намирате в момента), а VLINK (visited link) задава цвета на посетените вече от вас линкове. Ето един такъв пример:

<HTML>
<HEAD>
<TITLE> hyperlink </TITLE>
</HEAD>
<BODY LINK=“#00FF00″ ALINK=“#00FFFF“ VLINK=“#FF0000″>
Посетете нашия
<A HREF=“http://forum.search.bg“><B>FORUM</B></A&gt;
</BODY>
</HTML>

  • Линкът ще бъде със зелен цвят, активният със светлосин, а посетеният със червен. Забележете, че ако искате линкът да се отвори в нов прозорец на браузъра, се използва атрибута TARGET на елемента <A>.
  • TARGET има няколко параметъра. За да се отвори линка в нов прозорец се ползва параметъра „_blank“. Ако пропуснете TARGET линкът по подразбиране се отваря в същия прозорец. Вижте примера с отварящ се в нов прозорец линк:

<HTML>
<HEAD>
<TITLE> hyperlink </TITLE>
</HEAD>
<BODY>
<A HREF=“http://www.search.bg“  TARGET=“_blank“>SEARCH.BG</A>
</BODY>
</HTML>

SEARCH.BG

Кликнете върху SEARCH.BG и ще видите сами. Другите параметри на TARGET ще ги разгледаме в страницата „РАМКИ“.

  • Освен препратки към други сайтове, можете да правите препратка и към собствения си сайт. За целта трябва да слагате всички web документи, създадени от вас в една папка или в нейните подпапки. Нека да направим един сайт ( не страница, а именно сайт, съвкупност от страници с препратки една към друга). Ще направим сайта от 3 страници, като ще ги именуваме „Начало“, „Лични данни“ и „Контакти“. Направете си нова папка на твърдия диск и и дайте името „website“. Сега да направим първата страница:

<HTML>
<HEAD>
<TITLE> Начало </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЛИЧНАТА МИ СТРАНИЦА </H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
<A HREF=“forme.html“>Нещо повече за мен. </A><BR>
<A HREF=“contact.html“>Пишете ми </A>
</BODY>
</HTML>

  • Запазете този документ в същата папка под името index.html. Сега да направим другите две страници от сайта:

<HTML>
<HEAD>
 <TITLE> лични данни </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЗА МЕН </H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете нещо за себе си
<BR>
<A HREF=“index.html“>Към началната страница</A><BR>
<A HREF=“contact.html“>Пишете ми</A>
</BODY>
</HTML>

  • Този документ го запазете в същата папка по името za_men.html и направете последната страница с името contact.html.

<HTML>
<HEAD>
<TITLE> свържете се с мен </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ПИШЕТЕ МИ</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете адреса си, e-mail и т.н.
<BR>
<A HREF=“index.html“>Към началната страница</A><BR>
<A HREF=“forme.html“>За мен</А><BR>
<A HREF=“myemail@website.bg“>Моя e-mail</A>
</BODY>
</HTML>

  • За да видите как изглежда го стартирайте от папка website на твърдия си диск. Виждате, че отделните страници са свързани с препратки помежду си. Когато задавате линкове към файлове, които са в същата папка, изписвате само името и разширението им (forme.html). Ако HTML документа е в друга под/папка на вашата папка, например под/папка main, трябва да зададете и пътя до там
    <A HREF=“main/forme.html“ >За мен </А>

    Новото в горния пример е <A HREF=“myemail@website.bg“>Моя e-mail</A>. Когато срещне myemail@website.bg  (име на имейла) и посетителят кликне върху текста браузърът стартира програмата му за електронна поща, която вписва в полето за изпращане адреса на имейла, който е зададен след myemail. По този начин се спестява ръчното стартиране и настройка на програмата за електронна поща. Ако посетителят няма такава програма (Eudora или Outlook Expres например) или използва webmail в hotmail или yahoo например, параметърът myemail няма да върши работа. Затова винаги пишете вашия e-mail между <A> и </A>. Ето така:

<A HREF=“myemail@website.bg“>Моя e-mail: myemail@website.bg</A>

  • Освен към други страници и e-mail можете да правите препратки в рамките на същата страница. Това става по следния начин. Изполвайки елемента <A> давате някакво име на определена част от HTML документа, нещо като маркировка. Например, „#begin„, за да се върнете в началото на страницата

<A NAME=“begin“>Езика HTML</A>

  •  Ако си спомняте така започваше тази страница. На първите две думи трябва да им зададете име за препратка „begin“, за да може като напишете <A HREF=“#begin“> върнете се в началото на страницата</A> и кликнете върху текста, да се върнете в началото на страницата. Ето, убедете се сами:
  • Можете да слагате навсякъде в документа такива маркировки и да правите препратки към тях. Също така, можете да препращате към друг HTML документ, в който има маркировка. Това става като първо напишете името на документа, после # и след това името на маркировката.

<A HREF=“index.html#begin“>Отивате на index.html с препратка към част begin </A>
или
<A HREF=“http://www.search.bg/index.html#begin“&gt;Отивате на index.html с препратка към част begin </A>

Вашият коментар