LV 11: HTML Layout
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:
Odgovorite na pitanja pisano u bilježnicu:
1. Što označavamo pojmom semantika (semantika)?
Semantički element jasno opisuje njegovo značenje i pregledniku i programeru.
2. Navedite neke semantičke i neke nesemantičke elemente.
Primjeri nesemantičkih elemenata: <div>i <span>- ne govori ništa o njegovom sadržaju.
Primjeri semantičkih elemenata: <form>, <table>i <article>- jasno definira njegov sadržaj.
3. Nabrojite, objasnite i skicirajte odnos osnovnih šest semantičkih elemenata koji čine mrežnu
stranicu (semantički elementi).
4. Nabrojite ostalih sedam semantičkih elemenata.
1. <glavna>
2. <mark>
3. <nav>
4. <odjeljak>
5. <sažetak>
6. <vrijeme>
7. <figura>
5. Navedite četiri osnovne tehnike za kreiranje izgleda stranice od više stupaca (multicolumn).
1.CSS framework
2. CSS float property
3. CSS flexbox
4. 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?
<section> - Definira odjeljak u dokumentu
Dakle, pronaći ćete HTML stranice s <section>elementima koji sadrže
<article>elemente i <article>elemente koji sadrže <section>elemente.
B. Koje su osobine članka (article)? Navedite primjere korištenja tog semantičkog elementa.
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.)
2. HTML Header i footer
A. Čemu služi element zaglavlja (header) i što obično sadrži?
<header>Element predstavlja kontejner za uvodni sadržaj ili skup navigacijskih
linkova.
<header>Element obično sadrži:
1. jedan ili više elemenata zaglavlja (<h1> - <h6>)
2. logotip ili ikona
3. podaci o autorstvu
B. Napišite primjer u kojem ćete staviti element <header> u element <article>. U članku
koristite naslov i odlomak.
C. Što definiramo elementom podnožja (footer)? Što obično sadrži taj element?
<footer>Elemenata definira podnožja za dokumenta ili sekcije.
<footer>Element obično sadrži:
1. podaci o autorstvu
2. informacije o autorskim pravima
3. kontakt podaci
4. karta web stranice
5. povratak na vrh poveznica
6. povezani dokumenti
D. Dodajte svojoj stranici podnožje sa osobnim informacijama.
3. HTML Nav i aside, figure i figcaption
A. Što definiramo elementom <nav>?
<nav>Elemenata definira skup navigacijskih linkova.
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.
C. Koje su značajke elementa <aside>?
<aside>Elemenata definira neki sadržaj, osim sadržaja je postavljena u (kao sidebar).
<aside>Sadržaj treba biti posredno odnose na okolni sadržaj.
D. Kakav sadržaj određujemo elementom <figure>?
<figure>self-sadržane sadržaja Oznaka određuje, kao ilustracija, dijagrama, fotografija, kod
oglasi, itd
E. Što određujemo elementom <figcaption> i gdje se on smješta?
<figcaption>Oznaka definira naslov za <figure>element. <figcaption>
Element može biti postavljen kao prvi ili kao zadnji djetetom jednog <figure>elementa.
F. Dodajte na svoje mrežno sjedište neku ilustraciju. Pri tom ispravno koristite <img>,
