Oznake blok razine
oznake koje mijenjaju svojstva cijelog bloka teksta
<article> članak; potpuni, samostalni blok povezanih elemenata.
<aside> sadržaj kojim se opisuje/sažima neki sadržaja uz kojeg se nalazi
<figure> samostalni sadržaj
<footer> podnožje za dokument ili odjeljak
<h1> … <h6> naslovi
<header> zaglavlje dokumenta ili odjeljka
<main> glavni sadržaj dokumenta
<nav> navigacija
<p> odlomak
<pre> preformatirani odlomak
<section> odjeljak u dokumentu; blok povezanih elemenata
<h1><h2><h3><h4><h5><h6>
uvećavanje i podebljavanje tekst
definiranje naslova prije odlomka
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
preporuka: nemojte koristiti naslove za prikaz podebljanih ili naglašenih riječi unutar nekog teksta
zabranjeno: miješati <h> elemente (jedan otvoreni, drugi zatvoreni)
CSS postavke
h1 { h2 {
display: block; display: block;
font-size: 2em; font-size: 1.5em;
/*my parent element's font-size */ margin-top: 0.83em;
margin-top: 0.67em; margin-bottom: 0.83em;
margin-bottom: 0.67em; margin-left: 0;
margin-left: 0; margin-right: 0;
margin-right: 0; font-weight: bold;
font-weight: bold; }
}
23
h3 { h4 {
display: block; display: block;
font-size: 1.17em; font-size: 1em;
margin-top: 1em; margin-top: 1.33em;
margin-bottom: 1em; margin-bottom: 1.33em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: bold; font-weight: bold;
} }
h5 { h6 {
display: block; display: block;
font-size: .83em; font-size: .67em;
margin-top: 1.67em; margin-top: 2.33em;
margin-bottom: 1.67em; margin-bottom: 2.33em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
font-weight: bold; font-weight: bold;
} }
Primjer:
<body>
<h1> Naslov 1. razine</h1>
<h2> Naslov 2. razine</h2>
<h3> Naslov 3. razine</h3>
<h4> Naslov 4. razine</h4>
<h5> Naslov 5. razine</h5>
<h6> Naslov 6. razine</h6>
</body>
<p>
odlomak na mrežnoj stranici;
tekst je grupiran u jednu cjelinu; ostavlja se jedan prazan red nakon odlomka
<p> </p>
CSS postavke
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
24
<pre>
oznaka koji prikazuje tekst točno u onom obliku u kojem dolazi u izvornom dokumentu oblikovan
tipom monospace
retke prekidamo tipkom <ENTER> ili razmaknicom
pripaziti na tabulatore (bolje koristiti običan razmak)
obično se koristi kod pretvaranja datoteka koje su originalno u nekom tekstualnom obliku
pri kreiranju ASCII sličica
<pre> </pre>
CSS postavke
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
Primjer: ASCII SLIKA
<body>
<pre>
iiiiiiliiCGGClilllliilll
i;;iiiiiGfCG@Giiiiiiilli
;;;;ii;f;::fG@G;i;;iiili
i:::;;;G:::lL@@llii;;iif
tlii::tG;:lif@@Lftt;;itC
fffffif@f,iLlG@GCfL;;itL
LLCLCLL@::;:f@@@CLLliltG
CLLLCGG@ifilC@@GGCCfLCGG
LCCCCGGGllftC@@@GCCCLGGG
GCCCCLCG@:tCGG@@CLCCCCGG
GCCLffGG@@@GGG@@GCCCGCGG
CCLLLLCG@@tftC@GGLCCtLGC
CLCCGG@@GliiitGG@GCLfL@C
GCfCGG@G;:::;tC@@GLtffCC
CLtLL@@t:,::;fCGLC@LttfC
LLCLG@C::,,,;tLtCG@@GLtC
fffC@GCfl,::lLG@G@@@CCGG
fftG@GCLLLLLC@@LG@@@@GC@
CCL@@GGGCCCG@@GGCGG@@L@C
ttL@@@@@G@C@@@@GC@@@@C@G
CC@G@@@@@GG@@@@G@@@@@@@G
CGGGG@@@@G@@@@@@@@@@@@GG
GGGGG@@@@@@@@@@@@@@@@@G@
@GfGG@@@@@@@@@@@G@@@@@@@
@GfLCf;L@@@@@@@@@G@@@@@@
@GLCCii;it@@@@@@@@@@@@@@
@@GGGLfiii;G@GLfG@@@@@@@
@@@@@tftltCffLLLG@@@@@@@
@@@@fliCLiLCGGGGG@@@@@@@
</pre>
</body>
25
<header>
spremnik za uvodni sadržaj ili skup navigacijskih veza ili definiranje zaglavlja nekog članka <article>
ili sekcije <section>, tj. dijela mrežne stranice
obično sadrži:
jedan ili više naslova (<h1> - <h6>)
logotip ili ikonu
informacije o autorstvu
u jednom dokumentu možete imati nekoliko <header> oznaka
Napomena: oznaka <header> ne smije se nalaziti unutar <footer>, <address> ili nekog drugog
<header> oznake
<header> </header>
CSS postavke
header{
display: block;
}
Primjer:
<body>
<header>
<h1> Najvažniji naslov</h1>
<p> Info: </p>
</header>
<p> XXXXXXXXXXXXXXXXXXX</p>
</body>
<nav>
skup navigacijskih veza
namijenjen je samo za glavne blokove navigacije
<nav> </nav>
CSS postavke
nav{
display: block;
}
Primjer:
<body>
<nav>
<a href="#">1. stavka izbornika</a>
<a href="#">2. stavka izbornika</a>
<a href="#">3. stavka izbornika</a>
<a href="#">4. stavka izbornika</a>
</nav>
</body>
26
<footer>
<footer> definira podnožje za svog najbližeg potomka koji dijeli sadržaj ili korijenski element na
dijelove
obično sadrži:
informacije o autorstvu
informacije o autorskim pravima
kontakt informacije
povratak na vrh veze
srodnih dokumenata
u jednom dokumentu možete imati nekoliko oznaka <footer>
<footer> </footer>
CSS postavke
footer{
display: block;
}
Primjer:
<body>
<footer>
<p>Posted by: XXXX</p>
<p>Kontakt:
<a
href="mailto:someone@example.com">someone@example.com</a>
</p>
</footer>
</body>
<section>
definira odjeljke u dokumentu, kao što su poglavlja, zaglavlja, podnožja ili bilo koji drugi odjeljak
dokumenta
tematski grupiran sadržaj najčešće sa naslovom
omogućuje grupiranje međusobno povezanoga sadržaja u sekcije; uobičajeno je da svaka sekcija ima
vlastito zaglavlje.
na jednoj mrežnoj stranici može biti više sekcija; svaka sekcija može imati nekoliko <article> oznaka
koje su međusobno logički povezani, tj. imaju zajedničku temu ili svrhu
trebalo bi se izbjegavati smještanje cjelokupnoga sadržaja mrežne stranice unutar jednoga
<section> elementa.
<section> </section>
CSS postavke
section{
display: block;
}
27
Primjer:
<body>
<section>
<h1>XXXX</h1>
<p>XXXXXXXXXXXXXXXXXX.</p>
</section>
<section>
<h1>XXXX</h1>
<p>XXXXXXXXXXXXXXXXXX.</p>
</section>
</body>
<article>
određuje neovisan, samostalni sadržaj ili se može preuzeti i distribuirati kao cjelina
potencijalni izvori
objava na forumu
članak na blogu
članak iz novina ili časopisa
novosti
komentar
unutar oznake <article> smješta se jedan samostalni dio sadržaja. Ako je riječ o komentarima, oni
se mogu smjestiti unutar oznake <article> koji može biti ugniježđen unutar druge oznake u kojoj se
nalazi članak
<article> </article>
CSS postavke
article {
display: block;
}
Primjer:
<body>
<article>
<h1>XXXX</h1>
<p>XXXXXXXXXXXXXXXXXX.</p>
</article>
<article>
<h1>XXXX</h1>
<p>XXXXXXXXXXXXXXXXXX.</p>
</article>
</body>
28
<main>
određuje glavni sadržaj dokumenta
sadržaj unutar oznake <main> mora biti jedinstven za dokument. Ne smije sadržavati sadržaj koji se
ponavlja putem dokumenata kao što su bočne trake, navigacijske veze, informacije o autorskim
pravima, logo i pretraživanja.
Napomena: U dokumentu ne smije biti više od jedne oznake <main>; ne smije biti potomak
elementa <article>, <aside>, <footer>, <header> ili <nav>.
<main> </main>
CSS postavke
main {
display: block;
}
Primjer:
<body>
<main>
<h1>XXXXXX</h1>
<p>XXXXXXXXXXXXXX</p>
<article>
<h1>X</h1>
<p>XXX.</p>
</article>
<article>
<h1>XX</h1>
<p>XXXX.</p>
</article>
</main>
</body>
<figure>
oznaka <figure> određuje samostalni sadržaj, poput ilustracija, dijagrama, fotografija, popisa kodova
itd.
<figure> </figure>
CSS postavke
figure {
display: block;
}
Primjer:
<body>
<figure>
<img src="slika.jpg" alt="The Pulpit Rock" >
</figure>
</body>
29
<aside>
definira neki sadržaj kojim se opisuje/sažima neki sadržaja uz kojeg se nalazi; povezan sa okolnim
sadržajem i može se smatrati odvojenim dijelom
<aside> može se koristiti na dva načina, ovisno o tome gdje je smješten:
ako je smješten unutar <article> trebao bi sadržavati informacije koje su vezane isključivo uz
sadržaj u toj oznaci, a ne informacije koje se odnose na cjelokupan sadržaj stranice, npr. rječnik
vezan uz članak
ako je smješten van <article> onda može služiti kao spremnik za informacije koje se tiču cijele
stranice, na primjer može sadržavati poveznice na druge dijelove stranice, okvire za umetanje
vezanih informacija s društvenih mreža, popis novih članaka i slično.
Savjet: sadržaj <aside> može biti postavljen kao bočna traka u članku
<aside> </aside>
CSS postavke
aside {
display: block;
}
Primjer:
<body>
<p>Pingvini (lat. Spheniscidae) ptica koje ne mogu letjeti, a žive na južnoj
polutki. To je jedina porodica unutar reda Sphenisciformes, podrazreda
ptica Neognathae.
</p>
<aside style="border:1px solid #00FF00;">
<h3>Pingvinke</h3>
<h4>Sistematika</h4>
<p>Carstvo: Animalia</p>
<p>Koljeno: Chordata</p>
<p>Razred: Aves</p>
<p>Red: Sphenisciformes Sharpe, 1891.</p>
<p>Porodica: SpheniscidaeBonaparte, 1831.</p>
<h4>Suvremeni rodovi</h4>
<p>Aptenodytes</p>
<p>Eudyptes</p>
<p>Eudyptula</p>
<p>Megadyptes</p>
<p>Pygoscelis</p>
<p>Spheniscus</p>
</aside>
</body>
30
