Embedded Files
LV 11. HTML Layout
Petar Lovaković i Filip Marangunić 3.A
PRIPREMA
1. Što označavamo pojmom semantika (semantika)?
2. Navedite neke semantičke i neke nesemantičke elemente.
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.
5. Navedite četiri osnovne tehnike za kreiranje izgleda stranice od više stupaca (multicolumn).
Semantika je grana lingvistike koja proučava značenje jezika. Odnosi se na analizu značenja riječi, fraza, rečenica i drugih jezičnih elemenata.
Semantički elementi: Oni koji nose značenje, kao što su tekst, slike, linkovi itd.
Nesemantički elementi: Oni koji nemaju inherentno značenje, kao što su stilski elementi (boje, fontovi) i strukturni elementi (razmaci, okviri).
Tekst: Osnovna informacija na stranici.
Slike: Grafički elementi koji prenose informacije.
Linkovi: Poveznice na druge stranice ili resurse.
Tablice: Strukturirani prikaz podataka.
Obrasci (Forms): Interaktivni elementi za unos podataka.
Multimedija (Audio/Video): Elementi koji sadrže zvuk ili video.
Header (Zaglavlje): Vrh stranice koji obično sadrži naslov i logotip.
Footer (Podnožje): Dno stranice s dodatnim informacijama ili poveznicama.
Sidebar (Bočna traka): Lateralni dio stranice s dodatnim informacijama ili poveznicama.
Navigation (Navigacija): Elementi koji pomažu korisnicima u kretanju po stranici.
Article (Članak): Glavni sadržajni blok stranice.
Section (Odsjek): Dijelovi stranice koji grupiraju sličan sadržaj.
Aside (Dodatno): Dodatne informacije ili poveznice koje nisu ključne za glavni sadržaj.
CSS Flexbox: Fleksibilan model raspoređivanja elemenata u kontejneru.
CSS Grid: 2D raspored elemenata na stranici, posebno dobar za kompleksne rasporede.
Floats: Stariji pristup, ali još uvijek u upotrebi za postizanje više stupaca.
CSS Multi-column Layout: CSS svojstvo koje omogućuje definiranje više stupaca
VJEŽBA
A Sekcija je semantički HTML5 element koji se koristi za grupiranje povezanih sadržaja na mrežnoj stranici. Svaka sekcija ima svoje značenje i obično bi trebala imati naslov koji opisuje sadržaj unutar nje. Mrežna stranica se obično dijeli na različite sekcije, kao što su "Header" (zaglavlje), "Footer" (podnožje), "Nav" (navigacija), "Main" (glavni sadržaj), "Aside" (dodatni sadržaj), itd.
B Osobine:
Nezavisnost: Članak bi trebao biti nezavisan, što znači da bi trebao sadržavati informacije koje su dovoljne same za sebe i ne zahtijevaju dodatne objašnjavajuće dijelove.
Značajnost: Članak bi trebao sadržavati informacije koje su značajne i relevantne, obično predstavljajući samostalnu jedinicu informacija.
Naslov: Članak obično ima naslov koji jasno opisuje njegov sadržaj.
Vrijeme i Datum: Ako je primjenjivo, članak može sadržavati informacije o vremenu i datumu objavljivanja.
Autorstvo: Ako je primjenjivo, informacije o autoru ili autorima mogu biti dio
Primjeri korištenja:
Vijesti: Svaki članak o određenoj vijesti može biti odvojeni članak.
Blogovi: Svaki blog post obično se implementira kao članak.
Članci: Na web stranicama koje nude članke o različitim temama, svaki članak može biti odvojeni semantički element.
Recenzije proizvoda: Recenzija jednog proizvoda može biti implementirana kao članak.
C <!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
section {
margin-bottom: 30px;
}
article {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
h2 {
color: #333;
}
</style>
</head>
<body>
<section>
<h2>Tople boje</h2>
<article>
<h3>Crvena</h3>
<p>Ima RGB vrijednost (255,0,0), a heksidecimalnu #FF0000</p>
</article>
<article>
<h3>Žuta</h3>
<p>Ima RGB vrijednost (255,255,0), a heksidecimalnu #FFFF00</p>
</article>
<article>
<h3>Narančasta</h3>
<p>Ima RGB vrijednost (255,165,0), a heksidecimalnu #FFA500</p>
</article>
</section>
<section>
<h2>Hladne boje</h2>
<article>
<h3>Plava</h3>
<p>Ima RGB vrijednost (0,0,255), a heksidecimalnu #0000FF</p>
</article>
<article>
<h3>Zelena</h3>
<p>Ima RGB vrijednost (0,255,0), a heksidecimalnu #00FF00</p>
</article>
<article>
<h3>Ljubičasta</h3>
<p>Ima RGB vrijednost (128,0,128), a heksidecimalnu #800080</p>
</article>
</section>
</body>
</html>
2. A Element <header> u HTML-u označava uvodni dio ili zaglavlje određenog dijela stranice. Obično se koristi za sadržaj koji se pojavljuje na vrhu sekcije ili stranice i često sadrži naslov, logotip, navigaciju i slične informacije. Uobičajeni sadržaj u <header> elementu uključuje naslov (najčešće prvi nivo naslova, <h1>), logotip, navigacijske poveznice i druge relevantne informacije koje korisnicima pomažu u orijentaciji na stranici.
B <!DOCTYPE html>
<head>
<title>Primjer s Headerom u Articleu</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
background-color: #eee;
padding: 10px;
text-align: center;
}
article {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
margin-top: 15px;
}
</style>
</head>
<body>
<article>
<header>
<h1>Naslov Članka</h1>
</header>
<p>Ovo je uvodni odlomak članka...</p>
<p>Daljnji tekst članka...</p>
</article>
</body>
</html>
C Element <footer> u HTML-u označava završni dio određenog dijela stranice. Obično se koristi za informacije poput autorskih prava, poveznica na druge dijelove stranice, kontakt informacija ili bilo što što biste željeli staviti na dno određenog dijela sadržaja. Uobičajeni sadržaj u <footer> elementu uključuje autorske informacije, godinu izrade stranice, poveznice na druge dijelove web stranice, kontakt informacije itd.
D <footer>
<p>Petar Lovaković i Filip Marangunić| ****** | lovakovpetar@gmail.com filip.marangunic@gmail.com</p>
</footer>
3. A Element <nav> u HTML-u označava blok s poveznicama za navigaciju po stranici ili između različitih stranica. Obično se koristi za sadržaj kao što su izbornici, linkovi na druge dijelove web stranice ili eksterne resurse.
B <nav>
<a href="https://hr.wikipedia.org/wiki/%C5%BDuta">Poveznica 1</a>
<a href="https://hr.wikipedia.org/wiki/Crvena">Poveznica 2</a>
<a href="https://hr.wikipedia.org/wiki/Naran%C4%8Dasta">Poveznica 3</a>
<a href="https://hr.wikipedia.org/wiki/Boja">Poveznica 4</a>
</nav>
C Element <aside> se obično koristi za sadržaj koji je povezan s glavnim sadržajem, ali ga nije nužno potrebno čitati da biste razumjeli osnovnu strukturu stranice. Može sadržavati bočne informacije, oglase, poveznice na srodne članke itd.
D Element <figure> se koristi za označavanje bilo kakvog sadržaja koji se referencira u glavnom tekstu, poput slika, grafikona, dijagrama itd.
E Element <figcaption> koristi se za dodavanje opisa ili podnaslova <figure> elementu. Smješta se unutar <figure>.
F <figure>
<img src="putanja/do/slike.jpg" alt="Opis slike">
<figcaption>Ilustracija 1: Opis slike.</figcaption>
</figure>
4. <!DOCTYPE html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
background-color: #eee;
padding: 10px;
text-align: center;
}
section {
margin-bottom: 30px;
}
article {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
margin-top: 15px;
}
</style>
</head>
<body>
<article>
<header>
<h1>Zagreb</h1>
</header>
<p>Zagreb je glavni grad Republike Hrvatske i najveći grad u Hrvatskoj po broju stanovnika. Grad Zagreb je kao glavni grad Hrvatske posebna teritorijalna, upravna i samoupravna jedinica. Šire područje grada okuplja više od milijun stanovnika. Povijesno gledajući, grad Zagreb izrastao je iz dvaju naselja na susjednim brežuljcima, Gradeca i Kaptola, koji čine jezgru današnjega grada, njegovo povijesno središte (Gornji i dio Donjega Grada).</p>
</article>
<section>
<figure>
<img src="https://europeinwinter.com/wp-content/uploads/2022/10/iStock-546182488.jpg"></a>
<nav>
<a href="https://hr.wikipedia.org/wiki/Novi_Zagreb">Zagreb</a>
<a href="https://hr.wikipedia.org/wiki/Zagreb">Novi Zagreb</a>
<a href="https://hr.wikipedia.org/wiki/Novi_Zagreb_%E2%80%93_istok">Trg bana Josipa Jelačića</a>
<a href="https://hr.wikipedia.org/wiki/Trg_bana_Jela%C4%8Di%C4%87a_(Zagreb)">Novi Zagreb - Istok</a>
</nav>
</figure>
<section>
<h2>Središnji Zagreb</h2>
<article>
<h3>Trg bana Josipa Jelačića</h3>
<p>Skraćeno ga se naziva svakako: Trg bana Jelačića ili Jelačićev trg, a u mjesnome govoru poznat je i kao Jelačić-plac (službeni naziv od 23. lipnja 1848. do 1947.) Povijesni nazivi su Trg Republike (od 1947. do 1990. godine), Trg Tridesetnice i Harmica (od mađ. harmincz - 30, tako se još uvijek naziva prolaz od kipa prema Dolcu) jer se tu ubirala tridesetina, tj. postojala je carinarnica u kojoj se ubirala daća.</p>
</article>
<article>
<h3>Glavni kolodvor</h3>
<p>Zagrebački Glavni kolodvor (službeno: Zagreb Glavni kolodvor) najveći je željeznički kolodvor u Hrvatskoj. Nalazi se u središtu Zagreba, na Trgu kralja Tomislava 12. Gradnja zgrade Glavnog kolodvora počela je 1890., a objekt je svečano otvoren 18. kolovoza 1892. pod imenom Državni kolodvor. Projekt za zgradu izradio je arhitekt Državnih ugarskih željeznica Ferenc Pfaff. Zgrada Glavnog kolodvora registrirana je kao kulturno dobro.</p>
</article>
<article>
<h3>Gradec</h3>
<p>Gradec ili Grič je naziv za stari dio grada Zagreba na obronku Medvednice iz kojeg je, zajedno s Kaptolom, nastao današnji Zagreb.
Godine 1242. je Bela IV. izdao Zlatnu bulu kojom grad proglašava "slobodnim i kraljevskim gradom na brdu Gradecu zagrebačkom". Od 1242. do 1266. je grad utvrđen bedemima i kulama te se njegov oblik i raspored ulica do danas vrlo malo izmijenio. U srednjem vijeku je manji broj ulica imao imena: Srednja (danas Ćirilometodska), Blatna (Demetrova), Mesarska (Matoševa), Duga (Radićeva), Popovska (dio Opatičke).</p>
</article>
</section>
<section>
<h2>Novi Zagreb</h2>
<article>
<h3>Istok</h3>
<p>Novi Zagreb – istok gradska je četvrt u upravnom ustrojstvu Grada Zagreba. Gradska četvrt osnovana je Statutom Grada Zagreba 14. prosinca 1999., i čini polovicu tradicionalnog dijela Zagreba zvanog Novi Zagreb.</p>
</article>
<article>
<h3>Zapad</h3>
<p>Novi Zagreb – zapad gradska je četvrt u samoupravnom ustrojstvu Grada Zagreba. Gradska četvrt osnovana je Statutom Grada Zagreba 14. prosinca 1999., i čini polovicu tradicionalnog dijela Zagreba zvanog Novi Zagreb.</p>
</article>
<article>
<h3>Brezovica</h3>
<p>Brezovica je naseljeno mjesto i gradska četvrt u Gradu Zagrebu. Prema popisu stanovnika iz 2011. godine, naselje Brezovica ima 594 stanovnika.[1] Poštanski broj je 10257.</p>
</article>
</section>
</body>
</html>
Page updated
Google Sites
Report abuse