HTML

1. HTML
HTML je kratica za HyperText Markup Language, što znači prezentacijski jezik za izradu web
stranica. Hipertekst dokument stvara se pomoću HTML jezika. HTML jezikom oblikuje se sadržaj i
stvaraju se hiperveze hipertext dokumenta. HTML je jednostavan za uporabu i lako se uči, što je jedan
od razloga njegove opće prihvaćenosti i popularnosti. Svoju raširenost zahvaljuje jednostavnosti i tome
što je od početka bio zamišljen kao besplatan i tako dostupan svima. Prikaz hipertekst dokumenta
omogućuje web preglednik. Temeljna zadaća HTML jezika jest uputiti web preglednik kako
prikazati hipertext dokument. Pri tome se nastoji da taj dokument izgleda jednako bez obzira o kojemu
je web pregledniku, računalu i operacijskom sustavu riječ. HTML nije programski jezik niti su ljudi koji
ga koriste programeri. Njime ne možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju
zbrajanja ili oduzimanja dvaju cijelih brojeva. On služi samo za opis naših hipertekstualnih dokumenata.
Html datoteke su zapravo obične tekstualne datoteke, ekstenzija im je .html ili .htm. Osnovni građevni
element svake stranice su znakovi (tags) koji opisuju kako će se nešto prikazati u web pregledniku.
Povezice unutar HTML dokumenata povezuju dokumente u uređenu hijerarhijsku strukturu i time
određuju način na koji posjetitelj doživljava sadržaj stranica.
Sadržaj
 1 Razvoj HTML jezika
 2 Struktura HTML dokumenta
o 2.1 Komentari unutar html dokumenta
o 2.2 Izrada naslova
o 2.3 Osnovno oblikovanje teksta
o 2.4 Dodavanje zvuka i multimedije
o 2.5 Dodavanje slika
o 2.6 Meta tagovi
o 2.7 Dodavanje CSS stilova
 3 Postavljanje stranica
Razvoj HTML jezika[uredi VE | uredi]
Prvi javno dostupan opis HTML-a je dokument zvan HTML tags (oznake), prvi put se spominje na
internetu od strane Tim Berners-Leeja krajem 1991. Taj opis se sastoji od 20 elemenata početnog,
relativno jednostavnog dizajna HTML-a. Trinaest tih elemenata još uvijek postoji u HTML4. Postanak
mnogih svojih oznaka duguje jednom od ranih jezika za formatiranje teksta, runoff-u. Runoff je razvijen
u ranim 1960-im za CTSS (Kompatibilni Time-Sharing System) operacijski sustav. Runoff je kasnije
inkorporiran u UNIXoperativni sustav u naprednije formatirajuće programe kao što su roff, nroff i troff.
Svaka nova verzija HTML-a je razvijana tako da ostane čitljiva na svim web preglednicima. Tim
Berners-Lee je, nakon što je u listopadu 1994. napustio CERN (Europsku organizaciju za nuklearno
istraživanje), osnovao organizaciju World Wide Web Consortium koja se bavi standardizacijom
tehnologija korištenih na webu poznatija kao W3C .
Prva verzija HTML jezika objavljena je 1993. godine. U to je vrijeme bio još poprilično ograničen, pa
nije bilo moguće čak ni dodati slike u HTML dokumente. Razvoj HTML-a nastavljen je prvom
"imenovanom" verzijom – 2.0, no ni ona nije postala standardom.
U ožujku 1995. W3C objavljuje verziju 3.0, koja donosi mogućnosti definicije tablica. Daljnji razvoj ove
verzije HTML-a označilo je prihvaćanje "specifičnih" oznaka podržanih u tada najvećim i
najprihvaćenijim web preglednicima. Tako su nastale mnoge duplikacije, pa je postojalo više oznaka
koje su imale istu funkciju. Podebljani text, primjerice bilo je moguće definirati oznakom <b> , ali i
oznakom <strong> .
HTML4 predstavljen je u prosincu 1997., nastavio je s prihvaćanjem oznaka nametnutih od strane
proizvođača različitih web preglednika, no istovremeno je pokrenuto i "čišćenje" standarda
proglašavanje nekih od njih suvišnim. Manje promjene u specifikaciji ovog standarda predstavljene su u
prosincu 1999., kada je predstavljena konačna verzija ovog jezika HTML4.01.

2. HTML 5 je prva nova revizija standarda od HTML 4.01, koji je izdan 1999. Nastao u suradnji World
Wide Web Consortium (W3C) i Web Hypertext Application Technology Working Group (WHATWG). Do
2006. godine su ove dvije grupe radile odvojeno, WHATWG je radio sa web formama i aplikacijama, a
W3C sa XHTML 2.0. Na svu sreću odlučili su udružiti snage i kreirati novu verziju HTML-a. Izdavanje
konačnih specifikacija standarda HTML5 u suprotnosti je s inicijativom Web Hypertext Application
Technology Working Group (WHATWG) prema kojoj bi HTML trebao biti "živi" standard koji se stalno
nadograđuje, bezoznake verzije specifikacija. HTML5 standard nalazi se u statusu radnog dokumenta
(draft), a očekuje se da će postati službeno objavljen sredinom 2012. godine, dok bi konačne
specifikacije trebale biti gotove u drugom kvartalu 2014 . Zanimljivo je da već sada veliki broj
preglednika ima implementiran sustav koji omogućuje interpretaciju HTML5.
HTML5 donosi brojne nove mogućnosti koje HTML 4.01 i XHTML 1.x nisu imali, kao što je mogućnost
reprodukcije videa na stranicama bez korištenja Adobe flasha iil Microsoftovog silverlighta, mogućnost
upravljanja pomoću tipkovnice i opcijama za bilo koju vrstu manipulacija, drag and drop, canvas kao i
ostali novi elementi.
 Na adresi html5test.com možete testirati vaš browser u kojoj mjeri podržava html5, dok na
adresi slides.html5rocks.com/#slide1 imate odličan primjer i prezentaciju HTML5 web stranice.
Struktura HTML dokumenta[uredi VE | uredi]
Svaki HTML dokument sastoji se od osnovnih građevnih blokova - HTML elemenata. Svaki, pak, HTML
element sastoji se od para HTML oznaki (engl. tag). Također, svaki element može imati i atribute kojim
se definiraju svojstva tog elementa. Na samom početku HTML dokumenta preporučljivo je
postaviti <!DOCTYPE> element, kojim se označava DTD (engl. Document Type Declaration), čime se
definira točna inačica standarda koja se koristi za izradu HTML dokumenta.
Nakon <!DOCTYPE> elementa, <html> elementom označava se početak HTML dokumenta.
Unutar <html> elementa nalaze se i <head> element te <body> element. <head> element
predstavlja zaglavlje HTML dokumenta u kojemu se najčešće specificiraju jezične značajke HTML
dokumenta kao i sam naslov (engl.title) stranice. Pomoću određenih HTML elemenata unutar zaglavlja
dodaju se i stilska obilježja stranice, bila ona direktno ugrađena (engl. embedded) ili dodana kao
referenca na vanjsku CSS datoteku. Često se unutar zaglavlja još definiraju i skripte kreirane
u JavaScript jeziku. U <body> elementu kreira se sadržaj HTML dokumenta, odnosno, stranice koju on
reprezentira.
Svaka HTML oznaka (koja u paru kreira HTML element) počinje znakom < (manje od), a završava
znakom > (više od). Zatvarajuća HTML oznaka kreira se na isti način kao i otvarajuća, ali se prije
završnog znaka > dodaje i kosa crta / (engl. slash).
Primjer jednog HTML elementa
<body></body>
Osim navedenih, standardnih HTML elemenata, postoje i samozatvarajući HTML elementi. Kod takvih
elemenata nema zatvarajuće oznake.
Primjer samozatvarajućeg elementa
<link rel="stylesheet" type="text/css" href="stil.css" />
Iako nije nužno, prema preporuci W3C-a, kod samozatvarajućih elemenata poželjno je ostaviti razmak
između definiranih atributa i njihovih vrijednosti i zatvarajućih znakova ( /> ).
Svaki HTML dokument moguće je kreirati u bilo kojem uređivaču teksta. Ipak, za neke naprednije
funkcije, kao i za olakšavanje repetitivnih aktivnosti kod izrade HTML dokumenata te vizualni
pretpregled kreirane web stranice, preporučljivo je koristiti neke od funkcionalnijih alata,
poput Adobeovog Dreamweavera iliMicrosoftovog Expression Weba.

3. Primjer jednostavnog HTML dokumenta
<!DOCTYPE html>
<html>
<head>
<title>Naziv stranice</title>
</head>
<body>
<p>Ovdje se unosi sam sadržaj stranice.</p>
</body>
</html>
</pre>
Komentari unutar html dokumenta[uredi VE | uredi]
Komentare možemo unositi bilo gdje unutar html dokumenta i taj tekst neće biti prikazan na stranici, tj.
moći će se vidjeti samo ako otvorite skriptu s code editorom. Na ovaj način možete ostavljati sebi
poruke unutar skripte i s njima npr. skrenuti pozornost na jedan dio skripte, ili s ovime možemo jedan
dio skripte isključiti, a sačuvati kod tog dijela, kojeg možemo ponovno aktivirati ako izbrišemo sljedeće:
s ovim otvaramo komentar: <!--
s ovim zatvaramo komentar: -->
Primjer:
<!-- ovo je komentar -->
Najčešće će u boljem html editoru komentar biti ispisan sivim slovima kako bi se razlikovao od ostatka
koda.
Izrada naslova[uredi VE | uredi]
Naslove u html dokumentu oblikujemo radi uočljivosti i kako bi bili jedinstveni za cijelu web stranicu
odnosno web site. Razlikujemo šest veličina naslova. Početni tag najvećeg naslova je <h1> , a
završni </h1> . Najmanji naslov počinjemo s <h6> a završavamo sa </h6> . Početni i završnog html
tag označavaju početak i završetak teksta naslova. Završni tag naslova ne treba slijediti tag za prelazak
u novi redak <br> jer se prelazak obavlja automatski. Korištenjem ALIGN atributa, naslovi mogu biti
poravnati desno, lijevo ili centrirani.
Primjer:
<HTML>
<HEAD>
<TITLE>Kreiranje HTML naslova</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>1 Naslov</H1>
<H2 ALIGN=LEFT>2 Naslov</H2>
<H3 ALIGN=RIGHT>3 Naslov</H3>
<H4>4 Naslov</H4>
<H5 ALIGN=RIGHT>5 Naslov</H5>
<H6 ALIGN=CENTER>6 Naslov</H6>
</BODY>

4. </HTML>
Osnovno oblikovanje teksta[uredi VE | uredi]
Kako bi oblikovali tekst unutar HTML dokunenta, potrebno je staviti određeni tag na početku teksta koji
želimo oblikovati i završni tag na kraju teksta.
Primjeri:
<p>tag za odlomak (Paragraph)</p>
<big>veliki tekst</big>
<b>podebljani tekst</b>
<em>nakrivljen tekst</em>
<u>podcrtan text</u>
<strong>"jaki" tekst</strong>
<i>nakrivljen tekst</i>
^{podignut tekst}
_{spušten tekst}
<del>precrtan tekst</del>
<code>tekst računalnog koda</code>
<hr>vodoravna crta</hr>
 veličina fonta od 1 do 7
<font size="6">velicina fonta 6</font>
 boju fonta možemo mijenjati na više načina, koristeći hexa zapis boja
<font color="#770000">ovaj tekst je u hexaboji #770000</font>
 koristeći ime boje
<font color="blue">ovaj tekst je plav</font>
 koristeći rgb, ali taj zapis nije uobičajen
 vrsta fonta
<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je
promijenjen font</font>
 veliko početno slovo
<font size="5" face="Georgia, Arial" color="blue">P</font>očetno slovo
Dodavanje zvuka i multimedije[uredi VE | uredi]

5. Multimedijski objekti uključuju s na Web stranicu na tri načina: kao plug-in-ovi preglednika, ActiveX
kontrole i Java appleti.
Plug-in je program uklopljen u preglednik koji proširuje njegove mogućnosti obrade multimedijskih
datoteka s grafikom, zvučnim zapisima, videom... Razlikuje se od pomoćnih aplikacija (external viewer,
helper application) koje se otvaraju u obliku posebnog prozora i rade nezavisno od preglednika. Za
uključivanje plug-inova na HTML stranicu mogu se koristiti starija <EMBED> oznaka ili po HTML 4.01
standardu nova <OBJECT> oznaka, dok se kod najnovije verzije HTML5 koriste
oznake <VIDEO> i <AUDIO> .
Sljedeći primjer koristi <EMBED> oznaku:
<HTML>
<HEAD>
<TITLE>Zvuk i EMBED</TITLE>
</HEAD>
<BODY>
<P>Umetanje zvuka pomoću EMBED elementa</P>
<EMBED SRC="moja_pjesma.mp3" HEIGHT="60" WIDTH="144">
</BODY>
</HTML>
Isti primjer korištenjem <OBJECT> :
<HTML>
<HEAD>
<TITLE>Zvuk i OBJECT</TITLE>
</HEAD>
<BODY>
<P>Umetanje zvuka pomoću OBJECT elementa</P>
<OBJECT DATA="moja_pjesma.mp3" WIDTH="144" HEIGHT="60">
</OBJECT>
</BODY>
</HTML>
Primjer za HTML5:
 VIDEO oznaka
<video src="video_datoteka.mpg" width="640" height="480" controls></video>
 AUDIO oznaka
<audio src="zvučna_datoteka.mp3" controls>
 Primjer bez kontrolnog prozora, s automatskim pokretanjem (autoplay)

6. <audio src="zvuk.mp3" type="audio/mp3" autoplay=”false” />
 Isto tako možete za video, samo kopirate oznaku autoplay u videotag.
Dodavanje slika[uredi VE | uredi]
Kada bi web stranice sadržavale samo tekst i dalje bi bile tehnološki impresivne, ali bez slika ne bi bile
niti približno zabavne kao danas. Dva najčešće upotrebljavana grafička formata datoteka na internetu
su GIF i JPEG (GIF se izgovara "đif", a JPEG "džej-peg"). JPEG (Joint Photographic Experts Group)
format primarno se koristi za prikaz realističnih slika fotografske kvalitete, dok se gif koristi za slike s
manjim spektrom boja, kao što su na primjer navigacijske ikone, banneri, animacije itd,... Među web
dizajnerima veliku je popularnost stekao i format PNG (PNG se izgovara"ping") koji je stvoren kako bi
poboljšao i zamjenio GIF format. PNG podržava slike zasnovane na paleti (s paletom
definiranom 24 bitnim RGB bojama), greyscale slike (sivih tonova) i RGB slike. Zamišljen je kao
grafički format za razmijenu preko interneta, a ne za profesionalnu uporabu, tako da ne koristi neke
druge sheme boja (kao što je CMYK (cyan-mangenta-yellow-black). Sve slike, bez obzira na format,
ubacuju se istim tagom. Budući da <img> tag zahtjeva obilježje src , tada se <img
src="link_slike.jpeg"> promatra kao cjeloviti tag. <img> tag nema svoj završni oblik. To je tag
koji zatvaramo na njegovom kraju kosom crtom <img /> .
Primjer:
<html>
<head>
<title>Primjer ubacivanja slike</title
</head>
<body>
<img src="link_lokacije_slike.jpg"/>
</body>
</html>
Pomoću obilježja alt možemo definirati tekst koji će opisivati što je na slici, koji će se prikazati ukoliko
korisnikov web preglednik nije u stanju otvoriti dokument.
Primjer:
<img src="pas.gif" alt="Na slici je pas" height="100" width="100">
Isto tako možemo pomoću obilježja title , dok korisnik mišem nacilja odrađeni dio dokumenta koji
smo označili tim tagom, pojaviti će mu se okvirić s tekstom koji smo napisali.
Primjer:
<img src="pas.gif" title="Na slici je pas" height="100" width="100">
Meta tagovi[uredi VE | uredi]
Meta tagovi su dijelovi HTML-a u stranici koje upotrebljavaju tražilice da bi zapisale informacije o vašoj
stranici. Ovi tagovi sadrže ključne riječi, opis, informaciju o vlasništvu, naziv stranice itd. Oni su među

7. mnogim stvarima koje ispituju tražilice kada "gledaju" vašu stranicu. Iako ih nije nužno, vrlo ih je korisno
upotrebljavati, pogotovo ako želite imati dobru poziciju na tražilicama (a tko ne želi?). Ako napravite
web stranicu i registrirate URL kod tražilica, one će posjetiti vašu stranicu i pokušati je indexirati. Svaka
tražilica funkcionira malo drugačije, i svaka drukčije cijeni pojedine elemente web stranice. Npr.
Altavista daje prednost opisnom tagu (description), a Inktomi indexira oboje, i tekst stranice, kao i meta
tagove. Drugi pretraživači poput Exactseek-a su pravi meta tag pretraživači, tako da ako vaša stranica
ne sadrži naziv (title), i opisni meta tag (description). Naravno, svi pretraživači ne rade na ovaj način.
Neki daju prednost sadržaju. Pretraživači u obzir uzimaju više od 100 stvari kada razmatraju neku
stranicu. Najveći razlog zašto mnoge tražilice ne daju toliku važnost meta tagovima je zbog spama.
Ljudi su se sjetili da na svoje stranice stave mnoge ključne riječi koje nemaju veze sa sadržajem
stranice samo da bi dobili više posjeta. Nakon nekog vremena neke tražilice su prestale gledati meta
tagove, služili su im uglavnom samo kao potvrda da bi bili sigurni da odgovaraju onome što se nalazi na
stranici. Kada su ključne riječi potpuno nevezane za sadržaj stranice neke tražilice će kazniti tu
stranicu.
Ako je vaša stranica bogata slikama i grafikom, tada su vam meta tagovi jako važni. Kažu da slika
govori tisuću riječi, ali slike su nažalost tražilicama bezvrijedne. Pogotovo ako stranica sadrži jako malo
teksta. Tada je potrebno koristiti obilježje alt koje izgleda ovako:
<img src="imeslike.jpg" alt="Tekst koji će tražilica indexirati">
Meta tagovi bi uvijek trebali biti smješteni u <head> područje HTML dokumenta. <head> tag se nalazi
odmah nakon <html> taga, i završava prije <body> taga.
primjer:
<title>Naziv stranice</title>
<meta name="description" content="opis web stranice">
<meta name="keywords" content="popis ključnih riječi vezanih za sadržaj stranice
">
<meta name="robots" content="index,follow">
Uvijek budite sigurni da vaši meta tagovi nemaju nikakvih prelazaka u novi red u sebi, jer će ih u tom
slučaju tražilice vidjeti kao neispravan kod i ignorirati. Također bi trebali izbjegavati upotrebu velikih
slova (html5 standard), kao i ponavljanje izraza unutar taga ključne riječi.
<meta name="description" content="opis web stranice">
Mnoge tražilice će prikazati ovaj tekst u rezultatima pretraživanja pokraj naziva stranice. Neka taj tekst
ne bude pre dugačak, neka bude razumljiv i neka što bolje opiše sadržaj vaše stranice.
<meta name="keywords" content="popis ključnih riječi vezanih za sadržaj
stranice">
Ključne riječi predstavljaju ključne termine koje netko može upisati u tražilicu. Izaberite samo važne
izraze. Ako ćete staviti te izraze pod tag ključne riječi, trebali biste ih spomenuti i na tekstu na stranici.
Mnoge tražilice uspoređuju vaš meta sadržaj s tekstualnim sadržajem stranice, i ako se to ne poklapa,
vaša stranica može zaraditi kaznu, i biti na lošoj poziciji kod rezultata pretraživanja.

8. <meta name="robots" content="index,follow">
Mnoge web stranice imaju ovaj tag neispravno napisan. Primjer neispravnog korištenja
je content="index, follow, all" Krivo jer neke tražilice ne mogu obraditi razmake između riječi.
Većina tražilica po defaultu pretpostave da želite da vaša web stranica bude indeksirana i da linkovi
budu praćeni, tako da korištenje neispravne sintakse može rezultirati time da tražilica jednostavno
ignorira vašu stranicu. Ako zbog nekog razloga ne želite da vaša stranica bude indeksirana u
pretraživačima, zamjenite u tagu riječ index sa noindex , a ako želite da linkovi ne budu praćeni,
zamjenite riječ follow sa nofollow .
Među ostalim meta tagovima koristan tag za napomenu o zaštiti autorskih prava autora sadržaja
stranice je name="Author" .
<meta name="Author" content="Ime tvrtke koja je dizajnirala sajt">
Na internetu se svakodnevno pojavljuje više od 8 milijuna novih stranica, a tražilice indeksiraju samo
jedan dio od toga. Meta Tagovi su uobičajen standard koji može osigurati pravilnu kategorizaciju vaše
stranice. Uvijek upotrebljavajte Meta Tagove i u njima koristite samo najvažnije riječi vezane za sadržaj
stranice. Pravilno korištenje Meta Tagova vam može samo pomoći kod pozicije na tražilici, što
podrazumjeva i veću i kvalificiranu posjetu stranice.
Dodavanje CSS stilova[uredi VE | uredi]
Godine 1996., W3C prvi puta spominje ideju stilskih obrazaca (CSS – Cascading Style Sheets) za
oblikovanje HTML dokumenta. Standard, koji je objavljen sredinom 1998.godine, omogućuje web
dizajnerima da odvoje strukturu i oblik svojih dokumenata. CSS standard određuje tri vrste stilskih
obrazaca: ugrađeni, linijski i vezani.
UGRAĐENI – Stilska obilježja se ugrađuju unutar <style> taga na početku samog HTML dokumenta.
Stil pridružen određenom tagu primjenjuje se na sve tagove te vrste unutar dokumenta.
Primjer
<style type="text/css">
.ime_stila {
font-size: 36px;
color: #000;
background-color: #0F0;
font-family: Arial, Helvetica, sans-serif;
}
.drugi_stil { color: #0F0; }
</style>
LINIJSKI – Stilska obilježja ugrađuju se kroz cijeli HTML dokument. Svakom pojedinom HTML tagu
možemo pridružiti svoja vlastita stilska obilježja.
Primjer

9. <p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; color:
#F00;">Označeni tekst stylom</p>
VEZANI – Stilska obilježja pohranjena su u zasebnoj datoteci. Ta datoteka se može povezati s bilo
kojim HTML dokumentom koristeći tag <link> koji se smješta unutar <head> taga.
Primjer
<link href="http//www.pou.com/Unnamed Site 2/style.css" rel="stylesheet"
type="text/css">
Postavljanje stranica[uredi VE | uredi]
Izrada internet stranica završava postavljanjem html stranica na internet web server, te ispitivanjem
funkcija u realnim uvjetima. Da bi one bile dostupne na Internetu, potrebno ih je smjestiti na neki web
server. Web server je računalo na kojem se nalaze web stranice. Kako je pristup svakom računalu
određen portovima (ulazima) koji su predstavljeni brojevima, tako je i pristup web serveru određen
portom. Port za pristup web serveru je 80. Svaki server ima IP adresu, tako da kada se neka stranica
posjećuje, odnosno neki server, zapravo se posjećuje adresa kao 98.34.65.243:80, gdje broj 80 govori
da se radi o web serveru. Prostor na web serveru se može zakupiti kod davatelja usluga hostinga
(posluživanja) stranica ili se može napraviti svoj vlastiti kućni server. Ako želimo imati vlastiti kućni
server trebamo imati internet vezu koja je 24 sata spojena na internet, ima veliku propusnost podataka i
potrebno je imati statičku ip adresu, koja se dobije uz nadoplatu kod davatelja internet usluga kao i
brzina prijenosa podataka. Da bi kućni web server funkcionirao potrebno je imati instalirane zasebno
Apache ( web server), PHP ( intrepetator za programski jezik, ako ga koristimo), MySQL (baze
podataka) ili možemo koristeći gotove programe s cijelim paketom kao što su xampp,wamp,... Početna
stranica, koju želite da posjetitelj vidi kada posjeti vaš server započinje s index.html. Nakon što smo
uspješno stavili našu html stranicu na server, potrebno je nadjenuti našu ip adresu računala s
domenom. Domene s hrvatskim predznakom možemo besplatno prijaviti na carnetovoj stranici na
www.carnet.hr/dns. Domene .hr i .com.hr mogu besplatno registrirati na carnetovim stranicama samo
pravne osobe i fizičke osobe koje obavljaju registriranu samostanu djelatnost (obrtnici, umjetnici,
liječnici i sl), dok domenu .from.hr mogu besplatno registrirati sve fizičke osobe iz Republike Hrvatske.