HTML prvi koraci - lekcija 4 - Linkovi (hiperveze)
Došli smo do samih osnova HTML-a, tačnije do hiperveza (ili jednostavno linkova). Linkovi su način organizacije veze između različitih materijala. Recimo da imate 100000 tekstualnih fajlova, ako za njih napravite rubricu, i u svakoj rubrici bude po 200 opisa dokumenata, biće vam potrebno 500 rubrika. Da biste pregledali svih tih 500 rubrika i pronašli potrebne informacije, trebalo bi vam mnogo vremena. Kako linkovi olakšavaju život?
Linkovi povezuju dva HTML dokumenta proizvoljno tako da svaki HTML dokument ima jedinstveno ime. Tako iz jednog dokumenta možemo preći u deset drugih sličnih ili popularnih dokumenata, što povećava šanse za uspešno pronalaženje informacije.
Isto važi i za veb-sajtove. Stranice sajta imaju jedinstvena imena URL (Uniform Resource Locator - jedinstveni lokator resursa). Jedinstvena imena stranica na koje linkujemo pišu se u tagu <a></a>. Opšti oblik je:
<a href="jedinstvena_putanja">tekst linka</a>
U ovom kodu href je atribut taga A. O atributima smo već govorili u prethodnoj lekciji. Sada ćemo napraviti još jedan fajl u istoj fascikli gde je index.html. Nazvaćemo ga file.html i u njega ćemo staviti sledeći kod:
<html>
<head>
<title>Moj drugi HTML dokument</title>
</head>
<body>
<h1>Moj drugi HTML dokument</h1>
</body>
</html>
A u index.html ćemo napisati ovako:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<p>
<a href="file.html">Link ka drugom dokumentu</a>
</p>
</body>
</html>
Sada kada otvorimo index.html u pregledaču, imamo link kojim možemo preći na file.html. Sada ćemo vežbati pisanje putanja do fajlova. Kada su oba fajla u istoj fascikli, u atributu href pišemo samo ime fajla, i pregledač razume da se fajl nalazi u istoj fascikli kao index.html. Šta ako ne želimo da fajlovi budu u istoj fascikli? Tada koristimo relativne putanje.
Relativne putanje
Relativne putanje se zovu tako jer se put do fajla određuje u odnosu na polazni fajl. Napravićemo fasciklu files pored index.html. U nju ćemo premestiti file.html. Sada, ako kliknete na link u index.html, pregledač neće moći da nađe file.html jer je promenjena lokacija u odnosu na index.html.
Sada koristimo putanju u odnosu na index.html. Za označavanje fascikle koristimo kosu crtu, slеш. Na primer:
/Program Files/MSOffice/
Da bismo označili početak putanje, pišemo ./ (tačka-slеш). Putanja do fascikle files od index.html izgleda:
./files/
Sada samo dodamo ime fajla da bismo dobili put do file.html:
./files/file.html
Sada ćemo izmeniti putanju u index.html:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<p>
<a href="./files/file.html">Link ka drugom dokumentu</a>
</p>
</body>
</html>
Sačuvajte index.html i osvežite stranicu u pregledaču (dok je otvoren index.html). Sada link ponovo radi. Takođe možete napisati i ovako:
<a href="files/file.html">Link ka drugom dokumentu</a>
Pregledač će i bez ./ razumeti putanju. Međutim, ako napišete:
<a href="/files/file.html">Link ka drugom dokumentu</a>
to već nije relativna putanja, već apsolutna. Ako želite relativnu putanju, koristite tačku-slеш ili počnite sa imenom putanje.
Sada ćemo napraviti povratni link iz file.html ka index.html. Počinjemo sa relativnim putem:
./
Zatim treba da naznačimo da je fajl jedan nivo iznad, tj. izlazimo iz fascikle files. Koristimo ../ (dve tačke-slеш).
./../
Ako u fascikli files postoji još jedna fascikla, i u njoj fajl, tada bi link iz tog fajla počinjao sa ./../../, odnosno za svaki nivo se doda ../.
Sada dodajemo ime fajla index.html na kraju putanje:
./../index.html
Putanja je spremna, ubacićemo je u file.html:
<html>
<head>
<title>Moj drugi HTML dokument</title>
</head>
<body>
<h1>Moj drugi HTML dokument</h1>
<p>
<a href="./../index.html">Link ka prvom dokumentu</a>
</p>
</body>
</html>
Sada možete prelaziti sa jedne stranice na drugu i nazad. Pogledajte kako se URL u pregledaču menja.
Sad ćemo se vratiti na temu putanja koje počinju sa slеш bez tačke - to su apsolutne putanje.
Apsolutne putanje
Apsolutne putanje se koriste na sajtovima na internetu. Na primer, u Drupalu sve stranice se učitavaju iz jednog fajla index.php, pa ako napišemo /, označavamo put od index.php. Ako koristite apsolutne putanje lokalno, one počinju od korenskog direktorijuma vašeg diska. Možete koristiti i relativne linkove na sajtu, ali apsolutni su praktičniji. Kada premestite fajl ili fasciklu, relativne putanje će biti pokvarene jer treba dodati ../ za svaki nivo više. Zato su apsolutni putovi zgodniji.
Apsolutne putanje počinju sa / ili sa imenom sajta, npr. https://drupalbook.org/ru/. Pregledač razume oba načina. Primeri apsolutnih putanja:
/index.html
/files/file.html
/files2/file2.html
Ako želimo da iz fajlova index.html i file.html linkujemo na file2.html, link će biti isti jer je apsolutan, i biće validan sa obe lokacije:
<a href="/files2/file2.html">link</a>
Kao što je rečeno, ovaj kod radi i u index.html, file.html i file2.html.
Atribut target
Atribut target je veoma važan, često se koristi kada link vodi na drugi sajt. On određuje kako će se otvoriti linkovana stranica:
_blank - u novom prozoru ili tabu;
_self - u istom prozoru gde je link (podrazumevano);
_parent - u roditeljskom frejmu (frejmovi su zastareli, zamenjeni AJAX-om);
_top - uklanja sve frejmove i otvara stranicu u punom prozoru; ako frejmova nema, ponaša se kao _self.
Najčešće ćemo koristiti _blank jer _self je podrazumevano i ne mora se pisati.
<a href="/files2/file2.html" target="_blank">link</a>
Atribut rel
Atribut rel označava odnos (relation) između trenutnog dokumenta i dokumenta na koji link vodi. Najčešće se koristi rel="nofollow" koji sprečava Google, Yandex da indeksiraju link. Ako stavljate link ka spoljnjem sajtu, bolje je staviti rel="nofollow" i target="_blank".
<a href="/files2/file2.html" target="_blank" rel="nofollow">link</a>