Vježba 9: Meta elementi i putanje za datoteke
PRIPREMA ZA VJEŽBU
1. Što su meta podaci?
Meta podatci su podatci o podatcima – podatci koji opisuju karakteristike nekog izvora u digitalnom obliku. Korisni su kod pregledavanja, prijenosa i dokumentiranja informacijskog sadržaja.
2. Što opisujemo putanjama datoteka kod izrade web sjedišta?
Opisivanje putanja datoteka kod izrade web sjedišta odnosi se na definiranje lokacije i strukture datoteka koje čine vaše web sjedište. Putanje datoteka koriste se kako bi se odredilo gdje se nalaze resursi poput HTML, CSS, JavaScript datoteka, slika, videa i drugih elemenata potrebnih za funkcionalnost i izgled web stranice.
IZVOĐENJE VJEŽBE
1. Meta podaci, element meta
<meta> element definira meta podatke o HTML dokumentu.
B. Gdje se piše element?
Element <meta> uvijek se piše unutar elementa <head>.
C. Što se obično navodi, odnosno specificira pomoću elementa <meta>?
Pomoću elementa <meta> specificiraju se podaci o dokumentu kao što su : skup znakova (charset), opis stranice (description), ključne riječi (keywords), autor dokumenta, postavke prikaza.
D. Kome su obično namijenjeni meta podaci?
Meta podaci su obično namijenjeni preglednicima(ispravno prikazivanje sadržaja), tražilicama(ključne riječi i opis stranica) i korisnicima (organizacija i korištenje podataka).
E. Napišite primjer koda kojim se definiraju ključne riječi za tražilice.
<meta name=”keywords” content=”Nogomet,Rukoment,trening,klub”>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Sportovi”>
<meta name=”keywords” content=”Nogomet,Rukoment,trening,klub”>
<meta name=”author” content=”L.K”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<h>Web stranica za sportove </h>
</body>
</html>
F. Napišite primjer koda kojim se definira opis mrežne stranice.
<meta name=”description” content=”Ovo je web stranica vezana uz sportove”>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Ovo je web stranica vezana uz sportove”>
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
<meta name=”author” content=”John Doe”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<p>All meta information goes in the head section…</p>
</body>
</html>
G. Napišite primjer koda kojim se definira autor stranice.
<meta name=”author” content=”Jonathan Joestar”>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Free Web tutorials”>
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
<meta name=”author” content=”Jonathan Joestar”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
</body>
</html>
H. Napišite primjer koda kojim se dokument osvježava svakih 60 sekundi.
<meta http-equiv=”refresh” content=”60″>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Free Web tutorials”>
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
<meta name=”author” content=”John Doe”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”refresh” content=”60″>
</head>
<body>
</body>
</html>
I. Što označava pojam viewport?
Wiewport označava kao će se web stranica prikazati na nekom zaslonu.
J. Napišite primjer koda kojim se postavlja viewport da ispravno prikazuje mrežno sjedište na
različim uređajima. Objasnite kod.
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<p>Krave piju vodu</p>
</body>
</html>
U ovom slučaju dimenzije web stranica ovise o veličini uređaja na kojem se prikazuju te time dobijemo uvijek ispravan prikaz bez obzira na uređaj.
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.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=”ljeto.jpg”>
</body>
</html>
B. Napišite redak HTML koda kojim opisujemo da se slika naziva zima.jpg nalazi u podmapi
images trenutne mape.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=”images/zima.jpg”>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=”/images/jesen.jpg”>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=”../proljece.jpg”>
</body>
</html>
E. Što se podrazumijeva pod apsolutnom putanjom? Navedite primjer apsolutne putanje.
Pod apsolutnom putanjom podrazumijevamo cijeli URL neke slike ili resursa.
Primjer: <img src= “https://t3.gstatic.com/licensed-image?q=tbn:ANd9GcRoT6NNDUONDQmlthWrqIi_frTjsjQT4UZtsJsuxqxLiaFGNl5s3_pBIVxS6-VsFUP_” alt=”slika macke”>
F. Što se podrazumijeva pod relativnom putanjom? Navedite primjer.
Pod relativnu putanju se podrazumijeva putanja slike ili resursa u odnosu na trenutnu stranicu.
Primjer: <img src=”/images/jesen.jpg” alt=”slika jeseni”>
G. Kakve se putanje preporuča koristiti? Zašto?
Preporučeno je koristiti relativne putanje jer nam omogućava lakšu promjernu naziva domene, lakše izvan mrežno testiranje te neovisnost o baznom URL-u.
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.