Ivan Zavorka
Tehnička Škola Ruđera Boškovića, 3.A
Cilj vježbe:
Učenik će moći oblikovati web stranicu i web sjedište, razlikovati semantičke elemente i njihovu
ulogu, ispravno koristiti osnovne elemente prilikom oblikovanja web stranice.
Priprema za vježbu:
Zadatak 1: Što označavamo pojmom semantika (semantika)?
Odgovor: Semantički element opisuje svoje značenje pregledniku i developer-u.
Zadatak 2: Navedite neke semantičke i neke nesemantičke elemente.
Odgovor: Semantički elementi: <form>, <table> i <article>
Nesemantički elementi: <div> i <span>
Zadatak 3: Nabrojite, objasnite i skicirajte odnos osnovnih šest semantičkih elemenata koji čine mrežnu
stranicu (semantički elementi).
Odgovor: <header>
<nav>
<section>
<article>
<aside>
<footer>
Zadatak 4: Nabrojite ostalih sedam semantičkih elemenata.
Odgovor: <details>
<figcaption>
<figure>
<main>
<mark>
<summary>
<time>
Zadatak 5: Navedite četiri osnovne tehnike za kreiranje izgleda stranice od više stupaca (multicolumn).
Odgovor: CSS framework
CSS float property
CSS flexbox
CSS grid
Vježba:
1. HTML Section i article:
A. Što je sekcija (section) i u koje se sekcije obično dijeli mrežna stranica?
To je strukturni HTML element koji služi za grupiranje zajedničkih elemenata. Obično se definira dva više ili heading elementa i dodatni elementi za prezentiranje sadržaja.
B. Koje su osobine članka (article)? Navedite primjere korištenja tog semantičkog elementa
Atricle definira nezavisne, samostalne elemente.
Primjer:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a
future in which humans live in harmony with nature. </p>
</article>
C. Napravite sami primjer jednostavne mrežne stranice sa dvije sekcije sa po tri kratka članka u njima (npr. Prva sekcija govori o toplim bojama i u nju stavite tri kratka članka o tri boje iz te grupe. Isto napravite za hladne boje.)
Screenshot stranice:
_PNG.png)
2. HTML Header i footer:
A. Čemu služi element zaglavlja (header) i što obično sadrži?
Header obično sadrži poveznice na ostale stranice iste tematike, tj. vodi na podstranice Home stranice.
B. Napišite primjer u kojem ćete staviti element <header> u element <article>. U članku koristite naslov i
odlomak.
Primjer:
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
C. Što definiramo elementom podnožja (footer)? Što obično sadrži taj element?
Taj element obično sadrži informacije o vlasniku stranice, copyright, informacije za kontakt...
D. Dodajte svojoj stranici podnožje sa osobnim informacijama.
Screenshot stranice:
_PNG.png)
3. Izrada mrežne stranice:
A. Što definiramo elementom <nav>?
Definira set navigacijskih poveznica.
B. Dodajte element <nav> sa četiri stavke na odgovarajuće mjesto na svoju mrežnu stranicu. Neka
navigacija omogućuje povezivanje sa nekim međusobno srodnim eksternim mrežnim sjedištima.
_PNG.png)
C. Koje su značajke elementa <aside>?
Definira sadržaj pored sadržaja u kojem je postavljen.
D. Kakav sadržaj određujemo elementom <figure>?
Određujemo nezavisan sadržaj.
E. Što određujemo elementom <figcaption> i gdje se on smješta?
Taj element definira naslov za <figure> element.
F. Dodajte na svoje mrežno sjedište neku ilustraciju. Pri tom ispravno koristite <img>, <figure> i <figcaption>.
Screenshot stranice:
_PNG.png)
3. Izrada mrežne stranice:
A. Napravite mrežnu stranicu prema primjeru za grad. Odaberite grad po izboru (niti jedan od navedenih).
Obogatite stranicu semantičkim elementima koji će sadržavati zaglavlje, podnožje, navigaciju (internu),
sekcije, članke, slike i ostale dijelove prema potrebi. Boje odaberite sukladno bojama koje se javljaju na
odabranim slikama.
Stranica je ista kao i u prethodnom zadatku jer nisam stigao u školi napraviti o gradu, pa ste mi Vi
(profesorica) ocijenili ovu: