Instrukcije IWA

https://www.facebook.com/InstrukcijeIwa

SVEUILITE U ZAGREBU
FAKULTET ORGANIZACIJE I INFORMATIKE
VARADIN

Igor Mirkovi

HTML OSNOVE I PRIMJERI TAGOVA

Varadin, 2012.

Instrukcije IWA
https://www.facebook.com/InstrukcijeIwa

Sadraj
1.

UVOD ................................................................................................................................................................. 1

1.

OSNOVE HTML JEZIKA ............................................................................................................................... 2

2.

STRUKTURA HTML DOKUMENTA ........................................................................................................... 4

2.1.
2.2.
2.3.
2.4.

META PODACI............................................................................................................................................... 5
VEZA NA VANJSKI DOKUMENT...................................................................................................................... 6
SKRIPTE........................................................................................................................................................ 7
GLAVNI HTML ELEMENTI ........................................................................................................................... 8

3.

LISTE ................................................................................................................................................................. 9

4.

TABLICE ......................................................................................................................................................... 10

5.

SLIKE ............................................................................................................................................................... 12

6.

POVEZNICE (LINKOVI) .............................................................................................................................. 13

7.

OKVIRI ............................................................................................................................................................ 13

8.

FORME ............................................................................................................................................................ 15

9.

FORMATIRANJE .......................................................................................................................................... 18

10.

SEKCIJE .......................................................................................................................................................... 19

11.

ZAKLJUAK .................................................................................................................................................. 20

LITERATURA .......................................................................................................................................................... 20

1. Uvod
Hypertext Markup Language ili skraeno HTML je jezik koji uz pomo vrlo jednostavnih
naredbi opisuje grafiki i tekstualni izgled dokumenta. [zpr.fer.hr, 2011.]
Nakon poetne definicije HTML-a u prvom dijelu seminarskog rada emo se osvrnuti na
povijesni razvoj samog jezika te emo nastojati predstaviti sve bitne datume i dogaaje vezane
uz te datume koji su obiljeili razvoj HTML-a.
U narednom poglavlju emo predstaviti samu strukturu HTML jezika, dakle meta podatke, veze
na vanjske dokumente, skripte te glavne HTML elemente nakon ega emo detaljno razraditi
razliite primjere tagova.
Zapoet emo s listama, zatim s tagovima vezanim za tablice, za slike, poveznice, okvire,
mogue forme i naine formatiranja te emo se u posljednjem dijelu seminara osvrnuti na
sekcije.

1. Osnove HTML jezika

Prije predstavljanja HTML tagova, predstavit emo osnove HTML jezika.
HTML jezik je jezik oznaka (predstavljaju strukturne, prezentacijske i semantike informacije)
koji podrava SGML (Standard Generalized Markup Language), a sastoji se od hiperteksthipermedija osobina (tekst, slika, zvuk,film i dr. koji se mogu meusobno povezati ime se dobije
mrea/pauina informacija). [Kermek, 2011.]

Da bismo mogli koristiti HTML jezik moramo imati :

HTML dokument (Notepad ++ INSTALIRATI).

HTML preglednik (Imati neki preglednik :D )

Web posluitelj (Wamp ili Xamp INSTALIRATI)

HTML dokument je tekstualna datoteka (ASCII i sl. formati) koju moemo kreirati sami
pomou nekog od alata. Alati za izradu HTML stranica mogu biti skupi komercijalni softveri, ali
postoje i besplatne inaice. Jedan od najjednostavnijih alata za izradu HTML stranica je
Notepad++ u kojem se mogu izraditi i najsloenije stranice (Notepad ++ INSTALIRATI).
HTLM dokument se sastoji od podatka (sadraj dokumenta) i oznaka HTML jezika koje emo
opisati u nastavku ovog rada.
HTML preglednici su standardni preglednici s kojima svakodnevno pregledavamo sadraje na
internetu (Internet Explorer, Mozilla, Google chrome). To su programi koji poznaju sintaksu
HTML jezika i na temelju prepoznatih elemenata iz HTML dokumenta prikazuju na ekranu
njima pripadajue objekte.
Web posluitelj predstavlja posluitelj na kojem e biti pohranjen na HTML dokument te
preko kojeg korisnik moe pristupati istom. (Wamp ili Xamp INSTALIRATI)

Element HTML jezika obino poinje s <element>, a zavrava s </element>. Upisom odreenih
atributa na mjesto element iz primjera kreiraju se elementi internet stranice te se takva forma
naziva tag. Popis tagova dat emo u nastavku ovog rada.
U HTML-u kod nekih elemenata nije potrebna oznaka kraja jer oznake poetka drugih elemenata
pretpostavljaju kraj prethodnih. XHTML je stroi te zahjetva oznaku kraja i potivanje
redoslijeda otvaranja i zatvaranja po principu LIFO (Last in First out).
Sadraj dokumenta moemo podijeliti na nekoliko vrsta:

prema vidljivosti u pregledniku:

o vidljivi (naslov, tekst i sl.)
o nevidljivi (meta upute, upute dizajna, dinamiki dijelovi programski kod i sl.)

vrste sadraja dokumenta prema ukljuivanju:

o ukljueni u dokumentu (naslov, tekst i sl.)
o sadrani u vanjskim datotekama/dokumentima (slike, upute dizajna, dinamiki
dijelovi programski kod i sl.)

vrste sadraja dokumenta:

o tekst
o slika
o veza
o obrasci

Slika 1 Primjer Web stranice s pripadnim elementima1

2. Struktura HTML dokumenta

Svaki HTML dokument je odreen svojom oznakom <html>...</html>.
Oznaka HTML dokumenta moe sadravati i dodatne atribute:

jezik lang= {en |en-US | fr | he |es | ja,}

smjer prikaza teksta dir= LTR | RTL.

Primjer:
<html lang="en" dir="RTL"></html>

Unutar oznaka <html>...</html> HTML dokument podijeljen je u 2 sekcije:

sekcija zaglavlja <head>...</head>

sekcija tijela <body>...</body>.

HTML jezik, Nastavni materijali iz kolegija Web dizajn i programiranje

Primjer:
<html>
<head>...</head>
<body>...</body>
</html>
Zaglavlje HTML dokumenta najvie ima ulogu kod pretraivaca (search engine) koji mogu
dobiti temeljne informacije o sadraju dokumenta i dr.
Zaglavlje HTML dokumenta moe sadravati elemente:

naslov <title>

meta podaci <meta>

veza <link>

skripte <script>

stil <style>

2.1.

Meta podaci

Meta podaci se najee koriste da bismo naveli vane podatke o stranici koji se nee prikazivati
na stranici. Glavna zadaa meta podataka je pruanje a relevantnih podataka trailicam za lake
indeksiranje te pruanje informacija o kodiranju, osvjeavanju stranice i sl.

Meta podaci mogu biti za:

opis atributa (autor, kljucne rijeci, i sl) name= content=

direktive

klijentu

sadraju

(obnavljanje,

content=

skup

znakova)

http-equiv=

Primjer:
<html>
<head>
<title>ovo je primjer</title>
<meta name="author" content=Igor i Maja">
<meta name="copyright" content="&copy; Igor i Maja">
<meta name="date" content="2011-10-17 22:03:17">
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta http-equiv=refresh" content=5;url=http://www.foi.hr/">
<meta http-equiv="expires" content="fri, 25 oct 2022 23:59:59 gmt">
</head>
<body>...</body>
</html>
Dananja preporuka kodne stranica koja omoguuje prikaz hrvatskih znakova je:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Alternativna kodna stranica za hrvatske znakove:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

2.2.

Veza na vanjski dokument

Vezom na vanjski dokument ostvaruje se njegovo ukljuivanje u nain prikaza dokumenta.

Najee se ukljuuju vanjski dokumenti za stiliziranje (.css).

Primjer:
<link rel=stylesheet" type=text/css href=format.css>
Stilskim uputama odreuju se nain prikaza cijelog dokumenta i/ili nekog njegovog odreenog
dijela sadraja dokumenta. Svaki ispravan HTML dokument koji je napisan prema web
standardima trebao bi imati odvojenu sadraj (strukturu) od prezentacije (stila). Ukoliko se eli
stvoriti ispravno kreiran dokument, prvo bi trebalo napisati HTML kod (naslovi, paragrafi, slike,
odjeljci, forme i sl...), a zatim se taj dokument treba povezati s CSS dokumentom u kojem su
definirani stilovi.

Postoji nekoliko bitnih razloga zato je dobro odvajati strukturu od stila :

1. pregledniji dokument
2. jednostavnije, bre i sigurnije odravanje HTML i CSS dokumenta
3. jednostavnija prenamjena web dokumenta za razliite tipove preglednika odnosno ureaja
(npr. handheld imobilni ureaji, audio preglednici, printeri, TV i sl.)
Iz tih razloga emo se u ovom radu baviti elementima kojima se opisuje sadraj te neemo
posebnu pozornost pridavati atributima koji definiraju odreene stilske osobine elemenata. No,
vrijedno je spomenuti da se kroz HTML jezik preko dodavanja atributa mogu definirati i stilske
upute kao to su: pozadina (background=uri), boja pozadine (bgcolor=color), boja teksta
(text=color), boja veze (link=color), boja koritene veze (vlink=color), boja izabrane veze
(alink=color).

Primjer
<body bgcolor="#0000ff" text="#ffffff">...</body>
<body bgcolor=blue text=white>...</body>

2.3.

Skripte

U zaglavlju dokumenta moemo definirati i razliite skripte koje se izvravaju na klijentskoj

strani. Obino su te skripte napisane skriptnim jezikom kao to je Java Script. Java Script skripte
moemo prepoznati po ekstenziji .js.

Tablica 1 Popis tagova za dodavanje skripti

Tagovi za

Opis

dodavanje skripti
<script>

Definira skriptu na klijentskoj strani (client-side script) koja se ukljuuje u

dokument.

<noscript>

Definira alternativni sadraja ukoliko korisnik ne podrava skripte na

klijentskoj strani.

2.4.

Glavni HTML elementi

Glavni HTML elementi u sekciji tijela su prikazani u tablici 2.

Tablica 2 Prikaz osnovnih tagova i njihov opis

Osnovne oznake (tagovi)

Opis

elemenata
<!DOCTYPE>

Definira tip dokumenta.

<html>

Definira poetak HTML dokumenta.

<body>

Definira tijelo dokumenta.

<h1> to <h6>

Definira HTML naslove (headings).

<p>

Definira paragraf (odjeljak).

<br />

Tag omoguuje prelazak u novi red (ekvivlanet new line).

<hr />

Definira horizontalnu liniju.

<!--...-->

Tag koji omoguuje kometiranje koda stranice, tekst koji se

upisuje unutar taga <!--...--> nee biti prikazan na pregledniku
stranice tj. vidljiv na ekranu.

Uoavamo da je tag <!DOCTYPE> tag pomou kojeg se definira tip dokumenta. Na taj nain
govorimo raunalu preko kojeg standarda je napisan HTML dokument. Postoji nekoliko tipova
dokumenta prema W3C koji imaju jasno definirana pravila. To su HTML 4.01 Strict, HTML
4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML
1.0 Frameset te XHTML 1.1.

Primjer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>
Pomou navedenog primjera definirali smo da e se u nastavku dokumenta koristit XHTML 1.0
Stirct standard i pridravati se svih pravila koji su odreeni tim standardom. Pomou tagova
<h1>, <h2>, <h3>,... , <h6> definiramo zaglavlja koja se razlikuju po veliini fonta.

U osnovne tagove spada i tag <p> koji slui za kreiranje paragrafa (odjeljaka) u tekstu. Ukoliko
elimo kreirati prekid reda ili prelazak u novi red koristimo tag <br>.
Razlog tome je to preglednici ne reagiraju na klasian prelazak u novi red (tipkom enter)
definiranom u dokumentu. Da bismo kreirali horizontalnu liniju koristimo tag <hr> pomou
kojeg nam se na ekranu prikazuje horizontalna linija.

3. Liste
Osim osnovnih tagova u HTML-u se vrlo esto koriste i liste. Mogue je definirati tri tipa listi.
To su:

nesreena lista

sreena lista

definicijska lista

Obiljeja i primjere sreene liste prikazat emo u tablici 5, dok emo obiljeja i primjer
nesreene liste prikazati u tablici 4. U tablici 6 moemo uoiti primjer definicijske liste koja se u
praksi ne koristi toliko esto.
Tablica 3 Prikaz tagova za kreiranje razliitih tipova listi i njihov opis
Oznake za definiranje elemenata liste

Opis

<ul>

Definira neureenu listu.

<ol>

Definira ureenu listu.

<li>

Definira stavke liste.

<dl>

Definira definicijsku listu.

<dt>

Definira pojam(stavku) definicijske liste.

<dd>

Definira opis pojma u definicijskoj listi.

Tablica 4 Primjer nesreene liste

HTLM kod

Rezultat

<ul>
<li>Coffee</li>

Coffee

<li>Tea</li>

Tea

<li>Milk</li>

Milk

</ul>

Tablica 5 Primjer sreene liste

HTML kod

Rezultat

<ol>
<li>Coffee</li>

1.

Coffee

<li>Tea</li>

2.

Tea

<li>Milk</li>

3.

Milk

</ol

Tablica 6 Primjer definicijske liste

HTLM kod

Rezultat

<dl>

Coffee

<dt>Coffee</dt>

- black hot drink

<dd>- black hot drink</dd>

Milk

<dt>Milk</dt>

- white cold drink

<dd>- white cold drink</dd>

</dl>

4. Tablice
Da bismo prikazali odreene rezultate vrlo esto se koriste tablice. Stoga HTML jezik
omoguuje niz tagova za kreiranje tablica. Tablice mobu biti vrlo jednostavne, ali mogue je
koritenjem razliitih tagova dobiti i vrlo lijepe i efektne tablice. U tablici 7 je naveden popis
svih tagova povezanih s kreiranjem tablica.

Tablica 7 Popis tagova povezanih s kreiranjem tablica

Oznake za definiranje

Opis

elemenata tablice
<table>

Definira tablicu

<caption>

Definira naslov tablice

<th>

Definira red u zaglavlju tablice

<tr>

Definira red u tablici

10

<td>

Definira stupac u tablici

<thead>

Grupira sadraj zaglavlja

<tbody>

Grupira sadraj tijela tablice

<tfoot>

Grupira sadraj podnoja tablice

<col />

Definira vrijednosti atributa za jedan ili vie stupaca u tablici

<colgroup>

Definira grupu stupaca u tablici za formatiranje

Tagovi <thead>, <tbody>,<tfoot> slue za grupiranje dijelova tablice i korisni su u kombinaciji

za vizualno odjeljivanje pojedinih dijelova tablice kao to su zaglavlje, tijelo i podnoje.
Slinu ulogu imaju i tagovi <col> i <colgrup> koji slue za grupiranje jednog ili vie stupaca i na
taj nain omoguuju razliita stiliziranja unutar tablice.

Tablica 8 Primjer definiranja reda u tablici

HTLM kod

Rezultat

<table border="1">

Naslov tablice

<caption>Naslov tablice</caption>

Prvi red Drugi red

<tr>
<th> Prvi red

</th>

<th> Drugi red </th>

</tr>
<tr>
<td> 1.

</td>

<td> Jedan </td>

</tr>
<tr>
<td> 2.

</td>

<td> Dva </td>

</tr>
</table>

11

1.

Jedan

2.

Dva

5. Slike
Slike su neizostavan dio veine Internet stranica tako da moraju postojati odgovarajui tagovi.
Tagovi koji omoguavaju dodavanje slika na stranicu i kreiranje posebnih podruja na mapi
omoguavaju tagovi navedeni u tablici 9.
Tablica 9 Tagovi koji omoguavaju dodavanje slika na stranicu

Oznake za definiranje slike

Opis

<img />

Definira sliku

<map>

Definira mapu slike

<area />

Definira podruje unutar mape slike

Tablica 10 Primjer HTML koda koji prikazuje odreenu sliku na ekranu

HTLM kod

Rezultat

<img src="planets.gif" width="145" height="126" alt="Planets"

usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

HTML kod naveden u tablici 10 prikazuje na ekranu preglednika sliku planets.gif. Ukoliko
elimo prikazati samo sliku dovoljan nam je HTML kod <img src="planets.gif" alt="Planets" />
te e se slika prikazati u svojoj izvornoj veliini. No, u tablici 10 je naveden HTML kod koji
definira mapu na slici. Unutar mape su definirana tri podruja unutar mape. Podrujima su
odreeni oblici i dane koordinate unutar slike. Korisniku se klikom na odreeno podruje
omoguuju razliite radnje. U navedenom primjeru je omoguen prelazak na novi HTML
dokument (npr href="sun.htm").

12

x1,y1,x2,y2 Specifies the coordinates of the left, top, right, bottom corner of the rectangle
(shape="rect")
x,y,radius

Specifies the coordinates of the circle center and the radius (shape="circle")

6. Poveznice (Linkovi)
Poveznice su vrlo vaan dio svakog hipertekst medija. Kao to smo mogli uoiti poveznice ne
moraju biti samo u tekstu ve mogu biti i na pojedenim slikama. Kako bi napravili poveznicu na
drugi dokument koristimo tag <a>. U tablici 11 moemo pronai primjer taga <a> u obliku u
kojem se najee koristi.

Tablica 11 Primjer taga <a> u obliku koji se ne koristi

Htlm kod

Rezultat

<a href="http://www.w3schools.com">Visit

Visit W3Schools.com!

W3Schools.com!</a>
Tag <a> ima naveden href=http://www.w3schools.com to znai da e korisnik klikom na tekst
koji se nalazi naveden izmeu <a> i </a> biti preusmjeren na neki drugi dokument. U
navedenom primjeru korisnik e biti preusmjeren na stranicu http://www.w3schools.com.

7. Okviri

13

Okviri omoguavaju da se pojedini sadraji prikazuju iz razliitih HTML dokumenata. Pomou

taga <frameset> definira se set prozora, tj. broj prozora, njihov razmjetaj na ekranu i sl. Sadraj
svakog okvira moe biti pohranjen u razliitim dokumentima te je to jedan od glavnih razloga za
koritenje okvira na HTML stranicama.
Tablica 12 Oznake za definiranje okvira

Oznake za definiranje

Opis

okvira
<frameset>

Definira set prozora (okvira).

<frame />

Definira prozor (okvir) u setu okvira (engl. frameset).

<noframes>

Definira alternativni sadraj ukoliko za korisnike iji preglednici ne

podravaju vie okvira.

<iframe>

Definira okvir na istoj razini kao i stranica (tzv. stranica unutar

strance).

Moemo uoiti iz tablice 12 da je u HTML jeziku definiran i tag <noframes> koji prikazuje
odreeni sadraj ukoliko preglednik ne podrava okvire. Da bi preglednici podravali okvire
trebali bi biti etvrte generacije (npr. verzije Internet Explorera vee od 6.0 ili Mozilla Firefox
verzije vee od 2.0).

Tablica 13 Primjer HTML koda i njegov rezultat na ekranu

HTLM kod

Rezultat

<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes>
Naalost va preglednik ne podrava okvire.
</noframes>
</frameset>
HTML kod naveden u tablici 13 prikazuje primjenu okvira u praksi. Pomou <frameset
cols="25%,50%,25%"> definirali smo set okvira. U dotinom sluaju su to tri okvira ije su

14

dimenzije rasporeene u omjeru 25%,50%,25% to znai da prvi okvir zauzima 25% ekrana,
drugi okvir 50% ekrana te trei okvir 25% ekrana. Nakon toga je pomou tagova <frame
src="frame_a.htm" />, <frame src="frame_c.htm" /> i <frame src="frame_c.htm" /> definirano
da se u prvom okviru prikazuje sadraj iz dokumenta frame_a.htm, u drugom frame_b.htm, a u
treem frame_a.htm. Moemo uoiti da e se u sluaju nemogunosti prikaza okvira na ekran
ispisati poruka Naalost va preglednik ne podrava okvire.

8. Forme
Svaki unos podataka od strane korisnika realizira se pomou koncepta forme i pripadnih
elemenata forme. U tablici 14 su navedeni tagovi koji omoguavaju korisniku unos podataka, ili
odabir neke od ponuenih opcija.
Tablica 14 Oznake za definiranje okvira

Oznake za

Opis

definiranje formi
<form>

Definira HTLM formu za unos korisnikih podataka.

<input />

Tag omoguuje unos teksta.

<textarea>

Tag omoguuje unos vielinijskog teksta.

<button>

Tag kreira gumb (engl. push button).

<select>

Definira padajui izbornik (engl. drop-down list) s moguim izborima.

<optgroup>

Definira grupu unutar padajueg izbornika.

<option>

Definira opciju u padajuem izborniku.

<label>

Definira oznaku elementa za unos podataka.

<fieldset>

Definira obrub oko elemenata forme.

<legend>

Definira ime obruba oko elemenata forme.

Koncept forme u HTML-u slui za unos razliitih podataka. Svaka forma obino ima gumb
(engl. button) za prihvaanje unosa podataka kroz zadanu formu. Pritiskom da gumb za
prihvaanje aktiviramo odreenu akciju. Akcija se definira unutar taga <form> koji proirujemo
s odreenom akcijom. Pod akcijom se najee smatra pozivanje druge skripte koja obrauje
podatke unesene u formu kao to moemo uoiti u tablici 15 (skripta form_action.php).

15

Tablica 15 Prikaz forme

HTLM kod

Rezultat

<form action="form_action.php" >

Ime:

Ime: <input type="text" name="Ime" value="Joa" />

Joa

Poalji

<input type="submit" value="Poalji" />

</form>
Unutar forme moemo definirati razliite opcije za unos podataka, primjerice za odabir iz
padajueg izbornika te razliite check liste kao to moemo uoiti iz tablice 16. Izbor opcija je
dosta velik te u praksi obino kombinirano veinu opcija navedenih u tablici 16 kako bismo
dobili eljene podatke od korisnika.
Tablica 16 Primjeri razliitih opcija

HTLM kod

Rezultat

.
Ovdje se unose podaci

Ovdje se unose podaci

<input type="text" name="Unos_podataka_1" />

.
.

Podruje za unos vielinijskog teksta

Podruje za unos vielinijskog teksta

<textarea rows="5" cols="20">
Unesite tekst
</textarea>
.
.

Primjer padajuceg izbornika

Primjer padajueg izbornika

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>

16

</select>
.
.
Primjer padajueg izbornika sa kategorijama

Primjer padajueg izbornika sa

<select>

kategorijama

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
.
.
Izaberite spol:
<label for="male">Muki</label>

Izaberite spol: Muki

<input type="radio" name="sex" id="muski" />

<label for="female">enski</label>
<input type="radio" name="sex" id="zenski" />
.
.
<fieldset>
<legend>Osobni podaci:</legend>
Ime: <input type="text"/><br />
Email: <input type="text" size="30" /><br />
</fieldset>
.

17

enski

9. Formatiranje
Ukoliko elimo dodati odreene afekte na neki element moemo koristiti neki od tagova za
formatiranje. Popis svih tagova koji se mogu koristiti za formatiranje je stvarno velik. Popis
tagova naveden je i objanjen u tablici 17.

Tablica 17 Popis tagova za formatiranje

Tagovi za

Opis

formatiranje
<acronym>

Definira kraticu.

<address>

Definira kontaktne informacije o autoru ili vlasniku dokumenta.

<b>

Tag koji omoguuje kreiranje podebljanog teksta.

<bdo>

Definira smjer teksta (s lijeva na desno ili s desno na lijevo).

<big>

Definira poveani tekst.

<blockquote>

Definira dugi citat (engl. long quotation).

<cite>

Definira citat.

<code>

Definira tekst u obliku raunalnog koda (Computer code).

<del>

Definira precrtani tekst.

<dfn>

Definira definicijski pojam.

<em>

Definira istaknuti tekst.

<i>

Tag koji omoguuje kreiranje ukoenog teksta.

<ins>

Definira podvueni tekst.

<pre>

Definira tekst koji se ispisuje direktno kako je unesen u HTML

dokumentu. Pogodan za odreene formule ili primjere programskog koda.

<q>

Definira tekst pod navodnicima.

<small>

Definira umanjeni tekst.

<strong>

Definira jaki (istaknuti) tekst (engl. strong text).

<sub>

Definira tekst u indeksu.

<sup>

Definira tekst u eksponentu.

18

10.

Sekcije

Unutar teksta moemo raditi odreena grupiranja. Moemo definirati vie razliitih cjelina koja
e imati zajednika svojstva. To moemo uiniti pomou tagova <div>, <span>. Oba taga slue
za definiranje sekcije unutar teksta s odreenim osobinama. Postoje razlike izmeu ta dva taga.
Tag <span> omoguuje definiranje vie sekcija unutar jednog reda, dok tag <div > to ne
omoguuje. Tag <div > omoguuje samo kreiranje sekcija koje e se protezati minimalno kroz
jedan cijeli red.
Tablica 18 Primjer sekcija

Tagovi za definiranje sekcija

Description

<div>

Definira sekciju u dokumentu

<span>

Definira sekciju u dokumentu

19

Zakljuak

11.

HTML je jezik koji se konstantno razvija te je neizostavan u kreiranju Internet stranica, tj.
kreiranju dokumenata na World Wide Web-u.
Dakle, radi se o jeziku koji omoguuje izradu web stranica. Jezik je sam po sebi jednostavan za
uporabu i dosta jednostavan za nauiti to je jedan od razloga njegove iroke i ope prihvaenosti
i popularnosti na IT tritu. Osim toga je i besplatan to znai da je automatski dostupan svima.
Seminarskim radom smo htjeli prikazati i objasniti tagove koje se koriste u standardiziranom
HTML jeziku budui da su osnovni graevni elementi svake web stranice zapravo tagovi
(znakovi) koji imaju zadau opisati kako e se neto prikazati u web pregledniku kojeg korisnik
upotrebljava za pregled web sadraja.
Sve HTML komande se piu u tagovima pri emu svaki tag predstavlja zapravo komandu koja
naem web pregledniku sugerira to i kako napraviti te na koji nain prikazati sadraj dotine
web stranice.

Primjer divova:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

Literatura
1.

Kermek D. (2011.) HTML jezik, Nastavni materijali iz kolegija Web dizajn i programiranje

2.

zpr.fer.hr (2011.) Web design/HTML danas. Dostupno na:

http://web.zpr.fer.hr/ergonomija/2003/segulin/jez.html, uitano 27.10.2011.

3.

w3.org (2011.) HTML 5. Dostupno na: http://www.w3.org/TR/html5/, uitano 27.10.2011.

4.

w3.org (2011.) A history of HTML. Dostupno na:

http://www.w3.org/People/Raggett/book4/ch02.html, uitano 27.10.2011.

20

5.

w3schools.com (2011.) W3C HTML Activities. Dostupno na:

http://www.w3schools.com/w3c/w3c_html.asp, uitano 27.10.2011.

Primjeri:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>

21