Cilj vježbe:
Učenik će definirati pojam meta podataka i meta elementa, navesti uobičajene vrijednosti atributa
meta elementa, objasniti primjenu i upotrebljavati, odnosno opisivati meta element u zaglavlju HTML
dokumenta.

Priprema za vježbu:

Zadatak 1: Što su meta podaci?
Odgovor: Metapodatci su podatci o podatcima – podatci koji opisuju karakteristike nekog izvora u digitalnom obliku. Korisni su kod pregledavanja, prijenosa i dokumentiranja informacijskog sadržaja.

Zadatak 2: Što opisujemo putanjama datoteka kod izrade web sjedišta?
Odgovor: Putanja datoteke predstavlja "put" kojim će se link povezati sa drugim stranicama, slikama, i raznim drugim datotekama.

Vježba:

1. Obrasci:

    Primjer opisa meta podataka u HTML dokumentu:
   <head>
   <meta charset="UTF-8">
   <meta name="description" content="Free Web tutorials">
   <meta name="keywords" content="HTML, CSS, JavaScript">
   <meta name="author" content="A.B.">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

    A. Što definira <meta> element?

Definira metapodatke tj. informacije o podacima.

B. Gdje se piše element <meta>?

Uvijek se piše unutar <head> elementa.

C. Što se obično navodi, odnosno specificira pomoću elementa <meta>?

Specificira se skup znakova, opis stranice, ključne riječi, autora dokumenta i postavke okvira za prikaz.

D. Kome su obično namijenjeni meta podaci?

Namijenjeni su pretraživačima da znaju kako prikazati stranicu, tražilicama ili drugim web servisima.

E. Napišite primjer koda kojim se definiraju ključne riječi za tražilice.

(pomoć: https://www.w3schools.com/tags/tag_meta.asp)

Objašnjenje:

Prvo se definira "viewport" te nakon toga se definira da se prati širina i visina prozora uređaja koja jako varira i skala definira zoom razinu prilikom prvog učitavanja.

2. HTML putanje datoteka:

A. Napišite redak HTML koda kojim opisujemo da se slika naziva ljeto.jpg nalazi u istoj mapi kao i trenutna stranica.

<img src="ljeto.jpg">

B. Napišite redak HTML koda kojim opisujemo da se slika naziva zima.jpg nalazi u podmapi images trenutne mape.

<img src="images/zima.jpg">

C. Napišite redak HTML koda kojim opisujemo da se slika naziva jesen.jpg nalazi u podmapi images u korijenskoj mapi trenutnog mrežnog sjedišta.

<img src="/images/jesen.jpg">

D. Napišite redak HTML koda kojim opisujemo da se slika naziva proljece.jpg nalazi u mapi koja je u strukturi mapa za jednu razinu viša od trenutne mape.

<img src="../proljece.jpg">

E. Što se podrazumijeva pod apsolutnom putanjom? Navedite primjer apsolutne putanje.

Apsolutna putanja je link cijeli link koji vodi do datoteke.

Primjer: <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

F. Što se podrazumijeva pod relativnom putanjom? Navedite primjer.

Relativna putanja prikazuje datoteku relativnu trenutnoj stranici. Primjer: <img src="/images/picture.jpg" alt="Mountain">

G. Kakve se putanje preporuča koristiti? Zašto?

Preporuča se koristiti reltivne putanje jer tada web stranica nije vezana za osnovni URL. Sve će raditi na vašem lokalnom računalu, ali i na vašoj javnoj domeni.

3. Izrada stranice:

A. Napravite zabavnu mrežnu stranicu o kućnim ljubimcima koja prikazuje slike životinja iz dvije različite kategorije. U svakoj trebaju biti najmanje po tri slike, npr. slike mačaka i slike pasa. Potrebno je napraviti posebnu mapu za osnovnu mrežnu stranicu, te posebnu mapu za slike mačaka i posebnu za slike pasa. Obje te podmape nalaze se u mapi images koja je podmapa mape mrežne stranice. Slike je potrebno učitati sa weba i spremiti u odgovarajuće mape. Sve se slike trebaju prikazivati ispravno sa odgovarajućim vrijednostima atributa alt. Na stranici trebaju biti ispravno definirani i svi potrebni meta podaci.

ZIP datoteka (preuzmite)

Cilj vježbe: Učenik će definirati pojam meta podataka i meta elementa, navesti uobičajene vrijednosti atributa meta elementa, objasniti primjenu i upotrebljavati, odnosno opisivati meta element u zaglavlju HTML dokumenta.