PRIPREMA ZA VJEŽBU
Što su meta podaci?
Metapodaci predstavljaju informacije o informacijama, tj. podaci koji pružaju opisne karakteristike određenog digitalnog izvora. Oni su od velike koristi prilikom pregledavanja, prijenosa i dokumentiranja informacijskog sadržaja.
Što opisujemo putanjama datoteka kod izrade web sjedišta?
Putanja datoteke označava put kojom se veza uspostavlja s drugim stranicama, slikama i različitim datotekama.
IZVOĐENJE VJEŽBE
1. Meta podaci, element meta
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>
Što definira <meta> element?
Postavlja metapodatke, odnosno pruža informacije o podacima.
Gdje se piše element <meta>?
Uvijek se unosi unutar HTML elementa <head>.
Što se obično navodi, odnosno specificira pomoću elementa <meta>?
Definira se niz znakova, opis stranice, ključne riječi, autora dokumenta te postavke okvira za prikaz.
Kome su obično namijenjeni meta podaci?
Dizajnirani su za pretraživače kako bi im omogućili pravilno prikazivanje stranice, kao i za korištenje od strane tražilica i drugih web servisa.
Napišite primjer koda kojim se definiraju ključne riječi za tražilice. (pomoć:
https://www.w3schools.com/tags/tag_meta.asp )
<meta name="keywords" content="HTML, CSS, JavaScript">
Napišite primjer koda kojim se definira opis mrežne stranice.
<meta name="description" content="Free Web tutorials for HTML and CSS">
Napišite primjer koda kojim se definira autor stranice.
<meta name="author" content="Borna i Lucas ">
Napišite primjer koda kojim se dokument osvježava svakih 60 sekundi.
Što označava pojam viewport?
<meta http-equiv="refresh" content="60"> Viewport služi za optimizaciju stranice za sve vrste uređaja i web preglednika.
Napišite primjer koda kojim se postavlja viewport da ispravno prikazuje mrežno sjedište na različitim uređajima. Objasnite kod.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
"viewport" definira širina i visina prozora uređaja i skala definira zoom razinu prilikom prvog učitavanja.
Viewport je prostor u kojem se može vidjeti web sadrž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.
<img src="ljeto.jpg" alt="Opis slike">
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" alt="Opis slike">
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" alt="Opis slike">
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" alt="Opis slike">
E. Što se podrazumijeva pod apsolutnom putanjom? Navedite primjer apsolutne putanje.
<img src="https://www.example.com/images/slika.jpg" alt="Opis slike">
Što se podrazumijeva pod relativnom putanjom? Navedite primjer.
img src="slike/slika.jpg" alt=“Opis slike“ >
Kakve se putanje preporuča koristiti? Zašto?
Preporučuje se korištenje relativnih putanja jer čini HTML dokumente prenosivijim. Ako se stranica premjesti na drugu lokaciju ili se projekt premjesti na drugi server, relativne putanje će ostati ispravne, dok bi apsolutne putanje mogle izgubiti svoju valjanost.
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.
<!DOCTYPE html>
<html lang="hr">
<body>
<head>
<meta charset="UTF-8">
<meta name="description" content="Web stranica o mačkama i psima.">
<meta name="keywords" content="mačka, pas, ljubimci">
<meta name="author" content="Vorel i Zavorka">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">
</head>
<h1>Bok skvadro</h1>
<h2>Mačke</h2>
<div>
<img src="C:\Users\tsrb\Pictures\Mace\3d2a96b8-0ea5-46fa-8a56-9a64662f65da.jpg" alt="PPomogni mi BOže ,molim te" widht="400" height="400">
<br>
<br>
<img src="C:\Users\tsrb\Pictures\Mace\240px-Panthera_tigris_tigris.jpg" alt="AAAAAAAAAAAAAA" widht="555" height="366">
<br>
<br>
<img src="C:\Users\tsrb\Pictures\Mace\preuzmi.jpg" alt="Ova dere" widht="500" height="402">
<br>
<br>
</div>
<h2>KEROVI</h2>
<div>
<img src="C:\Users\tsrb\Pictures\Peseki\vcjmx46ge0y21.jpg" alt="Pre jaki ker" widht="500" height="500">
<br>
<br>
<img src="C:\Users\tsrb\Pictures\Peseki\preuzmi.jpg" alt="Ovaj zna kaj radi" widht="500" height="500">
<br>
<br>
<img src="C:\Users\tsrb\Pictures\Peseki\676.jpg" alt="O Bože" widht="300" height="300">
<br>
<br>
</div>
</body>
</html>