HTML relativno i apsolutno adresiranje

Relativne i apsolutne adrese

Relativne i apsolutne adrese koristimo između ostalog kod adresiranja .html datoteka, slika te .css i .js datoteka.

Relativna putanja je putanja od .html datoteke ili od korijenskog (engl. root) direktorija pa sve do odredišne .html datoteke, slike ili .css i .js datoteke.

Kod apsolutnih adresa dodjeljujemo puni URL (engl. Uniform Resource Location), tj. adresu web sjedišta.

Povećaj

Slika 1

Opis slike: U korijenskoj (engl. root) mapi nalaze se dvije mape, predlozak i filmovi. Osim toga u korijenskoj mapi nalazi se html datoteka index.html.

U mapi predlozak se nalaze dvije mape: css i slike.

U mapi filmovi se nalaze html datoteke akcijski.html i pustolovni.html i mapa hobbit.

Struktura web sjedišta

Web sjedište se sastoji niza datoteka i mapa, pohranjenih na web serveru. Svaka web stranica je pohranjena kao odvojena datoteka. Tako je u našem primjeru stranica "Povratak kralja" pohranjena u datoteci povratak.html, a "Prstenova družina“ u datoteci druzina.html.

index.html datoteka

Korisnici koji pristupaju web sjedištu upisivanjem adrese web stranice, pristupaju mu - ponekad - bez navođenja imena datoteke unutar URL-a. Na primjer:

Premda nije naznačeno unutar URL-a, web server zna kojoj web stranici treba pristupiti. Svi web serveri imaju više mogućih zadanih (engl. default) datoteka, od kojih se jedna učitava kada korisnik ne navede ime datoteke u putanji. Jedna od njih je datoteka: index.html

Osim datoteke index.html, zadana datoteka često može biti i index.php, default.asp ili default.aspx.

index.html

Zadana datoteka, npr. index.html, treba se nalaziti u korijenskoj mapi (engl. root). Ona se zadano otvora u web pregledniku kada korisnik upiše URL web sjedišta. Ova se stranica najčešće zove Naslovnica (engl. Home page). Naziv zadane datoteke korisnik ne treba navoditi unutar URL-a jer je web server automatski učitava.

bartol.plus

U sljedećim primjerima koristimo strukturu mapa i datoteka kao na slici 1. Za apsolutne adrese koristimo - radi kratkoće imena - domenu barol.plus. Ove datoteke ne postoje na domeni bartol.plus, pa su adrese samo primjeri.

Kada pristupate html datoteci druzina.html, njezin URL (apsolutna adresa) je:

Želimo li iz nekoga web sjedišta pristupiti ovoj datoteci pomoću poveznice, svojstvu href dodjeljujemo vrijednost:

Relativna putanja

Relativne putanje koristimo kod pristupa datotekama koje se nalaze na istom web sjedištu.

1) Relativna putanja u odnosu na korijenski direktorij je put kojim dolazimo do odredišne datoteke, neovisno o tome gdje se nalazi .htmldokument iz kojeg adresiramo tu datoteku.

korijen (engl. root)

Relativna putanja u odnosu na korijensku mapu jednaka je URL-u od kojega oduzmemo https protokol i domenu. Za pristup datoteci druzina.html, iz datoteke koja se nalazi na istom web sjedištu, svojstvu href dodjeljujemo vrijednost :

korijen (engl. root) kod Windows OS

Za adresiranje pomoću relativne putanja u odnosu na korijensku mapu kod Windows OS, web stranica mora biti pohanjena u korijenskoj mapi C: diska.

2) Relativna putanja u odnosu na trenutni direktorij je put kojim dolazimo do odredišne datoteke. On ovisi o tome gdje se nalazi .html dokument iz kojeg adresiramo tu datoteku.

Nazivlje: potomak i predak

Imate li problema s nazivima potomak i predak? Više o njima ćete saznati kada pročitate članak o obiteljskom stablu strukture, koji možete otvoriti pomoću donje poveznice:

trenutna mapa

Pojam trenutna mapa koristimo za označavanje mape, u kojoj se nalazi .html datoteka, iz koje adresiramo odredišnu datoteku ili sliku.

1. Putanja potomka

Kada je mapa odredišne datoteke potomak mape u kojoj se nalazi .html datoteka iz koje adresiramo, tada se relativna putanja sastoji od niza naziva podmapa, sve do podmape u kojoj se nalazi datoteka koju adresiramo. Mape međusobno odvajamo kosom crtom /.

Potomak potomka - jedna razina ispod

Kada želimo adresirati datoteku povratak.html iz html datoteke akcijski.html (datoteka povratak.html se nalazi jednu razinu ispod datoteke akcijski.html, u mapi hobbit):

1. možemo koristiti njezin URL (apsolutnu adresu):

href="https://bartol.plus/filmovi/hobbit/povratak.html"

2. relativnu putanju u odnosu na korijensku mapu:

href="/filmovi/hobbit/povratak.html"

3. ili relativnu putanju u odnosu na trenutnu mapu:

href="hobbit/povratak.html"

česta grješka

U prethodnom primjeru kod relativne putanje u odnosu na trenutnu mapu ne smijemo ispred naziva mape hobbit staviti /. To bi značilo da se mapa hobbit nalazi u korijenskom direkotirju.

Putanja potomka - dvije razine ispod

Kada želimo adresirati datoteku druzina.html iz html datoteke index.html (datoteka druzina.html se nalazi dvije razine ispod datoteke index.html, u mapi hobbit):

1. možemo koristiti njezin URL (apsolutnu adresu):

href="https://bartol.plus/filmovi/hobbit/druzina.html"

2. relativnu putanju u odnosu na korijensku mapu:

href="/filmovi/hobbit/druzina.html"

3. ili relativnu putanju u odnosu na trenutnu mapu:

href="filmovi/hobbit/druzina.html"

URL i relativna putanja u odnosu na korijenski direktorij

Neovisno o načinu adresiranja, putanju URL-a (apsolutne adrese) - bez protokola i domene - i relativnu putanja u odnosu na korijensku mapu, dobivamo uvijek na isti način: spuštamo se od korijenske mape, mapu po mapu, do mape u kojoj se nalazi datoteka ili slika koju adresiramo.

2. Putanja pretka

Kada je mapa odredišne datoteke predak mape, u kojoj se nalazi .html datoteka iz koje je adresiramo, tada se relativna putanja sastoji od niza ../, gdje je svako ponavljanje ../, penjanje za jednu razinu mapa prema gore.

Putanja pretka - jedna razina iznad

Kada želimo adresirati datoteku akcijski.html iz html datoteke druzina.html (datoteka akcijski.html se nalazi jednu razinu iznad datoteke druzina.html):

1. možemo koristiti njezin URL (apsolutnu adresu):

href="https://bartol.plus/filmovi/akcijski.html"

2. relativnu putanju u odnosu na korijensku mapu:

href="/filmovi/akcijski.html"

3. ili relativnu putanju u odnosu na trenutnu mapu:

href="../akcijski.html"

Putanja pretka - dvije razine iznad

Kada želimo adresirati datoteku index.html iz html datoteke druzina.html (datoteka index.html se nalazi dvije razine iznad datoteke druzina.html):

1. možemo koristiti njezin URL (apsolutnu adresu):

href="https://bartol.plus/index.html"

2. relativnu putanju u odnosu na korijensku mapu:

href="/index.html"

3. ili relativnu putanju u odnosu na trenutnu mapu:

href="../../index.html"

3. Kombinirana putanja

Kada mapa datoteke ili slike koju adresiramo nije niti potomak niti predak mape u kojoj se nalazi naša .html datoteka, tada koristimo kombinaciju prva dva načina. Prvo se penjemo do mape prvog zajedničkog pretka, a zatim spuštamo do mape (potomka) u kojoj se nalazi odredišna datoteke.

Kombinirana putanja 1

Kada u html datoteci akcijski.html (koja se nalazi u mapi filmovi), želimo prikazati sliku img1.jpg (prvi zajednički predak je korijenska mapa, koja je jednu razinu iznad datoteke akcijski.html):

1. možemo koristiti njezin URL (apsolutnu adresu):

src="https://bartol.plus/predlozak/slike/img1.jpg"

2. relativnu putanju u odnosu na korijensku mapu:

src="/predlozak/slike/img1.jpg"

3. ili relativnu putanju u odnosu na trenutnu mapu

src="../predlozak/slike/img1.jpg"

Kombinirana putanja 2

Kada u html datoteci dvije-kule.html (koja se nalazi u mapi hobbit), želimo prikazati sliku img2.jpg (prvi zajednički predak je korijenska mapa, koja je dvije razine iznad datoteke dvije-kule.html):

1. možemo koristiti njezin URL (apsolutnu adresu):

src="https://bartol.plus/predlozak/slike/img2.jpg"

2. relativnu putanju u odnosu na korijensku mapu:

src="/predlozak/slike/img2.jpg"

3. ili relativnu putanju u odnosu na trenutnu mapu:

src="../../predlozak/slike/img2.jpg"

relativno adresiranje datoteke i slike

U primjerima smo .html datoteke relativno adresirali putanjom potomka i pretka, a slike kombiniranom putanjom. No to je igra slučaja, mogli smo i suprotno.
Sve načine relativnog adresiranja: putanjom potomka, pretka te kombiniranom putanjom, možemo koristiti i za adresiranje .html datoteka i slika te .css i .js datoteka.

Bitno je naučiti koristiti relativno adresiranje u odnosu trenutnu mapu, a ono je isto i za adresiranje slika i za adresiranje datoteka.

Možda će vas zanimati?