HTML Osnove - Linkovi, Links A Tag

HTML priručnici

HTML Osnove

Kontaktirajte nas...

Naručite CD

HTML Osnove

6. HTML veze (HTML link)

Hajdemo na linkch :-) !!!

6.1. Uvod

Linkovi (: veze , vezare ili vezice :) su osnovni dio WWW-a te bez njih surfanje ne bi bilo moguće.
I zato: "Learn this lesson or die !".

link na sidro u trenutnoj stranici (unutrašnji)
link na stranicu unutar našeg sajta (lokalni)
link na stranicu na nekom drugom sajtu (globalni)

Razlikuju se također textualni link te slikovni link. Pogledajmo prvo textualni !

6.2. Textualni link

Textualni link ostvaruje se pomoću sidra.
Vjerojatno se sada pitate kakva su me 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>
vidi stranicu vidi code

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. Pogledaj priču !

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" >
vidi stranicu vidi code

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
<a href="http://www.yahoo.com"> <font color="FF00CC"> klikni me </font> </a>
Ubacivanjem FONT taga.
    2. način
<a href="http://www.yahoo.com" style="color: rgb(0,255,0) ; " > klikni me </a>
Pomoću STYLE atributa, no to spada u domenu CSS-a pa neću posebno objašnjavati.
vidi stranicu     vidi kod

Važno je napomenuti da neki stariji browseri ne podržavaju posljednja dva načina, a neki podržavaju samo jedan od navedenih.

LINK BEZ PODCRTAVANJA

Ukoliko imate neutaživu potrebu načiniti link koji nije podcrtan možete to učiniti na slijedeći način :
< a href="roza.html" style="text-decoration:none ; " >
Mada i to spada u područje CSS-a pogledajte primjer !!!
vidi stranicu vidi code

OTVARANJE STRANICE U NOVOM PROZORU

Da bi se stranica otvorila u novom prozoru upotrijebit ćemo atribut TARGET (eng. meta, cilj).
<a href="roza.html" target="_blank">
vidi stranicu vidi code

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

Posljednja tri biti će obrađena u temi Okviri (engl. frames).

6.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>
vidi stranicu vidi code

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" >
vidi stranicu vidi code

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.
vidi stranicu vidi code

6.4. Načini povezivanja

LINK NA ISTU WEB STRANICU

Da bi ostvarili link na istu web stranicu na kojoj je i sam link potrebno je učiniti dvije stvari :
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 >
vidi stranicu vidi code

LINK NA DRUGU WEB STRANICU

Ovaj način povezivanja je najjednostavniji jer nije potrebno baciti sidro. Samo navedemo stranicu (fajl) na koju želimo skočiti i to je to.
< a href="../roza.html" > link < /a >

LINK NA DRUGU STRANICU I NJEZIN ODREĐENI DIO

Ako hoćemo skočiti na određeni dio neke druge web stranice, npr. text ili sliku učinit ćemo dvije stvari.
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 >
vidi stranicu     vidi code primarnog fajla     vidi code od roza2.html

I ne zaboravite # znak !!!

LINK NA E-MAIL

Kod ovakvog linkanja neće nam se otvoriti prozor našeg web browsera. Naime kad kliknemo na ovakav link otvorit će se e-mail client (Outlook, Outlook Express, Mozilla messager, Kmail ...) u koji ćete moći upisati poruku i poslati ju.

To se radi ovako :
< a href="mailto: w3@vip.hr " > emajliraj me < /a >
Pretpostavljate da je w3@vip.hr e-mail adresa i to je dobra pretpostavka.
vidi primjer vidi code

Ako pak hoćete da bude prikazan naslov to ćete učiniti ovako :
<a href="mailto: w3@vip.hr?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@vip.hr?body=Kupi mi čokoladu ! "> emajliraj me </a>

Kombinacija posljednje dve fore izgledat će ovako :
<a href="mailto: w3@vip.hr?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.
vidi primjer vidi code

Ukoliko želite između riječi upotrijebiti prazno mjesto, a naravno da želite upotrijebite %20.
Npr. <a href="mailto: w3@vip.hr?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 !!!

6.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>
vidi stranicu vidi code

Ovo spada u područje JavaScript-a pa će biti objašnjeno u JavaScript priručniku.

Odmorite malo, a zatim na 7. lekciju .

Text Oglasi Foto Oglasi Besplatne Stvari Besplatan Web Hosting Web Direktorij Dizajn