Priprema:
Što označavamo pojmom semantika (semantika)?
Semantički element jasno opisuje svoje značenje i pregledniku i programeru.
Navedite neke semantičke i neke nesemantičke elemente.
Ne-semantički elementi- <div> i <span> - ne govori ništa o svom sadržaju
Semantični elementi- <form>, <table> i <article> - jasno definira svoj sadržaj
Nabrojite, objasnite i skicirajte odnos osnovnih šest semantičkih elemenata koji čine mrežnu stranicu (semantički elementi).
Element <section>definira odjeljak u dokumentu.
Element <article>specificira neovisan, samostalan sadržaj.
Element <header>predstavlja spremnik za uvodni sadržaj ili skup navigacijskih poveznica.
Element <footer>definira podnožje za dokument ili odjeljak.
Element <nav>definira skup navigacijskih veza.
Element <aside>definira neki sadržaj osim sadržaja u koji je postavljen (poput bočne trake).
Nabrojite ostalih sedam semantičkih elemenata.
Oznaka <figure> navodi samostalni sadržaj, poput ilustracija, dijagrama, fotografija, popisa kodova itd.
Oznaka <figcaption> definira naslov za <figure>element. Element <figcaption>se može postaviti kao prvi ili kao posljednji dijete elementa <figure>.
Element <img> definira stvarnu sliku/ilustraciju.
Element <time> definira datum/vrijeme.
Element <mark> definira označeni tekst.
Element <main> definira glavni sadržaj dokumenta.
Element <details> definira dodatne detalje koje korisnik može vidjeti ili sakriti.
Navedite četiri osnovne tehnike za kreiranje izgleda stranice od više stupaca (multicolumn).
Tehnike za kreiranje izgleda stranice od vise stupaca: CSS framework, CSS float property, CSS flexbox, CSS grid.
1. HTML Section i article
A. Što je sekcija (section) i u koje se sekcije obično dijeli mrežna stranica?
Element <section>definira odjeljak u dokumentu. Web stranica se normalno može podijeliti u odjeljke za uvod, sadržaj i podatke za kontakt.
B. Koje su osobine članka (article)? Navedite primjere korištenja tog semantičkog elementa.
Element <article>specificira neovisan, samostalan sadržaj. Članak bi trebao imati smisla sam po sebi i trebalo bi ga biti moguće distribuirati neovisno o ostatku web stranice.
Primjeri gdje se <article>element može koristiti:
Postovi na forumu
Postovi na blogu
Komentari korisnika
Kartice proizvoda
Novinski članci
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.)
<!DOCTYPE html>
<html>
<body>
<section>
<h1>Tople boje</h1>
<article>
<h2>Crvena</h2>
<p>nastaje miješanjem sljedećih boja: magenta i žuta
ima u RGB-u vrijednost (255, 0, 0) decimalno ili FF0000 heksadecimalno
s plavom i žutom bojom čini osnovne boje</p>
</article>
<article>
<h2>Narančasta</h2>
<p>nastaje miješanjem sljedećih boja: crvena i žuta
ima u RGB-u vrijednost (255, 165, 0) decimalno ili FFA500 heksadecimalno
dobila je ime po voću naranča
</p>
</article>
<article>
<h2>Žuta</h2>
<p>je osnovna komplementarna boja (uz cijan i magentu)
nastaje aditivnim miješanjem sljedećih boja: crvena i zelena
ima u RGB-u vrijednost (255, 255, 0) decimalno ili FFFF00 heksadecimalno
ima oznaku 1000 do 1037 u RALovu sustavu boja.
s crvenom i plavom čini osnovne boje
</p>
</article>
</section>
<section>
<h1>Hladne boje</h1>
<article>
<h2>Plava</h2>
<p>nastaje miješanjem sljedećih boja: cijan i magenta
ima u RGB-u vrijednost (0, 0, 255) decimalno ili 0000FF heksadecimalno
s crvenom i žutom čini osnovne boje
</p>
</article>
<article>
<h2>Zelena</h2>
<p>nastaje miješanjem sljedećih boja: plave (cijan-plave) i žute, smatra se jednom od aditiva primarnih boja.
u RGB-u ima vrijednost (0, 255, 0) decimalno ili 00FF00 heksadecimalno</p>
</article>
<article>
<h2>Ljubičasta</h2>
<p>Ljubičasta boja se povezuje s plemstvom i duhovnošću. Nastaje kombinacijom tople i energične crvene i hladne plave boje te ima svojstva obje boje. U prirodi ima ljubičastih cvjetova poput lavande, orhideje, jorgovana i ljubičica. Soba ljubičaste boje može potaknuti kreativnost kod djece ili umjetnika. U Tajlandu ljubičasta simbolizira jutro. Bila je omiljena boja kraljice Kleopatre u Egiptu, a u SAD-u orden «Purple Heart» dodjeljuje američka vojska vojnicima koji su bili ranjeni u ratu.</p>
</article>
</section>
</body>
</html>
2. HTML Header i footer
A. Čemu služi element zaglavlja (header) i što obično sadrži?
Element <header>predstavlja spremnik za uvodni sadržaj ili skup navigacijskih poveznica.
Element <header>obično sadrži:
jedan ili više elemenata naslova (<h1> - <h6>)
logo ili ikona
podaci o autorstvu
B. Napišite primjer u kojem ćete staviti element <header> u element <article>. U članku koristite naslov i odlomak.
<article>
<header>
<h2>Crvena</h2>
<p>Crvenija boja</p>
</header>
<p>nastaje miješanjem sljedećih boja: magenta i žuta
ima u RGB-u vrijednost (255, 0, 0) decimalno ili FF0000 heksadecimalno
s plavom i žutom bojom čini osnovne boje</p>
</article>
C. Što definiramo elementom podnožja (footer)? Što obično sadrži taj element?
Element <footer>definira podnožje za dokument ili odjeljak.
Element <footer>obično sadrži:
podaci o autorstvu
informacije o autorskim pravima
kontakt informacije
sitemap
natrag na vrh poveznice
povezani dokumenti
D. Dodajte svojoj stranici podnožje sa osobnim informacijama.
<footer>
<p>Autor: Lucas Sertić i Borna Sečen</p>
</footer>
3. HTML Nav i aside, figure i figcaption
A. Što definiramo elementom <nav>?
Element <nav>definira skup navigacijskih veza.
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.
<nav>
<a href="https://hr.wikipedia.org/wiki/Crvena">Crvena</a> |
<a href="https://hr.wikipedia.org/wiki/Plava">Plava</a> |
<a href="https://hr.wikipedia.org/wiki/Naran%C4%8Dasta">Narančasta</a> |
<a href="https://hr.wikipedia.org/wiki/Zelena">Zelena</a>
</nav>
C. Koje su značajke elementa <aside>?
Element <aside>definira neki sadržaj osim sadržaja u koji je postavljen (poput bočne trake). Sadržaj <aside>bi trebao biti neizravno povezan sa sadržajem koji ga okružuje.
D. Kakav sadržaj određujemo elementom <figure>?
Oznaka <figure>navodi samostalni sadržaj, poput ilustracija, dijagrama, fotografija, popisa kodova itd.
E. Što određujemo elementom <figcaption> i gdje se on smješta?
Oznaka <figcaption>definira naslov za <figure>element. Element <figcaption>se može postaviti kao prvi ili kao posljednji dijete elementa <figure>.
F. Dodajte na svoje mrežno sjedište neku ilustraciju. Pri tom ispravno koristite <img>, <figure> i <figcaption>.
<figure>
<img src="C:\Users\tsrb\Downloads\crvena.jpg" alt="Crv crvena" style="width:50%">
<figcaption>Fig.1 - Crveeeena</figcaption>
</figure>
4. 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.