LV09 Meta podaci, putanje

Vježba 9: Meta elementi i putanje za datoteke

Nika Bevanda, Bruno Blašković 3.C

 

PRIPREMA ZA VJEŽBU

  1. Što su meta podaci?

Meta podaci su podaci koji opisuju ili pružaju dodatne informacije o drugim podacima. U kontekstu digitalnih informacija, meta podaci obično ne sadrže same podatke, već informacije o tim podacima.

 

  1. Što opisujemo putanjama datoteka kod izrade web sjedišta?

Putanjama datoteka opisujemo lokaciju datoteka i resursa unutar strukture direktorija na poslužitelju ili na računalu. U kontekstu izrade web sjedišta, putanje omogućuju pregledniku i poslužitelju da nađu resurse (kao što su HTML datoteke, slike, CSS datoteke, JavaScript datoteke i ostali sadržaj).

 

 

 

IZVOĐENJE VJEŽBE

  1. Meta podaci, element meta
  • Što definira element <meta>?

Element <meta> u HTML-u definira metapodatke o dokumentu, kao što su informacije o tipu znakova, autoru, ključnim riječima, opisu i drugim informacijama koje nisu direktno vidljive korisnicima, ali su korisne za pretraživače, društvene mreže, i web aplikacije.

 

  • Gdje se piše element <meta>?

Element <meta> piše se unutar <head> sekcije HTML dokumenta.

 

  • Što se obično navodi, odnosno određuje pomoću elementa <meta>?

Pomoću elementa <meta> obično se navode sljedeće informacije:

Meta oznaka za karaktere (charset), Meta opis, Meta ključne riječi, Meta autor, Meta za robots, Meta za viewport.

 

  • Kome su obično namijenjeni meta podaci?

Meta podaci su obično namijenjeni: Pretraživačima (Search engines) za bolje razumijevanje sadržaja stranice, Web aplikacijama za pravilno prikazivanje stranica na različitim uređajima, Društvenim mrežama i drugim servisima za pravilno prikazivanje podataka kada se stranica dijeli, Programerima i webmasterima za pravilno upravljanje sadržajem i postavkama stranice.

 

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

Primjer: <meta name=”keywords” content=”web development, HTML, CSS, JavaScript, programming”>

 

  • Napiši primjer koda kojim se definira OPIS mrežne stranice.

Primjer: <meta name=”description” content=”Ovo je primjer web stranice koja nudi resurse za učenje web razvoja, uključujući HTML, CSS i JavaScript.”>

 

  • Napiši primjer koda kojim se definira AUTOR stranice.

Primjer: <meta name=”author” content=”Ime Autora”>

 

  • Napiši primjer koda kojim se dokument osvježava svakih 60 sekundi.

Primjer: <meta http-equiv=”refresh” content=”60″>

 

  • Što označava pojam viewport? Napiši primjer koda kojim se postavlja viewport da ispravno prikazuje mrežno sjedište na različim uređajima. Objasni kod.

Pojam viewport označava područje na ekranu uređaja u kojem se prikazuje web stranica. Za mobilne uređaje, viewport određuje širinu i skaliranje stranice, osiguravajući da stranica bude pravilno prikazana bez potrebe za horizontalnim pomicanjem ili previše smanjenim prikazom.

Primjer koda za postavljanje viewporta:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Objšnjenje:

width=device-width: Ovaj atribut postavlja širinu viewporta na širinu ekrana uređaja. To znači da će stranica biti prilagođena širini ekrana, bez potrebe za horizontalnim pomicanjem.

initial-scale=1.0: Ovaj atribut postavlja početni faktor zooma na 1 (100%), čime se osigurava da stranica bude prikazana u svojoj stvarnoj veličini na uređaju, bez automatskog povećanja ili smanjenja.

 

 

 

  1. HTML putanje datoteka
  • Ispuni tablicu:
  Zadatak HTML kod
1. slika naziva ovca.jpg nalazi se u istoj mapi kao i trenutna stranica
 

<img src=”ovca.jpg” alt=”Ovca”>
2. slika naziva koza.jpg nalazi u podmapi images trenutne mape
 

 

<img src=”images/koza.jpg” alt=”Koza”>
3. slika naziva mrkva.jpg nalazi u podmapi images u korijenskoj mapi trenutnog mrežnog sjedišta <img src=”/images/mrkva.jpg” alt=”Mrkva”>
4. slika naziva vrt.jpg nalazi u mapi koja je u strukturi mapa za jednu razinu viša od trenutne mape <img src=”../vrt.jpg” alt=”Vrt”>

 

  • Što se podrazumijeva pod apsolutnom putanjom? Navedi primjer apsolutne putanje.

Apsolutna putanja označava potpunu putanju koja uključuje sve potrebne informacije kako bi se došlo do resursa (npr. datoteke ili web stranice) bez obzira na trenutnu lokaciju. Apsolutna putanja uvijek počinje od korijena (npr. od početnog URL-a ili lokalnog sustava datoteka) i uključuje cijeli put prema odredišnoj datoteci.

Primjer: <img src=”https://www.example.com/images/ovca.jpg” alt=”Ovca”>

 

  • Što se podrazumijeva pod relativnom putanjom? Navedi primjer.

Relativna putanja označava putanju koja se definira u odnosu na trenutnu lokaciju (mapu ili URL) iz koje se datoteka ili resurs poziva. Relativne putanje su korisne kada želite da web stranica ili datoteke ostanu funkcionalne bez obzira na to na kojem računaru ili serveru se nalaze.

Primjer:

Ako je slika ovca.jpg u istoj mapi kao i HTML stranica: <img src=”ovca.jpg” alt=”Ovca”>

Ako je slika koza.jpg u podmapi images: <img src=”images/koza.jpg” alt=”Koza”>

Ako je slika vrt.jpg u roditeljskoj mapi (jedan nivo iznad trenutne mape): <img src=”../vrt.jpg” alt=”Vrt”>

 

 

  • Kakve se putanje preporuča koristiti? Zašto?

Preporučuje se korištenje relativnih putanja kada god je to moguće, jer one nude brojne prednosti, posebno u kontekstu razvoja web stranica i aplikacija kao što su prenosivost, fleksibilnost, SEO i performanse.

 

 

  1. Izrada mrežne stranice
  • Napravi mrežnu stranicu o odabranim stvarima koje bi stavio na popis SVETOM NIKOLI. Svaki učenik bira tri do pet stvari i njihove slike stavlja u posebne mape nazvane po imenima učenika. Potrebno je napraviti posebnu mapu za osnovnu mrežnu stranicu, te u njoj podmape za svakog učenika u podmapi images (podmapa mape mrežne stranice). Slike je potrebno učitati sa weba. Sve se slike trebaju prikazivati ispravno bez izobličenja i biti jednake širine, sa odgovarajućim vrijednostima atributa alt. Uz svaku sliku potrebno je napisati i obrazloženje, te prema mogućnosti poveznicu gdje se stvar može nabaviti. Na stranici trebaju biti ispravno definirani i svi potrebni meta podaci.<!DOCTYPE html>
    <html lang=”hr”>
    <head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <meta name=”description” content=”Popis darova za Svetog Nikolu – Stvari koje želim dobiti”>
    <meta name=”keywords” content=”Sveti Nikola, darovi, pokloni, popis, učenici”>
    <meta name=”author” content=”Nika i Bruno”>
    <title>Popis darova za Svetog Nikolu</title>
    </head>
    <body style=”background-color: #ADD8E6; font-family: Arial, sans-serif; margin: 0; padding: 0; color: #333;”>

    <header style=”background-color: #333; color: #fff; padding: 20px 0; text-align: center;”>
    <h1>Popis darova za Svetog Nikolu</h1>
    <p>Ovdje su stvari koje bi Nika i Bruno voljeli dobiti za Svetog Nikolu!</p>
    </header>

    <!– Stavke za Niku –>
    <div class=”item”>
    <h2 style=”color: #FF69B4; text-align: center;”>Nika</h2> <!– Roza boja za Niku –>

    <h4>Parfem</h4>
    <img src=”images/nika/parfem.jpg” alt=”Parfem” class=”item-img” style=”width: 300px; height: auto; display: block; margin: 10px auto;”>
    <p class=”description”>Ovaj parfem ima divan miris, savršen za svaki dan.</p>
    <a href=”https://www.douglas.ch/fr/p/5000005003″ target=”_blank”>Kupite parfem</a>

    <h4>Fotoaparat</h4>
    <img src=”images/nika/fotic.jpg” alt=”Fotoaparat” class=”item-img” style=”width: 300px; height: auto; display: block; margin: 10px auto;”>
    <p class=”description”>Ovaj fotoaparat je savršen za moje avanture i putovanja!</p>
    <a href=”https://www.jeftinije.hr/Proizvod/12084065/foto/digitalni-fotoaparati/kompaktni-digitalni-fotoaparati/fujifilm-polaroid-fotoaparat-s-trenutnim-ispisom-fotografije-instax-mini-9-rose-rozi” target=”_blank”>Kupite fotoaparat</a>

    <h4>Torbica</h4>
    <img src=”images/nika/torbica.jpg” alt=”Torbica” class=”item-img” style=”width: 300px; height: auto; display: block; margin: 10px auto;”>
    <p class=”description”>Ova torbica je elegantna i praktična, idealna za moj svakodnevni stil.</p>
    <a href=”https://modivo.hr/c/zene/torbe-i-torbice/brand:jacquemus” target=”_blank”>Kupite torbicu</a>
    </div>

    <br><br><br>

    <!– Stavke za Brunu –>
    <div class=”item”>
    <h2 style=”color: #1E90FF; text-align: center;”>Bruno</h2> <!– Plava boja za Brunu –>

    <h4>Parfem</h4>
    <img src=”images/bruno/parfem2.jpg” alt=”Parfem” class=”item-img” style=”width: 300px; height: auto; display: block; margin: 10px auto;”>
    <p class=”description”>Sviđa mi se njegov svjež i energičan miris!</p>
    <a href=”https://www.parfumerija-lana.hr/on-line-shop-niche-parfumerija/initio-side-effect-eau-de-parfum/” target=”_blank”>Kupite parfem</a>

    <h4>Duks</h4>
    <img src=”images/bruno/duksa.jpg” alt=”Duks” class=”item-img” style=”width: 300px; height: auto; display: block; margin: 10px auto;”>
    <p class=”description”>Volim nositi dukseve jer su udobni i praktični za opuštanje, ali i za sportske aktivnosti!</p>
    <a href=”https://www.kickscrew.com/products/burberry-40561701?variant=42829791854787″ target=”_blank”>Kupite duks</a>

    <h4>Tenisice</h4>
    <img src=”images/bruno/tene.jpg” alt=”Tenisice” class=”item-img” style=”width: 300px; height: auto; display: block; margin: 10px auto;”>
    <p class=”description”>Ove tenisice su savršen par za treninge i svakodnevnu upotrebu.</p>
    <a href=”https://numerisfootwear.com/products/pigment” target=”_blank”>Kupite tenisice</a>
    </div>

    <br><br>

    <footer style=”background-color: #333; color: white; text-align: center; padding: 10px;”>
    <p>&copy; 2024 Sveti Nikola – Popis darova</p>
    </footer>

    </body>
    </html>