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

SVEUČILIŠTE U ZAGREBU

FAKULTET ORGANIZACIJE I INFORMATIKE

V A R A Ž D I N

Igor Mirković

HTML – OSNOVE I PRIMJERI TAGOVA

Varaždin, 2012.

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

Sadržaj

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

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

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

2.1. META PODACI ............................................................................................................................................... 5 2.2. VEZA NA VANJSKI DOKUMENT...................................................................................................................... 6 2.3. SKRIPTE ........................................................................................................................................................ 7 2.4. 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. ZAKLJUČAK .................................................................................................................................................. 20

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

1

1. Uvod

„Hypertext Markup Language ili skraćeno HTML je jezik koji uz pomoć vrlo jednostavnih

naredbi opisuje grafički i tekstualni izgled dokumenta.“ [zpr.fer.hr, 2011.]

Nakon početne definicije HTML-a u prvom dijelu seminarskog rada ćemo se osvrnuti na

povijesni razvoj samog jezika te ćemo nastojati predstaviti sve bitne datume i događaje vezane

uz te datume koji su obilježili 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

različite primjere tagova.

Započet ćemo s listama, zatim s tagovima vezanim za tablice, za slike, poveznice, okvire,

moguće forme i načine formatiranja te ćemo se u posljednjem dijelu seminara osvrnuti na

sekcije.

2

1. Osnove HTML jezika

Prije predstavljanja HTML tagova, predstavit ćemo osnove HTML jezika.

„HTML jezik je jezik oznaka (predstavljaju strukturne, prezentacijske i semantičke informacije)

koji podržava SGML (Standard Generalized Markup Language), a sastoji se od hipertekst-

hipermedija osobina (tekst, slika, zvuk,film i dr. koji se mogu međusobno povezati čime se dobije

mreža/paučina informacija)“. [Kermek, 2011.]

Da bismo mogli koristiti HTML jezik moramo imati :

HTML dokument (Notepad ++ INSTALIRATI).

HTML preglednik (Imati neki preglednik :D )

Web poslužitelj (Wamp ili Xamp INSTALIRATI)

HTML dokument je tekstualna datoteka (ASCII i sl. formati) koju možemo kreirati sami

pomoću nekog od alata. Alati za izradu HTML stranica mogu biti skupi komercijalni softveri, ali

postoje i besplatne inačice. Jedan od najjednostavnijih alata za izradu HTML stranica je

Notepad++ u kojem se mogu izraditi i najsloženije stranice (Notepad ++ INSTALIRATI).

HTLM dokument se sastoji od podatka (sadržaj dokumenta) i oznaka HTML jezika koje ćemo

opisati u nastavku ovog rada.

HTML preglednici su standardni preglednici s kojima svakodnevno pregledavamo sadržaje 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 pripadajuće objekte.

Web poslužitelj predstavlja poslužitelj na kojem će biti pohranjen naš HTML dokument te

preko kojeg korisnik može pristupati istom. (Wamp ili Xamp INSTALIRATI)

3

Element HTML jezika obično počinje s <element>, a završava s </element>. Upisom određenih

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 početka drugih elemenata

pretpostavljaju kraj prethodnih. XHTML je stroži te zahjetva oznaku kraja i poštivanje

redoslijeda otvaranja i zatvaranja po principu LIFO (Last in First out).

Sadržaj dokumenta možemo podijeliti na nekoliko vrsta:

prema vidljivosti u pregledniku:

o vidljivi (naslov, tekst i sl.)

o nevidljivi (meta upute, upute dizajna, dinamički dijelovi –programski kod i sl.)

vrste sadržaja dokumenta prema uključivanju:

o uključeni u dokumentu (naslov, tekst i sl.)

o sadržani u vanjskim datotekama/dokumentima (slike, upute dizajna, dinamički

dijelovi – programski kod i sl.)

vrste sadržaja dokumenta:

o tekst

o slika

o veza

o obrasci

4

Slika 1 Primjer Web stranice s pripadnim elementima1

2. Struktura HTML dokumenta

Svaki HTML dokument je određen svojom oznakom <html>...</html>.

Oznaka HTML dokumenta može sadržavati 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>.

1 HTML jezik, Nastavni materijali iz kolegija Web dizajn i programiranje

5

Primjer:

<html>

<head>...</head>

<body>...</body>

</html>

Zaglavlje HTML dokumenta najviše ima ulogu kod pretraživaca (search engine) koji mogu

dobiti temeljne informacije o sadržaju dokumenta i dr.

Zaglavlje HTML dokumenta može sadržavati elemente:

naslov <title>

meta podaci <meta>

veza <link>

skripte <script>

stil <style>

2.1. Meta podaci

Meta podaci se najčešće koriste da bismo naveli važne podatke o stranici koji se neće prikazivati

na stranici. Glavna zadaća meta podataka je pružanje a relevantnih podataka tražilicam za lakše

indeksiranje te pružanje informacija o kodiranju, osvježavanju stranice i sl.

Meta podaci mogu biti za:

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

direktive klijentu o sadržaju (obnavljanje, skup znakova) http-equiv=“…”

content=“…”

6

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>

Današnja preporuka kodne stranica koja omogućuje 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 uključivanje u način prikaza dokumenta.

Najčešće se uključuju vanjski dokumenti za stiliziranje (.css).

Primjer:

<link rel=“stylesheet" type=“text/css“ href=“format.css”>

Stilskim uputama određuju se način prikaza cijelog dokumenta i/ili nekog njegovog određenog

dijela sadržaja dokumenta. Svaki ispravan HTML dokument koji je napisan prema web

standardima trebao bi imati odvojenu sadržaj (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.

7

Postoji nekoliko bitnih razloga zašto je dobro odvajati strukturu od stila :

1. pregledniji dokument

2. jednostavnije, brže i sigurnije održavanje HTML i CSS dokumenta

3. jednostavnija prenamjena web dokumenta za različite tipove preglednika odnosno uređaja

(npr. handheld imobilni uređaji, audio preglednici, printeri, TV i sl.)

Iz tih razloga ćemo se u ovom radu baviti elementima kojima se opisuje sadržaj te nećemo

posebnu pozornost pridavati atributima koji definiraju određene 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 korištene 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 možemo definirati i različite skripte koje se izvršavaju na klijentskoj

strani. Obično su te skripte napisane skriptnim jezikom kao što je Java Script. Java Script skripte

možemo prepoznati po ekstenziji .js.

Tablica 1 Popis tagova za dodavanje skripti

Tagovi za

dodavanje skripti

Opis

<script> Definira skriptu na klijentskoj strani (client-side script) koja se uključuje u

dokument.

<noscript> Definira alternativni sadržaja ukoliko korisnik ne podržava skripte na

klijentskoj strani.

8

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)

elemenata

Opis

<!DOCTYPE> Definira tip dokumenta.

<html> Definira početak HTML dokumenta.

<body> Definira tijelo dokumenta.

<h1> to <h6> Definira HTML naslove (headings).

<p> Definira paragraf (odjeljak).

<br /> Tag omogućuje prelazak u novi red (ekvivlanet new line).

<hr /> Definira horizontalnu liniju.

<!--...--> Tag koji omogućuje kometiranje koda stranice, tekst koji se

upisuje unutar taga <!--...--> neće biti prikazan na pregledniku

stranice tj. vidljiv na ekranu.

Uočavamo da je tag <!DOCTYPE> tag pomoću kojeg se definira tip dokumenta. Na taj način

govorimo računalu 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>

Pomoću navedenog primjera definirali smo da će se u nastavku dokumenta koristit XHTML 1.0

Stirct standard i pridržavati se svih pravila koji su određeni tim standardom. Pomoću tagova

<h1>, <h2>, <h3>,... , <h6> definiramo zaglavlja koja se razlikuju po veličini fonta.

9

U osnovne tagove spada i tag <p> koji služi 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 klasičan prelazak u novi red (tipkom enter)

definiranom u dokumentu. Da bismo kreirali horizontalnu liniju koristimo tag <hr> pomoću

kojeg nam se na ekranu prikazuje horizontalna linija.

3. Liste

Osim osnovnih tagova u HTML-u se vrlo često koriste i liste. Moguće je definirati tri tipa listi.

To su:

nesređena lista

sređena lista

definicijska lista

Obilježja i primjere sređene liste prikazat ćemo u tablici 5, dok ćemo obilježja i primjer

nesređene liste prikazati u tablici 4. U tablici 6 možemo uočiti primjer definicijske liste koja se u

praksi ne koristi toliko često.

Tablica 3 Prikaz tagova za kreiranje različitih tipova listi i njihov opis

Oznake za definiranje elemenata liste Opis

<ul> Definira neuređenu listu.

<ol> Definira uređenu 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 nesređene liste

HTLM kod Rezultat

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

Coffee

Tea

Milk

10

Tablica 5 Primjer sređene liste

HTML kod Rezultat

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol

1. Coffee

2. Tea

3. Milk

Tablica 6 Primjer definicijske liste

HTLM kod Rezultat

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

Coffee

- black hot drink

Milk

- white cold drink

4. Tablice

Da bismo prikazali određene rezultate vrlo često se koriste tablice. Stoga HTML jezik

omogućuje niz tagova za kreiranje tablica. Tablice mobu biti vrlo jednostavne, ali moguće je

korištenjem različitih 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

elemenata tablice

Opis

<table> Definira tablicu

<caption> Definira naslov tablice

<th> Definira red u zaglavlju tablice

<tr> Definira red u tablici

11

<td> Definira stupac u tablici

<thead> Grupira sadržaj zaglavlja

<tbody> Grupira sadržaj tijela tablice

<tfoot> Grupira sadržaj podnožja tablice

<col /> Definira vrijednosti atributa za jedan ili više stupaca u tablici

<colgroup> Definira grupu stupaca u tablici za formatiranje

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

za vizualno odjeljivanje pojedinih dijelova tablice kao što su zaglavlje, tijelo i podnožje.

Sličnu ulogu imaju i tagovi <col> i <colgrup> koji služe za grupiranje jednog ili više stupaca i na

taj način omogućuju različita stiliziranja unutar tablice.

Tablica 8 Primjer definiranja reda u tablici

HTLM kod Rezultat

<table border="1">

<caption>Naslov tablice</caption>

<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>

Naslov tablice

Prvi red Drugi red

1. Jedan

2. Dva

12

5. Slike

Slike su neizostavan dio većine Internet stranica tako da moraju postojati odgovarajući tagovi.

Tagovi koji omogućavaju dodavanje slika na stranicu i kreiranje posebnih područja na mapi

omogućavaju tagovi navedeni u tablici 9.

Tablica 9 Tagovi koji omogućavaju dodavanje slika na stranicu

Oznake za definiranje slike Opis

<img /> Definira sliku

<map> Definira mapu slike

<area /> Definira područje unutar mape slike

Tablica 10 Primjer HTML koda koji prikazuje određenu 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 veličini. No, u tablici 10 je naveden HTML kod koji

definira mapu na slici. Unutar mape su definirana tri područja unutar mape. Područjima su

određeni oblici i dane koordinate unutar slike. Korisniku se klikom na određeno područje

omogućuju različite radnje. U navedenom primjeru je omogućen prelazak na novi HTML

dokument (npr href="sun.htm").

13

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 važan dio svakog hipertekst medija. Kao što smo mogli uočiti 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 možemo pronaći primjer taga <a> u obliku u

kojem se najčešće koristi.

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

Htlm kod Rezultat

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

W3Schools.com!</a>

Visit W3Schools.com!

Tag <a> ima naveden href=http://www.w3schools.com što znači da će korisnik klikom na tekst

koji se nalazi naveden između <a> i </a> biti preusmjeren na neki drugi dokument. U

navedenom primjeru korisnik će biti preusmjeren na stranicu http://www.w3schools.com.

7. Okviri

14

Okviri omogućavaju da se pojedini sadržaji prikazuju iz različitih HTML dokumenata. Pomoću

taga <frameset> definira se set prozora, tj. broj prozora, njihov razmještaj na ekranu i sl. Sadržaj

svakog okvira može biti pohranjen u različitim dokumentima te je to jedan od glavnih razloga za

korištenje okvira na HTML stranicama.

Tablica 12 Oznake za definiranje okvira

Oznake za definiranje

okvira

Opis

<frameset> Definira set prozora (okvira).

<frame /> Definira prozor (okvir) u setu okvira (engl. frameset).

<noframes> Definira alternativni sadržaj ukoliko za korisnike čiji preglednici ne

podržavaju više okvira.

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

strance).

Možemo uočiti iz tablice 12 da je u HTML jeziku definiran i tag <noframes> koji prikazuje

određeni sadržaj ukoliko preglednik ne podržava okvire. Da bi preglednici podržavali okvire

trebali bi biti četvrte generacije (npr. verzije Internet Explorera veće od 6.0 ili Mozilla Firefox

verzije veće 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>

Nažalost vaš preglednik ne podržava okvire.

</noframes>

</frameset>

HTML kod naveden u tablici 13 prikazuje primjenu okvira u praksi. Pomoću <frameset

cols="25%,50%,25%"> definirali smo set okvira. U dotičnom slučaju su to tri okvira čije su

15

dimenzije raspoređene u omjeru 25%,50%,25% što znači da prvi okvir zauzima 25% ekrana,

drugi okvir 50% ekrana te treći okvir 25% ekrana. Nakon toga je pomoću tagova <frame

src="frame_a.htm" />, <frame src="frame_c.htm" /> i <frame src="frame_c.htm" /> definirano

da se u prvom okviru prikazuje sadržaj iz dokumenta frame_a.htm, u drugom frame_b.htm, a u

trećem frame_a.htm. Možemo uočiti da će se u slučaju nemogućnosti prikaza okvira na ekran

ispisati poruka „Nažalost vaš preglednik ne podržava okvire.“

8. Forme

Svaki unos podataka od strane korisnika realizira se pomoću koncepta forme i pripadnih

elemenata forme. U tablici 14 su navedeni tagovi koji omogućavaju korisniku unos podataka, ili

odabir neke od ponuđenih opcija.

Tablica 14 Oznake za definiranje okvira

Oznake za

definiranje formi

Opis

<form> Definira HTLM formu za unos korisničkih podataka.

<input /> Tag omogućuje unos teksta.

<textarea> Tag omogućuje unos višelinijskog teksta.

<button> Tag kreira gumb (engl. push button).

<select> Definira padajući izbornik (engl. drop-down list) s mogućim izborima.

<optgroup> Definira grupu unutar padajućeg izbornika.

<option> Definira opciju u padajućem 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 služi za unos različitih podataka. Svaka forma obično ima gumb

(engl. button) za prihvaćanje unosa podataka kroz zadanu formu. Pritiskom da gumb za

prihvaćanje aktiviramo određenu akciju. Akcija se definira unutar taga <form> koji proširujemo

s određenom akcijom. Pod akcijom se najčešće smatra pozivanje druge skripte koja obrađuje

podatke unesene u formu kao što možemo uočiti u tablici 15 (skripta form_action.php).

16

Tablica 15 Prikaz forme

HTLM kod Rezultat

<form action="form_action.php" >

Ime: <input type="text" name="Ime" value="Joža" />

<input type="submit" value="Pošalji" />

</form>

Ime: Joža

Pošalji

Unutar forme možemo definirati različite opcije za unos podataka, primjerice za odabir iz

padajućeg izbornika te različite check liste kao što možemo uočiti iz tablice 16. Izbor opcija je

dosta velik te u praksi obično kombinirano većinu opcija navedenih u tablici 16 kako bismo

dobili željene podatke od korisnika.

Tablica 16 Primjeri različitih opcija

HTLM kod Rezultat

….

Ovdje se unose podaci

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

….

Ovdje se unose podaci

….

Područje za unos višelinijskog teksta

<textarea rows="5" cols="20">

Unesite tekst

</textarea>

….

Područje za unos višelinijskog teksta

….

Primjer padajućeg izbornika

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

Primjer padajuceg izbornika

17

</select>

….

….

Primjer padajućeg izbornika sa kategorijama

<select>

<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>

….

Primjer padajućeg izbornika sa

kategorijama

….

Izaberite spol:

<label for="male">Muški</label>

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

<label for="female">Ženski</label>

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

….

Izaberite spol: Muški Ženski

….

<fieldset>

<legend>Osobni podaci:</legend>

Ime: <input type="text"/><br />

Email: <input type="text" size="30" /><br />

</fieldset>

….

18

9. Formatiranje

Ukoliko želimo dodati određene afekte na neki element možemo koristiti neki od tagova za

formatiranje. Popis svih tagova koji se mogu koristiti za formatiranje je stvarno velik. Popis

tagova naveden je i objašnjen u tablici 17.

Tablica 17 Popis tagova za formatiranje

Tagovi za

formatiranje

Opis

<acronym> Definira kraticu.

<address> Definira kontaktne informacije o autoru ili vlasniku dokumenta.

<b> Tag koji omogućuje kreiranje podebljanog teksta.

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

<big> Definira povećani tekst.

<blockquote> Definira „dugi“ citat (engl. long quotation).

<cite> Definira citat.

<code> Definira tekst u obliku računalnog koda (Computer code).

<del> Definira precrtani tekst.

<dfn> Definira definicijski pojam.

<em> Definira istaknuti tekst.

<i> Tag koji omogućuje kreiranje ukošenog teksta.

<ins> Definira podvučeni tekst.

<pre> Definira tekst koji se ispisuje direktno kako je unesen u HTML

dokumentu. Pogodan za određene 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.

19

10. Sekcije

Unutar teksta možemo raditi određena grupiranja. Možemo definirati više različitih cjelina koja

će imati zajednička svojstva. To možemo učiniti pomoću tagova <div>, <span>. Oba taga služe

za definiranje sekcije unutar teksta s određenim osobinama. Postoje razlike između ta dva taga.

Tag <span> omogućuje definiranje više sekcija unutar jednog reda, dok tag <div > to ne

omogućuje. Tag <div > omogućuje 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

20

11. Zaključak

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 omogućuje izradu web stranica. Jezik je sam po sebi jednostavan za

uporabu i dosta jednostavan za naučiti što je jedan od razloga njegove široke i opće prihvaćenosti

i popularnosti na IT tržištu. Osim toga je i besplatan što znači da je automatski dostupan svima.

Seminarskim radom smo htjeli prikazati i objasniti tagove koje se koriste u standardiziranom

HTML jeziku budući da su osnovni građevni elementi svake web stranice zapravo tagovi

(znakovi) koji imaju zadaću opisati kako će se nešto prikazati u web pregledniku kojeg korisnik

upotrebljava za pregled web sadržaja.

Sve HTML komande se pišu u tagovima pri čemu svaki tag predstavlja zapravo komandu koja

našem web pregledniku sugerira što i kako napraviti te na koji način prikazati sadržaj dotične

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, učitano 27.10.2011.

3. w3.org (2011.) HTML 5. Dostupno na: http://www.w3.org/TR/html5/, učitano 27.10.2011.

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

http://www.w3.org/People/Raggett/book4/ch02.html, učitano 27.10.2011.

21

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

http://www.w3schools.com/w3c/w3c_html.asp, učitano 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>