<a>, href i atributi:
<a> Anchor (sidro) element se koristi kako bi se napravio hypertext link ka drugoj strani. Otud HyperText u imenu HTML. Uvek se koristi sa href atributom.
<a href="URL">LINK TEXT</a>
href (hypertext reference) je atribut koji određuje destinaciju, tj. ka kojoj strani vodi link.
Atributi daju dodatne informacije o elementu. Uvek su definisani u početnom tag-u. Atributi se pišu: IME="VREDNOST". Vrednost (value) uvek ide pod " navodnike. Ako sam text vrednosti atributa sadrži navodnike, onda se koristi ' ili obratno.
title atribut. Kad mišem pređete preko elementa, ispiše se text kao tool-tip. Tekst koji se ispisuje je između navodnika, dakle vrednost atributa.
target atribut određuje GDE se linkovani dokument otvara. Uobičajeno je da se link otvori u istom prozoru, ali ako hoćete da se otvori u NOVOM tabu-u, koristite vrednost "_blank". Npr. kod koji sledi,
<p><a href="http://www.w3schools.com/html/html_links.asp" target="_blank" title="Ovaj link vodi ka w3schools strani o HTML linkovima">Detaljno objašnjenje o HTML linkovima!</a></p>
izgleda ovako na samoj web strani (obratite pažnju na text koji se ispisuje kad pređete mišem preko linka, kao i na to da će se otvoriti u novom tab-u):
Detaljno objašnjenje o HTML linkovima!
U gornjem primeru smo videli da jedan element može da sadrži više atributa (3 u ovom slučaju: href, target i title). Red atributa (ako ih ima više) u elementu je nebitan.
<img />, src, slika kao link:
<img /> image element dodaje sliku na web stranu. Nema zatvarajući tag i spada u samozatvarajuće (self-closing) elemente.
<img src="URL" />
src (source) atribut određuje lokaciju slike.
alt atribut prikazuje alternativni text ako slika ne može da se prikaže ili učita (smatrajte ovo obaveznim za SVAKU sliku).
width atribut menja prikazanu širinu slike (opciono).
height atribut menja prikazanu visinu slike (opciono).
<p><img src="../images/Superman_Shield.jpg" alt="Superman Heraldic Insignia" width="200" height="150" /></p>
I slika može biti link, samo umesto link texta stavimo sliku:
<p><a href="http://www.supermanhomepage.com/" target="_blank" title="Website devoted to DC Comics’ Superman"><img src="../images/Superman_Shield.jpg" alt="Superman Heraldic Insignia" width="200" height="150" /></a></p>
URL, putanje:
Primetićete da se i kod <a> i <img /> elementa pojavljuje URL kao vrednost atributa koji određuju lokaciju linka / slike, ali da izgledaju različito. URL je Uniform Resource Locator. U slučaju <a href...> smo imali
http://www.w3schools.com/html/html_links.asp http://www.supermanhomepage.com
a u slučaju <img src...>
../images/Superman_Shield.jpg
Oni koji sadrže HTTP (HyperText Transfer Protocol) imaju APSOLUTNU putanju (an absolute URL) jer se nalaze na internetu (van ovog sajta).
Slika ima RELATIVNU putanju (a relative URL) - nalazi se na mom kompu, tj. nalaziće se na serveru u okviru mojih fajlova kad ih postavim na net. Relativna, jer mogu da premeštam sliku gde ja hoću kroz foldere i menjam putanju do nje (naravno, sve u okviru root foldera sajta). Dve tačke na početku, pre kose crte se čitaju (dot dot) i služe za kretanje kroz foldere. ..Up (gore) za JEDAN folder nivo, ../.. gore za DVA foldera, itd. Obratiti pažnju na separator, Windows koristi \, ali za Web UVEK mora /.
Da ne bude zabune, slika može da ima i apsolutnu putanju ako je na internetu (van vašeg sajta), kao što i link može da ima relativnu ako vodi ka HTML-u koji je u okviru vašeg sajta (tj. na vašem kompu).
Napomena: Ne koristi SPACE kad daješ nazive fajlovima i folderima za sajt! Najefikasnije je organizovati fajlove rano, kako posle ne bi menjao gomilu putanja.