You are on page 1of 17

HTML

HTML (HyperText Markup Language) je jednostavan opisni jezik kojim se opisuje raspored sadržaja
na stranici. HTML datoteke su obične tekstualne datoteke (HTML nije programski jezik). Svaka
HTML stranica koju napravimo mora imati extenziju .html ili .htm. To je standardna ekstenzija za
datoteke s HTML kodom. HTML datoteke možemo pisati i u najobičnijem tekstualnom uređivaču,
npr. u Notepadu.

HTML kod neke web stranice koju smo učitali u Internet Exploreru možemo pogledati na
View→Source.

Najvažniji HTML element svake web-stranice je link koji povezuje stranicu s nekom drugom
stranicom i tako stvara kompaktnu cjelinu. Linkovi povezuju čitav web i kad nebi postojali onda bi
adresu svake stranice koju želimo posjetiti morali upisivati u adresnu traku preglednika.

Unutar HTML dokumenta mogu se ugrađivati skripte pisane u nekom drugom programskom jeziku
kojeg preglednik razumije. Najčešće je to Java Script.

Izrada HTML stranice


Osnovni građevni element svake HTML stranice je tag. On opisuje način na koji se nešto prikazuje na
samoj stranici. Svi tagovi označeni su početnim znakom ''<'' i završnim znakom ''>''. Na taj način Web
preglednici, kojima se pregledavaju html dokumenti, razlikuju tagove od ostaloga teksta. Neki tagovi
imaju i svoj završni tag i tako djeluju na kompletan sadržaj između njih, a neki ga nemaju, već stoje
sami za sebe. Svi završni tagovi započinju s ''</'' a završavaju s ''>'' znakom. Nazivi tagova se mogu
upisivati velikim i malim slovima.

Tag može imati i neke atribute koji dodatno opisuju tag i način na koji se on prikazuje. Sve vrijednosti
atributa preporučljivo je stavljati unutar navodnika. Atributima se obično definiraju boja, poravnanje,
veličina i sl. Većina tagova ima i atribute i kroz obradu pojedinih tagova biti će objašnjeni i atributi.

Primjeri:
1. Ovo je bold tekst.
HTML kod: Ovo je <b> bold </b> tekst. (B tag ima svoj početni i završni tag)
2. Za postavljanje slike na stranicu koristimo IMG tag, koji ne zahtjeva završni tag:
<img src=“slika.jpg“ width=“150“ height=“100“ alt=“Ovo je moja slika“>

Kada je više tagova ugnježdeno jedan unutar drugoga završni djelovi tagova pišu se obrnutim
redoslijedom od početnih djelova.

Primjeri:
1. <head><title>Naslov stranice</title></head> - pravilno
2. <head><title>Naslov stranice</head></title> - nepravilno

1
Struktura HTML stranice

Tri osnovna taga sačinjavaju HTML stranicu. Glavni je HTML tag unutar kojeg se nalazi i kompletan
sadržaj stranice. Njime započinje i završava svaki html dokument. On sadržava druga dva taga,
HEAD i BODY.

Primjer najjednostavnije HTML stranice:


HTML
<html>
HEAD
<head>
zaglavlje i opis stranice <title>Moja prva stranica</title>
</head>
BODY
<body>
Ovo je tekst moje prve stranice.
tekst i sadržaj stranice </body>

</html>

Unutar HEAD taga stavljaju se podaci koji se ne prikazuju direktno na stranici, ali je opisuju i pomažu
pri njenom prikazu:
• TITLE tag – za naslov stranice koji se prikazuje u naslovnoj traci Internet Explorera
• CSS definicije stilova
• META tagovi – podaci o autoru, podaci za lakše pronalaženje stranica pomoću pretraživača,...

Unutar BODY taga nalazi se kompletan sadržaj stranice. Tim tagom počinjemo i završavamo dio html
dokumenta koji se prikazuje u prozoru preglednika. Svi tagovi koje tu upišemo bit će prikazani u
pregledniku i direktno će utjecati na prikaz.

Kad izradimo svoju prvu stranicu spremamo je u mapu u kojoj ćemo držati sve stranice naših web-
stranica. Glavnu stranicu spremamo pod imenom index.html i ta će se stranica prva otvoriti kad netko
upiše adresu naših web-stranica u pregledniku.

Savjet – velike dijelove teksta razbiti na manje slikama ili odlomcima.

Komentari nam služe za lakše snalaženje u kodu i ne prikazuju se na samoj stranici. HTML
komentari započinju sa <!-- znakovima, a završavaju sa -->. Mogu se protezati kroz više linija i u njih
možemo upisati bilo što. Ukoliko privremeno želimo izbaciti dio HTML stranice, umjesto da je
izbrišemo okružit ćemo je komentarima.
<!--ovo je komentar -->
Tekst između ovih znakova preglednici ne prikazuju, ali ga posjetitelj ipak može vidjeti ako pregleda
izvorni kod stranice (View/Source).

2
Osnovni elementi HTML-a

Prikaz teksta
BR – tag za prebacivanje u novi redak, nema dodatnih atributa, stavljamo ga na mjesto gdje želimo
prijeći u novu liniju. npr. Ovo je prvi redak.<br>Ovo je drugi redak.<br>Ovo je treći redak.

P – tag koji označava paragraf, tj. odlomak, služi za ubacivanje dva nova reda, može se koristiti i
njegov završni tag no to najčešće nije potrebno.
Align atribut – služi za poravnavanje teksta nekog odlomka. Vrijednosti align atributa:
• left – poravnava tekst lijevo
• center – centrira tekst
• right – poravnava tekst desno
<p>Ovo je prvi odlomak.<p align=''center''>Ovo je drugi odlomak.<p align=''right''>Ovo je treći
odlomak.

HTML prepoznaje samo jedno prazno mjesto, ignorira sve ostale razmake i prelaske u novi red pisane
tekstom. Ako unutar teksta želimo ubaciti razmak koji se neće ignorirati upisujemo ''&nbsp'' (non-
breaking space). Nakon svakog non-breaking razmaka može doći i obični razmak koji se tada neće
ignorirati. npr. ''riječ &nbsp; &nbsp; riječ''. Umetanjem teksta unutar PRE tagova (preformatted)
tekst će biti prikazan baš kao što je i u kodu – sa svim razmacima, tabovima i prelascima u novi red
(svi ti znakovi se zajedničkim imenom zovu whitespace characters).

FONT – tag koji opisuje kako neki tekst izgleda : njegovu veličinu, boju ili korišteni font. (nije
preporučljivo koristiti neke rijetke fontove jer će posjetitelj stranice moći vidjeti samo one fontove koji
su instalirani na njegovom računalu). Dolaskom CSS-a FONT tag se sve manje i manje koristi, jer
CSS omogućava znatno veću mogućnost opisa izgleda.
Atributi za FONT tag:
• size – veličina fonta, označava se brojkama od 1-7
• face – navodimo font koji ćemo koristiti za prikaz
• color – atribut za određivanje boje fonta
npr. <font face=''Verdana'' size=''2'' color=''red''>Crveni Verdana tekst.</font>

H1-H6 – heading tabovi, za formatiranje teksta baš kao u Wordu (H1 najveći, H6 najmanji naslov)
npr. <h1>Glavni naslov</h1>
<h2>Podnaslov</h2>

Želimo li da preglednik prepoznaje posebna hrvatska slova č,ć,š,ž i đ u zaglavlje ubacujemo:


<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">

Najčešće korišteni tagovi pri formatiranju teksta:


• B – bold
• I – italik
• U – podcrtano
• SUB – subscript
• SUP – superscript
• STRIKE – prekriženo
• TT – typewriter
• EM – naglašeno (najčešće italik)
• STRONG – naglašeno (najčešće bold)
• PRE – prethodno formatiran tekst

3
Osnovna odlika HTML jezika je nasljeđivanje svojstava. Svojstva nekog taga vrijede dok se on ne
zatvori. Svim HTML tagovima unutar njih možemo definirati drugačija svojstva i tako sadržaj
formatirati na drugi način, a ukoliko to ne učinimo svojstva će biti nasljeđena od nadtaga.
npr. <p align=''right''>Desno poravnati tekst.<br>
I dalje desno poravnati tekst.<br>
<font face=''Verdana'' size=''4''>Verdana veličine 4.
<font size=''2''>Naslijeđena Verdana veličine 2.</font>
Verdana veličine 4.</font>

DIV i SPAN – tagovi koji nemaju neku specifičnu primjenu i služe samo za držanje nekog sadržaja.
DIV tag zauzima cijelu dostupnu širinu, tj. prostire se kroz cijeli redak i upišemo li nešto poslije DIV
taga to će biti prikazano u sljedećem retku. Oko SPAN taga možemo stavljati i razne druge tagove, jer
se on prikazuje unutar jednog retka, pa u istom retku možemo imati i više SPAN tagova jednog do
drugog. Ovim tagovima korištenjem class atributa definiramo određene klase koje će utjecati na njihov
prikaz, pa će tako DIV i SPAN tagovi moći izgledati na poseban način.

Horizontalna linija
HR – tag koji služi za umetanje horizontalnih linija, njegovi glavni atributi su:
• align – poravnatost linije
• width - širina linije (možemo je izraziti u postotcima ili pikselima)
• size – debljina linije (1,2,3,...)
• noshade – atribut za punu liniju, ne upisujemo mu dodatna svojstva
npr. <hr width=''50%'' align=''center'' size=''4''>
Ukoliko izostavimo atribute width i size, linija će biti najtanja moguća, razvučena čitavom širinom
stranice.

Boje u HTML-u
Boje u HTML-u definiramo heksadecimalnim vrijednostima. (heksadecimalni brojevi imaju bazu 16, a
znamenke 0-9, A, B, C, D, E i F, umjesto brojeva od 10 do 15 koristimo slova od A do F).

Boje na ekranu se definiraju sa tri osnovne boje – crvenom, zelenom i plavom (RGB – red, green i
blue). Svaka od te tri boje je određenom količinom zastupljena u konačnoj boji prikazanoj na ekranu.
Ako neke boje nema, njezin je udjel 0, a ako je u potpunosti zastupljena ima udjel 255. Crna boja (koja
je zapravo nedostatak boje) ima RGB omjer (0,0,0), a bijela boja (koja je zbroj svih boja) označava se
sa (255,255,255).

Za sve heksadecimalne boje u HTML-u koristi se šest znamenki sa prefiksom #, npr. ''#23A5F2''. Prve
dvije znamenke su heksadecimalna vrijednost udjela crvene boje, druge dvije su za zelenu boju, a
zadnje dvije za plavu.

Boju koju želimo koristiti možemo odabrati u bilo


kojem programu s prozorom za izbor boja, a zatim
pomoću kalkulatora njene tri RGB vrijednosti
pretvoriti u heksadecimalni zapis. Npr. 255 je FF pa
se bijela boja zapisuje sa ''#FFFFFF'', a 0 ostaje 0,
samo se za nju koriste dvije znamenke, pa se crna boja
zapisuje sa ''#000000''. Udjel svake od tri RGB boje
određujemo brojevima od 0 do 255 što ukupno daje
16,777.216 mogućih kombinacija boja.

4
U HTML-u možemo koristiti i tekstualne nazive za 16 najčešćih boja. Npr. umjesto ''#FF0000''
zapisujemo ''red'', za bijelu ''white''. za žutu ''yellow'' i sl. Nazivi tih 16 boja su :
-black -yellow -red -maroon
-gray -lime -green -olive
-silver -aqua -blue -navy
-white -fuchsia -purple -teal

Sigurnim bojama za prikaz u svakom pregledniku (browser safe) smatra se 216 boja koje će biti
identično prikazane na svakom operacijskom sustavu i pregledniku. Vrijednosti tih boja su
kombinacije heksadecimalnih parova 00, 33, 66, 99, CC i FF, npr ''#00FF33''.

Pozadina stranice
Za pozadinu web-stranice možemo postaviti samo jednu boju ili neku sliku. Definiramo ih unutar
BODY taga koji sadržava sve vezano za sadržaj i izgled stranice. Pozadinsku boju definiramo bgcolor
atributom u koji upisujemo heksadecimalnu vrijednost boje ili naziv jedne od 16 najčešće korištenih
boja. (npr. <body bgcolor=''green''>)

Tekst na stranici je po defaultu crne boje pa će on ukoliko postavimo tamnu pozadinu biti nečitljiv.
Zato je dobro uz pozadinsku boju definirati i boju teksta korištenjem text atributa.
(npr. <body bgcolor=''black'' text=''white''>)

Pomoću background atributa definiramo pozadinsku sliku, koja će se ukoliko je manja od prozora
preglednika ponavljati u horizontalnom i vertikalnom smjeru. (npr. <body background=''slika.gif'').
Postoje dva osnovna tipa pozadina koje se najčešće susreću na web-stranicama:
• mali uzorak koji se ponavlja u svim smjerovima, najčešće veličine do 10x10 piksela i sličnih
boja koje se na koriste
• pozadina koja se sastoji od dva dijela različitih boja: lijevi dio služi za linkove, a na desnom se
nalazi sadržaj.Takvu pozadinu dobijemo korištenjem tablica, a širina slike za pozadinu od dva
dijela bi morala biti veća od najveće razlučivosti (npr. 1600 piksela), inače će se prvi dio
ponoviti u horizontalnom smjeru. Visinu stavljamo što manju da bi se brže učitala.

5
Slike
Slika nije sastavni dio HTML dokumenta, već je pozivamo izvana koristeći IMG – tag za ubacivanje
slika na stranicu (nema završni tag). Atributi koje koristimo uz ovaj tag su:
• src – obavezan atribut, za zapisivanje putanje do slike (ako se nalazi u istom direktoriju kao i
stranica onda zapisujemo samo naziv slike)
• width – širina slike
• height – visina slike
• border – debljina ruba slike, ukoliko ga želimo dodati
• alt – za zapis teksta koji će se prikazivati na mjestu slike dok se slika ne učita ili u posebnom
oblačiću kad prijeđemo mišem preko slike
• hspace i vspace– razmak uz sliku u horizontalnom i vertikalnom smjeru, korisno ih je
upotrebljavati ako će se uz sliku nalaziti neki tekst, tako da tekst udaljimo od slike
• align – položaj slike na stranici, tj. poravnanje slike u odnosu na tekst

npr. <img src=''slika.gif'' width=''100'' height=''100'' border=''2'' alt=''slika uz tekst'' hspace=''5''


vspace=''5'' align=''left''> Ovo je jedna obična slika uz tekst. Ona je poravnata na lijevu stranu, a ovaj
tekst je u potpunosti okružuje. Korišten je i hspace atribut za dodatni razmak između teksta i slike.

Vrijednosti align atributa za poravnanje slike:


• default – korištenjem defaultnih postavki preglednika, isto kao i baseline
• absbottom – s najdonjom granicom retka teksta
• absmiddle – tekst poravnava po sredini slike
• baseline – s donjim rubom retka teksta
• bottom – donji rub slike poravnava s donjim retkom teksta
• center – sredinu slike poravnava po retku
• left – lijevo od teksta, tekst okružuje cijelu sliku
• middle – sredinu slike poravnava po retku
• right – desno od teksta, tekst okružuje cijelu sliku
• texttop – vrh slike po vrhu retka teksta
• top – vrh slike po vrhu retka

Većina ovih vrijednosti je korisna za poravnanje jednog retka. Left i right poravnavaju sliku na lijevu
ili desnu stranu i okružuju je cijelim tekstom, pa je uz njih korisno upotrebljavati hspace i vspace
atribute.

Osim kao klasičan objekt na Web stranici sliku možemo koristiti i kao podlogu za stranicu. To
postižemo uporabom slike kao vrijednosti atributa background unutar taga body.

Dva formata slika najčešće koristimo na webu:


• GIF (Graphic Interchange Format) – 8-bitni format, imaju maksimum 256 boja, mogu imati
prozirna područja, ovaj format je idealan za bannere, jednostavnu dugmad i općenito grafiku
bez puno različitih boja i površina, nije pogodan za fotografije.
• JPG (Joint Photographic Experts Group) – 24-bitni format, mogu imati neograničen broj boja,
ne mogu sadržavati prozirna područja, idealan za fotografije i kompleksne slike. Korisnik
može smanjivati volumen slike, čime gubi na broju piksela, tj. oštrini slike, ali ne i na bojama.

6
Komprimiranje slika i njihovo pohranjivanje u GIF ili JPG formatu omogućuje svaki program za
obradu slika. Međutim, i sa tako pripremljenim slikama pregledniku će možda trebati dugo vremena za
prikazivanje istih. Za to vrijeme posjetitelj Web stranice gleda prazan prozor preglednika i možda će
otići na drugu lokaciju jer mu je dosadilo čekati. Kako bi to izbjegli potrebno je u izradi html
dokumenta koristiti neke jednostavne postupke koji stvarno ili prividno ubrzavaju učitavanje Web
stranice:

• Slika će se uvijek prikazati u svojoj originalnoj veličini, a za proračun potrebnog prostora na


stranici pregledniku treba vremena. Dobro je eksplicitno navesti njenu veličinu pomoću
atributa width i height da bi preglednik mogao rezervirati mjesto za nju na stranici, učitati prvo
sav tekst a tek onda učitavati slike. Atribute width i height možemo koristiti i za deformiranje
slike, odnosno za izmjenu njene veličine kod prikaza. Stvarna veličina slike se u tom slučaju
ne mijenja i za učitavanje slike na računalo potrebno je isto ili duže vrijeme kao i kada se
prikazuje bez izmjene veličine jer preglednik mora prvo mijenjati dimenzije slike.

• Kolekcija slika - u posebnu tablicu smjestimo umanjene slike koje želimo prikazati, a svaka
takva slika je zapravo link na originalnu sliku. Umanjene slike se brzo učitavaju, a kada se
posjetitelj stranice odluči koju sliku želi detaljnije pogledati samo klikne na sliku i u novom
prozoru mu se otvori originalna slika. Takav način je posebno dobar za razne prodajne i slične
kataloge.

• Kada imamo dosta teksta za jedan prozor a sliku želimo prikazati u drugom brzo učitavanje u
drugi prozor postižemo tako da sliku unaprijed spremimo u memoriju. Sliku koju želimo
prikazati u drugom prozoru učitamo u prvi prozor na kraju teksta ali joj dimenzije definiramo
kao točku.
<img src="neka_slika" width="1" height="1">

7
Linkovi
Za postavljanje linkova koristi se A tag, a njegovim završnim tagom potrebno je označiti gdje je kraj
teksta (ili slike) koji služi kao link. Atributu href dodjeljujemo vrijednost adrese Web lokacije na koju
želimo uputiti posjetitelja, npr.
<a href=“Neka stranica.html“>Link na neku stranicu</a>

Adrese koje se navode u atributu href mogu biti apsolutne ili relativne. Apsolutna adresa je potpuna
adresa koja uključuje naziv web lokacije i cijelu putanju do željene datoteke. Npr.
http://www.neka_lokacija.com/prva_razina/druga_razina/neka_datoteka.html
Relativna adresa određuje položaj tražene datoteke u odnosu na polaznu datoteku. Npr.
• druga_datoteka.html - datoteka se nalazi u istoj mapi sa polaznom datotekom
• ../druga_datoteka.html - datoteka se nalazi u razini iznad polazne datoteke
• prvi/druga_datoteka.html – nalazi se u mapi prvi koja je u razini sa polaznom datotekom

Postoje tri tipa linkova:


• oni koji vode na neko mjesto na trenutnoj stranici
• oni koji vode na stranicu unutar istih web-stranica
• oni koji vode na neki vanjski URL

Primjeri :
1. <a href=˝stranica.html˝>Link na neku stranicu</a>
Ovaj link vodi na neku drugu stranicu istih web-stranica – href atributu je upisan samo naziv
stranice do koje se dolazi iz trenutnog direktorija. Ako želimo učitati stranicu iz nekog
poddirektorija, upisujemo ˝poddirektorij/stranica.html˝.
2. Kod stranice s većom količinom teksta, postavljamo linkove za odlazak na neki dio teksta.
Nazivamo ih anchori. Prvo postavljamo anchor na mjesto na stranici na koje želimo dovesti
korisnika, tako da napišemo prazan A tag s name atributom
• <a name=˝drugi_odlomak˝></a>
Unutar tog anchora ne trebamo ništa upisati, jer on služi samo za označavanje nekog mjesta na
stranici. Da bismo pozicionirali preglednik na tu lokaciju u tekstu, trebamo napraviti vezu na
postavljeni anchor. Za vrijednost href atributa upisujemo naziv anchora s prefiksom ˝#˝.
• <a href=˝#drugi_odlomak˝>Drugi odlomak</a>
3. Link koji će posjetitelja odvesti na neku lokaciju na nekoj drugoj stranici radimo tako da
poslije naziva stranice upišemo anchor:
• <a href=˝poglavlje2.html#drugi odlomak˝>Drugi odlomak u drugom
poglavlju</a>
4. Za link na druge web stranice, samo pišemo potpunu adresu te stranice:
• <a href=˝http://www.tssibenik.hr˝>Tehnička škola Šibenik</a>
5. Link na nečiji e-mail postavljamo sa:
• <a href=˝mailto:ante.antic@yahoo.com˝>Pošaljite mi e-mail</a>
kad ga posjetitelj klikne, otvorit će se njegov e-mail program i započet će se s pisanjem e-
maila naslovljenog na e-mail adresu ponuđenu u linku. Prije adrese mora se upisati prefiks
''mailto:''. Možemo odmah u novi e-mail napisati i naslov poruke tako da na kraj e-mail adrese
dodamo ''?Subject=naslov_poruke''. (ovo možda neće raditi u nekim e-mail programima)
• <a href=˝mailto:ante.antic@yahoo.com?Subject=Poruka˝>Pošaljite mi e-mail</a>
6. Link do neke slike (unutar href atributa navodimo putanju do slike):
<a href=“slika.jpg“> slika </a>
Ova osobina je dobra za prikaz kolekcije slika. Na taj način za prikaz slike, kao i za kasniji rad
s njom (printanje i sl.) nije potrebno stvarati posebnu Web stranicu.

8
Boje linkova za cijelu stranicu definiraju se u BODY tagu, baš kao i boja teksta. Koristimo tri atributa:
• link – opisuje boju običnih linkova
• vlink – opisuje boju već posjećenih linkova
• alink – opisuje boju trenutno aktivnih linkova, onih nad kojima držimo pritisnuto dugme miša
Ukoliko ne definiramo boju za posjećene linkove, oni će biti prikazani defaultnom ljubičastom bojom.

Primjer za definiranje boja:


<body link=˝maroon˝ vlink=ˇmaroon˝ alink=˝maroon˝>

Stranica na koju pokazuje link obično se otvara u postojećem prozoru preglednika, a time nestaje
prethodni sadržaj prozora odnosno stranica sa koje smo krenuli. Linkove koji vode na neke druge
stranice možemo podesiti tako da se one otvaraju u novom prozoru preglednika. Prozor u koji
učitavamo link definiramo target atributom, a on može imati sljedeće vrijednosti:
• _blank – u novi prozor
• _self – u trenutni prozor
• _parent – u stranicu koja sadržava trenutnu stranicu (tzv. roditelj), nalazi li se stranica u
frameovima link će biti učitan u stranicu u kojoj je definiran frameset
• _top – izvan svih frameova kao glavnu stranicu u pregledniku
• ime – u prozor s definiranim imenom; ukoliko ne postoji otvara se novi s novim imenom

Vrijednosti _parent i _top korisne su ako radimo s frameovima. Mi ćemo najčešće koristiti _blank ili
neko proizvoljno ime.
<a href=''http://www.bug.hr'' target=''_blank''>Bug.hr</a>
<a href=''http://mreza.bug.hr'' target=''siteovi''>Mreža</a>
<a href=''http://enter.bug.hr'' target=''siteovi''>Enter</a>
Link Mreža otvara stranicu u novom prozoru pod imenom siteovi, a link Enter će se učitati u isti taj
postojeći prozor s imenom siteovi i tako maknuti iz njega već učitanu stranicu (do koje opet možemo
doći dugmetom Back).

Za link možemo koristiti i sliku, tako da je umetnemo unutar A taga. Rub koji će se u tom slučaju
pojaviti oko nje (iste boje koja je definirana za linkove) možemo izbjeći ako vrijednost atributa border
postavimo na 0. Ako želimo da čitava slika služi kao link to možemo navesti ovako:
<a href=''stranica.html''><img src=''slika.gif'' width=''50'' alt=''Link na stranicu!'' border=''0''></a>

Slika ne mora čitava biti link, već to može biti samo jedan njen dio. Postoji mogućnost definiranja više
područja na istoj slici koja mogu poslužiti kao veze na različite sadržaje. Da bi to mogli napraviti na
slici moramo definirati područja (area) koja će nam poslužiti za stvaranje veze na neki drugi sadržaj
(Web stranicu, drugi dio dokumenta). Ta područja mogu biti:
• rect – u obliku četverokuta
• circle – u obliku kruga
• poly – u obliku poligona od najmanje tri stranice

Tako definiranu sliku nazivamo slikovna mapa. Dakle, prvo se definira mapa linkova za neku sliku
(unutar taga map), pri čemu moramo znati dimenzije slike i područja koja želimo učiniti linkovima.
Područje definiramo pomoću x i y koordinata ključnih točaka:
• za četverokut - 2 para koordinata (gornji lijevi vrh i donji desni vrh)
• za krug - koordinate središta i polumjer
• za poligon - po 2 para koordinata za svaku stranicu poligona (između kojih se redom povlače
pravci I link djeluje na unutrašnje područje)

9
<map name=''mapaslike''>
<area shape=''rect'' coords=''x1,y1,x2,y2'' href=''str1.html''>
<area shape=''circle'' coords=''x1,y1,x2,y2'' href=''str2.html''>
<area shape=''polygon'' coords=''x1,y1,x2,y2,...,xn,yn'' href=''str3.html''>
</map>
<img src=''slika.gif'' width=''50'' height=''50'' border=''0'' usemap=''#mapaslike''>

Ishodište koordinatnog sustava je gornji lijevi kut slike. Umjesto x1, y1 i drugih koordinata navodimo
vrijednosti u pikselima za područja za koja vrijede. Mapu koristimo uz neku sliku koja ne mora biti
unutar A taga jer će imati mapu u kojoj su definirani svi linkovi. Atribut usemap unutar img taga
koristimo za navođenje imena mape.

Liste
Liste su poseban tip HTML elemenata, izgled im je sličan listama u Wordu. Svaka lista mora imati
svoj početak i kraj, a unutar tog dijela postavljaju se elementi liste. Postoje dva tipa liste – poredane i
neporedane.

Neporedane liste – svi su članovi označeni na isti način, s točkom. Tag za listu je UL a element liste
označava se s LI. Tri su tipa točaka za označavanje, a navodimo ih u type atributu UL taga: disc,
circle i square. Ukoliko ne navedemo tip, bit će korišten disc.
<ul type=''circle''>
<li>20 dkg brašna
<li>1/2 litre mlijeka
</ul>
Isti izgled liste možemo postići ako umjesto UL taga koristimo MENU ili DIR tag.

Za listu u kojoj ne želimo nikakve oznake uz članove liste koristimo tag DL, a element takve liste
označava se sa DT. Za objašnjenje pojedine stavke u listi, tj, za stvaranje podliste možemo koristiti tag
DD (on se može koristiti i u svim ostalim navedenim listama, poredanim i neporedanim).
<dl>
<dt>I poglavlje <dd>1.1 naslov <dd>1.2 naslov
<dt> II poglavlje <dd>2.1 naslov <dd>2.2 naslov
</dl>

Poredane liste – imaju označen svaki element nekim brojem ili slovom koji se povećava. Tag za
poredanu listu je OL, a element liste označava se također sa LI. Elemente liste možemo pomoću
atributa type označiti običnim brojevima, velikim i malim slovima, te velikim i malim rimskim
brojevima. Pomoću atributa start možemo označiti i od kojeg broja lista počinje (u protivnom počinje
od broja 1 ili od slova A).
<ol> ... </ol> - za klasično brojanje <ol start=''15''> ... </ol> - za brojanje od 15
<ol type=''A''> ... abecedno od A <ol type=''a''> ... abecedno od a
<ol type=''I''> ... rimski brojevi veliki <ol type=''i'' start=''5''> ...rimski v,vi,vii,...

10
Tablice
Za tablice koristimo TABLE tag. Svaka tablica se sastoji od redaka i ćelija. Za retke koristimo TR tab
a za ćelije TD tab. Za naslov tablice koristimo CAPTION tag, on se nalazi unutar TABLE tagaPrimjer
HTML koda za tablicu veličine 3x3:

<table>
<tr> Unutar ovog TABLE taga postoje 3 <tr> taga, tj. 3
<td>1-1</td> retka. Unutar svakog od njih postoje 3 <td> taga, tj. 3
<td>1-2</td> ćelije. Unutar ćelija, tj. unutar <td> tagova postavlja se
<td>1-3</td> sadržaj tih ćelija ( u ovom primjeru sadržaj je samo
</tr> broj retka i stupca, koji se naravno ne moraju navoditi).
<tr>
<td>2-1</td>
<td>2-2</td> Sadržaj tablica se neće prikazati dok se čitava tablica ne
<td>2-3</td> učita, pa je dobro duge tablice podjeliti na dvije ili više
</tr> manjih koje će se prikazivati redom kako se budu
<tr> učitavale.
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

Zaglavlja se zadaju unutar taga TH, uz koji mogu ići atributi:


• align – položaj naslova zaglavlja ("gdje u odnosu na stupac")
• colspan i rowspan - koliko stupaca ili redaka zaglavlje pokriva.
Kod kreiranja tablice, nakon otarajućeg elementa TABLE, dolazi prvo ime tablice, zatim se redom
navedu zaglavlja, kojih mora biti isto toliko koliko i stupaca, a potom se definiraju retci i stupci.

Najčešće korišteni atributi za definiranje same tablice:


• align – poravnatost tablice (˝left˝ , ˝center˝ ili ˝right˝)
• background – naziv datoteke za pozadinu tablice
• bgcolor – pozadinska boja cijele tablice
• border – širina ruba u pikselima, ukoliko ga izostavimo preglednik ubacuje najtanji mogući
• cellpadding – udaljenost od ruba ćelije do njenog sadržaja u pikselima
• cellspacing – razmak između susjednih ćelija u pikselima
• height – visina tablice
• width – širina tablice

Ukoliko posebno ne odredimo, preglednik će veličinu ćelije odrediti prema najvećem sadržaju koji se
nalazi u nekoj od ćelija te tablice. Širina svih ćelija u jednom stupcu i visina svih ćelija u jednom retku
moraju biti jednaki.
Atributi width i height unutar taga table imaju prioritet izvršavanja nad atributima unutar TH i TD
tagova. Položaj tablice u odnosu na retke iz kojih se poziva definiramo align (općeniti položaj, može
poprimiti vrijednosti top, middle, bottom, right, left, textop, baseline, absmiddle i absbottom) i valign
(vertikalni položaj, dodaje se ukoliko se želi zadati i vertikalni i horizontalni položaj, u tom slučaju se
align koristi za horizontalni a valign za vertikalni položaj) atributima.
<table border=˝0˝ cellspacing=˝0˝ cellpadding=˝0˝ width=˝100%˝>
Ova tablica u primjeru neće imati rub, između ćelija neće biti nikakvog prostora, kao ni od ruba ćelije
do njenog sadržaja i zauzimat će čitavu širinu ekrana. Ovakve tablice se najčešće koriste za slaganje
elemenata na stranicu.

Atributi koje najčešće koristimo za sadržaj ćelije:


• align – poravnatost sadržaja ćelije (˝left˝, ˝center˝ ili ˝right˝)

11
• valign – vertikalna poravnatost sadržaja ćelije (˝top˝, ˝middle˝, ˝bottom˝)
• background – naziv datoteke za pozadinu ćelije
• bgcolor – pozadinska boja ćelije (prekrit će pozadinsku boju čitave tablice)
• colspan – broj stupaca kroz koje se ćelija proteže
• rowspan – broj redaka kroz koje se ćelija proteže
• height – visina ćelije
• width – širina ćelije

Dakle, možemo mjenjati npr. pozadinsku boje cijele tablice ili svake ćelije zasebno, boje ruba (rub
možemo potpuno ukloniti), poravnanje tablice ili teksta i sl. Zanimljiv je atribut colspan pomoću kojeg
možete svaku ćeliju protegnuti kroz više drugih ćelija, tj. proširiti (npr sa colspan=˝2˝ ćelija se
protegne i preko susjedne ćelije, tj. one se stope u jednu ćeliju)

<table bgcolor=''red''> Oko plave ćelije postoji crveni rub od


<tr> cijele tablice, zbog razmaka između
<td>Crvena pozadina</td> ćelija tablice. Za uklanjanje tog efekta
<td bgcolor=''blue''>Plava pozadina</td> dodajemo atribut cellspacing s
</tr> vrijednošću 0.
</table>

Svakoj ćeliji možemo definirati minimalnu visinu i širinu. Minimalnu, jer ako u ćeliju širine 100
piksela postavimo sliku širine 200 piksela, tada će se ćelija povećati na širinu dovoljnu da obuhvati
cijelu sliku.

Ukoliko stvaramo stranicu od dva dijela (lijevi za <table width=''100%'' border=''0''>


linkove a desni za tekst), tada definiramo širinu <tr>
lijevog stupca a desni ostavljamo nedefiniran. <td width=''180''>Linkovi...</td>
Tablica će zauzeti širinu cijelog ekrana na kojoj <td width=''*''>Tekst</td>
god razlučivosti bude prikazana. Lijevi stupac će </tr>
zauzeti 180 piksela, a desni ostatak ekrana (to </table>
dobijemo ako za širinu desnog stupca stavimo *)

Sadržaj unutar ćelije možemo poravnati atributima valign i align. Ukoliko to ne napravimo sadržaj će
se poravnati vertikalno po sredini i horizontalno nalijevo.
<td valign=’’top’’ align=’’center’’> … </td>
Ovdje će tekst biti prikazan na vrhu ćelije, u sredini.

<table border=”1” width=”100%” height=”100%”>


1-1 1-3 <tr>
<td align=”center” colspan=”2”>1-1</td>
<td align=”center”>1-3</td>
2-1 2-2 </tr>
2-3 <tr>
3-1 3-2 <td align=”center”>2-1</td>
<td align=”center”>2-2</td>
<td align=”center” rowspan=”2”>2-3</td>
Ako atribut colspan postavimo na 2 za ćeliju </tr>
1-1, ona će se protezati preko dva stupca pa <tr>
ćeliju 1-2 ne trebamo definirati. Za ćeliju 2-3 <td align=”center”>3-1</td>
postavimo atribut rowspan na 2, pa će se ta <td align=”center”>3-2</td>
ćelija protezati i preko ćelije 3-3, koju više </tr>
ne treba definirati. Sadržaj svih ćelija </table>
poravnat je po sredini

12
Formulari
Formulari su dijelovi HTML dokumenta kojim prikupljamo različite podatke od korisnika, tj. služe za
unos podataka na stranicu. Sadržaj formulara šalje se nekoj serverskoj skripti na obradu. Sva polja
formulara navode se unutar FORM taga koji ima dva atributa:

• method – u njega upisujemo korištenu metodu slanja. Postoje dvije metode:


POST – kada se na serveru obradom mijenjaju podaci
GET – kada se podaci ne mijenjaju
• action – upisujemo skriptu na koju se sadržaj formulara šalje (ili e-mail adresa na koju se
podaci upućuju – mailto:adresa)

<form method=“post“ action=“serverska_skripta.asp“>


<!—sadržaj i polja formulara -->
</form>

Svaki element formulara treba imati svoje ime definirano s name atributom. Bez tog imena sadržaj se
neće poslati, jer se svaka vrijednost upisana u formular šalje uparena s nazivom polja u koje je
upisana. Elementi formulara:

• polje za unos jednog reda teksta – INPUT tag tipa text, s atributima
− size – za definiranje veličine, tj. broja vidljivih upisanih znakova
− maxlenght – za definiranje maksimalnog broja znakova koje korisnik može upisati
− value – za definiranje što će u polje biti upisano kad se stranica učita
<input type=“text“ size=50“ name=“prazno“><br> - prazno tekstualno polje
<input type=“text“ size=50“ maxlenght=“100“ value=“Ovdje možete upisati maksimalno 100
znakova.“ name=“sadržaj“> - tekstualno polje sa sadržajem

• polje za unos passworda – u tom se polju umjesto upisanih znakova trebaju prikazivati
zvjezdice. INPUT tag tipa password, svi atributi su isti kao i u INPUT tagu tipa „text“
<input type=“password“ size=“16“ maxlenght=“50“> - polje za unos passworda

• radio dugmadi – izbor samo jedne od nekoliko ponuđenih opcija. Koristi se INPUT tag tipa
radio. Atribut name za svako opcijsko dugme koje pripada istoj skupini mora biti isto kako
bi se izbjegla mogućnost izbora više odgovora, tj. korisnik može odabrati samo jednog od
njih
<input type=“radio“ name=“izbor“ value=“ŠI“ checked>Šibenik
<input type=“radio“ name=“izbor“ value=“ST“>Split
Ovdje je po defaultu odabran prvi, jer ima u svom tagu napisano checked. Klikom na drugi
prvi će se isključiti.

• checkbox – radi slično kao i radio dugme, pomoću INPUT taga tipa checkbox, međutim
svaki checkbox stoji sam za sebe, neovisan od drugih elemenata. Ima dva moguća stanja,
uključen i isključen. Atribut name za svako polje za potvrdu mora biti različito jer se šalje kao
vrijednost ako je dugme odabrano.
<input type=“checkbox“ name=“Šibenik“>Šibenik
<input type=“checkbox“ name=“Split“ checked>Split

• skriveno polje – polje koje posjetitelj ne vidi i služi samo da se prenesu neki podaci na drugu
stranicu bez posjetiteljeva znanja. Koristi se INPUT tag tipa hidden.
<input type=“hidden“ name=“skriveni“ value=“Posjetitelj ne zna da će se i ovo poslati kao
vrijednost formulara“>

13
• dugmad za slanje formulara – dva su najčešća dugmeta na dnu svakog formulara:
− submit – sadržaj formulara šalje na skriptu upisanu u action atributu FORM taga
− reset – sadržaj čitavog formulara briše i postavlja na početne vrijednosti
Njihovi name atributi nisu obavezni, jer oni ne prenose nikakve podatke već isključivo
pokreću neku akciju.
<input type=“submit“ name=“slanje“ value=“Pošalji!“>
<input type=“reset“ name=“brisi“ value=“Odustani!“>

• polje za unos više redaka teksta – TEXTAREA tag (mora imati i završni), s atributima:
− rows – broj redaka u polju
− cols – broj znakova koji stane u svaki redak
Između početnog i završnog taga možemo upisati tekst koji želimo da bude prikazan.
<textarea rows=“8“ cols=“50“ name“veliki“></textarea>
<textarea rows=“8“ cols=“50“ name“veliki_2“>Ovdje već nešto piše</textarea>

• padajući izbornik – padajuća lista unaprijed definiranih opcija, kreiramo je pomoću SELECT
taga. Atributom size možemo definirati koliko će se opcija vidjeti bez otvaranja liste. Opcije u
listi definiramo pomoću OPTION taga (završni tag se može staviti ali nije obavezan) koji
može i ne mora imati value atribut. Ako ne navedemo value atribut za neku opciju tada će u
slučaju odabira te opcije biti poslan njen tekst. Služi za izbor samo jedne mogućnosti, a
ukoliko dodamo atribut multiple nudi izbor jedne ili više mogućnosti.
<select name=“izbornik“ multiple>
<option value=“ZG“ selected>Zagreb
<option value=“ST“>Split
<option>Rijeka
</select>

Primjer jednog formulara


sa svim ranije navedenim opcijama:

14
HTML kod za izradu prikazanog formulara:

<html>

<head>
<title>Formular</title>
</head>

<body>
<font size=5 face="Verdana" color="green"><b>FORMULAR:</b></font>
<hr color="green">

<form method="post">
Ime i prezime:
<br><input type="text" size="40" name="polje za tekst">
<br>Adresa:
<br><textarea rows="4" cols="30" name="veliko polje"></textarea>

<p>Zanimanje:
<select name="zanimanje">
<option>programer
<option>električar
<option>poljoprivrednik
<option>obrtnik
<option>teški neradnik
</select>

<p>Imate li vozačku dozvolu:


<input type="radio" name="izbor">Da
<input type="radio" name="izbor" checked>Ne

<p>Koji od navedenih gradova želite posjetiti:


<br><input type="checkbox" name="Prag">Prag
<br><input type="checkbox" name="Barcelona">Barcelona
<br><input type="checkbox" name="Atena">Atena
<br><input type="checkbox" name="Rim">Rim

<br>Upišite šifru:
<input type="password" size="20" maxlenght="30">
<br><hr color="green">
<br><input type="submit" name="slanje" value="Pošalji!">
<input type="reset" name="brisi" value="Odustani!">
</form>

</body>
</html>

Unutar taga FORM nedostaje atribut action koji upućuje sadržaj formulara nekoj serverskoj skripti na
obradu ili ga proslijeđuje na određenu e-mail adresu.

15
Frameovi
Frameovi (tj. okviri) služe za podjelu prozora preglednika na više dijelova. U svakom od tih dijelova
prikazuje se druga HTML stranica po kojoj se može neovisno surfati. U lijevom frameu možemo
učitati stranicu s linkovima na sve ostale stranice našeg weba, a desni frame predvidjeti za sadržaj. Svi
linkovi s lijeve strane mogu se otvarati u desnom frameu, pa se stranica s linkovima ne treba ponovno
učitavati, već može cijelo vrijeme biti učitana u lijevom frameu.

Na glavnoj stranici web-stranica definira se frameset – struktura frameova (dokument koji nam služi
za definiranje samih okvira, nije standardan HTML dokument jer ne sadrži sve njegove djelove – ne
posjeduje BODY tag, već samo poziva druge dokumente). To se najčešće obavlja na index.html
stranici ili nekoj drugoj koja se prva otvara kada posjetitelj dođe na web-stranice. Stranica u kojoj je
definiran frameset ne smije imati BODY tag, jer se sav njen sadržaj nalazi u frameovima (umjesto
BODY taga stavljamo FRAMESET tag). No, toj glavnoj stranici moramo definirati TITLE, jer će
samo nju preglednik učitati u glavni prozor, a ostale stranice samo u frameove, pa upisivanje naslova
na njima neće imati nikakav učinak.

Primjer definiranja frameseta za podjelu stranice na dva dijela – lijevi i desni:

<html>
<head>
<title>Moj site</title>
</head>
<frameset cols=“180,*“>
<frame name=“lijevi“ src=“linkovi.html“ scrolling=“no“ frameborder=“0“ noresize>
<frame name=“desni“ src=“pocetak.html“ scrolling=“auto“ frameborder=“0“ noresize>
</frameset>
</html>

Kada preglednik učita takav dokument on podjeli prozor prema zadanim vrijednostima i u svaki od
"novih prozora" učita dokumente koji su zadani u atributu src taga frame (ovim tagom određujemo
svaki okvir posebno). Frameove smo podjelili po stupcima atributom cols, prvi je širok 180 piksela
(širinu možemo definirati i u postotcima), a drugi zauzima preostalu širinu ekrana (*). Frameove
možemo podijeliti i po recima koristeći atribut rows umjesto cols.

Atributi koje koristimo za definiranje framea:


• name – definiramo ime framea
• cols – za podjelu frameova po stupcima
• rows – za podjelu frameova po retcima
• src – za navođenje stranice koja će se prva učitati u frame
• frameborder – za širinu ruba između frameova (u pikselima), koristimo ga ako želimo na očit
način odvojiti sadržaj dviju stranica, ako ga ne koristimo ostavljamo dojam povezane cjeline
• bordercolor – određuje boju ruba između okvira
• noresize – onemogućava promjenu veličine frameova (u gornjem primjeru širine), ukoliko ga
ne upotrijebimo posjetitelj bi pri prelasku miša preko granice frameova dobio tzv. resize
pokazivač i mogao bi izmijeniti odnose širina.
• scrolling – njime se određuje da li će se prikazati pomične trake, tj. scrollbari u frameu; može
imati vrijednost ''yes'', ''no'' i ''auto''. Vrijednost ''auto'' osigurava da će scrollbari biti prikazani
samo ako to bude potrebno.

Pri radu s frameovima moramo obratiti posebnu pažnju linkovima. Ukoliko kliknemo na običan link u
nekom frameu on će biti otvoren u istom frameu. Želimo li učitati link u neki drugi frame, za njegov
target atribut upisujemo ime tog framea. Tako bi npr. linkovi u lijevom frameu bili oblika:
<a href=“stranica.html“ target=“desni“>Link</a>

16
Kao target upisan je naziv desnog framea – ''desni''. Želimo li nešto iz desnog framea učitati u lijevi
upisat ćemo target=“lijevi“. Upišemo li za target vrijednost ''_parent'', link će biti učitan u glavnu
stranicu, tj. u onu u kojoj je definiran frameset. Tako će se izgubiti postojeća struktura frameova i nova
stranica će biti glavna i jedina u prozoru preglednika.

Slijedeći predlošci nam pokazuju mogući raspored okvira na jednoj web stranici:

Predložak 1 Predložak 2 Predložak 3

Predložak 4 Predložak 5 Predložak 6

Posebna vrsta frameova su iframeovi. Koncept IFRAME taga je potpuno drugačiji. Koristimo ga
ukoliko unutar svoje obične stranice želimo prikazati neku drugu na određenoj površini. Postavljamo
ga u HTML kod na mjesto na koje želimo, odredimo mu visinu, širinu i naziv, te koja će se stranica u
njega prva učitati. Kasnije s njim možemo raditi kao s običnim frameom. Naša stranica izgleda
potpuno normalno, a u jednom njenom dijelu, potpuno neovisno od okolnog sadržaja, prikazuje se
druga stranica.

<iframe src=“primjer.html“ width=“200“ height=“200“ name=“prozor“></iframe>

Ovako možemo prikazati stranicu primjer.html unutar iframea veličine 200*200 piksela. Želimo li u
njega učitati neku drugu stranicu, koristimo name atribut, kao i kod običnih frameova. Možemo
koristiti i druge atribute frame taga, poput scrolling ili frameborder.

META tagovi
META tagovi smještaju se unutar HEAD taga, tj. u zaglavlju stranice, jer je njihova svrha da opisuju
samu stranicu. Njegovi atributi su:
• name – za upis o kojem se META tagu radi
• content – vrijednost META taga

META tagovi:
• description – u njega upisujemo čime se naša stranica bavi (kratak i sveobuhvatan opis)
<meta name=“DESCRIPTION“ content=“Osobna stranica s mnoštvom slika i viceva“>
• keywords – za navođenje ključnih riječi vezanih uz tematiku stranica, možemo ih odvajati
zarezom ili samo razmakom
<meta name=“KEYWORDS“ content=“slike igre tekstovi vicevi zanimljivosti“>
• author – služi za potpis autora, nema nikakav učinak na prikaz stranice
<meta name=“AUTHOR“ content=“Ante Antić“>
• refresh – za preusmjeravanje na drugu stranicu, korisno je ako promjenimo lokaciju web
stranica, tada na staroj lokaciji postavljamo redirekciju koja vodi na nove web-stranice,
možemo definirati i vrijeme redirekcije
<meta http-equiv=“REFRESH“ content=“broj_sekunda; url=adresa“>
npr. ako posjetitelja želimo nakon 10 sekundi preusmjeriti na www.tssibenik.hr stranicu:
<meta http-equiv=“REFRESH“ content=“10; url=http://www.tssibenik.hr“>

17

You might also like