Linkovi ili hiperlinkovi (engl. hyperlinks) nam mogućavaju povezivanje i prelazak sa strane na stranu, kao i povezivanje fajlova, e-mail adresa i tako dalje.
Svi smo koristili linkove na internetu jer bez njih bismo morali svaki put ručno da ukucavamo adresu koju želimo da otvorimo. Praktično svaki tekst na kojim možemo kliknuti na netu je link, bilo da je reč o sajtu kao što je Google, Facebook, sajt omiljenog fudbalskog kluba ili sajt lokalne prodavnice. I sama platforma na kojoj se trenutno nalazite koristi linkove za prelazak sa jedinice na jedinicu, za povezivanje multimedije i tako dalje.
URL
Uniform Resource Locator ili skraćeno URL[1] je, po definiciji, niz karaktera koji definišu referencu ka određenom resursu na internetu. Drugim rečima, koristeći URL kreiramo linkove ka elementima na internetu. Postoje apsolutni i relativni URL, kojima ćemo se vratiti nešto niže u tekstu.
Struktura link taga
Za postavljanje linkova koristi se <a> tag. Ovaj tag se vrlo često koristi i zato mu je dodeljena ovako kratka oznaka. Inače, A je skraćeno od engl. anchor, što znači sidro.
Kada postavljamo link, moramo znati dva detalja. Prvi je URL, odnosno na koju će lokaciju voditi link (stranicu, fajl i sl.), a drugi je šta ćemo postaviti kao sadržaj, tekst linka, a na koji će korisnik kliknuti i koja mu govori nešto više o samom linku. Pogledajmo to na primeru, kako bi bilo jasnije:
Verovatno ste ovakav primer viđali često na različitim sajtovima. Postavljen je paragraf teksta, a jedna reč (ili više) je pretvorena u link. Sami linkovi po default vrednostima su plave boje, imaju liniju ispod teksta i kursor se pretvara iz strelice u ruku kada pređemo mišem preko njih.
U ovom primeru, reč here je ulinkovana ka URL Google sajta (www.google.com). Sama reč (sadržaj linka) je vidljiva korisniku, dok lokacija na koju link vodi nije, barem ne na prvi pogled.
Pošto smo sada razjasnili ta dva detalja, moramo videti kako sve ovo postavljamo u HTML kôdu. Iskoristićemo primer od malopre. Imamo jedan paragraf teksta (p tag) u kome je jedna reč pretvorena u link. To smo učinili tako što smo neposredno pre pomenute reči otvorili <a> tag, a zatvorili ga neposredno posle nje. Pored toga, dodali smo HTML atribut pod nazivom href, nad <a> tagom, preko kojeg definišemo lokaciju (putanju) linka, odnosno URL.Href je skraćeno od engl. hypertext reference.
<p>Click <a href=”http://www.google.com/”>here</a>for Google</p>
U kôdu, dakle, vidimo p i a tagove, kao i href atribut sa URL-om koji vodi ka Google sajtu.
Na slici iznad vidimo razložen <a> tag na delove.
Crnom bojom je označen tekst, sam sadržaj linka. Jedino je on, od svih detalja prikazanih ovde, vidljiv korisniku. Crvenom bojom je označen <a> tag, odnosno početni i završni <a> tag, slično kao i kod ostalih tagova sa kojima smo se susretali. Ono što je novina je atribut href koji je dodat unutar početnog a taga (vidimo da se znak za veće, kraj početnog a taga nalazi iza atributa).
Sam href atribut se sastoji iz dva dela, iz naziva atributa koji je uvek isti za sve linkove (A) i lokacije (URL) do koje vodi link (B). Naravno, ne smemo zaboraviti i znak jednakosti, kao i znake navoda oko URL-a.
Postoji više različitih tipova linkova. Svi oni prate ovu istu strukturu, samo se razlikuje sadržaj atributa (URL), odnosno ono šta je napisano između znaka navoda.
Tipovi linkova
Apsolutni linkovi
Ovaj tip linkova sa najčešće koristi kada želimo da povežemo našu stranicu sa stranicom ili materijalom na nekom drugom sajtu.
Apsolutni linkovi su možda najjednostavniji za unos, ali mogu biti najproblematičniji za kasniju izmenu. U svakom slučaju, kod ovog tipa linkova, bitno je samo na koju stranicu (ili drugi element) vodi link, dok nije bitno na kojoj stranici se link nalazi.
Na primer, ako pogledamo ovakav kôd:
<a href=”http://www.google.com/”>Google</a>
<a href=”http://www.facebook.com/”>Facebook</a>
<a href=” http://www.microsoft.com/”>Microsoft</a>
Možemo lako ustanoviti, prateći pravila koja smo ranije pomenuli, da su ovo tri linka, koji vode na sajtove Google, Facebook i Microsoft.
Ono što definiše ove linkove kao apsolutne je to što nije bitno na kom se oni sajtu ili stranici nalaze. Uvek će voditi ka pomenutim sajtovima. To je zato što smo koristili ranije pomenuti apsolutni URL.
Relativni linkovi
Nasuprot apsolutnim linkovima kod kojih je bitna samo destinacija, kod relativnih linkova je veoma bitno i gde se sam link nalazi, tj. odakle usmerava posetioca sajta. To je zbog toga što ovaj tip linkova postavlja relaciju između početne i krajnje tačke.
Relativni linkovi se najčešće koriste za veze unutar nekog sajta. Pogledajmo primer u kôdu:
<a href=”druga.html”>Druga strana sajta</a>
Kao što primećujemo na primeru, kod relativnih linkova, u okviru href atributa postavljamo relativni URL ili, drugim rečima, postavljamo relativnu putanju do stranice (ili drugog resursa). U konkretnom primeru postavljeni link će u istom folderu gde se nalazi stranica sa linkom, potražiti stranicu druga.html jer kao što je već rečeno, ovaj tip linkova se odnosi na početnu lokaciju.
Relativni linkovi se postavljaju tako što prvo pišemo relativnu putanju do željenog foldera i dodajemo ime resursa koji linkujemo u njemu. Već smo pomenuli, ako su obe stranice u istom folderu, pišemo samo ime stranice.
Biće jasnije na primeru. Pogledajmo moguće situacije:
Situacija1 – Ako želimo da postavimo link na početnoj stranici sajta koji ce nas voditi do druge strane sajta (druga.html), a koja se nalazi u folderu proba, pisaćemo:
<a href=”proba/druga.html”>link</a>
Ovaj link će prvo otvoriti folder proba, i u njemu potražiti stranu druga.html.
Situacija2 – Ako želimo da postavimo link na stranici druga.html, a koja vodi na početnu stranicu sajta, dakle obrnuta situacija od prethodne, pisaćemo:
<a href=”../prva.html”>link</a>
Pošto se stranica sa linkom nalazi u podfolderima, a potrebno je linkovati ka stranici “iznad”, moramo se prvo vratiti nazad, tj. izaći iz jednog i drugog foldera sve do osnovnog, root nivoa sajta i tu potražiti prva.html. Kod izlaska iz foldera pišemo dva puta znak tačke umesto naziva foldera.
Pravilno shvatanje funkcionisanja relativnih linkova je od presudne važnosti u procesu kreiranja sajta. Takođe, vrlo je bitno da svi resursi (stranice, fajlovi i sve ostalo) koji su potrebni za sajt budu uvek zajedno. Na primer, kreiraćete sajt na svom računaru (u lokalu, kako se to u žargonu kaže). Tu ćete povezati relativnim linkovima sve stranice i potrebne fajlove. Koristeći relativne linkove ne moramo postavljati sajt na internet u startu, jer će veze između svih elemenata biti očuvane.
Uzimajući sve ovo u obzir, možemo zaključiti sledeće: svi relevantni fajlovi za sajt moraju biti u okviru osnovnog (root) foldera sajta. Svi nepotrebni fajlovi koji nisu ni na koji način povezani sa sajtom ne bi trebalo da budu u root folderu. Kada premeštamo sajt na drugi računar, postavljamo na server i sl, moramo kopirati ceo root folder kako ne bi dolazilo do grešaka.
Možda se sada pitate zašto ne bi uvek koristili apsolutne linkove? Ima puno razloga, ali među najvažnijima je lakoća unosa izmena. Danas, moderni alati za rad sa HTML-om i sličnim dokumentima (poput Adobe Dreamweavera) automatski prate sve linkove u okviru sajta i ispravljaju/prepravljaju po potrebi, najčešće kada se promene imena fajlova, struktura i tako dalje.
Ovo je nešto komplikovanijakombinacija prethodne dve situacije, jer smo morali prvo da izađemo iz oba foldera u kome se stranica sa koje linkujemo nalazi, pa da ondau nastavku otvorimo folder usluge i u njemu da potražimo stranicu index.html
Target atribut
Već smo pomenuli da <a> tag mora imati atribut href jer bez njega je praktično beskoristan. Pored njega, postoji i opcioni atribut target[2] koji definiše na koji način se aktivira link, a može imati neku od sledećih vrednosti:
- _blank[3] – učitava linkovani dokument u novom okviru/prozoru
- _parent – učitava linkovani dokument u roditeljskom elementu strane u kojoj se nalazi link. Ukoliko se link ne nalazi u ugnježdenoj strani, učitava u punom prozoru.
- _self – učitava linkovani dokument u istom prozoru gde se nalazi i link. Ukoliko izostavimo target, ova vrednost se uzima kao default.
- _top – učitava u punom prozoru, zanemarujući sve frejmove.
Ovaj atribut nije obavezan, ali se koristi najčešće prilikom linkovanja drugih sajtova i tada je u pitanju _blank. Otvora se tako novi okvir browsera, a ostaje tekući. Primeri:
<a href=”druga.html” target=”_blank”>link</a>
<a href=”http://www.google.com/” target=”_blank”>link</a>
Imenovana sidra
Imenovana sidra[4] (engl. named anchor) koristimo kada želimo da link vodi na tačno određeni deo strane. U nekim slučajevima možemo imati stranu koja je sadržajna i koja zahteva dosta vertikalnog skrolovanja kako bismo pronašli neki detalj.
Imenovana sidra možemo postaviti bilo gde na stranici, a zatim postaviti link ka njima, ka tačno tom delu strane.
Na primer, Wikipedia (www.wikipedia.org) koristi imenovana sidra za povezivanje odrednica u tekstu sa referencama koje se nalaze na dnu strane. Kod svake reference postavljeno je imenovano sidro, a potom linkovano sa odrednice u tekstu.
Da bismo postavili sidro, unosimo <a> tag, ali pošto sidro nije link, ne vodi nigde već samo označava to mesto, nema href atributa niti sadržaja. Pogledajmo na primeru:
<a name=”ime-sidra”></a>
Ovo je samo jedan deo, odnosno, ovako smo postavili imenovano sidro koje ima ime (name) i pritom nije vidljivo u browseru. Sada nam preostaje i da linkujemo to sidro sa iste ili neke druge stranice. Na primer, ukoliko želimo da povežemo sidro sa iste stranice, dodaćemo:
<a href=”#ime-sidra”>link</a>
Sa druge strane, ako želimo da linkujemo ka sidru sa druge stranice, postavićemo:
<a href=”index.html#ime-sidra”>link</a>
dakle, klasičan link sa dodatkom imena sidra kome prethodi znak #.
[1] URL (web adresa) – Složen iskaz nizova karaktera koje se koristi za lociranje nekog resursa na internetu. Web adresa se često navodi kao sinonim za URL (URI). URL sintaksu adresiranja uveo je Tim Berners-Li za primenu na World Wide Webu, sadašnji standard je definisan RFC dokumentom pod brojem 1738.
[2] Parametar linka koji pokazuje browseru u kojem prozoru će se otvoriti linkovana strana. Ona se može otvoriti u istom prozoru kao i prethodna, u novom prozoru internet browsera ili u nekom od frejmova strane (ako je strana rađena u frejmovima)
[3] najčešća vrednost atributa target u okviru hiperlinka. Definiše da se strana otvara u novom tabu/prozoru browsera.
[4] Oznake u strukturi stranice ka kojima možemo usmeriti linkove.