1. Uvod
Linkovi (: veze , vezare ili vezice :) su osnovni dio WWW-a te bez njih surfanje ne bi bilo moguće.Postoje tri vrste linkova :
- link na sidro u trenutnoj stranici (unutrašnji)
- link na stranicu unutar našeg sajta (lokalni)
- link na stranicu na nekom drugom sajtu (globalni)
2. Textualni link
Textualni link ostvaruje se pomoću sidra.Vjerojatno se sada pitate kakva su nas sidra spopala. Odmah ću reći. Sidro (engl. anchor) jest u stvari tag <a> pomoću kojeg ostvarujemo neki link.
Npr. <a> text između </a>. Ahaaaaa upališ motorku !!!
No to još nije sve. Da bi se znalo kuda ćemo otići kad kliknemo na link potrebno je još da definiramo i odredište. To ćemo postići sa HREF atributom npr.
<a href= "roza.html"> klikni ovdje </a>
Primjer: vidi code » vidi stranicu
Napomena: Pripazite da nema razmaka između texta unutar A taga i samog A taga jer ćete u protivnom možda imati i podcrtano prazno mjesto što vrlo ružno izgleda.
Dakle, ovako <a href= "roza.html">klikni ovdje</a>
a ne ovako <a href= "roza.html"> klikni ovdje </a>
Atribut HREF može se definirati bilo apsolutnim bilo relativnim putem do fajla. Dakle priča je ista kao za slike pa ju nećemo opet ponavljati.
BOJA LINKA
Svaki browser ima svoje predefinirane (default) boje linka koje možemo
mijenjati u postavkama browsera. Da bi se izbjegle različitosti takve vrste dobro je da se unutar naše
stranice definira kakve će boje imati naši linkovi. Npr. ukoliko browser po defaultu prikazuje link
plavo, a naša pozadina je takođe plava tada taj dio texta nećemo moći vidjeti. Zato je potrebno da
naša stranica prikazuje linkove npr. crveno. Ovo se postiže atributima
TEXT , LINK , ALINK i VLINK unutar BODY taga.
<body text="blue" link="red" alink="green" vlink="black" >
Primjer: vidi code » vidi stranicu
Atribut TEXT određuje boju texta, LINK boju linka, ALINK (Active LINK) boju aktivnog linka te VLINK (Visited LINK) boju posjećenog linka. Moram priznati da mi svojedobno nije bilo jasno što je to aktivni link, a vjerovatno ni vama nije. Posjećeni link je onaj čiju smo stranicu već bili posjetili te je spremljena na naš hard disk pa do nje opet možemo doći offline, dakle kad se ištekamo s interneta. Aktivni link postoji u kratkom vremenskom intervalu, između trenutka kad kliknemo na link pa sve do pojavljivanja nove stranice. JavaScript rječnikom, link je aktivan ako je u fokusu no o tome u Javascript priručniku. U gornjem primjeru možete vidjeti kako jedan tren link pozeleni. Na ovaj način odredili smo boju texta i linkova za cijelu web stranicu.
Boju linka možemo promijeniti u svakom trenutku na još dva načina :
1. način: Ubacivanjem FONT taga.
<a href="http://www.yahoo.com">
<font color="FF00CC"> klikni me </font>
</a>
2. način: Pomoću CSS-a tj STYLE atributom
<a href="http://www.yahoo.com" style="color: rgb(0,255,0) ; "
> klikni me </a>
Primjer: vidi code » vidi stranicu
LINK BEZ PODCRTAVANJA
< a href="roza.html" style="text-decoration:none ; " >
Mada i to spada u područje CSS-a pogledajte primjer !
Primjer: vidi code » vidi stranicu
OTVARANJE STRANICE U NOVOM PROZORU
<a href="roza.html" target="_blank">
Primjer: vidi code » vidi stranicu
Atribut TARGET može imati slijedeće parametre :
| _blank | učitava stranicu u novi prozor browsera |
| _self | učitava stranicu u isti prozor ili okvir browsera |
| _parent | učitava stranicu u okvir prozora koji je više kategorije od okvira u kojem je link |
| _top | otkazuje sve okvire i učitava strnicu u punom prozoru |
3. Slikovni link
Slikovni link je kao što sama riječ kaže link kod kojeg umjesto texta stoji slika. Kada kliknemo na tu sliku otvara se nova stranica. U principu sve što smo rekli za textualni link može se primjeniti i za slikovni. Dakle umjesto texta između anchor tagova ubacimo img tag i ... to je to.<a href="roza.html"><img src="slika.gif" width="47" height="47"></a>
Primjer: vidi code » vidi stranicu
Ako ne želite da vam se pojavljuje onaj ružni okvir oko slike to ćete postići BORDER atributom unutar IMG taga.< img src="slika.gif" width="47" height="47" border="0" >
Primjer: vidi code » vidi stranicu
Kod nekih browsera će vam se pojaviti male plave crtice pored slike. To je zato jer razmak između IMG i A taga ineterpretiraju kao "prazno slovo" i zato povuku plavu crticu kao da je to textualni link. Zato kada pišete HTML code ne ostavljajte razmak između ova dva taga. Pogledajte naredni primjer.Primjer: vidi code » vidi stranicu
4. Načini povezivanja
LINK NA ISTU WEB STRANICU
Označiti riječ ili sliku unutar web stranice na koju ćemo doći kada kliknemo na link (baciti sidro :)
< a name="nesto" > text < /a >
Atribut NAME dodjeljuje ime našem sidru (anchor) kako bi ga mogli kasnije upotrijebiti u HREF atributu.
Sada možemo napraviti i link.
< a href="#nesto" > link < /a >
Primjer: vidi code » vidi stranicu
LINK NA DRUGU WEB STRANICU
< a href="../roza.html" > link < /a >
LINK NA DRUGU STRANICU I NJEZIN ODREĐENI DIO
Označiti riječ ili sliku unutar web stranice na koju ćemo doći kada kliknemo na link ( baciti sidro :)
< a name="slika" > text < /a >
Atribut NAME dodjeljuje ime našem sidru (anchor) kako bi ga mogli kasnije upotrijebiti u HREF atributu.
Druga stvar koju ćemo napraviti jest sam link .
< a href="../roza.html#slika" > link < /a >
Primjer: vidi code primarnog fajla » vidi stranicu » vidi code od roza2.html
I ne zaboravite # znak !LINK NA E-MAIL
To se radi ovako :
< a href="mailto: w3@foo.com " > emajliraj me < /a >
Pretpostavljate da je w3@foo.com e-mail adresa i to je dobra pretpostavka.
Primjer: vidi code » vidi stranicu
Ako pak hoćete da bude prikazan naslov to ćete učiniti ovako :<a href="mailto: w3@foo.com?subject=Slatke Riječi"> emajliraj me </a>
Ako hoćete da bude prikazan neki text u sadržaju poruke to ćete učiniti ovako :
<a href="mailto: w3@foo.com?body=Kupi mi čokoladu ! "> emajliraj me </a>
Kombinacija posljednje dve fore izgledat će ovako :
<a href="mailto: w3@foo.com?subject=Slatke Riječi &body=Kupi mi čokoladu !">
emajliraj me </a>
Pazite da znak & bude priljepljen uz riječ body inače stvar neće raditi.
Primjer: vidi code » vidi stranicu
Ukoliko želite između riječi upotrijebiti prazno mjesto, a naravno da želite upotrijebite %20.Npr. <a href="mailto: w3@foo.com?subject=Slatke%20Riječi&body=Kupi%20mi%20čokoladu ! "> emajliraj me </a>
Ovo je potrebno kako između riječi ne bi bilo praznih razmaka.
5. Posebni efekti
Umjesto da linkamo samo na html dokumente linkove možemo napraviti npr. na sliku ili na neku textualnu datoteku. Na zvuk ??? Možda. U svakom slučaju isprobavajte...
Da vidite što se sve može s linkovima pokazat ću na OnMouseOver
efektu. Kada pređemo mišem preko linka pojavit će se upozorenje.
<a href="roza.html" onMouseOver="alert('Pazi ne gazi !')"> link </a>
Primjer: vidi code » vidi stranicu
Ovo spada u područje JavaScript-a pa će biti objašnjeno u JavaScript priručniku.