LV11 HTML Layout - nika-bevanda.from.hr

Vježba 11: HTML Semantički elementi i izgled (Layout)

Nika Bevanda, Bruno Blašković 3.C

PRIPREMA ZA VJEŽBU

Što označavamo pojmom semantika?

Semantički element jasno opisuje svoje značenje i pregledniku i programeru.

Navedi primjere semantičkih i primjere nesemantičkih elemenata.

Semantički elementi su:

<header> – označava zaglavlje stranice ili sekcije.

<article> – označava neovisni sadržaj ili članak.

<section> – označava sekciju stranice.

<footer> – označava podnožje stranice ili sekcije.

<nav> – označava navigacijski meni.

Nesemantički elementi se koriste za strukturiranje sadržaja, a značenje im daje stilizacija ili funkcionalnost. Neki od njih su:

<div> – koristi se za grupiranje sadržaja bez semantičkog značenja.

<span> – koristi se za označavanje dijela teksta ili sadržaja bez značenja.

Nabroji, objasni i skiciraj odnos osnovnih šest semantičkih elemenata koji čine mrežnu stranicu.

Osnovnih šest semantičkih elemenata na mrežnoj stranici:

<header>: Predstavlja gornji dio stranice ili sekcije. Obično sadrži logo, navigacijske linkove ili informacije o autoru.

<nav>: Ovaj element koristi se za označavanje navigacijskog menija ili skupa poveznica na stranicama.

<main>: Glavni sadržaj stranice koji je specifičan za tu stranicu, čime se izdvaja od drugih sadržajnih dijelova.

<section>: Sekcija je logički odjeljak unutar stranice koji može sadržavati podnaslove i sadržaj koji je tematski povezan.

<article>: Nezavisni sadržaj, poput blog posta, vijesti ili članka.

<footer>: Donji dio stranice koji obično sadrži informacije o autorskim pravima, kontakt informacije ili druge važne informacije.

Ovi elementi se često međusobno nadovezuju u hijerarhijskoj strukturi stranice, gdje <header> i <footer> okružuju <main>, dok su <nav> i <section> unutar stranice, povezani s drugim semantičkim elementima.

Skica:

(logo, navigacija)

</header>

<main>

(sadržaj sekcije)

</section>

(članak ili post)

</article>

</main>

(kontakt, autorska prava)

</footer>

Nabroji ostalih sedam semantičkih elemenata.

<aside> – Element koji označava sadržaj koji je dodatak glavnoj temi stranice, poput bočne trake ili povezanih informacija.

<details> – Omogućuje korisnicima da otvore ili zatvore dodatne informacije na stranici.

<summary> – Povezan s <details>, koristi se za prikazivanje sklopljenog naslova koji korisnik može kliknuti da bi otkrio više informacija.

<mark> – Koristi se za označavanje dijela teksta koji je relevantan ili pretražen.

<figure> – Predstavlja sadržaj poput slike, grafike ili dijagrama, a može sadržavati i <figcaption> za opis.

<figcaption> – Daje opis za sadržaj unutar <figure> elementa.

<time> – Označava specifično vrijeme ili datum.

Navedi četiri osnovne tehnike za kreiranje izgleda stranice od više stupaca (multicolumn).

HTML tablice (<table>):

Možete koristiti HTML tablice za kreiranje višestupčastih rasporeda. Iako tablice nisu idealne za raspored stranica, jer su dizajnirane za prikazivanje podataka, moguće ih je koristiti kao osnovu za višestupčasti izgled. Korištenjem <table>, <tr>, <td> i <th> elemenata, možete stvoriti strukturu koja imitira višestupčasti raspored.

HTML Listama (<ul>, <ol>, <li>):

U nekim slučajevima, HTML liste mogu se koristiti za postizanje višestupčastog izgleda. U kombinaciji s atributima poput columns (za stare preglednike) ili jednostavnom strukturom listi, možete podijeliti sadržaj na više stupaca.

HTML s frameset (deprecated):

<frameset> je stariji HTML element koji se koristio za podjelu web stranice na više odjeljaka (stupaca), ali ova tehnika je sada deprecated i više se ne preporučuje za upotrebu jer stvara probleme u pogledu pristupačnosti i SEO-a.

<marquee> element (deprecated):

Ovaj element može se koristiti za pomicanje sadržaja unutar stupaca, iako on zapravo ne stvara “stupce” u tradicionalnom smislu, već stvara pomični tekst.

IZVOĐENJE VJEŽBE

HTML Section i article

Što je sekcija (section) i u koje se sekcije obično dijeli mrežna stranica?

Sekcija (<section>) je semantički HTML element koji označava logički odjeljak ili dio sadržaja na web stranici. Svaka sekcija obično sadrži naslov i skup povezanih informacija koje čine smislenu cjelinu u kontekstu stranice. Sekcije mogu biti različite, a obično se koriste za grupiranje tematski povezanim sadržajem, čime se stranici daje struktura i olakšava čitanje.

Obične sekcije koje se nalaze na mrežnoj stranici mogu uključivati:

Zaglavlje stranice (header): Sadržava naslov, logo, navigaciju.

Glavni sadržaj (main): Središnji dio stranice koji sadrži tematski relevantne informacije.

Sekcije (<section>): Logički odjeljci koji predstavljaju različite teme ili dijelove sadržaja.

Podnožje stranice (footer): Sadržava informacije o autorskim pravima, kontaktima i druge relevantne podatke.

Koje su osobine članka (article)? Navedi primjere korištenja tog semantičkog elementa.

Osobine članka (<article>):

Samostalnost: Članak treba biti samostalan, što znači da bi mogao biti izdvojen i distribuiran izvan konteksta stranice (npr. kao blog post, vijest, komentar, itd.).

Tematska cjelovitost: Svaki članak obuhvaća jednu jasnu temu ili priču.

Autonomija: Članak se može razumjeti samostalno, bez potrebe za dodatnim kontekstom stranice.

Primjeri korištenja članka (<article>):

Blog post: Svaka objava u blogu može biti predstavljena unutar <article> elementa.

Novinski članak: Članak na novinskoj stranici također bi bio unutar <article> taga.

Komentar: Komentar korisnika na blogu ili društvenoj mreži može biti označen pomoću <article> elementa.

PRAKTIČNO: Napravi 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 stavi tri kratka članka o tri boje iz te grupe. Isto napravi za hladne boje.)

<!DOCTYPE html>
<html lang=”hr”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Tople i Hladne Boje</title>
</head>
<body>
<header>
<h1>Tople i Hladne Boje</h1>
</header>
<main>
<section id=”tople-boje”>
<h2>Tople boje</h2>
<article>
<header>
<h3>Crvena</h3>
</header>
<p>Crvena boja simbolizira strast, energiju i ljubav. Često se koristi za privlačenje pažnje.</p>
</article>
<article>
<header>
<h3>Žuta</h3>
</header>
<p>Žuta boja povezana je s radošću, optimizmom i energijom. Savršena za stvaranje veselih prostorija.</p>
</article>
<article>
<header>
<h3>Narančasta</h3>
</header>
<p>Narančasta kombinira energiju crvene i optimizam žute boje.
Često se koristi u dizajnu interijera za dinamičnost.</p>
</article>
</section>
<section id=”hladne-boje”>
<h2>Hladne boje</h2>
<article>
<header>
<h3>Plava</h3>
</header>
<p>Plava boja simbolizira smirenost, mir i povjerenje. Često se koristi u prostorima za opuštanje.</p>
</article>
<article>
<header>
<h3>Zelena</h3>
</header>
<p>Zelena boja povezuje se s prirodom, rastom i ravnotežom. Poznata je po umirujućem efektu.</p>
</article>
<article>
<header>
<h3>Ljubičasta</h3>
</header>
<p>Ljubičasta boja često se povezuje s luksuzom, kreativnošću i duhovnošću.
Izvrsna je za sofisticirane prostore.</p>
</article>
</section>
</main>
<footer>
<p>© 2024 Tople i Hladne Boje</p>
</footer>
</body>
</html>

HTML Header i footer

Čemu služi element zaglavlja (header) i što obično sadrži?

Element <header> koristi se za označavanje zaglavlja stranice ili sekcije unutar stranice. Obično sadrži elemente koji predstavljaju uvodnu informaciju, navigaciju i brendiranje stranice, kao što su: Naslov stranice (npr. <h1>, <h2>, itd.), Logo, Navigacijski izbornici (npr. <nav>), Kratki opis stranice ili slogan, Autorska prava (u nekim slučajevima).

PRAKTIČNO: Napiši primjer u kojem ćeš staviti element <header> u element <article> . U članku koristi naslov i odlomak.

<h2>Kako odabrati pravu boju za vaš interijer</h2>

</header>

<p>Odabir prave boje za prostor može biti izazov, no uz nekoliko smjernica možete stvoriti ugodnu atmosferu koja odgovara vašim potrebama i željama.</p>

</article>

Što definiramo elementom podnožja (footer)? Što obično sadrži taj element?

Element <footer> označava podnožje stranice ili sekcije. Obično se koristi za informacije koje se nalaze na dnu stranice, a koje ne pripadaju glavnom sadržaju. Obično sadrži: Informacije o autorskim pravima (copyright), Kontakt informacije (e-mail, telefon, adresu), Poveznice na dodatne stranice (npr. politika privatnosti, uvjeti korištenja), Društvene mreže, Autor stranice ili godine

PRAKTIČNO: Dodaj svojoj stranici podnožje sa osobnim informacijama.

<h2>Kako odabrati pravu boju za vaš interijer</h2>

</header>

<p>Odabir prave boje za prostor može biti izazov, no uz nekoliko smjernica možete stvoriti ugodnu atmosferu koja odgovara vašim potrebama i željama.</p>

</article>

<p>Telefon: 123-456-789</p>

<p>TŠRB Zagreb</p>

</footer>

<article>
<header>
<h2>Kako odabrati pravu boju za vaš interijer</h2>
</header>
<p>Odabir prave boje za prostor može biti izazov, no uz nekoliko smjernica možete stvoriti ugodnu atmosferu koja odgovara vašim potrebama i željama.</p>
</article>
<footer>
<p>© 2024 Nika Bevanda, Bruno Blašković. Sva prava pridržana.</p>
<p>Telefon: 123-456-789</p>
<p>TŠRB Zagreb</p>
</footer>

HTML Nav i aside, figure i figcaption

Što definiramo elementom <nav> ?

Element <nav> označava navigacijski odjeljak stranice. Koristi se za grupiranje poveznica koje omogućuju korisnicima da se kreću kroz stranicu ili vanjske stranice. Obično se unutar <nav> elementa nalaze glavne poveznice na stranici, kao što su glavni izbornik ili navigacija kroz sadržaj.

PRAKTIČNO: Dodaj element <nav> sa četiri stavke na odgovarajuće mjesto na svoju mrežnu stranicu. Neka navigacija omogućuje povezivanje sa nekim međusobno srodnim vanjskim mrežnim sjedištima.
Koje su značajke elementa <aside> ?

Element <aside> koristi se za označavanje sadržaja koji je srodan glavnoj temi stranice, ali nije nužno u njenoj glavnoj liniji. Tipično se koristi za dodatne informacije, komentare, bilješke ili oglašavanje koje nije glavni fokus stranice, ali može obogatiti ili biti relevantno za čitatelja.

Kakav sadržaj određujemo elementom <figure> ?

Element <figure> koristi se za označavanje sadržaja koji je povezan s nekom slikom, ilustracijom, dijagramom ili drugim vizualnim sadržajem. Ovaj element obuhvaća medijski sadržaj koji može biti samostalni element ili biti objašnjen dodatnim tekstom.

Što određujemo elementom <figcaption> i gdje se on smješta?

Element <figcaption> koristi se za dodavanje opisa ili legende o sadržaju unutar <figure> elementa. Obično se smješta unutar <figure> elementa i opisuje sliku, dijagram, grafikon ili bilo koji drugi vizualni element, objašnjavajući njegovu funkciju ili kontekst.

PRAKTIČNO: Dodaj na svoju stranicu neku ilustraciju. Pri tom ispravno koristi <img>, <figure> i <figcaption>.

<!DOCTYPE html>
<html lang=”hr”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Tople i Hladne Boje</title>
</head>
<body>
<header>
<h1>Tople i Hladne Boje</h1>
</header>
<main>
<section id=”tople-boje”>
<h2>Tople boje</h2>
<article>
<header>
<h3>Crvena</h3>
</header>
<p>Crvena boja simbolizira strast, energiju i ljubav. Često se koristi za privlačenje pažnje.</p>
</article>
<article>
<header>
<h3>Žuta</h3>
</header>
<p>Žuta boja povezana je s radošću, optimizmom i energijom. Savršena za stvaranje veselih prostorija.</p>
</article>
<article>
<header>
<h3>Narančasta</h3>
</header>
<p>Narančasta kombinira energiju crvene i optimizam žute boje.
Često se koristi u dizajnu interijera za dinamičnost.</p>
</article>
</section>
<section id=”hladne-boje”>
<h2>Hladne boje</h2>
<article>
<header>
<h3>Plava</h3>
</header>
<p>Plava boja simbolizira smirenost, mir i povjerenje. Često se koristi u prostorima za opuštanje.</p>
</article>
<article>
<header>
<h3>Zelena</h3>
</header>
<p>Zelena boja povezuje se s prirodom, rastom i ravnotežom. Poznata je po umirujućem efektu.</p>
</article>
<article>
<header>
<h3>Ljubičasta</h3>
</header>
<p>Ljubičasta boja često se povezuje s luksuzom, kreativnošću i duhovnošću.
Izvrsna je za sofisticirane prostore.</p>
</article>
</section>
<article>
<header>
<h2>Kako odabrati pravu boju za vaš interijer</h2>
</header>
<p>Odabir prave boje za prostor može biti izazov, no uz nekoliko smjernica možete stvoriti ugodnu atmosferu koja odgovara vašim potrebama i željama.</p>
</article>
</main>
<footer>
<p>© 2024 Nika Bevanda, Bruno Blašković. Sva prava pridržana.</p>
<p>Telefon: 123-456-789</p>
<p>TŠRB Zagreb</p>
</footer>
</body>
</html>

Izrada mrežne stranice

Napravi mrežnu stranicu prema primjeru za grad. Odaberi grad po izboru (niti jedan iz primjera). Obogati stranicu semantičkim elementima koji će sadržavati zaglavlje, podnožje, navigaciju (internu), sekcije, članke, slike, vanjske poveznice i ostale dijelove prema potrebi. Boje odaberi sukladno bojama koje se javljaju na odabranim slikama (može ih se međusobno ujednačiti filterima). Oblikuj sadržaj podnožja. Uoči kako priloženi CSS podupire responzivnost stranice.
<!DOCTYPE html>
<html lang=”hr”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Mostar – Grad na Neretvi</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
header {
background-color:#CBF3F0;
color: black;
text-align: center;
padding: 20px;
}
nav {
float: left;
width: 25%;
background-color: #333;
color: white;
padding: 15px;
height: 100%;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav a {
color: white;
text-decoration: none;
display: block;
padding: 10px;
margin: 5px 0;
}
nav a:hover {
background-color: #FFDFF0;
}
article {
float: left;
width: 70%;
padding: 20px;
background-color: #FFDFF0;
margin: 10px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
section::after {
content: “”;
display: table;
clear: both;
}
@media (max-width: 768px) {
nav, article {
width: 100%;
float: none;
}
}
figure {
text-align: center;
margin: 20px 0;
}
figure img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 8px;
}
figcaption {
font-size: 14px;
color: #555;
}
</style>
</head>
<body>
<header>
<h1>Mostar – Grad na Neretvi</h1>
</header>
<section>
<nav>
<h2>Izbornik</h2>
<ul>
<li><a href=”#istorija”>Povijest</a></li>
<li><a href=”#turizam”>Turizam</a></li>
<li><a href=”#most”>Stari Most</a></li>
<li><a href=”#kultura”>Kultura</a></li>
</ul>
</nav>
<article>
<section id=”povijest”>
<h2>Povijest Mostara</h2>
<figure>
<img src=”Mostar.jpg” alt=”Pogled na Mostar”>
<figcaption>Mostar i Neretva</figcaption>
</figure>
<p>Mostar je povijesni grad smješten na rijeci Neretvi. Grad je dobio ime prema kamenim mostovima koji su ga povezivali od najranijih vremena.
Najpoznatiji most je Stari Most, koji datira iz 16. stoljeća.</p>
<p>Grad je bio pod utjecajem Osmanskog carstva, a kasnije i Austro-Ugarske, što je oblikovalo njegov jedinstveni kulturni identitet.</p>
</section>
<section id=”turizam”>
<h2>Turizam u Mostaru</h2>
<p>Mostar je jedan od najposjećenijih turističkih gradova u Bosni i Hercegovini. Posjetitelji dolaze kako bi uživali u prirodnim ljepotama,
starom mostu, te bogatom kulturnom naslijeđu.</p>
<p>Grad je poznat po šarenim ulicama, tržnicama, i restoranu na rijeci Neretvi, kao i po predivnoj arhitekturi koja miješa islamske i zapadnoeuropske utjecaje.</p>
</section>

<section id=”most”>
<h2>Stari Most</h2>
<p>Stari Most je most koji se nalazi u centru Mostara, simbol grada. Iako je srušen tijekom rata 1993. godine,
obnovljen je i danas je na UNESCO-vom popisu svjetske baštine.</p>
<p>Ovaj most je važno mjesto za ljude u Mostaru, jer povezuje obje strane rijeke Neretve i ima povijest punu značajnih događaja.</p>
</section>
<section id=”kultura”>
<h2>Kultura i običaji</h2>
<p>Mostar je grad s bogatom kulturnom tradicijom. Mnogi festivali i kulturne manifestacije održavaju se u Mostaru tijekom cijele godine.
Grad je poznat po svojoj glazbi, plesu i umjetnosti.</p>
<p>U Mostaru se održava i tradicionalno natjecanje u skakanju s mosta, koje privlači turiste iz cijelog svijeta.</p>
</section>
</article>
</section>
<footer>
<p>© 2024 Nika Bevanda, Bruno Blašković. Sva prava pridržana.</p>
<p>Telefon: 123-456-789</p>
<p>TŠRB Zagreb</p>
</footer>
</body>
</html>