4 - Prilog HTML v.1.1

Priručnik za predmete:
Osnove Web Tehnologija

Uvod u Web Tehnologije
Prilog HTML oznake
v1.0
Autori:
prof. dr. sc. Dragutin Kermek
doc. dr. sc. Matija Novak
Matija Kaniški, mag. inf.
Iva Levak. mag. inf.
Copyright 2022. FOI

Priručnik za OWT
Preambula
<!DOCTYPE html>
Slučaj Kreiranje HTML dokumenta, svaki HTML dokument započinje
korištenja: ovom preambulom
Primjer <!DOCTYPE html>

<html>
korištenja:
<head></head>
<body></body>
</html>
Poveznica: HTML doctype declaration (w3schools.com)
Dodatno: Ovo nije HTML oznaka već preambula odnosno informacija

pregledniku o tipu dokumenta koji se očekuje.
Nije osjetljiva na velika mala slova no ustaljeno je da se riječ doctype
piše velikim slovima.
Nakon preambule slijedi oznaka <html></html>.
Element dokumenta
<html></html>
Slučaj Korijenska oznaka HTML dokumenta, kreiranje kontejnera za sve
korištenja: oznake.
Podržava: ☑globalni atributi ☐atributi događaja

<html>
korištenja:
<head>...</head>
<body>...</body>
</html>
Ostali xlmns
atributi:
Poveznica: HTML html tag (w3schools.com)
Dodatno: Uvijek bi se trebalo unutar <html></html> oznake dodati globalni

atribut lang kako bi se deklarirao jezik stranice.
1
Priručnik za OWT
Komentar

Slučaj Komentiranje unutar izvornog koda. Ovo nije HTML oznaka, već
korištenja: sintaksa za komentar.
Podržava: ☐globalni atributi ☐atributi događaja
Primjeri 

korištenja:
Poveznica: HTML Comments (w3schools.com)
Dodatno: Komentar se ne prikazuje unutar preglednika.
Poveznice
<a></a>
Slučaj Kreiranje poveznice
korištenja:
Podržava: ☑globalni atributi ☑atributi događaja
Najkorišteniji href, target, type, rel, media, hreflang

atributi:
href Definicija Koristi se za definiranje putanje do određenog dokumenta,

stranice ili elementa.
Vrijednost URI
Napomena Može se dodatno unutar atributa prije vrijednosti dodati

opisne riječi pri čemu se definira poveznica za otvaranje
e-pošte (mailto:), javascript (javascript:), id nekog HTML
elementa(#) ili telefon(tel:).
Primjeri
<a href="https://www.foi.unizg.hr/">FOI naslovna</a>
<a href="mailto:ilevak@foi.hr">Iva Levak</a>
<a href="javascript:alert('Pozdrav!')">Click here!</a>
<a href="tel:+4733378901">Iva Levak</a>
<a href="#o_nama">O nama</a>
2
Priručnik za OWT
target Definicija Definira način otvaranja poveznice, odnosno mjesto na Web

browseru.
Vrijednost ➢ _self - otvara dokument u pozicioniranoj kartici

➢ _blank - otvara dokument u novoj kartici
➢ _parent - otvara dokument u roditeljskom prozoru
➢ _top - otvara dokument u novom prozoru
Primjeri
<a href="https://www.foi.unizg.hr/" target="_blank">FOI</a>
type Definicija Specificira MIME tip dokumenta koji se otvara u poveznici.
Vrijednost MIME_tip_prema_IANA media types
Napomena Koristi se jedino ako je href atribut prisutan.
Primjeri
<a href="https://www.foi.unizg.hr/" type="text/html">FOI</a>
rel Definicija Specificira vezu između trenutnog i povezanog dokumenta.
Vrijednost ➢ alternate ➢ nofollow

➢ author ➢ noreferrer
➢ bookmark ➢ noopener
➢ external ➢ prev
➢ help ➢ search
➢ license ➢ tag
➢ next
Primjeri
<a rel="nofollow" href="https://www.foi.unizg.hr/">FOI</a>
media Definicija Specificira media/uređaj za koji je povezani dokument

optimiziran.
Vrijednost media_upit
Primjeri
<a href="att_a_media.asp?output=print" media="print and
(resolution:300dpi)"> Open media attribute page for print.</a>
3
Priručnik za OWT
hreflang Definicija Specificira jezik dokumenta koji se otvara u poveznici.
Vrijednost kod_jezika_prema_ISO_639-1
Primjeri
<a href="https://www.foi.unizg.hr/" hreflang="hr">FOI naslovna</a>
Ostali download, media, ping, referrerpolicy

atributi:
Poveznica: HTML a tag (w3schools.com)
Dodatno: Ako unutar otvorene i zatvorene oznake postavimo sliku umjesto teksta,
pritiskom na sliku otvorit će se poveznica.
Semantika na razini teksta

<abbr></abbr>
Slučaj Definiranje kratice unutar teksta, pri čemu se koristi globalni
korištenja: atribut title za definiranje pune riječi kratice
Primjer <abbr title="Fakultet organizacije i informatike">FOI</abbr>

djeluje više od 50 godina, što je za studij suvremenih
korištenja:
tehnologija dugo razdoblje.
Poveznica: HTML abbr tag (w3schools.com)
Dodatno: Prije se koristila oznaka <acronym> koja nije podržana unutar HTML5
pa se koristi u zamjenu <abbr></abbr>.
4
Priručnik za OWT
Sekcije
<address></address>
Slučaj Kreiranje kontakt informacija autora ili vlasnika dokumenta ili
korištenja: članka
Primjeri <address>
E-pošta: <a href="mailto:ilevak@foi.hr">Iva Levak</a><br>
korištenja
Posjeti : <a href="www.foi.unizg.hr">FOI</a>
Adresa: Pavlinska 2, 42000 Varaždin
</address>
Poveznica: HTML address tag (w3schools.com)
Dodatno: Sav tekst je prikazan nakošeno (osim ako nije drugačije definirano
CSS-om), a preglednici dodaju prije i poslije oznake liniju prekida.
Ugrađeni HTML elementi

<area> <map></map>
Slučaj Definiranje područja unutar mape, pa je stoga uvijek definirana

korištenja: unutar <map> oznake koja se veže uz <img> oznaku
Najkorišteniji href, alt, shape, coords, target

atributi:
href Definicija Specificira poveznicu odredišta za područje.
Vrijednost URL
Primjeri
<area alt="f" href="https://www.foi.unizg.hr/hr/online-nastava"

coords="7,5,73,140" shape="rect">
alt Definicija Specificira alternativni tekst za područje ako se slika ne može

prikazati.
5
Priručnik za OWT
Vrijednost alternativni_tekst
Napomena Obavezan atribut ako je prisutan href atribut, ali može biti
prazan (alt=””).
Primjeri
<area alt="" href="https://www.foi.unizg.hr/hr/fakultet/osnovno"
coords="114,93,37" shape="circle">
shape Definicija Specificira oblik područja na slici.
Vrijednost ➢ default - specificira cijelu regiju

➢ rect - specificira regiju pravokutnog oblika
➢ circle - specificira regiju kružnog oblika
➢ poly - definira regiju višekutnog oblika
Primjeri
coords Definicija Specificira koordinate područja na slici.
Vrijednost ➢ x1, y1, x2, y2 - za koordinate pravokutnika

➢ x, y, radijus - za specificiranje središta i radijusa kružnice
➢ x1, y1, x2, y2, …, xn, yn - za definiranje višekutnog
oblika
Napomena Koristi se zajedno uz atribut shape .
Primjeri
target Definicija Definira način otvaranja poveznice, odnosno mjesto na Web

browseru.
Vrijednost ➢ _self - otvara dokument u pozicioniranoj kartici

➢ _blank - otvara dokument u novoj kartici
➢ _parent - otvara dokument u roditeljskom prozoru
➢ _top - otvara dokument u novom prozoru
6
Priručnik za OWT
Primjeri
coords="7,5,73,140" shape="rect" target="_blank">
Ostali download, hreflang, media, referrerpolicy, rel, type

atributi:
Poveznica: HTML area tag (w3schools.com)
Dodatno Uvijek je definirana unutar <map> oznake!
Sekcije
<article></article>
Slučaj Definiranje neovisnog, samostalnog, distribuiranog ili ponovo
korištenja: iskoristivog sadržaja
Primjer <article>
<h2>HTML jezik</h2>
korištenja:
<p>
<abbr title="The Hypertext Markup Language">HTML</abbr> je
jednostavni jezik oznaka koji se koristi za kreiranje
hipertekstualnih dokumenata koji su neovisni o platformi.
</p>
</article>
Poveznica: HTML article Tag (w3schools.com)
Dodatno: Sadržaj oznake <article></article> treba imati smisla kada je izdvojen

iz cjeline tako da se može preseliti di god je potrebno. Primjerice koristi
se za objavu na forumu, blogu ili vijestima.
7
Priručnik za OWT
Sekcije
<aside></aside>
Slučaj Definiranje dodatnog sadržaja koji opisuje glavni sadržaj (poput
korištenja: rubnog teksta u knjizi)
Primjer <aside>
<h2>HTML jezik</h2>
korištenja:
<p>
</p>
</aside>
Poveznica: HTML aside Tag (w3schools.com)

<audio></audio>
Slučaj Postavljanje audio zapisa
korištenja:
Primjer <audio>
<source type="audio/mpeg" src="zvuk1.mp3">
korištenja: <source type="audio/ogg" src="zvuk1.ogg">
Vaš preglednik ne podržava audio.
</audio>
Najkorišteniji src, controls, autoplay, preload

atributi:
src Definicija Specificira (apsolutnu/relativnu) putanju do audiozapisa.
Vrijednost URL
Napomena Oznaka može biti bez atributa src, ali tada mora sadržavati
oznaku <source> pri čemu se može definirati više <source>
oznaka.
Primjeri
<audio preload controls src="horse.mp3">Zvuk konja</audio>
8
Priručnik za OWT
<audio controls src="https://cdnm.meln.top/ml/?

audio=0_33818195653023&title=Djordje%20Balasevic
%20-%20Olivera&hash=cFiuwHHM15FgKfltB5zoKmxS5i8=">
Olivera
</audio>
controls Definicija Definira hoće li se prikazivati kontrole na elementu za

reprodukciju zvuka (eng. audioplayer), a uključuje kontrole
Pokreni, Pauziraj, Potraži, Glasnoća.
Vrijednost Ne koristi se vrijednost za ovaj atribut
Primjeri
<audio autoplay controls src="horse.mp3">Zvuk konja</audio>
<audio controls src="horse.mp3">Zvuk konja</audio>
autoplay Definicija Definira da će audiozapis početi čim je spreman.
Primjeri
<audio autoplay controls src="horse.mp3">Zvuk konja</audio>
<audio autoplay src="horse.mp3">Zvuk konja</audio>
preload Definicija Specificira kako se audiozapis učitava kada se učitava

stranica.
Vrijednost ➢ auto- učitavanje cijelog videozapisa pri učitavanju stranice

➢ metadata - učitavanje meta podataka pri učitavanju
stranice
➢ none- ne učitavanje podataka audia pri učitavanju stranice
Napomena Ovaj atribut je ignoriran ako postoji definirani atribut

autoplay.
Primjeri
<audio preload="none" src="horse.mp3">Zvuk konja</audio>
<audio preload="auto" src="horse.mp3">Zvuk konja</audio>
Ostali atributi: loop, muted
Poveznica: HTML audio tag (w3schools.com)
Dodatno: Potrebno je uvijek paziti koji format audio zapisa podržava

određeni preglednik, najčešće je uvijek podržan MP3. Tekstualni
sadržaj unutar oznake <audio></audio> će se prikazati ako format
nije podržan od preglednika.
9
Priručnik za OWT
Sigurnije je unutar <audio></audio> navesti oznaku <source> pri

čemu se navede više formata tako da preglednik izabere onaj koji
odgovora.

<b></b>
Slučaj Podebljavanje teksta
korištenja:
Primjer <p>
<b>HTML</b> je jednostavni jezik oznaka koji se koristi za
korištenja:
kreiranje hipertekstualnih dokumenata koji su neovisni o platformi.
</p>
Poveznica: HTML b Tag (w3schools.com)
Kategorija
<bdo></bdo>
Slučaj Mijenjanje smjera teksta (desno na lijevo ili lijevo na desno)
korištenja:
Najkorišteniji dir
atributi:
dir Definicija Određuje smjer pisanja teksta.
Vrijednost ➢ ltr - piši tekst s lijeva na desno (eng. left to right)

➢ rtl - piši tekst s desna na lijevo (eng. right to left)
Napomena Obavezan atribut!
Primjeri
<bdo dir="rtl">Ovaj tekst bit će napisan s desna na lijevo.</bdo>
<bdo dir="rtl">Ovaj tekst bit će napisan s lijeva na desno.</bdo>
Poveznica: HTML bdo tag (w3schools.com)
10
Priručnik za OWT
Grupiranje sadržaja
<blockquote></blockquote>
Slučaj Specificiranje sekcije teksta koja je citirana iz drugog izvora.
korištenja:
Najkorišteniji cite
atributi:
cite Definicija Specificira izvor citata (relativna ili apsolutna putanja).
Vrijednost URL
Napomena Iako nije obavezan bilo bi dobro uvijek ga koristiti.
Primjeri
<blockquote cite="https://www.foi.unizg.hr/hr/studiji/osnovno">
Studijski programi Fakulteta organizacije i informatike omogućavaju
konkurentnost, mobilnost studenata i nastavnog osoblja te omogućuju
brže, lakše i ravnopravnije uklapanje hrvatskih stručnjaka u
zajedničko europsko tržište obrazovanja i rada.
</blockquote>
Poveznica: HTML blockquote tag (w3schools.com)
Dodatno: Najčešće preglednici naprave uvlaku pri prikazivanju ove oznake.

Za kraće citiranje ili parafraziranje se koristi oznaka <q></q>.
11
Priručnik za OWT
Sekcije
<body></body>
Slučaj Definiranje tijela HTML dokumenta, sastavljeno od elemenata
korištenja: kojima se opisuje sadržaj dokumenta

<html>
korištenja:
<head>
<title>FOI</title>
</head>
<body>
<h1>FOI naslovna</h1>
<p>FOI je Fakultet organizacije i informatike.</p>
</body>
</html>
Poveznica: HTML body tag (w3schools.com)
Dodatno: Unutar <body></body> oznake definira se vidljiv dio HTML

dokumenta.
Može biti samo jedan <body> element unutar jednog HTML
elementa.

<br>
Slučaj Unošenje prijeloma linije
korištenja:
Primjer <p>Usred bresaka<br>što posvud su u cvatu -<br>procvala trešnja !</p>

korištenja:
Poveznica: HTML br tag (w3schools.com)
Dodatno: Možemo gledati kao nova linija (enter).

Ne smije se koristiti kao oznaka za uređivanje HTML dokumenta već za
tekst.
12
Priručnik za OWT
Obrasci
<button></button> <form></form>
Slučaj Definiranje gumba na stranici

korištenja:
Najkorišteniji type, name, value, form, disabled

atributi:
type Definicija Određuje koje je vrste gumb.
Vrijednost ➢ button - specificira gumb koji je moguće pritisnuti

➢ reset - specificira gumb koji resetira podatke obrasca na
početne vrijednosti
➢ submit - specificira gumb koji podnosi podatke obrasca
Napomena Uvijek je dobro specificirati atribut type za ovu oznaku da

preglednik zna koju vrstu gumba smo kreirali.
Primjeri
<button type="submit" value="podnesi">Podnesi</button>

<button type="reset" value="poništi">Poništi</button>
name Definicija Pridaje naziv elementu, pri čemu se može koristi za

referenciranje.
Vrijednost ime
Napomena Više <button></button> oznaka može imati isto ime, a

različite vrijednosti.
Primjeri
<button name="fakultet" type="submit" value="FOI">FOI</button>
value Definicija Određuje početnu vrijednost elementa za obrazac.
Vrijednost vrijednost
Napomena Prenosi se vrijednost jedino ako je oznaka

<button></button> povezana s obrascem.
Primjeri
<button name="fakultet" type="submit" value="Faks1">FOI</button>
13
Priručnik za OWT
form Definicija Određuje jedan ili više obrazaca kojima gumb pripada.
Vrijednost id_obrasca
Napomena Obrazac treba pri tome biti napravljen kako bi se mogao

koristiti vrijednost njegovog id atributa. Pri tome onda
<button></button> oznaka može biti izvan <form></form>
oznake.
Vrijednost atributa type je najčešće “submit” ili “reset” pri
korištenju atributa form.
Primjeri
<button type="submit" form="form1" value="u redu">U redu</button>
disabled Definicija Definira hoće li gumb biti onesposobljen(ako je naveden

atribut disabled) ili ne (nije naveden atribut disabled).
Primjeri
<button disabled>U redu</button>
Ostali atributi: autofocus, formation, fomenctype, formmethod, formtarget,

formvalidate
Poveznica: HTML button tag (w3schools.com)
Dodatno: Za razliku od <input> oznake, unutar <button></button> oznake

može se definirati tekst sadržaja koji će se prikazivati kao tekst na
gumbu.
Ako je gumb smješten unutar obrasca, Internet Explorer će kao
vrijednost prenijeti tekstualni sadržaj oznake, dok će ostali preglednici
prenijeti vrijednost atributa value.
14
Priručnik za OWT

<canvas></canvas> Skriptiranje
Slučaj Izrađivanje kontejnera za dinamično crtanje grafike uz skriptiranje

korištenja:
Najkorišteniji height, width

atributi:
height Definicija Specificira visinu kontejnera.
Vrijednost broj_piksela
Napomena Zadana vrijednost je 150.
Primjeri
<canvas id="mojCanvas" height="100">Nije podržano</canvas>
width Definicija Specificira širinu kontejnera.
Primjeri
<canvas id="mojCanvas" width="150">Nije podržano</canvas>
Poveznica: HTML canvas Tag (w3schools.com)
Dodatno: Transparentan element, služi kao kontejner za grafiku.

Tekst sadržaja u oznaci <canvas></canvas> prikazat će se ako
preglednik nema podržan <canvas></canvas> oznaku ili Javascript.
Zbog referenciranja uvijek je dobro <canvas></canvas> oznaci
pridružiti atribut id.
15
Priručnik za OWT
Tablični podaci
<caption></caption> <table></table>
Slučaj Definiranje naslova tablice

korištenja:
Primjer <caption>Statistika objavljenih videozapisa po korisniku</caption>

korištenja:
Poveznica: HTML caption tag (w3schools.com)
Dodatno: Mora biti unesena odmah nakon <table> oznake.

Po zadanim postavkama, naslov će se nalaziti centrirano iznad tablice.

<code></code>
Slučaj Definiranje programskog koda unutar teksta
korištenja:
Primjer <code>
int i; <br>
korištenja:
int j=i+5;<br>
</code>
Poveznica: HTML code tag (w3schools.com)
Dodatno: Unutar preglednika se prikazuje pomoću fonta Monospace.
16
Priručnik za OWT
Tablični podaci
<col> <table></table>
Slučaj Dodavanje svojstva stupce unutar tablice pri čemu se koristi

korištenja: globalni atribut style za uređivanje stila tablice
Najkorišteniji span
atributi:
span Definicija Specificira broj stupaca na koji će se proširiti stil.
Vrijednost broj_stupaca
Primjeri
<col span="2" style="background-color:red">
Poveznica: HTML col tag (w3schools.com)
Dodatno: Odnosi se na uređivanje cijelog stupca, za razliku od jedne ćelije ili reda.
Ako ne postoji span atribut, misli se na uređivanje jednog stupca.
Tablični podaci
<colgroup></colgroup> <table></table>
Slučaj Kreiranje grupe jednog ili više stupaca radi formatiranja, sastoji se
korištenja: od <col> oznaka
Poveznica: HTML colgroup tag (w3schools.com)
Dodatno: Uvijek treba biti smještena neposredno ispod otvorene oznake <table>,
a nakon oznake <caption></caption> u slučaju da postoji ta oznaka
unutar tablice.
17
Priručnik za OWT
Obrasci
<datalist></datalist> <form></form>
Slučaj Kreiranje liste predefiniranih opcija za <input> element, sastoji se

korištenja: od <option> oznaka
Poveznica: HTML datalist Tag (w3schools.com)
Dodatno: Prikazuje se kao padajući izbornik predefiniranih opcija.

Globalni atribut id oznake <datalist></datalist> treba biti isti kao i
globalni atribut list oznake <input>.
Moguće je upisati vrijednost unutar input elementa ili odabrati iz liste.
Interaktivni elementi
<dialog></dialog>
Slučaj Otvaranje novog prozora dijaloga u kartici
korištenja:
Najkorišteniji open
atributi:
open Definicija Specificira da li je dijalog aktivan, odnosno otvoren(naveden

atribut open).
Primjeri
<dialog open>Otvoreni dialog</dialog>
<dialog>Zatvoreni dialog</dialog>
Poveznica: HTML dialog Tag (w3schools.com)
Dodatno: Koristi se primjerice za kreiranje iskočnog prozora.
18
Priručnik za OWT
<div></div>
Slučaj Odvajanje ili kreiranje sekcije putem kontejnera za HTML
korištenja: elemente
Primjer <div>
<div>
korištenja:
<h2>FOI</h2>
<p>
FOI djeluje više od 50 godina, što je za studij suvremenih
tehnologija dugo razdoblje.
</p>
</div>
<div>
<h2>FER</h2>
</div>
</div>
Poveznica: HTML div tag (w3schools.com)
Dodatno: Bilo koja oznaka se može unijeti unutar <div></div> oznake.

Vjerojatno se koristi na svakoj stranici više od bilo koje druge oznake
radi dizajna.
Preglednici uvijek dodaju praznu liniju prije i nakon svake <div></div>
oznake.

<embed>
Slučaj Ugrađivanje sadržaja putem kontejnera
korištenja:
Najkorišteniji src, type, height, width

atributi:
src Definicija Specificira (apsolutnu/relativnu) putanju do vanjskog

sadržaja.
Vrijednost URL
19
Priručnik za OWT
Primjeri
<embed src="slika.jpg" width="200" height="200">
type Definicija Specificira MIME tip sadržaja koji je ugrađen.
Vrijednost MIME_tip_prema IANA media types
Primjeri
<embed type="image/jpg" src="slika1.jpg">
height Definicija Specificira visinu ugrađenog sadržaja na stranici.
Primjeri
width Definicija Specificira širinu ugrađenog sadržaja.
Primjeri
Poveznica: HTML embed Tag (w3schools.com)
Dodatno: Bolje je koristiti pripadajuće oznake za sliku (<img>), HTML

(<iframe>), video (<video></video>) ili audio (<audio></audio>).
Većina preglednika više ne podržavaju Java aplete i proširenja, ActiveX
kontrole nisu podržane i Shockwave Flash.
20
Priručnik za OWT
Obrasci
<fieldset></fieldset> <form></form>
Slučaj Grupiranje povezanih elemenata u obrascu pri čemu se prikazuje

korištenja: kvadrat oko elemenata.
Najkorišteniji name
atributi:
name Definicija Specificira ime oznake.
Vrijednost ime
Primjeri
<fieldset name="prijava"></fieldset>
Ostali atributi: disabled, form
Poveznica: HTML fieldset tag (w3schools.com)
Dodatno: Oznaka <legend></legend> se koristi za postavljanje naslova

<fieldset></fieldset> oznake.
<figcaption></figcaption> <figure></figure>
Slučaj Definiranje naslova za <figure></figure> oznaku

korištenja:
Poveznica: HTML figcaption Tag (w3schools.com)
Dodatno: Oznaka može biti smještena nakon otvorene oznake <figure> ili
prije zatvorene oznake </figure>.
Tekstualni sadržaj se prikazuje kao naslov oznake <figure></figure>.
21
Priručnik za OWT
<figure></figure>
Slučaj Definiranje nezavisnog sadržaja, odnosno slike.
korištenja:
Primjer <figure>
<img src="https://www.foi.unizg.hr/sites/default/files/
korištenja:
logo-no-text.png" alt="FOI">
<figcaption>Slika 1. FOI logo</figcaption>
</figure>
Poveznica: HTML figure Tag (w3schools.com)
Dodatno: Koristi se oznaka <figcaption></figcaption> za definiranje naslova

ove oznake.
Sekcije
<footer></footer>
Slučaj Kreiranje podnožja HTML dokumenta ili sekcije
korištenja:
Primjer <footer>
<address>
korištenja:
Autor: Iva Levak<br>
E-pošta: <a href="mailto:ilevak@foi.hr">ilevak@foi.hr</a><br>
Posjeti : <a href="www.foi.unizg.hr">FOI</a><br>
</address>
</footer>
Poveznica: HTML footer Tag (w3schools.com)
Dodatno: Najčešće sadrži informacije o autoru, kontaktu, autorskom pravu, karti

web mjesta te poveznicu za vraćanje na vrh i povezane dokumente.
Moguće je dodati više <footer></footer> oznaka u dokument.
22
Priručnik za OWT
Obrasci
<form></form>
Slučaj Kreiranje obrasca
korištenja:
Primjer <form id="forma1" action=”/action.php” method=”post”>

<fieldset name="Registacija">
korištenja:
<legend>Registracija</legend>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br>
<label for="imeprez">Ime i prezime:</label>
<input type="text" id="imeprez" name="imeprezK" placeholder="Ivo
Ivic" maxlength="50"><br>
<label for="lozinka">Lozinka:</label>
<input type="password" id="lozinka" name="lozinkaK"
placeholder="*******" minLength="8"><br>
<fieldset name="Spol">
<legend>Spol</legend>
<input type="checkbox" id="musk" name="musk" value="Musko">
<label for="musk">M</label>
<input type="checkbox" id="zen" name="zen" value="Zensko">
<label for="zen">Ž</label>
<input type="checkbox" id="ostalo" name="ostalo"
value="Non-binary">
<label for="ostalo">NB</label><br>
</fieldset>
<label for="roden">Datum rođenja:</label>
<input type="date" id="roden" name="roden"><br>
<label for="godina">Godina fakulteta:</label>
<input type="number" id="godina" name="godina" min="1" max="5">
<br>
<select required>
<option value=""></option>
<optgroup label="FOI preddiplomski smjerovi" >
<option value="IPS">Informacijski i poslovni
sustavi</option>
<option value="EP">Ekonomija poduzetništva</option>
</optgroup>
<optgroup label="FOI diplomski smjerovi" >
<option value="IPI">
Informacijsko i programsko inženjerstvo
</option>
<option value="OPS">Organizacija poslovnih sustava</option>
</optgroup>
</select>
23
Priručnik za OWT
<label for="odjel">Izaberi odjel:</label><br>

<input list="odjeli" name="odjel" id="odjel">
<datalist id="odjeli">
<option value="PM">
<option value="IT">
</datalist><br>
<label for="motivac">Motivacijsko pismo:</label><br>
<textarea name="motivacijsko" id="motivac"
maxlength="500"></textarea>
<input type="submit">
</fieldset>
</form>
<button type="reset" value="ponisti" form="forma1">
Poništi unos
</button>
Najkorišteniji method, action, enctype, novalidate

atributi:
method Definicija Specificira HTTP metodu koja će se koristiti za slanje

podataka obrasca.
Vrijednost ➢ get
➢ post
Napomena Zadana vrijednost je get.
Primjeri
<form action="/skripta.php" method="get">...</form>

<form action="/skripta.php" method="post">...</form>
action Definicija Specificira putanju (apsolutna/relativna) gdje će se poslati

podaci obrasca kada je obrazac podnesen (eng. submit).
Vrijednost URL
Primjeri
<form action="/skripta.php" method="get"></form>
<form action="https://www.w3schools.com/tags/action_page.php"
method="get"></form>
enctype Definicija Specificira kako će podaci biti šifrirani pri podnošenju

obrasca serveru.
Vrijednost ➢ application/x-www-form-urlencoded - svi znakovi su

šifrirani prije slanja prema URL šifriranju (npr. razmak se
pretvara u plus)
24
Priručnik za OWT
➢ multipart/form-data - ova vrijednost je potrebna ako

korisnik učitava datoteku u obrascu
➢ text/plain - podaci se šalju bez ikakvog šifriranja.
Napomena Ovaj atribut može se koristiti samo kada je metoda POST.

Zadana vrijednost je application/x-www-form-urlencoded.
Nije preporučljivo slati podatke s vrijednosti text/plain.
Primjeri
<form action="/skripta.asp" method="post"
enctype="multipart/form-data">...</form>
novalidate Definicija Specificira da obrazac neće biti validiran prije podnošenja.
Primjeri
<form action="/action_page.php" novalidate>...</form>
Ostali accept-charset, autocomplete, name, rel, target

atributi:
Poveznica: HTML form tag (w3schools.com)
Dodatno: Većina oznaka koja su često dio forme se ne moraju nužno nalaziti u
oznaci <form></form> ili biti povezani s njom(npr. <input>,
<select>), ali dobivaju na funkcionalnosti jedino ako su dio te oznake.
Ova oznaka traži uvijek neki način podnošenja, preko gumba ili nekog
drugog načina. Bez toga postaje kontejner za oznake.
25
Priručnik za OWT
Sekcije
<h1></h1>...<h6></h6>
Slučaj Kreiranje zaglavlja sekcija. <h1> definira najvažnije zaglavlje
korištenja: sekcija, <h6> najmanje važno zaglavlje sekcija.
Primjer <h1>Ovo je zaglavlje sekcije 1</h1>

<h2>Ovo je zaglavlje sekcije 2</h2>
korištenja:
Poveznica: HTML h1 to h6 tag (w3schools.com)
Dodatno: Predlaže se koristiti jednu <h1></h1> oznaku po stranici.
Metapodaci dokumenta
<head>
Slučaj Definiranje kontejnera za meta podatke kao sekcija zaglavlja
korištenja: HTML dokumenta.
Podržava: ☑globalni atributi ☐atributi događaja
Poveznica: HTML head tag (w3schools.com)
Dodatno: Uvijek ide prva nakon otvorene <html> oznake, prije <body></body>
oznake.
Metadata se odnosi na podatke o HTML dokumentu.
Sadržaj <head></head> oznake se ne prikazuje na stranici.
26
Priručnik za OWT
Sekcije
<header></header>
Slučaj Kreiranje zaglavlja sekcije.
korištenja:
Primjer <article>
<header>
korištenja:
<h2>HTML jezik</h2>
<p>Napisala: Iva Levak</p>
</header>
<p>
HTML je jednostavni jezik oznaka koji se koristi za
kreiranje hipertekstualnih dokumenata koji su neovisni o
platformi.
</p>
</article>
Poveznica: HTML header Tag (w3schools.com)
Dodatno: Najčešće se sastoji od jednog ili više naslova, ikone ili loga i informacija
o autoru.
Može postojati više oznaka <header></header> unutar HTML
dokumenta.
Ne može biti unutar <footer>, <address> ili <header> oznake.
<hr>
Slučaj Tematsko prelamanje unutar HTML stranice.
korištenja:
Primjer <hr>
<p>Usred bresaka<br>što posvud su u cvatu -<br>procvala trešnja !</p>
korištenja:
<hr>
<p>Ljiljan:<br>izvan vode<br>izvan sebe</p>
<hr>
Poveznica: HTML hr tag (w3schools.com)
Dodatno: Najčešće se prikazuje kao horizontalna linija unutar HTML stranice.
27
Priručnik za OWT

<i></i>
Slučaj Ukošavanje teksta
korištenja:
Primjer <p>
<i>HTML</i> je jednostavni jezik oznaka koji se koristi za
korištenja:
kreiranje hipertekstualnih dokumenata koji su neovisni o platformi.
</p>
Poveznica: HTML i Tag (w3schools.com)

<iframe></iframe>
Slučaj Kreiranje unutarnjeg okvira (ugnježđeni preglednički kontekst) za
korištenja: ugrađivanje drugog dokumenta unutar HTML dokumenta
Najkorišteniji src, height, width, srcdoc, name, allowfullscreen, sandbox

atributi:
src Definicija Specificira (apsolutnu/relativnu) putanju dokumenta koji se

uključuje za prikaz u unutarnjem okviru.
Vrijednost URL
Napomena Atribut src se ne može koristiti zajedno sa atributom

srcdoc.
Primjeri
<iframe src="https://www.njuskalo.hr/"></iframe>
height Definicija Specificira visinu elementa.
Napomena Zadana vrijednost je 150 piksela
28
Priručnik za OWT
Primjeri
<iframe src="https://www.njuskalo.hr/" height="500"></iframe>
width Definicija Specificira širinu elementa
Napomena Zadana vrijednost je 300 piksela
Primjeri
<iframe src="https://www.njuskalo.hr/" width="500"></iframe>
srcdoc Definicija Specificira sadržaj HTML stranice za prikaz u unutarnjem

okviru.
Vrijednost HTML kod
Napomena Atribut srcdoc se ne može koristiti zajedno sa atributom

src.
Primjeri
<iframe srcdoc="<p>Ovdje dolazi sadržaj!</p>"></iframe>
name Definicija Specificira ime elementa
Vrijednost ime
Primjeri
<iframe srcdoc="<p>Ovdje dolazi sadržaj!</p>" name="pEl"></iframe>
allowfullsc Definicija Omogućuje prikaz preko cijelog zaslona na način da pozove

requestFullscreen() metodu preglednika.
reen
Primjeri
<iframe src="https://www.njuskalo.hr/" allowfullscreen></iframe>
sandbox Definicija Omogućuje dodatni skup ograničenja za sadržaj u

<iframe></iframe> oznaci.
Vrijednost* ➢ allow-forms
➢ allow-modals
➢ allow-orientation-lock
➢ allow-pointer-lock
➢ allow-popups
29
Priručnik za OWT
➢ allow-popups-to-escape-sandbox
➢ allow-presentation
➢ allow-same-origin
➢ allow-scripts
➢ allow-top-navigation
➢ allow-top-navigation-by-user-activation
Napomena Atribut sandbox se može koristiti zajedno s atributom src

ili atributom srcdoc.
Primjeri
<iframe src="https://www.njuskalo.hr/" sandbox>
<p>Preglednik ne podržava iframe oznaku!</p>
</iframe>
Ostali allowpaymentrequest, loading, referrerpolicy

atributi:
Poveznica: HTML iframe tag (w3schools.com)
Dodatno: Koristi se za prikaz videozapisa sa Youtube-a. Dodatno se može

pogledati na LINK.
Uvijek je dobra praksa koristiti globalni atribut title.

<img>
Slučaj Postavljanje slike putem putanje
korištenja:
Najkorišteniji src, alt, height, width

atributi:
src Definicija Specificira (apsolutnu/relativnu) putanju do slike.
Vrijednost URL
Primjeri
<img src="/sites/default/files/logo-no-text.png" alt="FOI">
30
Priručnik za OWT
alt Definicija Specificira alternativni tekst za sliku koji će se prikazivati ako

slika nije dostupna.
Napomena Obavezan atribut ako je prisutan href atribut, ali može biti
prazan(alt=””).
Primjeri
<img src="iva.jpg" alt="">
height Definicija Specificira visinu slike na stranici.
Primjeri
logo-no-text.png" alt="FOI" height="47">
width Definicija Specificira širinu slike na stranici
Primjeri
logo-no-text.png" alt="FOI" height="47" width="65">
Ostali crossorigin, ismap, loading, longdesc, referrerpolicy, sizes, srcset,

atributi: usemap
Poveznica: HTML img tag (w3schools.com)
Dodatno: Ako unutar otvorene i zatvorene oznake <a> postavimo sliku umjesto
teksta, pritiskom na sliku otvorit će se poveznica.
Za sliku možemo koristiti mapu na način da se definira atribut usemap
npr. primjer
31
Priručnik za OWT
Obrasci
<input> <form></form>
Slučaj Kreiranje elementa za unos podataka u obrascu

korištenja:
Napomena: Postoje odgovarajući podskupovi atributa koji se mogu zajedno

koristiti, a također postoje i podskupovi atributa koji se ne mogu
zajedno koristiti
Neovisni type, name, value, maxlength, list, readonly, disabled

najkorišteniji
atributi:
type Definicija Specificira vrstu elementa unosa u obrascu.
Vrijednost ➢ button ➢ image ➢ submit

➢ checkbox ➢ month ➢ tel
➢ color ➢ number ➢ text
➢ date ➢ password ➢ time
➢ datetime-local ➢ radio ➢ url
➢ email ➢ range ➢ week
➢ file ➢ reset
➢ hidden ➢ search
Napomena Ovisno o vrijednosti ovog atributa, ostali atributi se mogu ili ne

mogu koristiti.
Primjeri
<input type="button" name="button" id="button">
<input type="text" name="korisnickoIme" id="korime">
name Definicija Specificira ime određenog elements.
Vrijednost naziv
Napomena Atributom name se referenciramo na podatke obrasca nakon

slanja obrasca.
Primjeri
<input type="text" name="korime" id="korime">
value Definicija Specificira vrijednost elementa.
32
Priručnik za OWT
Vrijednost tekst
Napomena Za button, reset, submit definira tekst na gumbu.

Za text, password, hidden, url, email, search, tel, range,
number, date, datetime-local, time, month, week, year definira
zadanu vrijednost polja.
Za checkbox, radio, image definira vrijednost povezanu za
element koja je ujedno i vrijednost koja će se slati.
Ne koristi se za tip file.
Primjeri
<input type="checkbox" name="knjiga2" value="OWT>
<input type="text" name="korime" value="Korisnicko ime">
<input type="button" value="Spremi">
maxlength Definicija Specificira maksimalni broj znakova koji je dopušten.
Vrijednost broj
Primjeri
<input type="text" name="korime" id="korime" maxlength="20">
list Definicija Povezivanje oznake s <datalist></datalist>.
Vrijednost id_datalist
Napomena Koristi se samo za <datalist></datalist>! Ne sadržava tip.
Primjeri
<input list="diplomski" name="diplomski" id="diplomskiStudij">
<datalist id="diplomski">...</datalist>
readonly Definicija Specificira da će element biti samo moguće čitati.
Napomena Neće se moći uređivati, ali za razliku od atributa disabled moći

će pritisnuti na element, označiti ga ili kopirati tekst.
Primjeri
<input type="text" name="korime" id="korime" readonly>
disabled Definicija Definira hoće li opcija biti onemogućena (postoji atribut

disabled) ili omogućena (ne postoji atribut disabled).
33
Priručnik za OWT
Primjeri
<input type="text" name="korime" id="korime" disabled>
Atributi placeholder, required, size, minlength, max, min, pattern, multiple,

ovisni o type checked, height, width, step, alt, src
atributu:
placeholder Definicija Specificira kratki prijedlog koji opisuje očekivanu vrijednost

elementa.
Vrijednost tekst
Tipovi email, password, search, tel, text, url
Primjeri
<input type="text" name="korime" placeholder="Korisničko ime">
required Definicija Specificira je li korisnik dužan odabrati vrijednost unutar liste

prije podnošenja obrasca (postoji atribut required).
Tipovi checkbox, date, datetime-local, email, file, month, number,

password, radio, search, tel, text, time, url, week
Primjeri
<input type="text" name="korime" id="korime" required>
size Definicija Specificira znakovnu širinu elementa.
Vrijednost broj
Primjeri
<input type="text" name="korime" size="50">
minlength Definicija Definira minimalni broj znakova koji su dopušteni za element.
Vrijednost broj_znakova
Primjeri
34
Priručnik za OWT
<input type="password" id="loz" name="lozinka" minlength="8">
max Definicija Definira maksimalnu vrijednost unosa (broja ili datuma).
Vrijednost broj|datum
Tipovi date, datetime-local, month, number, range, time, week
Primjeri
<input type="number" id="ocjena" name="ocjena" min="1" max="5">
<input type="date" id="datumRodenja" name="datumRodenja"
max="2003-01-01">
min Definicija Definira minimalnu vrijednost unosa (broja ili datuma).
Vrijednost broj|datum
Primjeri
<input type="number" id="godine" name="godine" min="18">
<input type="date" id="datumRodenja" name="datumRodenja"
min="2000-01-02">
pattern Definicija Definira regularni izraz kojim se vrijednost elementa

provjerava.
Vrijednost regularni_izraz
Tipovi date, email, password, search, tel, text, url
Primjeri
<input type="password" id="loz" name="lozinka" pattern=".{8,}">
multiple Definicija Definira da se može odabrati više opcija unutar liste (prisutan
atribut multiple).
Napomena Dokumenti - pritisak tipke CTRL ili SHIFT

Email - odvajanje adresa sa zarezom
Tipovi email, file
Primjeri
35
Priručnik za OWT
<input type="email" multiple>
checked Definicija Specificira preselektirane vrijednosti za element kada se

stranica učita.
Tipovi checkbox, radio
Primjeri
<input type="checkbox" name="knjiga2" value="OWT" checked>
height Definicija Definira visinu elementa.
Tipovi image
Primjeri
<input type="image" src="submit.gif" alt="Submit height="48">
width Definicija Definira visinu elementa.
Tipovi image
Primjeri
<input type="image" src="submit.gif" alt="Submit" width="48">
step Definicija Specificira veličinu intervala između dopuštenih brojeva .
Vrijednost broj

Interval će se nadodati ili oduzeti od 0 ako nije navedena min
vrijednost atributa.
Ako postoji max atribut, moći će se jedino odabrati vrijednost
atributa max ako je([𝑚𝑎𝑥] 𝑚𝑜𝑑 [𝑠𝑡𝑒𝑝]) − [𝑚𝑖𝑛] == 0.
Primjeri
36
Priručnik za OWT
<input type="number" id="godine" name="godine" step="2">

<input type="range" id="posto" name="posto" step="10" max="100">
<input type="number" id="ocjena" name="ocjena" min="3" step="2"
max="10">
alt Definicija Specificira alternativni tekst za područje ako se slika ne može

prikazati.
Tipovi image
Primjeri
<input type="image" src="submit.gif" alt="Submit">
src Definicija Specificira (apsolutnu/relativnu) putanju za sliku koja će se

koristiti kao gumb za slanje podataka obrasca.
Vrijednost URL
Tipovi image
Primjeri
<input type="image" src="/sites/default/files/logo-no-text.png"
alt="FOI" width="48" height="48">
<input type="image" src="https://www.foi.unizg.hr/sites/default/
files/logo-no-text.png" alt="FOI" width="48" height="48">
Ostali dirname, form, disabled, autocomplete, accept, formaction, formenctype,

atributi: formmethod, formnovalidate, formtarget
Poveznica: HTML input tag (w3schools.com)
Dodatno: Oznaka <input> obavezno se nalazi unutar <form></form> oznake.

Atribut name ili atribut id se koristi za referenciranje na elemente u
CSS-u ili JavaScript-u. Vrijednosti atributa id ne moraju biti iste kao i
tipovi elementa. Važno je da vrijednost bude jedinstvena.
Dobra je praksa uz svaki input element dodati labelu, odnosno oznaku
<label></label>.
Bez obzira na atribut form, dobra je praksa radi logičke organizacije
koda postavljati sve elemente koji su vezani za oznaku <form></form>
unutar same oznake.
37
Priručnik za OWT
Obrasci
<label></label> <form></form>
Slučaj Definiranje labele za oznake <meter></meter>,

korištenja: <progress></progress>, <select></select>, <textarea></textarea> i
<input>
Podržava: ☑ globalni atributi ☑ atributi događaja
Najkorišteniji for, form

atributi:
for Definicija Definira id od elementa obrasca za kojeg je labela vezana.
Vrijednost id_vezanog_elementa
Napomena Treba biti iste vrijednosti kao atribut id povezanog elementa

kako bi ih se moglo zajedno vezati.
Primjeri
<label for="loz">Lozinka:</label>
form Definicija Specificira formu kojoj pripada labela ako je smještena izvan
forme.
Vrijednost id_forme
Primjeri
<label form="forma1" for="korime">Korisničko ime:</label>
Poveznica: HTML label tag (w3schools.com)
Dodatno: Labele se koriste za opisivanje elemenata primjerice element za unos

korisničkog imena će imati labelu “Korisničko ime” kako bi korisnik
znao što treba unositi.
Važeći element se može vezati s labelom na način da se nalazi unutar
<label></label> oznake.
Iako oznaku <label></label> možemo staviti na svaki tip <input>
oznake, najčešće se ne stavlja za tipove: button, hidden, image,
submit.
38
Priručnik za OWT
Obrasci
<legend></legend> <form></form>
Slučaj Definiranje naslova za <fieldset></fieldset> oznaku

korištenja:
Podržava: ☑globalni atributiff☑☑☑ ☑atributi događaja
Poveznica: HTML legend tag (w3schools.com)
Dodatno: Tekstualni sadržaj oznake se prikazuje kao naslov.
<li></li> <ol></ol> | <ul></ul>
Slučaj Definiranje elementa liste.

korištenja:
Ostali value
atributi:
Poveznica: HTML li tag (w3schools.com)
Dodatno: Atribut value se koristi samo kad je <li></li> oznaka unutar sređene
liste <ol></ol>.
Kod <ol></ol> liste pojavljuje se sa oznakama broja ili slova, dok se
kod <ul></ul> liste najčešće pojavljuje s točkama (eng. bullet points.)
39
Priručnik za OWT
<link>
Slučaj Povezivanje vanjskih dokumenta, a najčešće za uključivanje
korištenja: vanjskih CSS stilskih uputa i ikone koja se prikazuje uz naziv
kartice unutar preglednika
Najkorišteniji href, rel, type, media, hreflang

atributi:
href Definicija Koristi se za definiranje putanje do određenog resursa.
Vrijednost URL
Primjeri
<link rel="stylesheet" href="stilovi.css">
rel Definicija Specificira vezu između trenutnog i povezanog dokumenta.
Vrijednost ➢ alternate ➢ preconnect

➢ author ➢ prefetch
➢ dns-prefetch ➢ preload
➢ help ➢ prerender
➢ icon ➢ prev
➢ license ➢ search
➢ next ➢ stylesheet
➢ pingback
Primjeri
<link rel="icon" href="FOI.ico">
<link rel="stylesheet" type="text/css" href="format1.css">
type Definicija Specificira MIME tip povezanog dokumenta.
Napomena Koristi se jedino ako je href atribut prisutan. Najčešće se

koristi “text/css” za CSS stilske upute.
Primjeri
40
Priručnik za OWT
<link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" type="text/css" href="format1.css"
media="screen">
media Definicija Specificira na kojem će uređaju biti prikazan resurs (all,

screen, print) i sa kojim osobinama (orientation:, width:,
height:, resolution:).
Primjeri
media="screen and (orientation: landscape)">
media="screen and(orientation: portrait)">
hreflang Definicija Specificira jezik teksta povezanog dokumenta.
Vrijednost ➢ kod_jezika_prema_ISO 639-1
Primjeri
<link href="tag_link.asp" rel="parent" rev="subsection"
hreflang="hr">
Ostali crossorigin, referrerpolicy, sizes, title

atributi:
Poveznica: HTML link tag (w3schools.com)
Dodatno: Uvijek je smješten unutar zaglavlja HTML dokumenta (oznaka

<head></head>).
Za kreiranje ikone Web mjesta može se koristiti web adresa FAVICON.
41
Priručnik za OWT
<main></main>
Slučaj Specificiranje glavnog sadržaja dokumenta koji je jedinstven za
korištenja: određeni dokument (pojedinu stranicu).
Primjer <main>
<h1>Programski jezici</h1>
korištenja:
<article>
<h2>HTML jezik</h2>
<p>
</p>
</article>
</main>
Poveznica: HTML main Tag (w3schools.com)
Dodatno Ne uključuje ponavljajući sadržaj (navigacija, copyright, logo,

pretraživanje i sl).
Može biti više od jednog u dokumentu, no to se treba nužno izbjegavati.
Ukoliko ih je više, samo jedna smije biti vidljiva, a ostale trebaju biti
skrivene.
Ne smije biti unutar oznaka <article></article>, <aside></aside>,
<footer></footer>, <header></header> ili <nav></nav>.
42
Priručnik za OWT

<map></map>
Slučaj Kreiranje mape slike, odnosno slike sa područjima koja se mogu
korištenja: pritisnuti.
Primjer <img
src="https://www.foi.unizg.hr/sites/default/files/logo-no-text.png"
korištenja:
alt="FOI " width="180" height="126" usemap="#foi_map">
<map name="foi_map">
<area alt="f"
href="https://www.foi.unizg.hr/hr/online-nastava"
<area alt=""
href="https://www.foi.unizg.hr/hr/fakultet/osnovno"
<area alt="i"
href="https://www.foi.unizg.hr/hr/upisi/upoznaj-foi"
</map>
Najkorišteniji name
atributi:
name Definicija Specificira naziv mape kako bi se mogla pridružiti <img>

oznaci.
Vrijednost naziv
Primjeri
<map name="foi_map">
...
</map>
Poveznica: HTML main Tag (w3schools.com)
Dodatno: Sastoji se od <area> oznaka, a uvijek je vezan uz sliku, odnosno

oznaku <img>.
43
Priručnik za OWT
<meta>
Slučaj Uglavnom se koriste od strane pretraživača i sadrže informacije o
korištenja: autoru, kratki opis stranice, kodnu stranicu i ključne riječi.
Podržava: ☑ globalni atributi ☐ atributi događaja
Najkorišteniji name, content, charset, http-equiv

atributi:
name Definicija Sadrži autora, ključne riječi i sl.
Vrijednost ➢ application - predstavlja naziv aplikacije

➢ author - predstavlja ime i prezime autora stranice ili naziv
tvrtke
➢ description - predstavlja opis aplikacije
➢ generator - specificira paket koji generira dokument
➢ keywords - ključne riječi koje govore koji je sadržaj
stranice
➢ viewport - kontrolira područje prikaza
Napomena Obavezno se mora definirati i content atribut koji sadrži

proizvoljan tekst koji predstavlja autora, opis, ključne riječi i
sl.
Primjeri
<meta name="author" content="FOI">

<meta name="keywords" content="Web, HTML, Primjer">
<meta name="description" content="Željeni opis">
content Definicija Specificira autora, ključne riječi, opis stranice i sl. ovisno o
vrijednosti u name atributu.
Vrijednost tekst
Napomena Atribut koji se koristi ako postoji name atribut ili http-equiv.
Primjeri
<meta charset="utf-8">
charset Definicija Određuje kodiranje znakova sa vrijednostima: utf-8,

iso-8859-2, windows-1250 i sl.
44
Priručnik za OWT
Vrijednost kodna_stranica
Napomena Danas je utf-8 postao de facto standard koji se koristi na

većini stranica. Puni popis znakova može se pronaći na: LINK
Primjeri
<meta charset="utf-8">
http-equiv Definicija Definira HTTP liniju zaglavlja ovisno o vrijednosti unutar

content atributa.
Vrijednost ➢ refresh - osvježavanje stranice za n sekundi i

preusmjeravanje na definirani url
Napomena Obavezno se mora definirati i content atribut koji sadrži broj

sekundi prije osvježavanja i url adresu na koju se radi
preusmjeravanje.
Primjeri
<meta http-eqiv="refresh" content="15; url=http://www.foi.hr/">
Ostali atributi: media
Poveznica: HTML meta tag (w3schools.com)
Obrasci
<meter></meter>
Slučaj Definiranje skalarne mjere unutar određenog raspona odnosno
korištenja: djelomične vrijednosti.
Najkorišteniji max, min, value

atributi:
max Definicija Specificira donju granicu raspona.
Vrijednost broj
Napomena Vrijednost mora biti veća od one dodijeljene min atributu

Zadana vrijednost je 1.
Primjeri
45
Priručnik za OWT
<meter min="0" max="100" value="95"></meter>
min Definicija Specificira gornju granicu raspona.
Vrijednost broj
Napomena Vrijednost mora biti manja od one dodijeljene max atributu.

Zadana vrijednost je 0.
Primjeri
<meter max="100" value="95"></meter>
value Definicija Specificira trenutnu vrijednost mjerenja.
Vrijednost broj
Primjeri
<meter value="0.95"></meter>
Ostali atributi: form, high, low, optimum
Poveznica: HTML meter Tag (w3schools.com)
Dodatno: Ne bi se trebao koristiti za prikaz završenosti određenog procesa.
Sekcije
<nav></nav>
Slučaj Definiranje seta navigacijskih poveznica.
korištenja:
Primjer <nav>
<a href="/naslovna/">naslovna</a>
korištenja:
<a href="/oNama/">O nama</a>
<a href="/smjerovi/">Smjerovi na fakultetu</a>
<a href="/novosti/">Novosti</a>
</nav>
Poveznica: HTML nav Tag (w3schools.com)
46
Priručnik za OWT
Dodatno: Koristi se za veći blok navigacijskih poveznica!
Skriptiranje
<noscript></noscript>
Slučaj Navođenje sadržaja koji će se prikazati korisnicima ako
korištenja: preglednik ne podržava klijentsko skriptiranje ili je ono
onemogućeno postavkama.
Primjer <noscript>Vaš preglednik ne podržava Javascript!</noscript>

korištenja:
Poveznica: HTML noscript tag (w3schools.com)

<object></object>
Slučaj Kreiranje kontejnera za vanjski resurs.
korištenja:
Primjer <object data="horse.wav">

<param name="autoplay" value="true">
korištenja:
</object>
Najkorišteniji data, type, width, height, name

atributi:
data Definicija Specificira (apsolutnu ili relativnu) putanju resursa koji će se

koristiti kao objekt.
Vrijednost URL
Primjeri
<object data="slika.jpg" width="200" height="200"></object>
type Definicija Specificira MIME tip sadržaja koji je ugrađen.
47
Priručnik za OWT
Primjeri
<object type="image/jpg" data="slika.jpg"></object>
height Definicija Specificira visinu objekta.
Primjeri
width Definicija Specificira širinu objekta.
Primjeri
name Definicija Pridaje naziv objektu.
Vrijednost ime
Primjeri
<object data="slika.jpg" name="slika" height="200"></object>
Ostali atributi: form, typemustmatch, usemap
Poveznica: HTML object tag (w3schools.com)
Dodatno: Bolje je koristiti pripadajuće oznake za sliku (<img>), HTML

(<iframe>), video (<video></video>) ili audio (<audio></audio>).
Većina preglednika više ne podržavaju Java aplete i proširenja,
ActiveX kontrole nisu podržane i Shockwave flash.
48
Priručnik za OWT
<ol></ol>
Slučaj Kreiranje sređene (eng. ordered) liste
korištenja:
Najkorišteniji start, type

atributi:
start Definicija Specificira početnu vrijednost od koje će lista započeti,

zadana vrijednost je 1.
Vrijednost broj
Primjeri
<ol start="51">
<li>FOI</li>
<li>FER</li>
</ol>
type Definicija Specificira tip oznaka koje će se koristiti u listi.
Vrijednost ➢ 1 - zadana vrijednost, cijeli brojevi kao oznake

➢ A - oznake koje su abecedno slijedne, velikim slovima
➢ a - oznake koje su abecedno slijedne, malim slovima
➢ I - rimski brojevi kao oznake, velikim slovom i
➢ i - rimski brojevi kao oznake, malim slovom i
Primjeri
<ol type="I">
<li>FOI</li>
<li>FER</li>
</ol>
Ostali atributi: reversed
Poveznica: HTML ol tag (w3schools.com)
Dodatno: Koristi se oznake <li></li> za definiranje elemenata liste.
49
Priručnik za OWT
Obrasci
<optgroup></optgroup> <form></form>
Slučaj Grupiranje povezanih opcija unutar <select></select> oznake

korištenja:
Najkorišteniji label, disabled

atributi:
label Definicija Specificira labelu za grupu opcija (zajednički naziv koji se

prikazuje u izborniku).
Vrijednost tekst
Primjeri
<optgroup label="FOI diplomski smjerovi">...</optgroup>
disabled Definicija Definira hoće li cijela grupa opcija biti onemogućena (postoji
atribut disabled) ili omogućena (ne postoji atribut disabled).
Primjeri
<optgroup label="FOI diplomski smjerovi" disabled>...</optgroup>
Poveznica: HTML optgroup tag (w3schools.com)
Dodatno: Koriste se oznake <option></option> za definiranje opcija.

Najčešće se ova oznaka koristi pri velikom broju opcija kako bi se
korisniku olakšao pregled istih.
50
Priručnik za OWT
Obrasci
<option></option> <form></form>
Slučaj Kreiranje opcija unutar padajućeg izbornika (oznaka

korištenja: <select></select>) ili liste predefiniranih opcija (oznaka
<datalist></datalist>)
Najkorišteniji value, selected, label, disabled

atributi:
value Definicija Specificira vrijednost koja će biti poslana poslužitelju.
Vrijednost tekst
Primjeri
<option value="sumsko">Čaj od šumskog voća</option>
selected Definicija Specificira hoće li opcija biti prethodno izabrana kod

učitavanja stranice.
Primjeri
<option selected value="sumsko">Čaj od šumskog voća</option>
label Definicija Specificira kratku labelu.
Vrijednost tekst
Napomena Umjesto tekstualnog sadržaja prikazivat će se sadržaj unutar

labele.
Primjeri
<option label="Šumsko" value="sumsko">Čaj od šumskog voća</option>
disabled Definicija Definira hoće li opcija biti onemogućena (postoji atribut

Primjeri
<option disabled value="caj">Čaj</option>
51
Priručnik za OWT
Poveznica: HTML option tag (w3schools.com)
Dodatno: Može se koristiti bez atributa ali najčešće se koristi minimalno atribut
value jer se indicira koja će se vrijednost prenijeti poslužitelju nakon
podnošenja obrasca.
Može se za organizaciju koristi <optgroup></optgroup> oznaka.
Tekstualni sadržaj oznake će se prikazivati kao opcija u padajućem
izborniku.
<p></p>
Slučaj Definiranje odjeljka
korištenja:
Primjer <p>Ovo je odjeljak</p>

korištenja:
Poveznica: HTML p tag (w3schools.com)
Dodatno: Preglednici uvijek dodaju praznu liniju prije i nakon svake <p></p>
oznake.
Bez obzira na unos novog reda ili pomaka unutar teksta, tekst se
unutar oznaka na stranici prikazuje kao tekst bez njih. Ako je potrebno
mogu se dodati oznake poput <br> i <hr> ili se može koristiti
<pre></pre> oznaka kojom se definira formatirani tekst.

<param> <object></object>
Slučaj Definiranje parametra za oznaku <object></object>

korištenja:
Ostali atributi: name, value
Poveznica: HTML param tag (w3schools.com)
52
Priručnik za OWT
Dodatno: Uvijek sadrži atribute value i name.

<picture></picture>
Slučaj Postavljanje slike pri čemu se može odabrati više različitih izvora i
korištenja: različitih veličina medija na kojem se prikazuje stranica
Primjer <picture>
<source media="(min-width:500px)" srcset="foi-logo-bijeli.jpg">
korištenja:
<source media="(min-width:300px)"
srcset="https://www.jquery-az.com/html/images/banana.jpg">
<img src="foi-logo-s-tekstom.jpg" alt="FOI" style="width:auto;">
</picture>
Poveznica: HTML picture tag (w3schools.com)
Dodatno: Ova oznaka je puno fleksibilnija od oznake <img> jer omogućuje

responzivnost oznake i promjenu slike s obzirom na zadane širine
ekrana.
Unutar oznake zadnja oznaka mora biti <img>, u slučaju da nijedna
<source> oznaka ne odgovara.
<pre></pre>
Slučaj Postavljanje već formatiranog teksta.
korištenja:
Primjer <pre>
Ovaj tekst prikazat će se s ovim prijelomom teksta:
korištenja:
i sa svim ovim razmacima . Vidiš
!
!
</pre>
Poveznica: HTML pre tag (w3schools.com)
53
Priručnik za OWT
Dodatno: Prikazivanje formatiranog teksta znači da će se tekst unutar ove

oznake prikazivati sa svim razmacima i prijelomima teksta (za razliku
od npr. <p> oznake).
Obrasci
<progress></progress>
Slučaj Definiranje završenosti određenog procesa (npr. skidanje
korištenja: dokumenata)
Najkorišteniji value, max

atributi:
value Definicija Definira izvršenost posla u broju npr. prenijelo se 12 od 32

datoteke.
Vrijednost broj
Napomena Ako ne postoji atribut value i postoji samo atribut max,

prikazat će se animacija koja daje do znanja da se odrađuje
proces.
Primjeri
<progress value="0.1"> 10% </progress>
<progress max="100" value="10"> 10% </progress>
max Definicija Specificiranje maksimalne vrijednosti koju proces može

postići.
Vrijednost broj
Napomena Zadana vrijednost ovog atributa je 1.
Primjeri
<progress max="100"> </progress>
<progress max="100" value="21"> 21% </progress>
Poveznica: HTML progress Tag (w3schools.com)
Dodatno: Zapravo ova oznaka dolazi najviše do izražaja korištenjem skriptiranja

tako da se dinamički mijenja postotak.
54
Priručnik za OWT
Skriptiranje
<script></script>
Slučaj Pisanje koda skripata kao tekstualnog sadržaja oznake ili
korištenja: povezivanje skripte (putem atributa src) unutar HTML
dokumenta.
Podržava: ☑ globalni atributi ☐atributi događaja
Najkorišteniji src, type, async, defer

atributi:
src Definicija Specificira (apsolutnu/relativnu) putanju do vanjske skripte.
Vrijednost URL
Napomena Prisutna samo ako se navodi vanjska skripta.
Primjeri
<script src="mojaSkripta.js"></script>
<script src="https://www.foi.unizg.hr/mojaskripta.js"></script>
type Definicija Specificiranje MIME tipa dokumenta skripte.
Napomena Za Javascript je jednaka “application/javascript”.
Primjeri
<script type="application/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<script src="skripta.js" type="application/javascript"></script>
async Definicija Određuje da će se skripta preuzeti paralelno sa parsiranjem

stranice i izvesti čim je dostupna (prije završetka parsiranja).
Napomena Koristi se samo za eksterne (vanjske) skripte.
Primjeri
<script src="pocetnaSkripta.js" async></script>
55
Priručnik za OWT
defer Definicija Određuje da će se skripta preuzeti paralelno sa parsiranjem

stranice i izvesti nakon što je stranica parsirana.
Napomena Koristi se samo za eksterne (vanjske) skripte.
Primjeri
<script src="sktriptaUcitavanje.js" defer></script>
Ostali atributi: crossorigin, integrity, nomodule, referrerpolicy
Poveznica: HTML script tag (w3schools.com)
Dodatno: Ova oznaka se ili sastoji od koda ili pokazuje na datoteku sa skriptom
kroz src atribut.
Ako nije naveden atribut async ni defer onda se scripta preuzima i
izvršava odmah, tako da se blokira parsiranje dokle god skripta nije
izvršena.
Dobra je praksa kreirati uvijek vanjski dokument skripte jer se može
onda putem atributa src koristiti na više stranica bez konstantnog
kopiranja.
Uvijek je dobro dodati oznaku <noscript></noscript> kako bi
korisnici znali ako skripta nije omogućena unutar preglednika.
Sekcije
<section></section>
Slučaj Kreiranje sekcije unutar dokumenta.
korištenja:
Primjer <section id="oNama">

Mi smo mala tvrtka na području Varaždina koja posluje od 2019.
korištenja:
godine.
</section>
<section id="proizvodi">
Naši proizvodi su:
<ul>
<li>Mlijeko</li>
<li>Sir</li>
</ul>
</section>
56
Priručnik za OWT
Poveznica: HTML section Tag (w3schools.com)
Dodatno: Koristi se za definiranje sekcije u smislu organizacije dokumenta, ne

sekcije unutar tekstualnog dokumenta.
Često se koristi uz globalni atribut id kako bi se mogla napraviti
navigacija kroz istu stranicu ako se web adresa zapravo sastoji od
jednog dokumenta pri čemu taj dokument ima više sekcija.
Obrasci
<select></select> <form></form>
Slučaj Kreiranje padajuće liste, često korišten unutar obrasca

korištenja:
Najkorišteniji name, multiple, required, size, disabled

atributi:
name Definicija Specificira ime padajuće liste.
Vrijednost ime
Napomena Obavezan atribut ako je lista unutar obrasca!
Primjeri
<select name="jela" id="selJela">...</select>
multiple Definicija Definira da se može odabrati više opcija unutar liste (prisutan
atribut multiple).
Napomena Windows: držanje tipke CTRL i odabir više opcija.

Mac: držanje tipke command i odabir više opcija.
Primjeri
<select multiple name="jela" id="selJela">...</select>
required Definicija Specificira je li korisnik dužan odabrati vrijednost unutar liste

prije podnošenja obrasca (postoji atribut required).
57
Priručnik za OWT
Primjeri
<select required name="jela" id="selJela">
<option value=""></option>
<option value="ručak">Ručak</option>
<option value="večera">Večera</option>
</select>
size Definicija Definira broj vidljivih opcija na stranici.
Vrijednost broj
Napomena Ako je broj vidljivih opcija manji od broja ukupnih opcija,

preglednik automatski dodaje klizač.
Primjeri
<select size="1" name="jela" id="selJela">...</select>
disabled Definicija Definira hoće li lista biti onemogućena (postoji atribut

Primjeri
<select disabled name="jela" id="selJela">...</select>
Ostali atributi: form, autofocus
Poveznica: HTML select tag (w3schools.com)
Dodatno: Sastoji se od oznaka <option></option>.

Dobra je praksa uz ovu oznaku uvijek postavljati labelu odnosno
oznaku <label></label>.
Bilo bi dobro da se navodi globalni atribut id kako bi se mogla ova
oznaka povezati sa oznakom <label></label>.
S obzirom na pripadajuće atribute mijenja se automatski izgled
padajuće liste (npr. multiple, size).
58
Priručnik za OWT

<source> <video></video>| <audio></audio>|<picture></picture>
Slučaj Specificiranje više različitih resursa za elemente medija kao što su

korištenja: oznake <video></video>, <audio></audio> i <picture></picture>.
Najkorišteniji src, srcset, type, media

atributi:
src Definicija Specificira (apsolutnu/relativnu) putanju do zapisa.
Vrijednost URL
Napomena Obavezan ako se navodi ova oznaka unutar video></video>

ili <audio></audio> oznake.
Primjeri
<source src="konj.ogg" type="audio/ogg">
<source src="https://cdnm.meln.top/ml/?
audio=0_33818195653023&title=Djordje%20Balasevic
%20-%20Olivera&hash=cFiuwHHM15FgKfltB5zoKmxS5i8=">
srcset Definicija Specificira (apsolutnu/relativnu) putanju do vanjske skripte.
Vrijednost URL
Napomena Obavezan ako se navodi ova oznaka unutar

<picture></picture> oznake.
Primjeri
<source srcset="leptir.jpg">
<source srcset="https://www.jquery-az.com/html/images/banana.jpg">
type Definicija Specificiranje MIME tipa izvora.
Napomena Učestalo za video: “video/ogg”, “video/mp4”, “video/webm”.

Učestalo za audio: “audio/ogg”, “audio/mpeg”.
Primjeri
<source src="konj.ogg" type="audio/ogg">
<source src="film.mp4" type="video/mp4">
59
Priručnik za OWT
media Definicija Specificira media/uređaj koji bi inače bio specificiran unutar

CSS.
Primjeri
<source media="(min-width:650px)" srcset="slika1.jpg">
Ostali atributi: sizes
Poveznica: HTML source Tag (w3schools.com)
Dodatno: Dopušta definiranje alternativnog resursa različitog formata kako bi

preglednik mogao izabrati onaj koji podržava.

<span></span>
Slučaj Linijski kontejner za lakše uređivanje dijela teksta ili dokumenta.
korištenja:
Primjer <p>
FOI logo sadrži
korištenja:
<span style="color:red">crvenu</span>
, a ponekad i
<span style="color:orange">narančastu</span>
boju
</p>
Poveznica: HTML span tag (w3schools.com)
Dodatno: Ne pridaje nikakvu dodatnu vrijednost (dizajnu ili strukturi) pa se

koristi češće uz CSS ili Javascript.
Za razliku od <div></div> oznake, ovo je linijski kontejner, dok je
<div></div> kontejner bloka.
60
Priručnik za OWT
<style></style>
Slučaj Definiranje stila za dokument (CSS)
korištenja:
Primjer <style>
body {background-color: lightblue;}
korištenja:
h1 {color:white; text-align:center;}
</style>
Ostali atributi: media, type
Poveznica: HTML style tag (w3schools.com)
Dodatno: Unutar teksta sadržaja oznake se definira CSS.

Za eksterni dokument koristi se oznaka <link>.
Najčešće se specificira unutar <head></head> oznake

<svg></svg>
Slučaj Kreiranje kontejnera za SVG grafiku.
korištenja:
Podržava: ☐globalni atributi ☐atributi događaja
Primjer <svg width="200" height="200">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
korištenja:
fill="yellow" />
</svg>
Ostali atributi: height, width
Poveznica: HTML svg tag (w3schools.com)
61
Priručnik za OWT
Tablični podaci
<table></table>
Slučaj Kreiranje tablice
korištenja:
Primjer <table>
<caption>Nastavnici</caption>
korištenja:
<colgroup>
<col span="4" style="background-color:AliceBlue">
<col style="background-color:Azure">
</colgroup>
<thead>
<tr>
<th id="titula">Titula</th>
<th>Ime i prezime</th>
<th colspan="2">Konzultacije</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="titula" rowspan="3">prof.dr.sc</td>
<td rowspan="3">Dragutin Kermek</td>
<td>Ponedjeljak</td>
<td>15:00-16:00</td>
</tr>
<tr>
<td>Utorak</td>
<td>14:15-16:00</td>
</tr>
<tr>
<td>Srijeda</td>
<td>15:15-16:00</td>
</tr>
<tr>
<td headers="titula" rowspan="2">doc.dr.sc.</td>
<td rowspan="2">Matija Novak</td>
<td>Ponedjeljak</td>
<td>15:00-16:00</td>
</tr>
<tr>
<td>Utorak</td>
<td>14:15-16:00</td>
</tr>
</tbody>
<tfoot>
62
Priručnik za OWT
<tr>
<td colspan="4">Ove konzultacije nisu konačne!</td>
</tr>
</tfoot>
</table>
Poveznica: HTML table tag (w3schools.com)
Dodatno: HTML tablica uvijek se sastoji od jedne <table></table> oznake.
Tablični podaci
<tbody></tbody> <table></table>
Slučaj Grupiranje sadržaja tijela tablice.

korištenja:
Poveznica: HTML tbody tag (w3schools.com)
Dodatno: Mora sadržavati jednu ili više <tr></tr> oznaka.

Piše se nakon <caption></caption>, <colgroup></colgroup> i
<thead></thead> oznaka, ukoliko postoje.
Uvijek je dobro definirati ovu oznaku jer onda preglednik primjerice
može omogućiti elementima unutar oznake <tbody></tbody> da bude
dostupan SCROLL sa usidrenim zaglavljem i podnožjem tablice.
Tablični podaci
<td></td> <table></table>
Slučaj Kreiranje jedne ćelije s podacima unutar tablice.

korištenja:
Najkorišteniji colspan, rowspan, headers

atributi:
colspan Definicija Definira broj stupaca na koji će se ćelija proširiti.
Vrijednost broj
63
Priručnik za OWT
Primjeri
<td colspan="3">OWT</td>
rowspan Definicija Definira broj redaka na koji će se ćelija proširiti.
Vrijednost broj
Primjeri
<td rowspan="3">OWT</td>
headers Definicija Specificira jedan ili više ćelija zaglavlja (oznaka <th></th>)
za koji je ćelija vezana.
Vrijednost id_ćelije_zaglavlja
Napomena Oznaka <th></th> mora sadržavati atribut id da bi se ćelija

mogla povezati s njom.
Primjeri
<td headers="predmet">OWT</td>
Poveznica: HTML td tag (w3schools.com)
Dodatno: Za razliku od ćelija zaglavlja <th></th> oznake, sadrži podatke koje

želimo prikazati.
Zadano je da su elementi <td> lijevo poravnati.
Tekstualni sadržaj će se prikazati kao sadržaj ćelije.
Skriptiranje
<template></template>
Slučaj Izrada kontejnera za skrivanje sadržaja pri učitavanju stranice.
korištenja:
Primjer <template>
<div>Fakultet organizacije i informatike</div>
korištenja:
</template>
Poveznica: HTML template tag (w3schools.com)
Dodatno: Sadržaj oznake se može prikazati kasnije nakon učitavanja stranice

putem skripta.
64
Priručnik za OWT
Obrasci
<textarea></textarea> <form></form>
Slučaj Postavljanje višelinijskog elementa za unos podataka

korištenja:
Najkorišteniji name, placeholder, cols, rows, maxlength, required, readonly,

atributi: wrap, form, disabled, autofocus
name Definicija Specificira ime za element.
Vrijednost ime
Napomena Obavezan atribut ako se oznaka koristi za obrazac!
Primjeri
<textarea name="motivacijsko" placeholder="Moje ime je...">
</textarea>
placeholder Definicija Specificira kratki prijedlog koji opisuje očekivanu vrijednost

elementa.
Vrijednost tekst
Primjeri
<textarea placeholder="Moje ime je..."></textarea>
cols Definicija Definira vidljivu širinu elementa (cols=1 je prosječna širina

jednog znaka).
Vrijednost broj
Primjeri
<textarea cols="50"></textarea>
rows Definicija Definira vidljivu visinu elementa (rows=1 je visina jedne

linije).
Vrijednost broj
65
Priručnik za OWT
Primjeri
<textarea rows="4" placeholder="Moje ime je..."></textarea>
maxlength Definicija Specificira maksimalni broj znakova koji je dopušten.
Vrijednost broj_znakova
Primjeri
<textarea maxlength="150"></textarea>
required Definicija Specificira da je element obavezan, odnosno da se treba

ispuniti.
Napomena Ako nije ispunjen, javlja se iskočni prozor s objašnjenjem da

ga treba ispuniti prije nego se pošalje obrazac.
Primjeri
<textarea required></textarea>
readonly Definicija Specificira da će element biti samo moguće čitati.
Napomena Korisnik neće moći uređivati, ali za razliku od atributa

disabled moći će pritisnuti na element, označiti ga ili kopirati
tekst.
Primjeri
<textarea readonly></textarea>
wrap Definicija Specificira kako se tekst prelama kada se predaju obrascu .
Vrijednost ➢ hard - sastojat će se od prijeloma redaka

➢ soft - neće se prelamati tekst
Napomena Kada je navedena vrijednost hard, oznaka treba sadržavati

cols atribut.
Zadana vrijednost je soft.
Primjeri
66
Priručnik za OWT
<textarea col="4" wrap="hard"></textarea>

<textarea col="4" wrap="soft"></textarea>
form Definicija Specificira formu kojoj pripada element ako je smješten izvan
forme.
Vrijednost id_forme
Primjeri
<textarea name="motivacijsko" form="forma1"

placeholder="Upiši motivacijsko pismo..."></textarea>
disabled Definicija Definira hoće li element biti onesposobljen(ako je naveden

atribut disabled) ili ne (nije naveden atribut disabled).
Primjeri
<textarea disabled></textarea>
autofocus Definicija Specificira da će element dobiti fokus čim se učita stranica.
Primjeri
<textarea autofocus rows="4" cols="50"></textarea>
Ostali atributi: dirname
Poveznica: HTML textarea tag (w3schools.com)
Dodatno: Koristi se unutar obrasca jer tada potpuno dobiva na funkcionalnosti,

ali može se koristiti i izvan obrasca.
Može sadržavati neograničen broj znakova.
Veličina višelinijskog elementa se može specificirati preko atributa
cols i rows.
Bilo bi dobro da se navodi globalni atribut id kako bi se mogla ova
oznaka povezati sa oznakom <label></label>.
67
Priručnik za OWT
Tablični podaci
<tfoot></tfoot> <table></table>
Slučaj Grupiranje sadržaja podnožja tablice

korištenja:
Poveznica: HTML tfoot tag (w3schools.com)

Piše se nakon <caption></caption> , <colgroup></colgroup>,
<thead></thead> i <tbody></tbody> oznaka, ukoliko postoje.
može omogućiti prikaz podnožja tablice svaki put kad je prerezana (ne
stane na cijelu stranicu primjerice)
Tablični podaci
<th></th> <table></table>
Slučaj Kreiranje jedne ćelije zaglavlja tablice

korištenja:
Najkorišteniji colspan, rowspan, scope

atributi:
colspan Definicija Definira broj stupaca na koji će se ćelija proširiti.
Vrijednost broj
Primjeri
<th colspan="3">Predmeti</th>
rowspan Definicija Definira broj stupaca na koji će se ćelija proširiti.
Vrijednost broj
Primjeri
<th rowspan="3">Cijene po proizvodima</th>
68
Priručnik za OWT
scope Definicija Specificira je li ćelija zaglavlja zaglavlje za red. stupac, grupu

stupaca ili grupu redaka.
Vrijednost ➢ col - specificira da je ćelija zaglavlje stupca

➢ colgroup - specificira da je ćelija zaglavlje grupe stupaca
➢ row - specificira da je ćelija zaglavlje retka
➢ rowgroup - specificira da je ćelija zaglavlje grupe redaka
Primjeri
<th scope="col">Predmet</th>
Ostali atributi: abbr, headers
Poveznica: HTML th tag (w3schools.com)
Dodatno: Za razliku od ćelija podataka <td></td> oznake, sadrži podatke o

zaglavlju tablice (nazive stupaca).
Zadano je da su elementi <th> podebljani i centrirani.
Tekstualni sadržaj će se prikazati kao sadržaj ćelije.
Tablični podaci
<thead></thead> <table></table>
Slučaj Grupiranje sadržaja zaglavlja tablice

korištenja:
Poveznica: HTML thead tag (w3schools.com)

Piše se nakon <caption></caption> i <colgroup></colgroup>
oznaka, ukoliko postoje.
može omogućiti prikaz zaglavlja tablice svaki put kad je prerezana (ne
stane na cijelu stranicu primjerice).
69
Priručnik za OWT

<time></time>
Slučaj Prikaz vremena i datuma.
korištenja:
Primjer FOI je otvoren od <time>06:00</time> do <time>21:00</time> radnim

danima.
korištenja:
Najkorišteniji datetime
atributi:
datetime Definicija prezentira strojno čitljiv format
Vrijednost datum_i_vrijeme
Primjeri
2021. FOI <time datetime="2021-12-16"> Dan fakulteta.</time>
Poveznica: HTML time Tag (w3schools.com)
<title></title>
Slučaj Definiranje naslova dokumenta. Ova oznaka je obavezna!
korištenja:
Primjer <title>Fakultet organizacija i informatike</title>

korištenja:
Poveznica: HTML title tag (w3schools.com)
Dodatno: Naslov dokumenta prikazuje se unutar kartice na pregledniku,

prikazuje se kao naslov stranice kada je stranica dodana u favorite i
prikazuje se unutar pretraživača.
Sama oznaka, odnosno njezin tekstualni sadržaj je bitan radi SEO.
70
Priručnik za OWT
Tablični podaci
<tr></tr> <table></table>
Slučaj Kreiranje retka tablice

korištenja:
Ostali atributi: abbr, headers
Poveznica: HTML tr tag (w3schools.com)
Dodatno: Sastoji se od jedne ili više oznaka <th></th> i <td></td>.
<ul></ul>
Slučaj Kreiranje nesređene (eng. unordered) liste
korištenja:
Primjer <ul>
<li>FOI</li>
korištenja: <li>FER</li>
</ul>
Poveznica: HTML ul tag (w3schools.com)
Dodatno: Koristi se oznake <li></li> za definiranje elemenata liste.
71
Priručnik za OWT

<video></video>
Slučaj Postavljanje video zapisa
korištenja:
Primjer <video>
<source type="video/mp4" src="film.mp4">
korištenja:
<source type="video/ogg" src="film.ogg">
Vaš preglednik ne podržava video.
</video>
Najkorišteniji src, width, height, controls, autoplay,

atributi:
src Definicija Specificira (apsolutnu/relativnu) putanju do videozapisa.
Vrijednost URL
Napomena Oznaka može biti bez atributa src, ali tada mora sadržavati
oznaku <source> pri čemu se može definirati više <source>
oznaka.
Primjeri
<video src="film.mp4" controls></video>
<video src="https://www.w3schools.com/tags/movie.mp4"></video>
width Definicija Specificira širinu video playera.
Primjeri
<video width="320" height="240" src="film.mp4" controls></video>
height Definicija Specificira visinu video playera.
Primjeri
<video width="320" height="240" src="film.mp4" controls>
Vaš preglednik ne podržava video.
</video>
controls Definicija Definira hoće li se prikazivati kontrole za video player, a

uključuje Pokreni, Pauziraj, Potraži, Glasnoća, Promjena
72
Priručnik za OWT
ekrana na punu većinu, Titlovi i Track .
Primjeri
<video src="film.mp4" controls></video>
autoplay Definicija Definira da će videozapis početi čim je spreman.
Primjeri
<video src="film.mp4" autoplay></video>
Ostali atributi: loop, muted, poster, preload
Poveznica: HTML video Tag (w3schools.com)
Dodatno: Potrebno je uvijek paziti koji format video zapisa podržava određeni
preglednik, najčešće je uvijek podržan MP4 i WebM. Tekstualni
sadržaj unutar oznake <video></video> će se prikazati ako format
nije podržan od preglednika ili sama oznaka nije podržana.
Sigurnije je unutar <video></video> navesti oznaku <source> pri
čemu se navede više formata tako da preglednik izabere onaj koji
odgovora.
Dobra je praksa uvijek navoditi visinu i širinu videa.
73

4 - Prilog HTML v.1.1

Uploaded by

Copyright:

Available Formats

You might also like

4 - Prilog HTML v.1.1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

4 - Prilog HTML v.1.1

Uploaded by

Copyright:

Available Formats

Priručnik za predmete:

Osnove Web Tehnologija

Prilog HTML oznake

Copyright 2022. FOI

Primjer <!DOCTYPE html>

Poveznica: HTML doctype declaration (w3schools.com)

Dodatno: Ovo nije HTML oznaka već preambula odnosno informacija

Podržava: ☑globalni atributi ☐atributi događaja

Primjer <!DOCTYPE html>

Poveznica: HTML html tag (w3schools.com)

Dodatno: Uvijek bi se trebalo unutar <html></html> oznake dodati globalni

Podržava: ☐globalni atributi ☐atributi događaja

Primjeri

Poveznica: HTML Comments (w3schools.com)

Dodatno: Komentar se ne prikazuje unutar preglednika.

Podržava: ☑globalni atributi ☑atributi događaja

Najkorišteniji href, target, type, rel, media, hreflang

href Definicija Koristi se za definiranje putanje do određenog dokumenta,

Napomena Može se dodatno unutar atributa prije vrijednosti dodati

target Definicija Definira način otvaranja poveznice, odnosno mjesto na Web

Vrijednost ➢ _self - otvara dokument u pozicioniranoj kartici

type Definicija Specificira MIME tip dokumenta koji se otvara u poveznici.

Vrijednost MIME_tip_prema_IANA media types

Napomena Koristi se jedino ako je href atribut prisutan.

rel Definicija Specificira vezu između trenutnog i povezanog dokumenta.

Vrijednost ➢ alternate ➢ nofollow

Napomena Koristi se jedino ako je href atribut prisutan.

media Definicija Specificira media/uređaj za koji je povezani dokument

Napomena Koristi se jedino ako je href atribut prisutan.

hreflang Definicija Specificira jezik dokumenta koji se otvara u poveznici.

Napomena Koristi se jedino ako je href atribut prisutan.

Ostali download, media, ping, referrerpolicy

Poveznica: HTML a tag (w3schools.com)

Semantika na razini teksta

Podržava: ☑globalni atributi ☑atributi događaja

Primjer <abbr title="Fakultet organizacije i informatike">FOI</abbr>

Poveznica: HTML abbr tag (w3schools.com)

Podržava: ☑globalni atributi ☑atributi događaja

Poveznica: HTML address tag (w3schools.com)

Ugrađeni HTML elementi

Slučaj Definiranje područja unutar mape, pa je stoga uvijek definirana

Podržava: ☑globalni atributi ☑atributi događaja

Najkorišteniji href, alt, shape, coords, target

href Definicija Specificira poveznicu odredišta za područje.

<area alt="f" href="https://www.foi.unizg.hr/hr/online-nastava"

alt Definicija Specificira alternativni tekst za područje ako se slika ne može

shape Definicija Specificira oblik područja na slici.

Vrijednost ➢ default - specificira cijelu regiju

coords Definicija Specificira koordinate područja na slici.

Vrijednost ➢ x1, y1, x2, y2 - za koordinate pravokutnika

Napomena Koristi se zajedno uz atribut shape .

target Definicija Definira način otvaranja poveznice, odnosno mjesto na Web

Vrijednost ➢ _self - otvara dokument u pozicioniranoj kartici

Ostali download, hreflang, media, referrerpolicy, rel, type

Poveznica: HTML area tag (w3schools.com)

Dodatno Uvijek je definirana unutar <map> oznake!

Podržava: ☑globalni atributi ☑atributi događaja

Poveznica: HTML article Tag (w3schools.com)