Enkori islike

Cilj trećeg predavanja:

1. Obraditi tagove za enkore i slike
2. Obraditi atribute koje koristimo u tagovima enkora i slika
3. Obraditi apsolutne i relativne putanje
4. Uraditi praktične primjere upotrebe enkora i slika
5. Uraditi samostalno povezivanje stranica pomoću enkora
 Enkor tagovi atributi i putanje
 Enkori (eng.Anchor) su elementi HTML-a koji služe za povezivanje
različitog sadržaja tj. različitihstranica. Poveznica može poslužiti za
povezivanje stranica unutar tvojeg web-a ili za povezivanje stranica
drugih web-ova. U ovome tutorijalu naučiti ćeš kako se to radi. Ovaj
čas podijeljen je na više dijelova:
1.Struktura enkora
2.Apsolutne putanje
3.Relativne putanje
Svaki dio će se opisati i biti prikazan kodom radi lakšeg
razumijevanja.
 Struktura enkora
 Struktura jednog enkora sastoji se od nekoliko atributa i taga a. Sve unutar taga smatra se
poveznicom i klikom voditi će na određeno odredište
 <a href="index.html” title="Moja prva stranica“ target="_blank">sadržaj</a>
 Može se primijetiti da su dodana tri atributa href, title i target. Vrijednost href atributa
predstavlja putanju di stranice sa kojom se poveyujemo. Atribut title daje dodatan opis
poveznici te ga je najbolje koristiti na enkorima koje trebaju dodatan opis ukoliko nije
jasno iz samog teksta unutar enkora ili se title koristi za unos cjelovitog naziva poveznice
ukoliko tekst poveznice nije u potpunosti prikazan Atribut target je namijenjen pretraživaču
te daje informaciju kako da ga pretraživač otvori. Najčešće korištenevrijednosti
atributatarget:
•_blank - poveznica se otvara u novom prozoru ili tabu
•_self - poveznica se otvara u istom prozoru odnosno tabu
 Atribu tititle i target nisu obavezni kako bi poveznica izvršavala svoju funkciju.
 Apsolutna i relativna putanja

 Apsolutna putanja se koristi kada želimo povezati našu stranicu sa

stranicom ili nekim sadržajem stranice na nekom drugom sajtu.Pri tome nije
bitno na kojoj se stranici sam enkor nalazi jer će uvijek voditi do stranice
koja je zadata putanjom u atributu href.

 Primjeri enkora sa apsolutnom putanjom

<a href=“http://www.google.com”>Google</a>
<a href=“http://www.facebook.com”>Facebook</a>
<a href=“http://www.wikipedia.org”>Wikipedia</a>
Kada želimo popvezati stranice unutar našeg web-a nije potrebno upisivati potpunu putanju već
je dovoljno samo upisati putanju do stranice sa kojom se povezujemo. Ne bi bilo ni pogršno
upisati i potpunu web adresu naše stranice.
Povezivanje stranice u istom folderu.
Probajte napraviti sljedeće, pored vašeg index.html stvorite još jedan dokument i nazvoite ga
index2.html. Kada bi htio povezati taj dokument unutarindex.htmldovoljno je atribut href upisati
index2.html i klikom na tu poveznicu otvoriti će nam se naš novi dokument kao nova web
stranica.

<a href="index2.html">Moja druga web stranica</a>

Povezivanje stranice u sub-folderu.

Ukoliko želimo malo organizovaniju stranicu možemo naše nove stranice stavljati u neke sub-
foldere (npr. index.html i subFolder/index2.html).

<a href="subFolder/index2.html">Moja druga web stranica</a>

<a href=“../index.html”>Moja prva web stranica</a>
../ označava izlazak iz subfoldera
Vježba
 Slike
 Svaka web stranica danas ima barem nekoliko slika kako bi predstavili
sebe, svoj proizvod ili nešto drugo vezano za njih i time povećali svoju
klijentelu. U ovom tutorijalu baučićemo kako postaviti slike na web stranicu.
Slika ima svoj element u HTML-u i to je img element . Element se sastoji od
nekoliko atributa koji su specifični upravo za taj element. Ti atributi su src i
alt.
 Važno je napomenuti da je img samozatvarajući tag i inline element.
 Atribut src pokazuje na putanju do slike kako bi pretraživač mogao doći do
slike i prikazati je.
 Atribut alt služi za opis te slike koji se prikazuje u slučaju kada je putanja do
slike pogrešna ili je slika nedostupna.

 <img src="putanja_do_slike.jpg” alt="Moja prva slika"/>

Danas smo naučili:

1. Tagove za enkore i slike

2. Atribute koje koristimo u tagovima enkora i slika
3. Apsolutne i relativne putanje