VeleuiliteVelikaGorica

(X)HTML
dr.sc.Alenimec,predava|[email protected]

Uvodu(X)HTML
Jezikzaoznaavanje (engl.Markuplanguage)slui
zaprikaztekstaiobogaivanjedodatnim
informacijamakaotosuslike,forme,audioivideo
sadraji.
HTML (engl.HyperTextMarkupLanguage)jeopisni
jezikpomoukojegaseoblikujestranica,teprua
sredstvazastvaranjestrukturiranihdokumenata
oznaavanjemstrukturalnesemantikenatekstu
poputnaslova,odlomaka,liste,poveznicaidrugih
elemenataneovisnooplatforminakojojsesadraj
prikazuje.

Uvodu(X)HTML
Usporednosrazvojeminternetarazvijaosei
HTML.Upoecimainterneta,jedininain
prijenosainformacijedokorisnikabiojetekst.
PrvainaicaHTMLanastalaje1990.godine.
VerzijaHTMLa4.01izalaje1999.godinei
Internetjeodtadadoiviovelikutransformaciju,
tejebilopotrebnounaprijeditiHTMLuskladusa
dananjimstandardimauwebdizajnu.

Kronologija
24.studenog1995.godineobjavljenjeHTML2.0
HTML2.0DocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//IETF//DTDHTML2.0//EN">

14.sijenja1997.g.razvijenajeistandardizirana
odstraneW3CradnegrupeHTML3.2
HTML3.2DocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML3.2Final//EN">

Kronologija
18.prosinca1997.g.izdanajeHTML4.0
specifikacija
HTML4.0StrictDocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.0//EN"
"http://www.w3.org/TR/REChtml40/strict.dtd">
HTML4.0TransitionalDocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.0
Transitional//EN""http://www.w3.org/TR/REChtml40/loose.dtd">
HTML4.0FramesetDocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.0Frameset//EN"
"http://www.w3.org/TR/REChtml40/frameset.dtd">

Kronologija
24.prosinca1999.g.W3Ckonzorcijobjavljuje
HTML4.01specifikaciju
HTML4.01StrictDocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML4.01TransitionalDocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
HTML4.01FramesetDocumentTypeDeclaration:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Kronologija
XHTML(engl.ExtensibleHyperTextMarkupLanguage)jeproirenai
preformuliranaverzijaHTML4.01uoblikuXML(engl.Extensible
MarkupLanguage)pravila.
Uprosincu1998.g.W3Ckonzorcijizdajeradninacrtpodimenom
"ReformulatingHTMLinXML
XHTML1.0StrictDocumentTypeDeclaration:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
XHTML1.0TransitionalDocumentTypeDeclaration:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
XHTML1.0FramesetDocumentTypeDeclaration:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">

Kronologija
1999.g.W3Cizdajeprviradninacrtnaziva
"ModularizationofXHTML
XHTMLBasicDocumentTypeDeclaration:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTMLBasic1.0//EN"
"http://www.w3.org/TR/xhtmlbasic/xhtmlbasic10.dtd">

XHTML1.1izlazikaoW3Cpreporuka31.svibnja2001.g.
XHTML1.1DocumentTypeDeclaration:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Kronologija
XHTML2.0jeopijezikzaoznaavanjeosmiljenza
prezentacijudokumenatairokeprimjenenaWorldWide
Webprostoru.Izmeukolovoza2002.g.isrpnja2006.g.
W3CjeizdaoosamradnihnacrtazaXHTML2.0
2.srpnja2009.g.rasputenajeXHTML2.0
HTML5predstavljanovistandardzaHTML,XHTMLiHTML
DOM

Uvodu(X)HTML
HTMLdolaziodHyperTextMarkupLanguage
X oznaavaEXtensible
HTMLdatotekajetekstualnadatotekakojasadritagove
zaoznaavanje
tagovigovoreWEBbrowserukakoeprikazatistranicu
HTMLdatotekamoraimatihtmilihtmlekstenziju
HTMLmoebitikreirankoritenjemjednostavnogtext
editora

Uvodu(X)HTML
XHTMLdokumentmoraimatijedanrootelement
XHTMLelementipiusemalimslovima
XHTMLelementimorajuuvijekbitizatvoreni
XHTMLelementimorajubitipravilnougnjedeni

<b><i>Nepravilnougnjedenje</b></i>
<b><i>Pravlinougnjedenje</i></b>

KakoemokreiratiHTML?
Ubilokojemeditorunapiimotekst:
<html>
<head>
<title>Titleofpage</title>
</head>
<body>
Ovojemojaprvastranica.<b>Ovajtekstjepodebljan</b>
</body>
</html>

Ispremimogakaomojastranica.htm
OtvorimoIEiuitamodatotekumojastranica.htm koristei
opcijebrowseilichose fileibrowser eprikazati
stranicu.

KakoemokreiratiHTML?
PrvitaguHTMLdokumentuje<html>.Tajtagnaem
browserugovoridaslijedipoetakHTMLdokumenta.
Zadnjitagunaemdokumentuje</html>.Tajtag
ukazujebrowserudajetokrajHTMLdokumenta.
Tekstizmeu<head>tagai</head>zavrnoghead
tagajeinformacijaozaglavljudokumenta.Informacija
ozaglavljuseneeprikazatiubrowserprozoru.

KakoemokreiratiHTML?
Tekstizmeu<title>tagovajenaslovdokumenta.
<title>eseprikazatiuzaglavljubrowsera.
Tekstizmeu<body>tagajetekstkojiese
pokazatiuradnomdijelubrowsera.
Tekstizmeu<b>i</b>tagaeseprikazati
boldano(masnimslovima).

HTMiliHTMLekstenzija?
Utrenutkukadspremamohtmldatotekumoemo
koristitiekstenziju.htmi.html.Mismokoristili.htmu
naemprimjerunomoemokoristitii.htmlekstenziju.
HTMLElementi
HTMLdokumentjetekstualnadatotekasastavljenaod
HTMLelemenata.
HTMLelemetisudefiniranikoritenjemHTMLtagova

HTMLelementi
HTMLtagovisekoristezaoznaavanjeHTML
elemenata
HTMLtagoviokruenipoetnimizavrnim
karaktererom<i>npr.<p>
HTMLtagovidolazeuparovimanpr.<b>i</b>
Prvitaguparuzovemopoetnitagadrugizavrnitag
Tekstizmeupoetnogizavrnogtagazovemosadraj
elementa
HTMLtagovinisucasesensitive<b>znaiistokaoi
<B>

HTMLelementi
XHTMLtagovisupoW3Cstandarducase
sensitive<b>je istokaoi<B>,alisenepreporua.
Postojeelementisdvataga,aliielementisjednim
tagom
<html></html>
<br/>,<hr/>

HTMLelementi
IZPRIMJERA
HTMLelementpoinjespoetnimtagom:<b>
SadrajHTMLelementaje:podebljaniispis
HTMLelementzavravaszavrnimtagom:</b>
<b>oznaavadaeHTMLelementbitiprikazankao
bold.

HTMLelementi
IZPRIMJERA
SlijedeiHTMLelement:
<body>
Mojaprvastranica.<b>podebljaniispis</b>
</body>
HTMLpoinjesaspoetnimtagom<body>a
zavravaszavrnimtagom</body>.
<body>tagdefinirasadrajHTMLdokumenta.

Tag atributi
Tagovimoguimatiatribute.Atributinampruaju
dodatneinformacijeoHTMLelementimananaoj
stranici.
Reklismoda<body>definirabodyelementHTML
stranice.Sadodatnimbgcoloratributommoemo
reipretraivaudapozadinskabojanaestranice
trebaiticrvenakaonpr.<bodybgcolor=red>.

Tag atributi
Npr.Tag<table>definiraHTMLtablicu.Dodatnim
borderatributommoemoreipretraivauda
naatablicahoeilineeimatiborduru:<table
border=0>
Atributseuvijekpiunanainime/vrijednost
odnosnoime=vrijednost.
AtributisuuvijekpridruenipoetnomtaguHTML
dokumenta.

Tag atributi
Koritenjenavodnika'red'ili''red''?
Vrijednostiatributauvijeksuzatvoreni
navodnicima.Dozvoljenisuijednostrukiidvostruki
navodnici.
Unekimrijetkimsluajevimakaonpr.Kada
vrijednostatributasadrinavodnikeunutarsame
sebe,nunojekoristitijednostrukenavodnike:
Ime='Max''Ribic''Maxic'

OsnovniHTMLTagovi
VrlovanitagoviuHTMLusuonikojidefiniraju
zaglavlja,paragrafeiprekidelinije.
Primjer1.
<html>
<body>
Sadrajbodyelementajeprikazanubrowseru.
</body>
</html>

OsnovniHTMLTagovi
VrlovanitagoviuHTMLusuonikojidefiniraju
zaglavlja,paragrafeiprekidelinije.
Primjer2.
<html>
<body>
<p>Paragrafdefiniramoptagom.</p>
</body>
</html>

OsnovniHTMLTagovi
Zaglavljasedefinirajusa<h1>do<h6>tagovima.<h1>definiranajvei
headinga<h6>definiranajmanjiheading.
<h1>Ovojezaglavlje</h1>
<h2>Ovojezaglavlje</h2>
<h3>Ovojezaglavlje</h3>
<h4>Ovojezaglavlje</h4>
<h5>Ovojezaglavlje</h5>
<h6>Ovojezaglavlje</h6>
HTMLautomatskidodajedodatnupraznulinijuprijeinakonheading
a(browserdefaultvalue).

OsnovniHTMLTagovi
Primjer3.
<html>
<body>
<h1>Naslov</h1>
<h2>Podnaslov</h2>
<h3>Podnaslovpodnaslova</h3>
</body>
</html>

OsnovniHTMLTagovi
Paragrafisedefinirajusa<p>tagom.
HTMLautomatskidodajedodatnupraznuliniju
prijeiposlijeparagrafa.
<html>
<body>
<p>Ovojeparagraf</p>
<p>ovojedrugiparagraf</p>
</body>
</html>

OsnovniHTMLTagovi
Prekidilinije
<br/>tagkoristimoakoelimozavritiliniju,none
elimostartatinoviparagraf.<br/>tagforsira
prekidlinijebezobziragdjegastavimo.
<html>
<body>
<p>Ovojeparagraf</p>
<p>Ovojeparagrafsaprekidomlinije.<br/>Ovalinija
ideunovired</p>
</body>
</html>

KomentariuHTMLu
komentartagsekoristizaumetanjekomentarau
HTMLizvornikod.Komentarebitizanemarenod
stranebrowsera.Moemokoristitikomentareza
objanjenjekodakojinapiemoipomaunamkod
kasnijegeditiranjaizvornogprograma.
<html>
<body>
<h1>Naslov</h1>
<! komentar>
<p>Ovojeparagraf</p>
<p>Ovojedrugiparagraf</p>
<! krajkomentar>
</body>
</html>

Osnoveikorisnisavjeti
KadapiemoHTMLtekstnismonikadasigurnikako
etajtekstizgledatiudrugompretraivau.
Nekibuduikorisnicinaeaplikacije imati eveuili
manjurezolucijunaekranu.
Sukladnotomenijepreporuljivododavatiprazne
linijeilipraznapoljaunutarteksta.
Browser prepoznajesamojedanspaceizmeu
rijei.Akoelimoumetnutidvailivierazmaka
moramokoristitientitet&nbsp;
(engl. nonbreaking space)

Osnoveikorisnisavjeti
Istotakojekoritenjepraznihparagrafaloapraksa.
Trebakoristiti<br/>tag.
<br/>tagnetrebakoristizakreiranjelisteaotome
ebitivierijeiupoglavljuHTMLliste.
NajnovijeverzijeHTMLanedoputajukoritenje
taga<p>bezzavrnogtaga</p>takodaotome
trebavoditirauna.
Koristiemo<hr/>tagzaodvajanjepojedinih
odlomakaunaimprimjerima(prirunicima).

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<p>Nepravilnokoritenje
entertipke.
Browseretoignorirati</p>
<p>Nepravilnokoritenjerazmaknicetoe
browser
istoignoritati</p>
</body>
</html>

Osnoveikorisnisavjeti
REZULTAT

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<p>Zaprekid<br /> linije<br />u<br
/>paragrafu<br /> koristimo<br />
tag.</p>
</body>
</html>

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<p>
Prvareenica.
Drugareenica.
Treareenica.
Prva,drugaitreareenica.
</p>
<p>Browserepotpunoignoriratinapokuajformatiranja
paragrafa.</p>
</body>
</html>

Osnoveikorisnisavjeti
PRIMJER
Browserepotpunoignoriratinapokuajformatiranja
paragrafa.

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<h1>Zaglavlje1</h1>
<h2>Zaglavlje2</h2>
<h3>Zaglavlje3</h3>
<h4>Zaglavlje4</h4>
<h5>Zaglavlje5</h5>
<h6>Zaglavlje6</h6>
<p>Headingtakkoristimozaoznaavanjezaglavlja.Nebi
totrebalizlouporabitiikoristitizaoznaavanjereenicaili
rijeiakotodoistanijezaglavlje.</p>
</body>
</html>

Osnoveikorisnisavjeti
Primjer

Zaglavlje1
Zaglavlje2
Zaglavlje3
Zaglavlje4
Zaglavlje5
Zaglavlje6

Headingtagkoristimozaoznaavanjezaglavlja.Nebito
trebalizlouporabitiikoristitizaoznaavanjereenicaili
rijeiakotodoistanijezaglavlje.

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<h1align="center">Zaglavlje1</h1>
<p>Centriranjezaglavlja.</p>
</body>
</html>

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<p>hrtagpostavljahorizontalnucrtu</p>
<hr/>
<p>Paragraf1</p>
<hr/>
<p>Paragraf2</p>
<hr/>
<p>Paragraf3</p>
</body>
</html>

Osnoveikorisnisavjeti
PRIMJER(PREGLEDUINTERNETPREGLEDNIKU)

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<! Komentarseneeprikazati >
<p>Nekiparagraf</p>
</body>
</html>

Osnoveikorisnisavjeti
PRIMJER
<html>
<body>
<bodybgcolor="yellow">
<h1>Postavljanjebojepozadine</h1>
</body>
</html>

OsnovniHTMLTagovi
Tag

Opis

<html>,</html>

DefiniraHTMLdokument

<body>,</body>

Definiratijelodokumenta

<h1>,</h1>do<h6>,</h6>

Definirazaglavlje1do6

<p>,</p>

Definiraparagraf

<br />

Definirajednostrukiprekidlinije(engl.
line break)

<hr />

Definirahorizontalnucrtu/ravnalo
(engl.horizontal rule)

<!,>

Definirakomentar

HTMLFormatiranje
HTMLdefiniraelemenate zaformatiranjeizlaza,
kaotosubold,underline iitalictekst.
Slijedinekolikoprimjeraformatiranjateksta

HTMLFormatiranje
<html><body>
<b>Tekstjebold</b>
<br/><strong>Tekstjestrong</strong>
<br/>
<big>Tekstjebig</big>
<br/>
<em>Tekstjeemphasized</em>
<br/>
<i>Tekstjeitalic</i>
<br/>
<small>Tekstjesmall</small>
<br/>Tekstsadri
_subscript
<br/>Tekstsadri^superscript
</body>
</html>

Preformatiranje teksta

Primjerpokazujekakosemogukontroliratiprekidilinijeiprazni
prostorisapre tagom

<html>
<body>
<pre>Ovoje
preformatirani tekst.
Sauvanisublankovi
iprekidilinije.
</pre>
</body>
</html>

Preformatiranje teksta
<html>
<body>
<pre>Ovoje
preformatiranitekst.
Sauvanisublankovi
iprekidilinije.
</pre>
<p>pretagkoristimonpr.zaprikazprogramskogkoda:</p>
<pre>
fori=1to10
printinexti
</pre>
</body>
</html>

Tagovi zaformatiranjeteksta
Tag

Opis

<b>

Definirapodebljani tekst

<big>

Definiravelikitekst

<em>

Definiraistaknuttekst

<i>

Definiraitalic tekst

<small>

Definiramalitekst

<strong>

Definirapodebljani tekst

<sub>

Definira"sputeni"tekst

<sup>

Definira"izdignut"tekst

<ins>

Definiraumetnutitekst

<del>

Definiraizbrisanitekst

<u>

Definirapodcrtanitekst

"Computer Output"Tags
Tag

Opis

<code>

Definiracomputer code tekst

<kbd>

Definirakeyboard tekst

<samp>

Definiraprimjercomputer code

<tt>

Definirateletype tekst

<var>

Definiravarijablu

<pre>

Definirapreformatirani tekst

<sub>

Definira"sputeni"tekst

<sup>

Definira"izdignut"tekst

<ins>

Definiraumetnutitekst

<del>

Definiraizbrisanitekst

<u>

Definirapodcrtanitekst

Skraenice,akronimi,citatii
definicije
Tag

Opis

<abbr>

Definirailiopisujerije

<acronym>

Definirailiopisujerije,nije podranu
HTML5

<address>

Definiraadresuutekstu

<bdo>

Definirasmjerteksta

<blockquote>

Definiradugakicitat

<q>

Definirakratkicitat

<cite>

Definiracitat(italic uistomredu)

<dfn>

Definirapojamdefinicije

Primjeri
<html>
<body>
<p>Konzultacijesu
<del>ponedjeljakom</del>
<ins>utorkom</ins>u1730nalokacijiVrbik8</p>
<p>Browsereprecrtati(overstrike)brisanitekstipodcrtatiinsertirani
tekst.
</p>
</body>
</html>

Primjeri
<html>
<body>
<p><code>programskicode</code></p>
<p><kbd>Keyboardinput</kbd></p>
<p><samp>Sampletext</samp></p>
<p><b>Upozorenje:</b>ovajkodemokoristitizaprikaz
<u>raunalnog</u><i>koda</i></p>
</body>
</html>

Primjeri

<html>
<body>
<p>Primjerzalongquotation:</p>
<p><blockquote>
Ovojecitat.Ovojecitat.Ovojecitat.
Ovojecitat.Ovojecitat.
</blockquote></p>
</body>
</html>

Primjeri
<html>
<body>
<p>Primjerzakratkicitat:</p>
<p><q>
Ovojekratki
citat
</q>
</p>
</body>
</html>

Primjeri
<html>
<body>
<p><abbrtitle="UnitedNations">UN</abbr></p>
<p><acronymtitle="RepublikaHrvatska">HT</acronym></p>
<p>"title"atributkoristimozaprikazpunognazivaskraenice.</p>
<p>Zadrimopointernaacronymelementuiliabbreviation
elementu.</p>
</body>
</html>

Primjeri
<html>
<body>
<p>
<address>
Hrvatskisabor<br/>
Trgsv.Marka6<br/>
Zagreb<br/>
Hrvatska
</address>
</p>
</body>
</html>

HTMLentiteti
Nekiznakovikao<imajuspecijalnoznaenjeu
HTMLuizbogtoganemogubitikoriteniutekstu.
Zaprikazivanjeznaka<uHTMLukoristimoentitete.
Znak(manje<)definirapoetakHTMLtaga.Akou
HTMLizvornomprogramuelimokoristitiovajilidrugi
znakovkoristimoentitete.
Entitetiimajutridijela:znak&,imeenitetaili#ibroj
entiteta,tenakraju;
Akoelimoprikazatiznak<uHTMLdokumentukoristiti
emo&lt;ili&#60;

HTMLentiteti
HTMLneeprikazatiprazniprostorunaemtekstu
akonapravimo10razmakautekstu.Browsere
skinuti9odnjihiprikazatisamojedanrazmak.
Akoelimododati"space"unatekstkoristitemo
entitet&nbsp;

Osnovnientiteti
Rezultat

Opis

Imeidentiteta

Brojentiteta

nonbreaking space

&nbsp;

&#160;

<

less than

&lt;

&#60;

>

greater than

&gt;

&#62;

&

ampersand

&amp;

&#38;

"

quotation mark

&quot;

&#34;

'

apostrophe

&apos;

&#39;

Ostalientiteti
Rezultat

Opis

Imeidentiteta

Brojentiteta

Cent

&cent;

&#162;

Pound

&pound;

&#163;

Yen

&yen;

&#165;

Section

&sect;

&#167;

Copyright

&copy;

&#169;

registered trademark

&reg;

&#174;

Multiplication

&times;

&#215;

Division

&divide;

&#247;

AnchorTagiHref atribut
HTMLkoristi<a>anchorilisidrotagzakreiranje
linkapremadrugomdokumentu.
Anchorilisidromoeusmjeritivezunabilokoji
resurs:unutarnjuilivanjskustranicu,sliku,
multimediju.
<html>
<body>
<ahref="url">Tekstnakojipostavljamosidro</a>
</body>
</html>

AnchorTagiHref atribut
Tag <a> sekoristizakreiranjesidra, povezivanje
Atributhref sekoristizaupuivanjena
dokument/resursanakojisepovezuje
rijeiizmeuotvorenogizatvorenog"anchor"taga
prikazujuseubrowseru.
<html>
<body>
<ahref="http://www.nekadomena.com">domena</a>
</body>
</html>

AnchorTagiHref atribut
Targetatributupuujegdjeepovezanidokument
bitiotvoren.
<html>
<body>
<ahref="http://www.domena.hr/" target="_blank">
Imedomeneilitekst</a>
</body>
</html>

AnchorTagiHref atribut
Vrijednost

Opis

_blank

Otvaradokumentunovomprozoru

_self

Otvaradokumentuistomprozoru (poetnavrijednost)

_parent

Otvara dokumentudrugomokviru(koristimokodokvira)

_top

Otvaradokumentucijelomokviru (koristimokodokvira)

HTMLveze
HTMLkoristivezezapovezivanjedokumenata.
<html>
<body>
<p><ahref="www.microsoft.hr">
Microsoftstranica</a></p>
<p><ahref="http://www.microsoft.com/">
Microsoftstranica</a></p>
</body>
</html>

HTMLveze
Relativnaiapsolutnaveza.
Kadakoristimoapsolutnu,akadarelativnuvezu?

<html>
<body>
<p><ahref="pocetna.htm">pocetnastranica</a></p>
<p><ahref="http://www.domena.com/pocetna.htm">
pocetnastranica</a></p>
</body>
</html>

HTMLveze
<html>
<body>
<p>Moemokoristitislikukaolink
<ahref="http://www.domena.com"><imgsrc="logo.png"/></a></p>
</body>
</html>

HTMLveze(mailto)
<html>
<body>
<p><ahref="mailto:[email protected]?subject=Test&body=Test
Test">Testnimail</a></p>
</body>
</html>

Anchortag iName atribut

Nameatributkoristisezakreiranjesidrasimenom.
Kadkoristimoimenovanosidromoemokreirati
linkovekojimogudirektnoskoitinaodreenidio
stranice,umjestodadoputamokorisnicima
pomicanjeitavogdokumentakakobipronaliono
totrae.
<aname="links">Linkovi</a>
<ahref="#links">Skoknakorisnelinkove</a>

Anchortag iName atribut

<html>
<body>
<p><ahref="#C4">PogledajPoglavlje4.</a></p>
<h1>Poglavlje1</h1>
<p>Tekstpoglavlja1</p>
<h2>Poglavlje2</h2>
<p>Tekstpoglavlja2</p>
<h3>Poglavlje3</h3>
<p>Tekstpoglavlja3</p>
<h4><aname="C4">Poglavlje4</a></h4>
<p>Tekstpoglavlja4</p>
<h5>Poglavlje5</h5>
<p>Tekstpoglavlja5</p>
</body>
</html>

Divtag
Tag <div>,</div>sluizarazdjeljivanjeilisekcioniranje
HTMLstranice
OsnovnielementkodizradestranicepomouCSSa
<html>
<body>
<div><imgsrc= "logo.png" alt= "ln" title= "ln"/></div>
<div><h1>LinkedIN</h1></div>
</body>
</html>

NACRTAJTEOUTPUTSTRANICE

Divtag
<html>
<body>
<divstyle="float:left;"><img src="logo.png"alt= "In"title= "In"/></div>
<div><h1>LinkedIN</h1></div>
</body>
</html>

Tablice
Tablice koristimozaunospodataka.
Svakatablicasastojiseodstupacairedaka.
Nasjecitustupcairetkanalaziseelija.Vieelija
moebitipovezanobilouretkuiliustupcu.
Tagovi
<table> table,
<tr> tablerow,
<td> tabledata

Tablice
<tableborder="5"cellpadding="0"cellspacing="10">
<tr>
<tdalign="left"></td>
</tr>
</table>

Svojstvo (atribut)borderodreujeirinurubaoko
tablice.
Svojstvocellpadding odreujerazmakizmeuruba
elijeipodatakaueliji.
Svojstvocellspacingodeujerazmakizmeupojedinih
elija.

Tablice
Svojstvoalign odreujeporavnanjepodatkaueliji.
Moguevrijednostisvojstvasuleft,center iliright.
<html>
<body>
<tableborder="1"cellpadding="2"cellspacing="2">
<tr>
<td>prvacelija</td>
<td>drugacelija</td>
</tr>
</table>
</body>
</html>

Tablice
<html>
<body>
<p>Jedanredakitrikolone:</p>
<tableborder="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</body>
</html>

Tablice
<html>
<body>
<p>Zaglavljetablice</p>
<tableborder="1">
<tr>
<th>Zaglavlje</th>
<th>DrugoZaglavlje</th>
</tr>
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr>
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr>
</table>
</body>
</html>

Tablice spajanjeelija
<html>
<body>
<tableborder="1">
<tr>
<thcolspan="3">PHPprogramiranje</th>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
<tr>
<td>test5</td>
<td>test6</td>
</tr>
</table>
</body>
</html>

Tablice spajanjeelija
<html>
<body>
<tableborder="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savingsforholiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<tdrowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>

Liste
Listeslueorganizacijislinihelemenata
Omoguavajukorisnikulakipregledinformacija.
Razlikujemotrivrstelisti:
Listesbrojevima(Numberedlists)
Listesoznakama(Bulletedlists)
Definicijskeliste(Definitionlists)

Liste sbrojevima
(Numberedlists)
<ol>,</ol> orderedlist
<li>,</li> list
<html>
<body>
<ol>
<li>Prvi</li>
<li>Drugi</li>
</ol>
</body>
</html>

Liste soznakama
(Bulletedlists)
<ul>,</ul> unorderedlist
<li>,</li> list
<html>
<body>
<ul>
<li>Prvi</li>
<li>Drugi</li>
</ul>
</body>
</html>

Definicijskeliste
Definicijskalistajelistasaopisomsvakestavke
<dl>(definitionlist)
<dt>(definitionterm)
<dd>(definitiondescription)
<h1>Osnovnipojmovi</h1>
<dl>
<dt>HTML</dt>
<dd>Prezentacijskijezikzaizraduwebstranica</dd>
<dt>CSS</dt>
<dd>CascadingStyleSheets</dd>
<dd>Stilskijezikzaoblikovanje</dd>
</dl>

Tipovineureenihlista
<html>
<body>
<p>Discbulletslist:</p>
<ultype="disc">
<li>Jedan</li>
<li>Dva</li>
</ul>
<p>Circlebulletslist:</p>
<ultype="circle">
<li>Jedan</li>
<li>Dva</li>
</ul>
<p>Squarebulletslist:</p>
<ultype="square">
<li>Jedan</li>
<li>Dva</li>
</ul>
</body>
</html>

Ugnjedena lista
<html>
<body>
<p>Ugnjedenalista:</p>
<ul>
<li>Kava</li>
<li>aj
<ul>
<li>Menta</li>
<li>Kamilica</li>
</ul>
</li>
<li>Mlijeko</li>
</ul>
</body>
</html>

Ugnjedena lista
<html>
<body>
<p>Ugnjedenalista:</p>
<ul>
<li>Kava</li>
<li>aj
<ul>
<li>Kamilica</li>
<li>Zeleniaj
<ul>
<li>Kina</li>
<li>Afrika</li>
</ul>
</li>
</ul>
</li>
<li>Mlijeko</li>
</ul>
</body>
</html>

Lista
Vrijednost

Opis

<ol>

Definiraureenulistu

<ul>

Definiraneureenulistu

<li>

Definiralistustavaka

<dl>

Definiralistudefinicija

<dt>

Definiralistupojmova

<dd>

Definiraopisdefinicija

HTMLforme
HTMLformajediodokumentakojaima

Sadraj
Kontrole(checkboxes,radiobuttons,menus)
Korisnicipopunjavajupredefiniranapoljaprijeslanjapodataka
Podaciseizformealjunaserverkakobiseobradili
Serverobraujepodatke,ovisnoovrstiobradespremaubazu,aljena
maililivraapodatkekorisnikunaekran
HTMLformekoristesezadefiniranjerazliitihnainakorisnikogulaza,
unosapodataka

HTMLforme
Primjerjednostavneformesa"input"elementima
<html>
<body>
<formaction="http://somesite.com/adduser.php"method="post">
<p>
<labelfor="firstname">Ime:</label>
<inputtype="text"id="firstname"name="firstname"/><br/>
<labelfor="lastname">Prezime:</label>
<inputtype="text"id="lastname"name="lastname"/><br/>
<labelfor="email">email:</label>
<inputtype="text"id="email"name="email"/><br/>
<inputtype="radio"name="sex"value="Male"/>Muko<br/>
<inputtype="radio"name="sex"value="Female"/>ensko<br/>
<inputtype="submit"value="Poalji"/>
<inputtype="reset"value="Poniti"/>
</p>
</form>

</body>
</html>

HTMLforme
Primjerjednostavneformesa"input"elementima

HTMLforme
Korisnikradiinterakcijusaformomkrozpoljaza
unos
Ovisnooatributuinput poljemijenjasvojobliki
funkciju
Vrijednostkojukorisnikaljeprekoformeidepreko
atributavalue
<inputtype="radio"name="sex"value="Male">
<inputtype="submit"value="Poalji">

HTMLforme kontrolnitipovi
buttons
checkboxes
radiobuttons
menus
textinput
fileselect
hiddencontrols
objectcontrols

HTMLforme
Tagform
Zahtjevapoetniizavrnitag
Atributi:
action aljepodatakunekidokument(eng.file)
method get/post
enctype
odreujetippodatakakojisealjukrozformu.Default
vrijednostje"application/xwwwformurlencoded
Akoseuinputpoljukoristitype="file"vrijednost
atributaenctypeje "multipart/formdata"

HTMLforme
Tagformopisujeelemente(kontrole)kojesenalaze
unutarformtaga
Formamoesadravatiostaletagove(<p>,<br/>,
),tekst,slike,multimediju

HTMLforme input
Inputpoljamorajuimatipoetnitag,azavrnitagjezabranjen
Definicijeatributa:
name odreujekontrolnoime
type
text|password|checkbox|radio|submit|reset|file|hidden|image|button

value odreujevrijednostkojasealjekrozinputpolje
size odreujekojaebitiirinapolja.irinaseodreujeupixelima.
maxlength odreujemaksimalnibrojznakovakojekorisniksmijeupisatiu
polje.Defaultvrijednostjebeskonaanbrojznakova
checked akotippoljaimaatributcheckboxiliradio,booleanvrijednost
definiradajeovopoljeoznaeno
src akotippoljaimaatributimage,tadasedefiniraputanjapremaslici(npr.
grafikiprikazgumba)

HTMLforme input
Inputpoljaoviseovrijednostiatributa
text kreirajednulinijupolja
password kreirajednulinijupoljakojajezatienaprikazom
naekranu
checkbox
radio
submit
image
reset
button
hidden
file

HTMLforme select
Selectpoljamorajuimatipoetnitagizavrnitag
Definicijeatributa:
name odreujekontrolnoime
size akojelistasloenaododreenogbrojaredakakojiseele
prikazatiuistovrijeme,definiraseovajatribut.Akosenekoristiovaj
atributondasepoljeformirakao"dropdownmenu"
multiple omoguavaodabirviestavakaizliste
Selectpoljekreira menu.Svakiodabirodreenje"option"elementom.
Selectpoljemoraimatibaremjedan"option"element

HTMLforme option
Optionpoljamorajuimatipoetnitagizavrnitag
moebitiopcionalan
Definicijeatributa:
selected odreujebooleandajepoljeoznaeno
value odreujevrijednost

HTMLforme
<html>
<body>
<formaction="http://domena.com/select.php"method="post">
<selectname="select">
<optionvalue="value1">Value1</option>
<optionvalue="value2"selected>Value2</option>
<optionvalue="value3">Value3</option>
</select>
<inputtype="submit"value="Poalji">
</form>
</body>
</html>

HTMLforme
<html>
<body>
<formaction="http://domena.com/select.php"method="post">
<select multiplesize= "2"name="select">
<optionvalue="value1">Value1</option>
<optionvalue="value2">Value2</option>
<optionvalue="value3">Value3</option>
</select>
<inputtype="submit"value="Poalji">
</form>
</body>
</html>

HTMLforme textarea
Textareapoljemoraimatipoetniizavrnitag
Definicijeatributa:
name odreujekontrolnoime
rows oznaavabrojvidljivihlinijapolja.
cols oznaavavidljivuirinupolja

Textareakreiravielinijskiprostorzaunospodataka.

HTMLforme
<html>
<body>
<formaction="http://somesite.com/component.php"
method="post">
<textareaname="tekst_jedan"rows="10"cols="20">
Upiitetekst...
</textarea>
<inputtype="submit"value="Poalji">
</form>
</body>
</html>

HTMLforme label
Labelmoraimatipoetniizavrnitag
Definicijeatributa:
for eksplicitnoodreujeuzkojukontrolusepridodjeljuje

Svakilabeldodijeljenjeiskljuivosamojednomelementuimorase
definiratikojem.
Atributfor morabitipovezansaatributomidkontrolnogelementa
(inputpolja)

HTMLforme label
<html>
<body>
<formaction="http://somesite.com/adduser.php"method="post">
<p>
<labelfor="firstname">Ime:</label>
<inputtype="text"id="firstname"name="firstname"/><br/>
<labelfor="lastname">Prezime:</label>
<inputtype="text"id="lastname"name="lastname"/><br/>
<labelfor="email">email:</label>
<inputtype="text"id="email"name="email"/><br/>
<inputtype="radio"name="sex"value="Male"/>Muko<br/>
<inputtype="radio"name="sex"value="Female"/>ensko<br/>
<inputtype="submit"value="Poalji"/>
<inputtype="reset"value="Poniti"/>
</p>
</form>

</body>
</html>

Pitanja

JEZIK ZA OBLIKOVANJE HTML5

dr.sc. Alen imec, predava | [email protected]

HTML 5
HTML5 nastao je u suradnji World Wide Web
Consortium i Web Hypertext Application Technology
Working Group.
World Wide Web Consortium, W3C,
http://www.w3.org;
Web Hypertext Application Technology Working Group,
WHATWG, www.whatwg.org;

HTML 5
HTML5 je standard ija je namijena objediniti HTML 4
i XHTML u jedan prezentacijski jezik koji doputa
sintaksu oba svoja prethodnika.
Donosi znaajan napredak kod pretraivanja sadraja
za robote internet trailica, kako bi to bolje mogle
odrediti rangove i relevantnost pojedinih stranica te
tako preciznije odrediti prioritete.

HTML 5
HTML5 Hypertext Markup Language je jezik za
strukturiranje i prezentaciju sadraja.
Mogunost reprodukcije videa bez koritenja Adobe
flasha iil Microsoft silverlight, drag and drop, canvas,
...

HTML 5
HTML5 moemo podijeliti na 5 segmenata:
osnovna struktura stranica,
vizualna prezentacija,
grafiki alati,
bogata podrka medija,
poboljanja u JavaScriptu.

Mogunost prelaska sa HTML 5 na HTML 4,

kompatibilnost sa preglednicima.
5

HTML 5
HTML 5 uvodi nove elemente kako bi nam omoguio
veu kontrolu rada:
stvaranje strukture stranice,
upravljanje medijima,
struktura formi

U HTML 5 standardu uvedeni su novi elementi ija

imena asociraju na njihovu funkciju

HTML 5
HTML 5 semantiki elementi:
Oznaka

article
aside
figure
figurecaption
footer
header
nav
section
main
details
summary
mark
time

Opis

Odreuje neki lanak

Odreuje sadraj izvan sadraja stranice
Odreuje samostalni sadraj poput ilustracije,slika, dijagrama
Odreuje vezu na <figure> element
Odreuje podnoje stranice ili nekog elementa
Odreuje zaglavlje stranice ili nekog elementa
Odreuje navigacijsku listu
Odreuje odjeljak u dokumentu
Odreuje osnovni dio dokumenta
Odreuje dodatne detalje koje korisnik moe prikazati ili sakriti
Odreuje vidljivo zaglavlje za <details> element
Odreuje oznaeni tekst
Odreuje vrijeme
7

HTML 5
HTML 5 semantiki elementi:
Oznaka
bdi

wbr
dialog
command
meter
progress

Opis

Odreuje dio teksta koji formatiran u drugaijem smjeru od ostalog

teksta
Odreuje mogunost prekida linije
Odreuje dijaloki okvir
Odreuje gumb za komande koji korisnik moe koristiti
Odreuje skalu, mjerenje za odreeni segment
Odreuje tijek nekog zadatka

HTML 5
HTML 5 media elementi:
Oznaka

audio
video
source
track
embed

Opis

Odreuje audio elemente

Odreuje video elemente
Odreuje izvor za audio ili video element
Odreuje traku za audio ili video element
Odreuje okvir za vanjsku aplikaciju (video ili audio)

HTML 5
HTML 5 form elementi:
Oznaka
datalist
keygen
output

Opis

Odreuje predefinirane opcije za kontrole

Odreuje polja za kljueve
Odreuje rezultat kalkulacije

10

HTML 5
HTML 5 canvas element:
Oznaka

canvas

Opis

Odreuje grafike dijelove koristei Javascript

11

HTML 5
Prva linija koda u svakom HTML dokumentu odreuje
verziju HTML-a koju koristimo
U HTML 5 samo je jedna deklaracija koja je vrlo
jednostavna: <!DOCTYPE html>
Podrka za HTML 5: Safari, Chrome, Firefox, Opera,
Internet Explorer pruaju u svojim najnovijim verzijama
podrku za HTML 5

12

HTML 5 - deklaracija
Postoje razliite vrste html dokumenata, a preglednici
prikazuju stranicu ispravno samo ako ispravno
deklariramo html inaicu koja se koristi u dokumentu.
Potrebno je prije HTML taga upisatiDoctype deklaraciju
(DTD)
DTD daje informaciju pregledniku u kojoj verziji je HTML
dokument

13

HTML 5 - deklaracija
HTML 4.01 deklaracije:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

14

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

XHTML 1.0 Transitional

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

XHTML 1.0 Frameset

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

HTML5 deklaracija <!DOCTYPE html>

15

HTML 5
Primjer koda HTML 5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="test">
<meta name="keywords" content="test">
<title>Ion by TEMPLATED</title>
</head>
<body>
Sadraj dokumenta
</body>
</html>

16

HTML 5 - Struktura

17

HTML 5 - ARTICLE element

<article> element jasno definira sadraj stranice. Idealan
primjer njegove upotrebe je blog stranica gdje je post
od svakog dana novi <article> element. Moe sadravati
bilo koji sadraj unutar poetne i zavrne oznake, a moe
biti i dio <section> elementa.
<article>
<h1>Uenje HTML5</h1>
<p>Ovo je article element</p>
</article>

18

HTML 5 - ARTICLE element

Primjer koda HTML 5
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<article>
<h1>Uenje HTML5</h1>
<p>Ovo je article element</p>
</article>
</body>
</html>

19

HTML 5 - HEADER i FOOTER elementi

Svaki dokument ima zaglavlje i podnoje stranice koje
sadri specifine informacije, pa tako i HTML dokument.
U zaglavlju se uglavnom pojavljuje logo stranice, naslov
stranice, dok se u podnoju stranice nalazi godina
izrade, kontakt.
Koriste se uglavnom za izradu kostura stranice (layout)

20

HTML 5 - HEADER i FOOTER elementi

Primjer
<!doctype html>
<html>
<head>
<title>HTML5 Primjer</title>
</head>
<body>
<header><img src="logo.png"></header>
<footer>&copy; Copyright</footer>
</body>
</html>

21

HTML 5 - ASIDE element

Uloga <aside> elementa je opisivanje sadraja koji je
povezan s njim ali tako da nije dio glavnog sadraja
stranice. Pomou njega jednostavno odvajamo sadraj
na stranici. Mogua primjena je kod e-knjiga gdje je uz
tekst knjige sa strane neka zabiljeka.

22

HTML 5 - ASIDE element

Primjer
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
velit neque, molestie eget tincidunt quis, cursus eget enim. Vivamus
tristique libero sed nisi condimentum at vestibulum ligula vehicula.</p>
<aside>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
velit neque, molestie eget tincidunt quis, cursus eget enim. Vivamus
tristique libero sed nisi condimentum at vestibulum ligula vehicula.</p>
</aside>
</article>

23

HTML 5 - DIALOG element

<dialog> element je jo jedna korisna stvar u HTML5
standardu. On nam omoguava prepoznavanje
razgovora na internetu. Sastoji se od tri dijela:
Poetni tag <dialog> elementa koji oznaava prostor za
razgovor
<dt> element koji identificira govornika
<dd> element koji identificira razgovor

24

HTML 5 - DIALOG element

Primjer
<dialog>
<dt>Sam</dt>
<dd>Knock, Knock.</dd>
<dt>Eric</dt>
<dd>Who's there?</dd>
<dt>Sam</dt>
<dd>Justin.</dd>
<dt>Eric</dt>
<dd>Justin who?</dd>
<dt>Sam</dt>
<dd>Justin time for dinner!</dd>
</dialog>

25

HTML 5 - DIALOG element

Primjer - Twitter
<dialog>
<dt>
<a href="http://twitter.com/akamike">@asam</a>,
<time datetime="2013-08-11T12:35:54">13 minutes ago</time>
</dt>
<dd>Where is a good place to eat in town?</dd>
<dt>
<a href="http://twitter.com/brucel">@brucel</a>,
<time datetime="2013-08-11T12:37:56">11 minutes ago</time>
</dt>
</dialog>

26

HTML 5 - FIGURE element

<figure> element nam omoguava spajanje slike i teksta
koji je opisuje u jednu cjelinu. Moemo kombinirati sa
elementom <legend> koji definira tekst povezan sa
slikom ili elementom <figcaption> koji definira naslov za
<figure> element. Moe biti koriten vie puta na
stranici.

27

HTML 5 - FIGURE element

Primjer
<figure>
<img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
</figure>

28

HTML 5 - FIGURE element

Primjer
<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by
<a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

29

HTML 5 - NAV element

<nav > element povezuje grupu poveznica u jednu
cjelinu tako da ine navigaciju stranice (menu). Iako
je zamiljen kao element za navigaciju, njegova
upotreba moe biti i ira. Moemo ga koristiti za
povenice koji nas vode na neku vanjsku stranicu,
poveznice poput next ili back ili poveznice koje
smjestimo u podnoje dokumenta. Moemo
ugnjezditi liste unutar njega, bilo ureene ili
neureene.

30

HTML 5 - NAV element

Primjer
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

31

HTML 5
Primjer

<body>
<header>
<h1>TVZ</h1>
<nav>
<a href="news.html">Novosti</a> <a href="blog.html">Blog</a> <a href="forums.html">Forum</a>
</nav>
<p>Last Modified: <time>2014-01-22</time></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>

nastavak
32

HTML 5
Primjer
<article>
<p>...neki sadraj...</p>
</article>
<footer>
<p>Copyright 2014 The Example Company</p>
<nav>
<a href="about.html">O nama</a> <a href="contact.html">Kontakt</a>
</nav>
</footer>
</body>

33

HTML 5 HANDS ON KEYBOARD

34

HTML 5 HANDS ON KEYBOARD

zadatak 1 (html5, css3)
1. content (header)
2. content (banner)
3. content (section)
4. content (footer)

35

HTML 5
ZADATAK Primjer HTML5
Napravite stranicu koja e imati zaglavlje, podnoje, izbornik i lanak sa slikom.

Header

Menu

Content

Footer

36

HTML 5 - TEKST element

novi elementi u oblikovanju teksta gdje moemo
odrediti vrijeme, brojeve, datum,
Oznaka

Opis

mark

Odreuje istaknuti tekst

meter

Odreuje skalarnu mjeru unutar poznatog raspona

progress

Predstavlja napredak zadatka

time

Odreuje datum/vrijeme

37

HTML 5 - MARK element

Ukoliko elimo istaknuti neki dio teksta, sada to
moemo koristei element <mark>.
Unutar <mark> elementa moemo odabrati da li
elimo ukoeni, podebljani tekst ili moda
promijeniti boju.
Mora biti u kombinaciji sa CSS dokumentom.

38

HTML 5 - MARK element

Primjer
<h1>716,000,000 search results for the query " <mark>HTML 5</mark>"</h1>
<section id="search-results">
<article>
<h2>
<a href="http://en.wikipedia.org/wiki/HTML_5">
<mark>HTML 5</mark> - Wikipedia, the free encyclopedia</a>
</h2>
<p><mark>HTML 5</mark> is the next major revision of
<mark>HTML</mark> ("hypertext markup language"), the core markup
language of the World Wide Web. The WHATWG started work on the ...
<a href="http://en.wikipedia.org/wiki/HTML_5">Read more</a>
</p>
39

HTML 5 - METER element

<meter> element definira skalarnu veliinu (mjeru).
Koristimo ga kada elimo oznaiti cijenu nekog proizvoda u
odreenoj valuti, udaljenost do nekog mjesta, veliinu diska...
Koristimo ga u kombinaciji sa sljedeim atributima:
Atribut
high
low
max
min
optimum
value

Opis
Toka gornje granice dijela metra
Toka donje granice dijela metra
Najvia granica u rasponu
Najnia granica u rasponu
Toka koja oznaava optimalnu poziciju
Izmjerena vrijednost
40

HTML 5 - METER element

Primjer
<!DOCTYPE html>
<html>
<body>
<p><meter value="2" min="0" max="10">2 out of 10</meter></p>
<p><meter value="0.6">60%</meter></p>
</body>
</html>

41

HTML 5 - METER element

Primjer

<!DOCTYPE html>
<html>
<body>
<p>Va rezultat je: <meter value="91" min="0" max="100" low="40" high="90"
optimum="100">5</meter>
</p>
<p>
Va rezultat je: <meter value="50" min="0" max="100" low="40" high="90"
optimum="100">5</meter>
</p>
<p>Va rezultat je: <meter value="20" min="0" max="100" low="40" high="90"
optimum="100">5</meter>
</p>
</body>
</html>

42

HTML 5 - PROGRESS element

<progress> element prezentira napredak dovravanja neke radnje ( npr.
skidanje datoteke, uitavanje stranice...).
Mjerne jedinice su proizvoljne. Sam za sebe je statian i moramo ga povezati sa
Javascriptom kako bi prikazivao tijek nekog procesa i postao dinamian.
Koristi se u kombinaciji sa dva atributa:
Atribut

Opis

max

Ukupna vrijednost

value

Trenutna vrijednost skidanja

43

HTML 5 - PROGRESS element

Primjer
<!DOCTYPE html>
<html>
<body>
<p>Downloading progress: <progress value="28" max="100"></progress></p>
</body>
</html>

44

HTML 5 - TIME element

<time> kodira kompjuterski oblik vremena i datuma, te ga prikazuje u obliku
razumljivom ovjeku. Koristi se uz sljedee atribute:
Atribut

Opis

datetime

Specificira vrijeme i datum

pubdate

Vrijeme objave

45

HTML 5 - TIME element

Primjer

<!DOCTYPE html>
<html>
<body>
<!-- without @datetime content must be a valid date, time, or precise datetime -->
<time>2013-11-14</time>
<br>
<!-- when using @datetime the content can be anything relevant -->
<time datetime="2013-11-14">14^th November</time>
<br>
<!-- time example -->
Izlaz:
<time datetime="20:00">poinje u 20:00</time>
2013-11-14
<br>
14th November
<!-- datetime with time-zone example -->
poinje u 20:00
<time datetime="2013-11-14T20:00+00:00">20:00</time>
</body>
20:00
</html>

46

HTML 5 - FORME
Oblik input polja u formi (HTML 5):
forma za ispravan unos URL adrese,
oblikovanje polja da prihvaa samo vaee email adrese,
odabir datuma iz kalendara,
isticanje polja koja su obavezna

47

HTML 5 - FORME
Oblik input polja u formi (HTML 5):
color

range

date

search

datetime

tel

datetime-local

time

email

url

month

week

number
48

HTML 5 - FORME - email

<input type="email">
Ne dozvoljava upisivanje nekog drugog oblika teksta
osim email adrese.
Ne provjerava da li postoji email adresa ve da li je u
pravilnom formatu

49

HTML 5 - FORME - email

Primjer

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.php">
E-mail: <input type="email" name="email">
<input type="submit">
</form>
</body>
</html>

50

HTML 5 - FORME - url

<input type="url">
Doputa unos adrese neke stranice u pravilnom
formatu. (http://www.domena.com)

51

HTML 5 - FORME - date

<input type="date">
Automatski pretvara unesene
podatke u datum. Prikaz odabira
datuma ovisi o pregledniku. U
nekima ima obian unos datuma
poput teksta, a u Operi se otvara
kalendar u kojem odabiremo eljeni
datum.

52

HTML 5 - FORME - time

<input type="time">
Omoguava unos vremena u realnom rasponu, to
znai ako upiemo sate vee od 24 ili minute vee od 59,
izbaci greku.
Mogu je unos sati, minuta i sekundi.

53

HTML 5 - FORME - datetime

<input type="datetime">
Kombinacija datuma i vremena, uz
vremensku zonu. Raspon je isti kao
za time i date atribute.
Standardni format za sve vremenske
atribute je YYYY-MM-DDThh:mm:ss
gdje je Y-godina,M-mjesec,D-dan,hsati,m-minute,s-sekunde.

54

HTML 5 - FORME - month

<input type="month">
Dozvoljava odabir/upis mjeseca, a
prikazuje godinu i mjesec.
Spremljen je kao broj u rasponu od 112, a preglednik nam moe ponuditi i
opciju odabira preko imena mjeseci.

55

HTML 5 - FORME - week

<input type="week">
Omoguava upis i validaciju tjedna
u godini. Oblik odabira tjedna opet
ovisi o pregledniku.

56

HTML 5 - FORME - search

<input type="search">
Pretraga na stranici.

57

HTML 5 - FORME - number

<input type="number">
Dozvoljava unos broja
Moemo unositi samo cijele brojeve, a koristimo ga u
kombinaciji sa atributima min, max i step.
Primjer:
Koliina (izmeu 1 i 5): <input type="number"
name="quantity" min="1" max="5">

58

HTML 5 - FORME - range

<input type="range">
Pretvara unos u raspon
Moemo koristiti u kombinaciji s atributima min,
max i step.

59

HTML 5 - FORME - tel

<input type="tel">
Unos telefonskog broja, nema posebnog formata.
Moemo upisivati ak i znakove poput -, /, ().

60

HTML 5 - FORME - color

<input type="color">
Odabir boje.

61

HTML 5 - FORME - ATRIBUTI

Autofocus
Ubacuje kursor u polje forme kod uitavanja stranice.
Atribut nema vrijednost, a moe biti koriten samo
jednom u formi, za samo jedno polje forme.
<input type="text" name="fname" autofocus>

Required
Oznaavanje polja kao obavezno. Ukoliko polje koje je
oznaeno kao obavezno ne ispunimo, izbacit e nam
greku te neemo moi poslati formu.
<input type="text" name="usrname" required>
62

HTML 5 - FORME - ATRIBUTI

Placeholder
Omoguava stavljanje teksta u polja kao
podsjetnik za korisnika.

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.php">
<input type="text" name="fname" placeholder="Fill me "><br>
<textarea name="lname" placeholder="Start writing a book "></textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

63

HTML 5 - FORME - ATRIBUTI

Datalist
ujedinjuje drop-down listu i jednostavan upis teksta. Ukoliko nam ne
odgovara nijedan od moguih izbora u listi, moemo jednostavno
upisati svoj. Veemo ih pomou vrijednosti atributa mylist.
<label>Your favorite fruit:
<datalist id="fruits">
<select name="fruits">
<option value="Blackberry">Blackberry</option>
<option value="Blackcurrant">Blackcurrant</option>
<option value="Blueberry">Blueberry</option>
</select>
If other, please specify:
</datalist>
<input type="text" name="fruit" list="fruits">
</label>
64

HTML 5 - FORME - ATRIBUTI

Multiple
Omoguava viestruki unos nekog podatka u formu. Moe se
koristiti u kombinaciji sa raznim tipovima unosa, vie email
adresa ili telefonskih brojeva, uitavanje vie datoteka.
<label>Your favorite fruit:
<datalist id="fruits">
<select name="fruits">
<option value="Blackberry">Blackberry</option>
<option value="Blackcurrant">Blackcurrant</option>
<option value="Blueberry">Blueberry</option>
</select>
If other, please specify:
</datalist>
<input type="text" name="fruit" list="fruits" multiple>
</label>

<label>Upload files:
<input type="file" multiple
name="upload">
</label>

65

HTML 5 - FORME - ATRIBUTI

Pattern
Omoguava formatiranje polja na nain da ograniimo
korisniku mogunost unosa. Ako trebamo specifini unos da
korisnik moe samo takav oblik unosa napraviti.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
</body>
</html>

66

HTML 5 - FORME - ATRIBUTI

Step
Kontroliramo na koji nain e biti
unesen neki podatak. Ako elimo da
korisnik unese broj djeljiv s 5 od 0-100,
staviti emo step=5.
<input type="number" min="0"
max="100" step="5">

67

HTML 5 - AUDIO, VIDEO

Podrani video formati:
MP4 - MPEG4 podaci sa H264 video kodekom i AAC zvukovnim,
WebM - WebM podaci sa VP8 video kodekom i Vorbis zvukovnim,
Ogg - Ogg podaci saTheora video i Vorbis zvukovnim kodekom
Format MIME-type
MP4
video/mp4

Tag
<video>

Opis
odreuje video sadraj

WebM video/webm

<source>

odreuje media izvor

Ogg

<track>

odreuje trake u media playeru

video/ogg

68

HTML 5 - AUDIO, VIDEO

Podrani video formati:
MP3
Wav,
Ogg
Format MIME-type
MP3
audio/mpeg

Tag
<audio>

Opis
odreuje audio sadraj

Ogg

audio/ogg

<source>

odreuje media izvor

Wav

audio/wav

69

HTML 5 - AUDIO, VIDEO

<video> element koristi se za ugradnju videa
Mora ima poetni i zavrni tag
Koristi se u kombinaciji sa atributima koji nam omoguuju poetak
reprodukcije videa, zaustavljanje videa, pojaavanje i sniavanje tona.
Atribut
autoplay
controls
Height
Width
Loop
autobuffer
Muted
Src
duration
Volume
Played
currentTime

Opis
Automatsko pokretanje vide nakon uitavanja
Tipke za upravljanjem videom poput play,pauza,jaina zvuka...
Duina okvira videa
irina okvira videa
Omoguava pokretanje videa automatski nakon to zavri (kruno pokretanje)
Automatsko uitavanje videa iako nije postavljen na automatsko pokretanje
Postavlja zvuk videa na nulu, odn. bez tona
URL videa koji je postavljen
Vraa vrijednost trajanje videa u sekundama
Postavlja glasnou
Vraa Time Range objekt
Trenutno vrijeme

70

HTML 5 - AUDIO, VIDEO

Primjer
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Va preglednik ne podrava video element.
</video>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Va preglednik ne podrava audio element.
</audio>

71

HTML 5 HANDS ON KEYBOARD

72

HTML 5 HANDS ON KEYBOARD

zadatak 1 (html5, css3)
5. content (form)
6. content (video)

73

HTML 5
ZADATAK Primjer HTML5
Napravite HTML stranicu i formu koja izgleda kao na slici

74

HTML 5 - CANVAS
Pomou canvas elementa kreiramo dinamike slike.
Omoguava izradu alata ili igrica koje bi inae zahtijevale instalirane dodatke
poput Flash-a.
Slui kao kontejner za grafiku.
Ima nekoliko metoda crtanja:

put,
kutije,
krugovi,
znakovi i
dodavanje slika.

75

HTML 5 - CANVAS
Po defaultu nema okvira ni sadraja.
Dvodimenzionalno polje, a poetna koordinata je (0,0) koja se nalazi u gornjem
lijevom kutu.
Da bi nacrtali liniju koristimo dvije metode lineTo i moveTo, gdje je moveTo
poetna toka, a lineTo pomak od poetne toke(duljina).
Za krunicu koristimo metodu arc(x, y, r, l1, l2)
Ispis teksta: font, fillText, strokeTekst
Izrada gradienta: createLinearGradient() i createRadialGradient()
Izrada slika: drawImage(slika,x,y).

76

HTML 5 - CANVAS
Oblik
linija
krunica
tekst
gradient
slika

Metoda
lineTo
moveTo
Arc(x,y,r, l1,l2)
Font
fillText
strokeText
createLinearGradient()
createRadialGradient()
drawImage()

Opis
Duljina linije od poetne toke do zavrne
Poetna toka
Iscrtavanje krunice
Font teksta
Popunjeni tekst
Tekst samo sa vanjskom ovojnicom
Linearni gradient
Kruni gradient
Crtanje slike

77

HTML 5 - CANVAS
Liniju iscrtavamo pomou lineTo i moveTo metoda

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>

78

HTML 5 - CANVAS
Krunicu iscrtavamo pomou arc(x, y, r, l1, l2)
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,40,0,2*Math.PI);
ctx.stroke();
</script>

79

HTML 5 - CANVAS
Tekst iscrtavamo pomou font, fillFont, strokeFont
<canvas id="myCanvas" width="110" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="15px Arial";
ctx.fillText("Popunjeni tekst",5,50);
</script>

80

HTML 5 - CANVAS
Tekst iscrtavamo pomou font, fillFont, strokeFont

<canvas id="myCanvas" width="110" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="15px Arial";
ctx.strokeText("ovojnica",5,50);
</script>

81

HTML 5 - CANVAS
Gradient iscrtavamo pomou createLinearGradient() i createRadialGradient()
<canvas id="myCanvas" width="110" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,100,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
82

VeleuiliteVelikaGorica
Arhitekturaipubliciranje
dr.sc.Alenimec,predava|[email protected]

Internet
Internetjezamiljenkaomjestogdjeepojedinci
moiobjavljivatisadrajesvihvrstadokeih
zainteresiranikorisnicipretraivatiipregledavati
Internetserazviouplatformukojapomouniza
raznovrsnihmehanizamaitehnologijakorisnicima
olakavakomunikacijuteomoguavazadovoljenje
interesaipotrebakorisnika.

Internet
o Web2.0jedrugafazarazvojakojajenaslijedila
dominantanmodelusmjerennapubliciranje sa
dinaminimifleksibilnimwebservisimaosjetljivina
korisnikeakcije.
o SvakikorisnikInternetaangairanjeuprocesu
stvaranjasadrajanaInternetukrozrazmjenuznanja
iiskustava,tedoprinosepoveanjuvrijednostiznanja
toukonanicivodikalakemibremrjeavanju
problema

Internet
Internet jejavnodostupnaglobalnamrea
Mreasvihmreasastavljenaodraznihraunala:

Poslovnihraunala
Vladinihraunala
Akademskihraunala
Kunihraunala

Internet
Raunalameusobnorazmjenjujuinformacijei
usluge
UslugenaInternetu:
o
o
o

Prijenosdatoteka
PovezivanjestranicanapisanihuHTMLu(WWW)
Elektronikapota

WorldWideWeb koristiHTTPzaprijenosInternet
stranicanapisanihuHTMLu

WorldWideWeb
WorldWideWeb(skraenoWWW,W3, ilisamo
Web)jenajpopularnijiinajveiinternetski
servis
SinonimzaInternet netono
Servisnakojemsenalaze:
o Internetstranice
o Blogovi
o Forumi
o Drutvenemree

Internetstranice
Internetstranicesudokumentiimogu
sadravati:
Tekst
Slike
Multimedijalnesadraje
Meusobnosupovezanitzv.hiperlinkovima
ilivezama

Internetpreglednici
Internetstranicedohvaamoiprikazujemopomou
raunalnihprogramakojenazivamoInternet
preglednici
Internetpreglednici(zastupljenostnatritu):

InternetExplorer(50,42%)
Firefox(15,99%)
GoogleChrome(14,52%)
Safari(12,40%)
Opera(1,56%)

Zastupljenost Internet
preglednika
Internet Explorer

Firefox

Google Chrome

Safari

5% 1%
18%
53%
23%

Izvor:Net Marketshare,05.12.2013.,http://marketshare.hitslink.com

Opera

Rezolucijemonitora
Statistikarezolucijemonitora
99%korisnikaimarezolucijumonitoraod1024x768pixelsnavie.
Datum

ostaleirine

1920x1080

1366x768

1280x1024

1280x800

1024x768

800x600

nie

Sijeanj
2014

34%

13%

31%

8%

7%

6%

0.5%

0.5%

Sijeanj
2013

36%

11%

25%

10%

8%

9%

0.5%

0.5%

Sijeanj
2012

35%

8%

19%

12%

11%

13%

1%

1%

Rezolucijemonitora
Ostalerezolucijemonitora
Rezolucija

Sijeanj2014

1440x900

7%

1600x900

6%

1680x1050

5%

1920x1200

3%

1360x768

2%

2560x1440

1%

Otherhighresolutions

10%

Internetstranice
Internetstranicesastojeseodniza
HTML/XHTMLdokumenata
SluezaprezentacijupomouHTTP
protokola
HTMLjekraticazaHyperTextMarkup
Language

Internetstranice
Internetstranicatrebalabiimatisvakafirmakoja
elibitikonkurentnanatritu
Nunojepredstavitisvojeproizvodeiusluge,tebiti
prisutanilakodostupan
Stranicamorasadravatiminimalno:
Osnovneinformacijeofirmi
Osnovneinformacijeodjelatnostiiproizvodima
Kontaktpodatke(telefon,email,adresu,kartu)

Internetstranice
o Internetstranicanudisveveemogunostiodsamog
predstavljanjadoprodajeproizvodaiuslugaputem
interneta
o PozicijaInternetstranicenatrailicama
o Nekeodnajvanijihtrailica:
1. Google
2. Yahoo
3. MSN

ProdajaputemInterneta
ProdajaputeminternetailiInternettrgovina
jesastavnidioelektronikogposlovanja(e
business)
KupovinaprekoInternetamoebitinajbrii
najjeftinijinainkakodoidoodreenog
proizvoda
Sveviefirmiokreeseonlineprodaji

ProdajaputemInterneta
Internetprodajasmanjujetrokove,a
kupovinajemoguaodbilokudausvijetuiu
bilokojevrijeme
Smanjujetrokoveposlovnogprostora,ljudi,
opreme,skladita,

ProdajaputemInterneta
Informacijeocijenamaidostupnosti
proizvodanaInternetumogusepromijeniti
usekundi
Dostupnopotencijalnomkupcukojemje
takvainformacijapotrebna
Internetnudiiodreenuvrstuinteraktivnosti

Oglaavanje
InformacijenaInternetumijenjajusebrzinomkoju
tiskaniiklasinimedijinemogupratiti
Oglasniprostornainternetskojstranicimoese
pratiti,dokseoglasnateleviziji,radijuilitiskanom
medijunemoepratiti.
Moemoreikolikajebilagledanostemisijegdje
smoprikazalioglasilikolikajebilanakladanovina,
alitonijetoanpodatakozainteresiranostiza
proizvodiliuslugu.

Sigurnostprodajeputem
Interneta
NesigurnostprodajeprekoInternetairenestruni
ljudi
Postojimogunostkraepodatkakreditnihkartica
Posebannainkomunikacijezazatitupodataka
(SSLprotokol)
SSL(engl.SecureSocketsLayer)

Sigurnostprodajeputem
Interneta
SSLprotokol omoguavasigurnoslanjepodataka
putemInterneta
PodaciseputemSSLprotokolaifriraju
InternetstranicekojeimajuSSLprotokolpoinjusa
izrazomhttps://

ProdajaputemInterneta
ZbognepovjerenjauInternetikupovinu
prekoInternetauHrvatskojInternetduani
nudedodatnemogunostikupnje
Dodatnamogunostplaanjakupljenerobe:
pouzeem,
uplatnicomili
virmanom

Arhitekturaipubliciranje
Internet=javna
mrea
temeljenana
TCP/IP
protokolu

Arhitekturaipubliciranje
Putemwebsueljakorisnikalje upitna
posluitelj.
Programnaposluiteljudajeodgovornazahtjev
koristeinekiizvorpodataka(bazupodatakaili
pozadinskuuslugu)
Odgovorseizbazeprosljeujepreko
posluiteljanaklijent
Odgovorprekowebsueljapostajevidljiv
korisniku

Arhitekturaipubliciranje
SlojevitimodelraunalnihmreaOSIilireferentnog
modela(modelzaotvorenopovezivanjesustavai
najkoritenijiapstraktniopisarhitekturemree)
Layer7:Application brineointerakcijisa
operacijskimsustavomiliaplikacijskimsustavimakad
godkorisnikizaberebilokojuaktivnostkojase
referenciranamreu
Layer6:Presentation uzimapodatkeizApplication
layer(Layer 7)ikonvertiraihustandardniformatkoji
druginivoimogurazumjeti
Layer5:Session uspostavlja,odravaizavrava
komunikacijusprimateljem(jedinicomprimatelja)

Arhitekturaipubliciranje
Layer4:Transport natomsenivouodravakontrola
tijekapodatakaiosiguravaprovjeregreketepovrat
podatakaizmeumrenihjedinica(recovery).
Kontrolatijekaznaidatajnivovodiraunadali
podacidolazeizjedneiliizvieaplikacijaiintegrira
podatkepopojedinimaplikacijamaupojedinani
podatkovniodlomak(stream)
Layer3:Network Odreujenainnakojiepodaci
bitiposlaninajedinicuprimatelja.Logikiprotokoli,
rutiranje iadresiranjeseodraujenatomnivou

Arhitekturaipubliciranje
Layer2:Data Podacimasepridruujeodgovarajui
protokol,jednakotakojedefinirantipmreei
redoslijedpaketa
Layer1:Physical nivohardwarea definirafizike
karakteristikekaotosukonekcije,naponskinivo,
vrijeme

Arhitekturaipubliciranje
1984ISO
International
organizationfor
standardization

Arhitekturaipubliciranje

Arhitekturaipubliciranje
TransferControlProtocol/InternetProtocol
Glavnitransportnimehanizamumrenomprometuizmeu
raunala
Brinesamootransportupodatakaaneionjihovom
sadrajuiformatu

Arhitekturaipubliciranje
HyperTextTransferProtocol
Aplikacijskiprotokolnamijenjenrazmjenipodatakaizmeu
serveraiklijenata
Njegovemehanizmekoristeiwebservisi
HTTPrequestiHTTPresponse

Troslojnimodel arhitektura
Troslojnimodeljeklijentskoposluiteljskaarhitektura.
Korisnikosuelje, funkcijskalogika,pohranapodatakai
pristuppodacima odravajusekaonezavisnimoduli.
Troslojnaarhitekturadozvoljavaauriranje bilokojegodtatri
dijelanezavisnoodtogakako semijenjajuzahtjeviili
tehnologija.
Slanjezahtjeva

Sloj1 klijent
Sloj2 aplikacijskiposluitelj
Sloj3 posluiteljbazepodataka

Sql zahtjev

Slanjeodgovora

Sloj1

podaci

Sloj2

Sloj3

Arhitekturaipubliciranje
Osnovniprikazarhitekturetrisloja:suelje,slojaplikacijsko
programskepodrke ibazapodataka.
Dvameusloja:poslovnalogikaipristuppodacima
Prilikompristupanjastranicamawebapreglednikaljezahtjev
posluiteljukojimuisporuujedatotekuuHTMLobliku.
Pregledniktudatotekugrafikioblikujeiprikazujekorisniku
Usamompoetkudatotekesubilefizikismjetenenasam
posluiteljiadresakojujepregledniktraioodposluitelja
ujednojebilainjenstvarninazivnalokalnomdisku.

Arhitekturaipubliciranje
Takavobliksmjetaja,gdjesusvedatotekenaposluitelju
nazivamodvoslojnaarhitektura(eng.Twotierarchitecture).

Arhitekturaipubliciranje
Danasjepunoeatroslojnaarhitektura.
Unjojdatotekeipodacinisusmjeteniizravnonaposluitelju
veuodvojenojbazipodataka.
Bazapodatakajeupravilusmjetenanaodvojenom
posluitelju,ausluajuvelikogbrojaupitamoguejeda
postojivelikbrojposluiteljakojisezajednokoristekaojedna
bazapodataka.

Arhitekturaipubliciranje
KadasegovorioprogramskomjezikuPHPonjeupraviludio
troslojnearhitekturebuduidauveinisluajevadio
podatakapohranjujeseubazupodataka.

Arhitekturaipubliciranje
Troslojnuarhitekturuine,triosnovnasloja.
Prvislojjeklijentskikojiukljuujepreglednikisamumreu
Internet.
Srednjislojjeposluiteljwebanakojemseizvravajuskriptni
jeziciiliizvrnedatoteke.
Treislojjeonajukojemsenalazisustavzaupravljanjebazom
podatakaisamabazapodataka.

Arhitekturaipubliciranje
Prezentacijskisloj (eng.Presentationtier) slojprikaza
informacijakorisnikuputempreglednika
Aplikacijskisloj (eng.ApplicationtieriliMiddlewaretier,ili
BusinessLogic) slojkojiupravljaaktivnostimakojeaplikacija
trebaizvravati(tj.obradomilifunkcioniranjemaplikacije)
Podatkovnisloj (eng.Datatier) slojkojiupravlja
pohranjivanjempodatakaubazuiprikazompodatakaizbaze
naposluitelju

Arhitekturaipubliciranje
Zaprezentacijskislojkoristise webpreglednik(MSInternet
Explorer,MozillaFirefoxilidr.)
Zaaplikacijskislojkoristese dinamikewebtehnologije(ASP,
ASP.NET,PHP,JavaScript,CGI,ColdFusion,JSP/Java,Perl,
Python,idr.)
Zapodatkovnislojkoristesesustavizaupravljanjebazama
podataka(npr.SQLserver,MySQL,DB2,idr.)

Arhitekturaipubliciranje
Prvisloj KorisnikosueljeUI(websuelje,grafikosuelje)
Predstavljakorisnikairaunalousmisludaprikazujepodatke
korisnikuiprihvaapodatkekojeonunosi.
BaziramosenaInternetpreglednik.Kadapreglednikpoalje
zahtjevzanekomstranicomposluiteljuweba,tadaposluitelj
prvoizvravaprogramkojidohvaapodatkeizbazepodataka.
Dohvaenipodatakseobrauje,teseuHTMLoblikualju
natragpregledniku.

Arhitekturaipubliciranje
Drugisloj posluiteljwebaiskriptnijezici(Aplikacija
programskapodrka)
Temeljsrednjegslojajeposluiteljweba.Danassenajee
koristiposluiteljwebaApache,alijevrloestiInternet
InformationServer kojijekomercijalniposluitelj.
Osimposluiteljaweba,usrednjemslojudanassenajee
koristeskriptnijezicizbogsvojefleksibilnostiiprenosivostina
razliiteplatforme.Jedanodpopularnijihskriptnihjezikaje
PHP.
Sveaplikacijekojeimamouraunaluspadajuudrugisloj
arhitekture

Arhitekturaipubliciranje
PHPprogramskijezikimaupotpunostiotvorenkod
VrlovisokarazinaintegracijesHTMLomipotrebamaWeba
Mogunostupotrebeiunajsloenijimsustavima
Vrlodobraprenosivost moesebezikakvihpreinakakoristitiipod
Linux,Windows,Solarisiostalimplatformama
Brzoizvravanje uzsvedanasraspoloiveoptimizacijeprogrami
pisaniuprogramskomjezikuPHPmogusevrlobrzoizvravati
Dobrapodrkazajednice narazvojuiupotrebiprogramskogjezika
PHPradivrlo
Velikbrojpojedinacaimeseosiguravanjegovabudunostiaurnost

Arhitekturaipubliciranje
Treisloj bazapodataka
Slojbazepodatakasekoristizapohranuidohvatpodataka.
Omoguavaistovremenipristuppodacimasnekoliko
odvojenihposluitelja,osiguravasigurnost,tajnostiintegritet
podataka,atakoeruzodgovarajuusoftverskuihardversku
podrkumoguejejednostavnoraditibackupsvihpodataka.
Zadauupravljanjapodacimaubazipodatakapreuzimasustav
zaupravljanjebazompodataka(eng.databasemanagement
system DBMS).

Arhitekturaipubliciranje
Sustavzaupravljanjebazompodatakabrineosmjetajui
dohvatupodataka.
Danasgotovosvimodernisustavizaupravljanjebazom
podatkazadohvat,analizuiobradukoristejezikSQL(eng.
StructuredQueryLanguage).
Nekiodnajpoznatijihsustavizaupravljanjebazamapodataka
su:Oracle,DB2,MSSQL,MySQLiPostgreSQL.

Arhitekturaipubliciranje
Meuslojevi(poslovnalogikaipristuppodacima)
Meuslojuposlovnelogike (en.businesslogiclayer,BLL),
zadatakjedefiniratiipovezatikomponenteaplikacije,teje
obinovezanauzaplikaciju.
Imazadatakdefiniratiradnetokove(engl.Workflow)kojise
nalazeuslojuaplikacije.
Poslovnulogikusustavamijenjamoposvojimpotrebama.
Zbogzahtjevaskalabilnostiseposlovnalogikaradiuobliku
programskihkomponenataizvansamihaplikacija.
Poslovnalogikasepozivaizdrugogsloja aplikacije

Arhitekturaipubliciranje
Meuslojpristuppodacima(en.dataaccesslayer,DAL)
standardnoserjeavapomouADO(ActiveXDataObjects)
suelja,iliJavaDatabaseConectivity.
Imaulogukodpovezivanjabazeiaplikacije.
Omoguujepristupbaziidefinirakakoeaplikacijapostupati
sbazomiodreujekorisnikupravapristupapodacima.
PovezivanjeseradipomouODBC(objectdatabase
connectivity).

Arhitekturaipubliciranje
Odabirarhitekutre

Vierazliitihkorisnikaistovremenotrebajupristupatipodacima
Postojiveibrojzapisakojisetrebajuaurirati
Odvojenipodacisupovezaninekimvezama
Podacisemorajupridravatiodreenihpravila naprimjerbroj
znakovaunizu,numerikavrijednostpodatkaislino
Potrebnojeobraivatipodatke
Potrebnojebrzopretraivativelikekoliinepodataka
Vanojeosiguratisigurnost,tajnostiliintegritetpodatka
Auriranje,dodavanjeilibrisanjejesloenilivrloestzadatak

Arhitekturaipubliciranje
HTTPGETmetoda
Primjer2.3:HTMLform elementzaslanjeHTTPGETrequesta
<form action="http://www.test.hr/test.htm"method="get"
name="test">
<inputtype="text"name="txtIme"size="20">
<inputtype="text"name="txtLozinka"size="20">
<inputtype="submit"value="Submit"name="btnSubmit">
</form>

Arhitekturaipubliciranje
HTTPPOSTmetoda
Primjer2.4:HTMLform elementzaslanjeHTTPPOST
requesta
<form action="http://www.test.hr/test.htm"method="post"
name="test">
<inputtype="text"name="txtIme"size="20">
<inputtype="text"name="txtLozinka"size="20">
<inputtype="submit"value="Submit"name="btnSubmit">
</form>

Arhitekturaipubliciranje
RazlikaizmeuHTTPPOSTiGETmetode
KodPOSTmetodevrijednostiatributaiupisanevrijednostiu
INPUT poljasenevideuURLu,vesealjunaserveriserver
radiobraujepodatkepremaSQLupitu.
KodGETmetodevrijednostiatributaiupisanevrijednostiu
INPUT poljasevideuURLu,podacisealjuserveruiserver
radiobradupodatkapremaSQLupitu.
?txtIme=alen&txtLozinka=test&btnSubmit=Submit

Pitanja

Oblikovanje dokumenta - CSS

dr.sc. Alen imec, predava | [email protected]

CSS
CSS (engl. Cascading Style Sheets),
Jednostavan mehanizam za dodavanje stilova: fontova,
boja razmaka izmeu paragrafa, ureivanje tablica
Koritenjem CSS obrasca moemo:
Odreivati pozadinu stranice
Opcije okvira (liste, blokove, slike, tablice)
Margine
Koliine praznog prostora (engl. padding)
Kontrola pozicioniranja i veliine elemenata
Ureivanje tablica, teksta

CSS
Razvijen je kao strukturni jezik, prvenstveno je bio
namijenjen strukturiranom prikazu podataka na web
stranicama.
S eksponencijalnim rastom broja web sjedita rasla je i
potreba web dizajnera da svoja sjedita uine ljepima i
privlanijima.
1995. godine W3C je definirao standardiziranu specifikaciju
jezika HTML koja je u sebi sadravala mnoge elemente koje
su u jezik unijeli proizvoai preglednika.

CSS
CSS je meta-jezik kojim se definira prezentacija
dokumenata (izgled i formatiranje) kreiranih bilo
kojim jezikom za oznaavanje ili markup jezikom.
Dizajniran je kako bi omoguio odvajanje sadraja
dokumenta od njegove prezentacije
Odvojenost moe poboljati dostupnost sadraja,
fleksibilnost i kontrolu nad specifikacijom
prezentacijskih karakteristika, smanjiti sloenost i
ponavljanje strukturnog sadraja

CSS
Stilski obrasci napravljeni su od stilskih pravila
Sastoji se od samo dva elementa, selektora i
deklaracijskog bloka.
Selektor: Odreuje element na koji se stilsko pravilo
odnosi
Deklaracija: Odreuje kako izgleda sadraj opisan CSS-om,
sastoji od grupe svojstava i njihovih vrijednosti
selektor {
deklaracija;
}

CSS
Deklaracija se dijeli na:
Property (aspekti kako da raunalo prikae tekst i grafiku).
Value (podaci koji odreuju kao elimo da tekst i slike
izgledaju na stranici).
selector {
property: value;
}

CSS
CSS deklaracije uvijek zavravaju sa toka zarezom a
deklaracijske grupe se okruuju vitiastim
zagradama.
p { color:red; text-align:center; }
p{
}

color:red;
text-align:center;

CSS
Primjer:
<p>
<font face="Courier New, Courier, mono">
<font color="#9b5c98" size="+2">
<b>Lorem</b></font>
ipsum dolor sit amet,</font>
</p>
<p>
<font face="Courier New, Courier, mono">
<font color="#9b5c98" size="+2">
<b>consectetur</b></font>
adipisicing elit ... </font>
</p>

CSS
Primjer:

p{
font-family: "Courier
New", Courier, mono;
}
.naglaseno {
color: #9b5c98;
font-size: 24px;
font-weight: bold;
}

<p>
<span class="naglaseno">Lorem</span>
ipsum dolor sit amet ...
</p>
<p>
<span class="naglaseno">consectetur</span>
adipisicing elit ...
</p>

CSS
CSS doputa pisanje komentara u kodu kako bi se
moglo opisati, objasniti to pojedini dio radi i/ili na
to se odnosi
Komentari se uvijek ignoriraju od strane
preglednika i ne interpretiraju se.
CSS komentar poinje sa "/*", a zavrava se sa "*/".
/*Ovo je neki komentar*/
p { text-align:center;
/*A ovo je jo jedan komentar */
color:black; font-family:arial; }

CSS
Pogledajmo od ega se sastoji CSS kd.
p { /* p je selektor */
font-family: "Courier New", Courier, mono;
}
.naglaseno {
color: #9b5c98; /* color je svojstvo */
font-size: 24px; /* 24px je vrijednost */
font-weight: bold;
}

CSS
selektori p, .naglaseno identificiraju pojedine elemente
na HTML stranici;
svojstva color, font-size... kljune rijei za opis pojedinog
elementa stranice;
vrijednosti #9b5c98, 24px... vrijednost koju poprima
pojedino svojstvo;
i etvrtu, pomonu, kategoriju:
komentari tekst napisan izmeu znakova /* i */.
Komentari se mogu nalaziti bilo gdje u stilu i ne utjeu na
prikaz sadraja.

CSS
CSS moemo podijeliti po slijedeim pravilima:
Browser default (postavke preglednika za oblikovanjem
odlomaka, naslova, poveznica i ostalih tag elemenata)
Vanjski CSS
<link rel="stylesheet" type="text/css" href="style.css">

Unutarnji CSS (unutar <head> tag-a)

<style></style>

Linijski CSS (unutar HTML elementa)

Primjer: <p style="deklaracija"></p>

CSS Browser default

<html>
<body>
<h1>Regularni odlomak</h1>
<p>Ovo je regularni odlomak.</p>
</body>
</html>

CSS Vanjski
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Regularni odlomak</h1>
<p class="copyright">Ovo je odlomak sa definiranom klasom.</p>
</body>
</html>

CSS Unutarnji
<html>
<head>
<style>
p.copyright {
font-family: Arial;
font-size: 12px;
color: white;
background-color: teal;
}
</style>
</head>
<body>
<h1>Regularni odlomak</h1>
<p class="copyright">Ovo je odlomak sa definiranom klasom.</p>
</body>
</html>

CSS Linijski
<html>
<head></head>
<body>
<h1>Regularni odlomak</h1>
<p style="font-family: Arial; font-size: 12px; color: white; backgroundcolor: teal;">Ovo je odlomak sa definiranom klasom.</p>
</body>
</html>

HANDS ON KEYBOARD

CSS
Idemo napisati tekst koji se sastoji od nekoliko stranica i
elimo ga objaviti na webu.
Dovrili smo stranicu i pogledamo rezultat u pregledniku:

CSS
Idemo napisati tekst u HTML kodu.
<h1>Lorem ipsum</h1>
<p>Lorem ipsum je tekst koji se sastoji
od niza sluajnih rijei bez znaenja. Iako
njegove rijei ne znae nita, pretpostavlja se
da je nastao na temelju Ciceronovog djela...</p>
...
<p>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu
ornare mi. Sed venenatis ipsum quis metus cursus, lobortis porttitor nulla
maximus. Pellentesque ut tellus feugiat tortor ullamcorper
vehicula.&quot;</p>

CSS
elimo dobiti slijedei izlaz naeg dokumenta

CSS
Koji su nam potrebni parametri za ovaj izlaz?
NASLOV

CITAT

Font: Verdana,Helvetica,sans-serif;

Stil fonta: ukoeno

Debljina fonta: bold;

Debljina fonta: podebljano

Veliina fonta: 24px;

Okvir: 1px crni

TEKST

Udaljenost od okvira: 6px;

Font: Verdana,Helvetica,sans-serif;

Pozadina okvira: #FFFFCC;

Veliina fonta: 12px;

CSS
CSS datoteka

h1 {
font-family: Verdana,Helvetica,sans-serif;
font-weight: bold;
font-size: 24px;
}
p{
font-family: Verdana,Helvetica,sans-serif;
font-size: 12px;
}
p.citat {
font-style: italic;
font-size: 12px;
border: 1px solid #000;
padding: 6px;
background-color: #FFFFCC;
}

CSS
Povezivanjem HTML datoteke i CSS datoteke
<h1>Lorem ipsum</h1>
<p>Lorem ipsum je tekst koji se sastoji
od niza sluajnih rijei bez znaenja. Iako
njegove rijei ne znae nita, pretpostavlja se
da je nastao na temelju Ciceronovog djela...
...
<p class="citat">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing
elit. In eu ornare mi. Sed venenatis ipsum quis metus cursus, lobortis
porttitor nulla maximus. Pellentesque ut tellus feugiat tortor ullamcorper
vehicula.&quot;</p>

SELEKTORI
Selektor identificira HTML element ili elemente na
koje se primjenjuje navedeni stil.

jednostavni selektori
klasni selektori
ID selektori
kontekstni selektori
pseudoklase.

SELEKTORI
HTML dokument moemo prikazati kao stablo
prema sljedeoj slici

SELEKTORI
Jednostavni selektori odgovaraju imenu HTML
oznake i primjenjuju se na svaki istovrsni element u
dokumentu.
Nedostatak primjene CSS-a putem jednostavnih
selektora je u tome to
p{
font-family: Verdana, Helvetica, sans-serif;
se definirani stil
}
primjenjuje na sve
h1 {
color: #9b5c98;
HTML elemente bez
font-size: 24px;
font-weight: bold;
izuzetaka.
}

SELEKTORI
Klasni selektori mogu se primijeniti samo na
odreene elemente koji imaju atribut "class"
p.izreka {
font-weight: bold;
font-size: 11px;
color: green;
}
p.prijevod {
font-style: italic;
font-size: 12px;
}

<p class="izreka">Lorem ipsum</p>

<p class="prijevod">Dolor sit am consectetur adipis</p>

SELEKTORI
ID selektori razlikuju se od klasnih selektora po
tome to se atribut odreuje sa "id" i smije se
pojaviti samo jednom u dokumentu.
#izreka {
font-weight: bold;
font-size: 11px;
color: green;
}
#prijevod {
font-style: italic;
font-size: 12px;
}

<p id="izreka">Lorem ipsum</p>

<p id="prijevod">Dolor sit am consectetur adipis</p>

SELEKTORI
Kontekstni selektori ako definiramo selektor p b,
on e biti primijenjen na sve elemente b, ali samo
ako se u hijerarhijskom stablu nalaze unutar
elementa p
p{
font-weight: bold;
font-size: 11px;
}
.istakni {
font-size: 12px;
color: purple;
}

<p><b class="istakni">Navigare</b> necesse est,

<b class="istakni">vivere</b>
non est necesse.</p>

SELEKTORI
Pseudoklase su selektori koji djeluju na informacije
o elementima koji proiruju stablo dokumenta
Ispred imena pseudo klase dolazi dvotoka. Mogu
se koristiti sa:
Elementima
Klasama
ID-ovima
selector:pseudo-class {property:value;} Pseudo klasa
selector:pseudo-element {property:value;} Pseudo element

SELEKTORI
Pseudo klase razlikuju razliita stanja elemenata i
tipove, kao na primjer one koji pruaju informacije
o stanju veza
Pseudo klase. Vano je potovati redoslijed!

:link (formatiranje izgleda jo neposjeenih veza)

:visited (formatiranje izgleda posjeenih veza)
:focus (formatiranje izgleda veza trenutno selektiranih pomou tipkovnice)
:hover (formatiranje izgleda veza na kojima je trenutano strelica mia)
:active (formatiranje izgleda veza koji su selektirani)

SELEKTORI
Pseudo elementi pruaju pristup segmentima
elemenata, a slue za stiliziranje dijela sadraja
elementa
a.red:visited {color:#FF0000;}
<a class="red" href="indeks.php">HOME</a>

SELEKTORI
Napravite stranicu u html formatu i napravite
interni CSS.
a:link {
color: #9b5c98;
}
a:visited {
color: #0000cc;
}
<a href="http://www.domena.hr/">STRANICA</a>

SELEKTORI
Dodatna atraktivnost linkova moe se postii
dinamikim efektima, koji se aktiviraju pri radnji
korisnika
a:hover {
text-decoration: none;

}
a:active {
background-color: #9b5c98;
color: #ffffff;
text-decoration: underline;
}
<a href="http://www.domena.hr/">STRANICA</a>

SELEKTORI
Ukoliko u jednom dokumentu postoji potreba za vie
razliitih vrsta veza, koristi se kombinacija klasnih selektora i
pseudoklasa a.vrsta1:link { color: #9b5c98; }
a.vrsta1:visited { color: #0000CC; }
a.vrsta1:hover { text-decoration: underline; }
a.vrsta1:active { background-color: #9b5c98; color: #ffffff; }
a.vrsta2 { text-decoration: underline; }
a.vrsta2:link { color: #000000; }
a.vrsta2:visited { color: #9b5c98; }
a.vrsta2:hover { background-color: #9b5c98; color: #ffffff; }
a.vrsta2:active { background-color: #000000; color:#ffffff; }
<a class="vrsta1" href="http://www.carnet.hr/">CARNet</a>
<a class="vrsta2" href="http://www.w3.org/">W3 konzorcij</a>

GRUPIRANJE SELEKTORA
Kada nekoliko selektora dijeli odreena svojstva,
postoji mogunost njihova grupiranja u popis
odvojen zarezima
h1 {
font-family: sans-serif;
font-size: 16px;
}
h2 {
font-family: sans-serif;
font-size: 14px;
}
h3 {
font-family: sans-serif;
font-size: 12px;
}

h1, h2, h3 {
font-family: sans-serif;
}
h1 {
font-size: 16px;
}
h2 {
font-size: 14px;
}
h3 {
font-size: 12px;
}

NASLJEIVANJE
<html>
<head>
<style>
body { font-size: 12px; color: black; font-family: sans-serif; }
h1 { font-size: 160%; color: green; }
p { font-size: 120%; color: blue; }
a { color: #00FF00; }
</style>
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je odlomak sa definiranom klasom.</p>
<a href="http://www.domena.hr/">STRANICA</a>
</body>
</html>

MODEL KUTIJE
CSS elemente na stranici tretira kao posloene
pravokutnike koje se na stranici slau jedna iza
druge ili jedna ispod druge.
Izgled kutije i njezina svojstva definirani su
sljedeim prikazom

MODEL KUTIJE

MODEL KUTIJE
Margine (rubnice) odreuju udaljenost CSS kutije, odnosno
elementa, od ostalih elemenata na stranici.
margin-top (udaljenost od gornjeg elementa)
margin-right (udaljenost od desnog elementa)
margin-bottom (udaljenost od donjeg elementa)
margin-left (udaljenost od lijevog elementa)

etiri pojedinane margine mogu se zamijeniti skraenim

svojstvom margin

MODEL KUTIJE
CSS model koji odlomak tretira kao kutiju odreuje
margine, debljine granica, odmak sadraja od
granice.
p{
margin-top: 5px;
margin-bottom: 20px;
margin-left: 30px;
}
p{
margin: 5px 0 20px 30px;
}

MODEL KUTIJE
Odmak je udaljenost od granice CSS kutije do sadraja.
Slino kao i kod margina, postoje etiri odmaka i skraeno
svojstvo
padding-top (udaljenost od gornje granice)
padding-right (udaljenost od desne granice)
padding-bottom (udaljenost od donje granice)
padding-left (udaljenost od lijeve granice)

etiri pojedinane granice mogu se zamijeniti skraenim

svojstvom padding

MODEL KUTIJE
Primjer:
div.primjer { background-color: #eeeeee; color: #000000; padding: 6px; margin: 15px;
border: 1px solid #000; }
<div class="primjer">Lorem ipsum dolor sit amet</div>

MODEL KUTIJE
CSS standard definira niz svojstava kojima je mogue opisati
svojstvo irine granice elementa
border-top-width (gornja irina granica)
border-right-width (desna irina granica)
border-bottom-width (donja irina granica)
border-left-width (lijeva irina granica)
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 6px;
border-left-width: 8px;

border-width: 8px;

MODEL KUTIJE
Boja granice takoer se moe definirati zasebno za svaku od
etiri granice
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
border-color: red;

MODEL KUTIJE
Svojstvo izgleda granice moe poprimiti sljedee vrijednosti:
none, hidden, dotted, dashed, solid, double, groove, ridge,
inset, outset.
border-top-style: none;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: solid;
border-style: dotted;

MODEL KUTIJE
Sva navedena svojstva moemo postaviti skraeno za
pojedinanu granicu:
border-top: 2px solid #000;
border-right: 4px dotted red;
border-bottom: 6px dashed #fc0;
border-left: 6px groove #0c0;
border: 2px dotted #000;

HANDS ON KEYBOARD

CSS
Napravite CSS i HTML datoteku, te prikaite u pregledniku
ovaj primjer.

Pomo:
Gornja granica: 2px solid crna;
Desna granica: 4px dotted crvena;
Donja granica: 3px dotted uta;
Lijeva granica: 6px groove zelena;

GENERIKI KONTEJNERI
Element span je linijski generiki kontejner.
Tipian primjer span kontejnera je formatiranje
nekolicine rijei u tekstu.
p{
font-size: 11px;
}
.istaknuto {
font-size: 18px;
font-weight: bold;
border: 1px solid #000;
}

<p>Lorem <span class="istaknuto">ipsum

dolor</span>, sit amet.</p>

GENERIKI KONTEJNERI
Element div je blok generiki kontejner.
Slui za obuhvaanje vie blok ili linijskih
elemenata unutar jedne strukture koja dijeli
zajedniko formatiranje.
<div><p>Lorem ipsum</p></div>

GENERIKI KONTEJNERI
Napiite kod tako da iz zadanih postavki prikaete
izlaz kao na slici!
.csskod {
padding: 5px;
margin: 0;
width: 380px;
color: #CC0000;
background-color: #FFFFCC;
font-family: courier, mono;
text-align: left;
border-width: 1px;
border-style: dashed;
border-color: #455372;
}

p{
font-size: 11px;
}
.istaknuto {
font-size: 18px;
font-weight: bold;
border: 1px solid #000;
}
<p>Lorem <span class="istaknuto">ipsum
dolor</span>, sit amet.</p>

SLIKA (OUTPUT)

FONT
Pojedinom elementu mogue je dodijeliti
proizvoljni font
Problem nastaje ako korisnik na raunalu nema
instaliran potreban font.
CSS definira pet generikih obitelji fontova serif,
sans-serif, cursive, monospace i fantasy

FONT
Vrijednost oblika fonta ovisi o definiciji u stilu.
Moemo izabrati font i generiku familiju fontova kako bi
preglednik odabrao najsliniji font toj familiji
Pod navodnike idu nazivi koji sadre vie od jedne rijei
body { font-family: monospace; }
body { font-family: "Courier New", Courier, monospace; }
h1 { font-family:Arial, Helvetica, sans-serif; }
p { font-family:"Times New Roman", Times, serif; }

FONT
Serif Fonts
font-family:
Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Times New Roman", Times, serif

FONT
Sans-Serif Fonts
font-family:

Arial, Helvetica, sans-serif

"Arial Black", Gadget, sans-serif
"Comic Sans MS", cursive, sans-serif
Impact, Charcoal, sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Tahoma, Geneva, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif

FONT
Monospace Fonts
font-family:
"Courier New", Courier, monospace
"Lucida Console", Monaco, monospace

Veliki izbor razliitih fontova na stranici:

https://www.google.com/fonts

FONT
Kako bi se doskoilo nedostatku potrebe koritenja
samo fontova koji su instalirani na raunalo CSS3
uvodi @font-face
@font-face {
font-family: mojfont; src: url(sansation_light.woff);
}
div { font-family: mojfont; }

FONT
Svojstvo font-weight definira debljinu znakova.
Moe poprimiti sljedee vrijednosti: normal, bold,
bolder, lighter, 100, 200, 300, 400, 500, 600, 700,
800, 900.
Najee se koriste vrijednosti normal i bold.
Bolder, lighter i brojane definicije debljine fonta
nisu sigurne za koritenje jer ih preglednici razliito
prikazuju i ovise o fontovima instaliranim na
raunalu posjetitelja

FONT
font-size odreuje veliinu fonta.
Moe poprimiti bilo koju vrijednost veliine (12px,
10pt, 2em...) ili neku od kljunih rijei (xx-small, xsmall, small, medium, large, x-large, xx-large).
body { font-size: 10pt; }
p { font-size: 150%; }

FONT
font-style odreuje stil fonta.
Postoje tri vrijednosti:
normal
italic
oblique
body { font-style: normal; }
p { font-style: italic; }

FONT
font-variant moe poprimiti vrijednosti normal ili
small-caps.
Koritenjem small-caps dobije se efekt teksta
pisanog velikim slovima, ali fontovima razliitih
veliina
body { font-variant: normal; }
p { font-variant: small-caps; }

FONT
Skraeni selektor font objedinjuje ova gore
navedena svojstva
body {
font: italic small-caps 12px Verdana, Helvetica, sans-serif;
}
p { font-size: 10px; }
Koja veliina fonta e biti na stranici?

BOJE
Pravi izbor boja i pozadine je neto to e svako
web sjedite uiniti atraktivnijim.
p { color: green; }
<p>Lorem ipsum dolor sit amet</p>

BOJE
Boje definiramo heksadecimalnim zapisom ili
kombinacijom crvene, zelene, plave
(red, green, blue RGB)

Najmanja vrijednost je 0 (nula, hex: 00 - crna), a

najvea vrijednost je 255 (hex: ff - bijela)
Heksadecimalni zapis sastoji se od tri para
vrijednosti, a poinje sa oznakom #

BOJE I POZADINA
background-color definira boju pozadine za zadani
element.
Boja pozadine se protee do granice elementa
ukljuujui odmak.
div.primjer {
background-color: #3e6f93;
color: #ffffff; padding: 6px;
border: 1px solid #000;
}

<div class="primjer">Lorem ipsum

dolor sit amet</div>

BOJE I POZADINA
background-image postavlja pozadinsku sliku u
element.
Moe se definirati fiksni poloaj pozadinske slike ili
ponavljanje po jednom od pravila.
body { background-image: url("css.png"); font-size: 12px; color: black;
font-family: sans-serif; }
div.primjer { background-color: #eeeeee; color: #000000; padding: 6px;
border: 1px solid #000; }
<div class="primjer">Lorem ipsum dolor sit amet</div>

BOJE I POZADINA
Rezultat postavljanja pozadine:

BOJE I POZADINA
background-repeat moe poprimiti sljedee
vrijednosti:
repeat ponavlja sliku;
no-repeat ne ponavlja sliku;
repeat-x ponavlja sliku samo po vodoravnoj osi;
repeat-y ponavlja sliku samo po uspravnoj osi.

BOJE I POZADINA
Primjer
body {
background-image: url("css.png");
background-repeat: repeat-x;
font-size: 12px; color: black; font-family: sans-serif;
}
div.primjer {
background-color: #eeeeee;
color: #000000; padding: 6px; border: 1px solid #000;
}
<div class="primjer">Lorem ipsum dolor sit amet</div>

BOJE I POZADINA
background-attachment svojstvo definira pomie li
se pozadinska slika s elementom ili ne.
Moe poprimiti vrijednost:
scroll pomie se, ili
fixed ne pomie se.

BOJE I POZADINA
background-position svojstvo koje omoguava
postavljanje poetnog poloaja od kojeg e se
postaviti slika.
Pozadinska slika predefinirano se postavlja u gornji
lijevi kut dokumenta.
Vrijednosti su right, center, left za vodoravni
poloaj, zatim top, center, bottom za vertikalni.

BOJE I POZADINA
background je skraeno svojstvo.
body {
background: url("css.gif") no-repeat right top fixed;
}
div.primjer {
background-color: #eeeeee;
color: #000000; padding: 6px; border: 1px solid #000;
}
<div class="primjer">Lorem ipsum dolor sit amet</div>

BOJE I POZADINA
Rezultat postavljanja pozadine:

BOJE
Boja

HEX

RGB

Crna

#000000

rgb(0,0,0)

Crvena

#FF0000

rgb(255,0,0)

Zelena

#00FF00

rgb(0,255,0)

Plava

#0000FF

rgb(0,0,255)

uta

#FFFF00

rgb(255,255,0)

Magenta

#00FFFF

rgb(0,255,255)

Cijan

#FF00FF

rgb(255,0,255)

Siva

#C0C0C0

rgb(192,192,192)

Bijela

#FFFFFF

rgb(255,255,255)

JEDINICE
Jedinice mjere za razliita svojstva kao to su width, height, margin,
padding, font-size, border-width, itd.. koriste se u oblikovanju
dokumenta.
Jedinica

Opis

em

Relative to the font-size of the element (2em means 2 times the size of
the current font)

cm

centimeters

mm

millimeters

in

inches (1in = 96px = 2.54cm)

px

pixels (1px = 1/96th of 1in)

pt

points (1pt = 1/72 of 1in)

pc

picas (1pc = 12 pt)

SVOJSTVA TEKSTA
SVOJSTVO

OPIS

letter-spacing

razmak izmeu pojedinih znakova u tekstu

line-height

razmak izmeu dva reda teksta u istom odlomku (eng.

baseline).

text-decoration

Opisuje dekoracije koje se dodaju tekstu. Moe poprimiti

vrijednosti: none, underline, overline, line-through i blink.
Vrlo esto se koristi kod definiranja efekata na vezama.

text-transform

Pretvara slova iz teksta u velika ili mala, ovisno o izabranoj

vrijednosti svojstva. Mogue vrijednosti su capitalize
(poetno veliko), uppercase (sva velika), lowercase (sva
mala)

text-align

Vodoravno poravnanje teksta. Moe se primijeniti samo

na blok elemente, a mogue vrijednosti su: left, right,
center i justify.

POZICIONIRANJE
Sheme smjetanja definirane su svojstvom position,
koje moe poprimiti sljedee vrijednosti:
Static (statiko smjetanje),
Relative (relativno smjetanje),
Absolute (apsolutno smjetanje) i
Fixed (Fiksno smjetanje)

POZICIONIRANJE
Pri koritenju apsolutnog, relativnog ili fiksnog
pozicioniranja (smjetanja), moemo koristiti:
left,
top,
bottom,
right.
body { font-size: 12px; color: black; font-family: sans-serif; }
div.primjer { position: fixed; top: 20px;left: 150px;border: 1px solid #000;

POZICIONIRANJE
Rezultat:

OSTALA SVOJSTVA
Cursor definira vrstu pokazivaa kada se on nae
iznad elementa.
Moe poprimiti vrijednosti: auto, crosshair, default,
help, move, pointer, text, wait...
div {
cursor: crosshair;
}

OSTALA SVOJSTVA
overflow definira kako e se prikazati sadraj koji je
vei od CSS kutije.
Moe poprimiti vrijednosti: visible, hidden, scroll i
auto.
div {
overflow: auto;
}

OSTALA SVOJSTVA
visibility definira vidljivost elementa.
Moe poprimiti vrijednosti:
visible vidljiv, ili
hidden skriven
div {
visibility: hidden;
}

OSTALA SVOJSTVA
display omoguava promjenu predefiniranog
naina prikaza razliitih tipova elemenata.
Moe poprimiti vrijednosti block, inline, list-item i
none
div {
display: inline;
}

RESPONZIVNOST
Viewport je vidljivi dio Internet stranice. Vidljivi dio
varira u odnosu na rezoluciju monitora
HTML5 je uveo metodu da preuzimanja kontrole nad
prikazom kroz <meta> oznaku name="viewport"
<meta name="viewport" content="width=device-width, initial-scale=1.0">

RESPONZIVNOST
Elementi
meta viewport daje upute pregledniku kako kontrolirati i
skalirati prikaz
width=device-width postavlja irinu stranice, te prati
irinu ekrana ureaja
initial-scale=1.0 postavlja poetnu razinu zuma kada se
stranica uita prvi put u pregledniku

HANDS ON KEYBOARD

RESPONZIVNOST
Pogledajmo primjer kako bi izgledala stranica sa i bez
viewport elementa.

RESPONZIVNOST
Media Query
CSS3 podrka koja koristi @media pravilo koje se
ukljuuje u CSS samo ako je odreeno pravilo ispunjeno.
@media only screen and (max-width: 700px) {
body {
background-color: green;
}
}

ZADATAK 1
Napravite stilski obrazac prema slijedeim uputama.
Odredite boju pozadine internet stranice (#f3f3f3),
veliina fonta za cijeli dokument (12px),
format fonta (Helvetica, sans-serif),
boja fonta (#000000),
udaljenost teksta od ruba stranice (3px 5px),
poravnanje teksta (s lijevom i desnom stranom).

ZADATAK 2
Napravite responzivnu HTML stranicu gdje ete za:
rezoluciju veu od 800px imati:
boju pozadine internet stranice (#51b4ba),
veliina fonta za odlomak (120%),
format fonta (Helvetica, sans-serif)

rezoluciju manju od 800px imati:

boju pozadine internet stranice (#51b4ba),
veliina fonta za odlomak (140%),
format fonta (Georgia, serif)

VeleuiliteVelikaGorica
Naprednowebprogramiranje
dr.sc.Alenimec,predava|[email protected]

HTMLforme
HTMLomoguavaizraduwebformiiliobrazaca.
Webformemogusadravatiunaprijeddefiniranevrstapolja
kaotosu:kratkiunos,odabirjedneodviemogunosti,
odabirvieodviemogunosti,unoskratkogteksta,unos
datotekeislino.
ZasvakoodovihvrstapoljapostojiodgovarajuaHTML
oznakaputemkojesedefiniravrstapolja.
HTMLformaoblikovanaje:
Sadrajem
Kontrolama(input,checkbox,radiobuttons,menus,)

HTMLforme
Korisnicipopunjavajupredefiniranapoljaprijeslanja
podataka
Podaciseizformealjunaserverkakobiseobradili
Serverobraujepodatke,ovisnoovrstiobradespremau
bazu,aljenamaililivraapodatkekorisnikunaekran
HTMLformekoristesezadefiniranjerazliitihnaina
korisnikogulaza,unosapodataka

HTMLforme kontrolnitipovi
o buttons
o checkboxes
o radiobuttons
o menus
o text input
o fileselect
o hidden controls
o object controls

HTMLforme
Primjerjednostavneformesa"input"elementima
<html>
<body>
<formaction="http://somesite.com/adduser.php"method="post">
<p>
<labelfor="firstname">Ime:</label>
<inputtype="text"id="firstname"name="firstname"/><br/>
<labelfor="lastname">Prezime:</label>
<inputtype="text"id="lastname"name="lastname"/><br/>
<labelfor="email">email:</label>
<inputtype="text"id="email"name="email"/><br/>
<inputtype="radio"name="sex"value="Male"/>Muko<br/>
<inputtype="radio"name="sex"value="Female"/>ensko<br/>
<inputtype="submit"value="Poalji"/><inputtype="reset"value="Poniti"/>
</p>
</form>

</body>
</html>

HTMLforme
Primjerjednostavneformesa"input"elementima

HTMLforme
Korisnikradiinterakcijusaformomkrozpoljazaunos
Ovisnooatributuinput poljemijenjasvojoblikifunkciju
Vrijednostkojukorisnikaljeprekoformeideprekoatributa
value

<input type="radio"name="sex"value="Male">
<input type="submit"value="Poalji">

HTMLforme
Tag form
Zahtjevapoetniizavrnitag
Atributi:
action URLstranicenakojusealjupodaci,aljepodatakuneki
dokument(eng.file)
method nainslanjapodataka
get slanjeputemURLa.Moeseslatimanjibrojpodataka,a
podacikojisealjunemijenjajunitanaodredinomraunalu.Na
primjer:Pretraivanjepodataka
post slanjeputemdodatnihparametara.Moeseslati
neogranienakoliinapodataka.Podacikojisealjumijenjajuneke
informacijenaodredinomraunalu.Naprimjer:Upisivanjenovih
podatakaubazu,mijenjanjepostojeih

HTMLforme
enctype nainkodiranjapodataka.Moebiti:
Application/xwwwformurlencoded odreujetip
podatakakojisealjukrozformu.Defaultvrijednostje
"application/xwwwformurlencoded
Multipart/formdana akoseuinputpoljukoristi
oznakavrstadatoteke(type=file)tadajevrijednost
atributaenctype"multipart/formdata
Name nazivobrascazadohvatpolja
Id identifikatorobrascazadohvatpolja

HTMLforme
Tagformopisujeelemente(kontrole)kojesenalaze
unutarformoznake
Formamoesadravatiiostaleoznake,tekst,slike,
multimediju.
<html>
<body>
<formaction="test.php"method="post">
Ime:<inputtype="text"name="fname"><br>
Prezime:<inputtype="text"name="lname"><br>
<inputtype="submit"value="Submit">
</form>
</body>
</html>

HTMLforme input
Inputpoljamorajuimatipoetnitag,azavrnitag jezabranjen
Definicijeatributa:
name odreujekontrolnoime
type
text|password|checkbox|radio|submit|reset|file|hidden|image|button
value odreujevrijednostkojasealjekrozinputpolje
size odreujekojaebitiirinapolja.irinaseodreujeupixelima.
maxlength odreujemaksimalnibrojznakovakojekorisniksmijeupisatiu
polje.Default vrijednostjebeskonaanbrojznakova
checked akotippoljaimaatributcheckbox iliradio,boolean vrijednost
definiradajeovopoljeoznaeno
src akotippoljaimaatributimage,tadasedefiniraputanjapremaslici(npr.
grafikiprikazgumba)

HTMLforme input
Inputpoljaoviseovrijednostiatributa,amoebiti:
text unoskratkogteksta jedanredak
password unoslozinke,kreirajednulinijupoljakojajezatienaprikazom
naekranu
checkbox kvaicazaodabir(dailine)
radio mogunostodabirajedneodviemogunosti
submit gumbzaslanjepodatakaforme
image slikakojaaljepodatkesformenakontosenanjuklikne
reset brisanjepodatakauformi
button
hidden vrijednostseneispisujekorisnikunaekranu
file odabirdatotekezaslanjenaposluitelj

HTMLforme select
Selectpoljamorajuimatipoetnitagizavrnitag
Definicijeatributa:
name odreujekontrolnoime
size akojelistasloenaododreenogbrojaredakakojiseeleprikazatiu
istovrijeme,definiraseovajatribut.Akosenekoristiovajatributondase
poljeformirakao"dropdownmenu"
multiple omoguavaodabirviestavakaizliste

Selectpoljekreira menu.Svakiodabirodreenje"option"elementom.
Selectpoljemoraimatibaremjedan"option"element

HTMLforme option
Optionpoljamorajuimatipoetnitagizavrnitag
moebitiopcionalan
Definicijeatributa:
selected odreujebooleandajepoljeoznaeno
value odreujevrijednost

HTMLforme select
<html>
<body>
<formaction="http://somesite.com/componentselect.php"method="post">
<selectname="componentselect">
<optionvalue="Component_1_a">Component_1</option>
<optionvalue="Component_1_b">Component_2</option>
<optionvalue="Component_1_c">Component_3</option>
<optionvalue="Component_1_d">Component_4</option>
<optionvalue="Component_1_e">Component_5</option>
<optionvalue="Component_1_f">Component_6</option>
<optionvalue="Component_1_g">Component_7</option>
</select>
<inputtype="submit"value="Poalji">
</form>
</body>
</html>

HTMLforme select
Primjerselectoznake:
<html>
<body>
<formaction="test.php"method="post">
<select>
<optionvalue="0">molimoodaberite</option>
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<optionvalue="opel">Opel</option>
<optionvalue="audi">Audi</option>
</select>
<inputtype="submit"value="Submit">
</form>
</body>
</html>

HTMLforme select
Primjerselectoznakesaodabranimpoljem:
<html>
<body>
<formaction="test.php"method="post">
<select>
<optionvalue="0">molimoodaberite</option>
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<optionvalue="opel">Opel</option>
<optionvalue="audi"selected>Audi</option>
</select>
<inputtype="submit"value="Submit">
</form>
</body>
</html>

HTMLforme select multiple

<html>
<body>
<formaction="http://somesite.com/componentselect.php"method="post">
<selectmultiplesize="4"name="componentselect">
<optionselectedvalue="Component_1_a">Component_1</option>
<optionselectedvalue="Component_1_b">Component_2</option>
<option>Component_3</option>
<option>Component_4</option>
<option>Component_5</option>
<option>Component_6</option>
<option>Component_7</option>
</select>
<inputtype="submit"value="Poalji">
</form>
</body>
</html>

HTMLforme textarea
Textareapoljemoraimatipoetniizavrnitag
Definicijeatributa:

name odreujekontrolnoime
rows oznaavabrojvidljivihlinijapolja
cols oznaavavidljivuirinupolja
autocomplete
autofocus
dirname
disabled

Textareakreiravielinijskiprostorzaunospodataka.

HTMLforme textarea
<html>
<body>
<formaction="http://somesite.com/component.php"method="post">
<textareaname="tekst_jedan"rows="10"cols="20">
Upiitetekst...
</textarea>
<inputtype="submit"value="Poalji">
</form>

</body>
</html>

HTMLforme label
Labelmoraimatipoetniizavrnitag
Definicijeatributa:
for eksplicitnoodreujeuzkojukontrolusepridodjeljuje

Svakilabeldodijeljenjeiskljuivosamojednomelementuimorase
definiratikojem.
Atributfor morabitipovezansaatributomidkontrolnogelementa
(inputpolja)

HTMLforme label
<html>
<body>
<formaction="http://somesite.com/adduser.php"method="post">
<p>
<labelfor="firstname">Ime:</label>
<inputtype="text"id="firstname"name="firstname"/><br/>
<labelfor="lastname">Prezime:</label>
<inputtype="text"id="lastname"name="lastname"/><br/>
<labelfor="email">email:</label>
<inputtype="text"id="email"name="email"/><br/>
<inputtype="radio"name="sex"value="Male"/>Muko<br/>
<inputtype="radio"name="sex"value="Female"/>ensko<br/>
<inputtype="submit"value="Poalji"/><inputtype="reset"value="Poniti"/>
</p>
</form>
</body>
</html>

HTMLforme
Podacieseunavedenimprimjerimaprenositi
putemPOSTiliGETparametarakaotoje
navedenouatributumethod.
Upisanipojmovikrozformuzapisateseubazu
podataka.
Svipodacialjuseuodreenudatotekukaotoje
navedenouparametruaction.

HTMLforme
ProgramskijezikPHPpodatkeizformemoe
dohvaatiputemglobalnihvarijabli$_POSTi
$_GET.
Varijable$_POSTi$_GETsuimenovanapolja.
ImenaupoljuodgovarajuimenimavarijabliuHTML
formi,avrijednostisuonekojesuuneseneuformu
putempreglednika.

HTMLforme
Primjer

HTMLforme
Prilikomkoritenjavarijabliunesenihodstrane
korisnikavanojevelikupanjuposvetitisigurnosti.
KodPHPprogramanajeajesigurnosnagreka
koritenjepodatakakojekorisnikuneseizravnobez
dodatneprovjere.
Akoseneprovjeravaunoskorisnika,korisnikmoe
upisatiupitkojimesepozvatizlonamjeran
programiliupisatineeljenikodubazu,te
omoguitiizravanpristupsustavuzaupravljanje
bazompodataka(sql injection).

HTMLforme
VrloestaprimjenaprogramskogjezikaPHPje
izradawebaplikacijakojeukljuujuprijavuiodjavu
korisnika.
Zaprijavuiodjavukorisnikamogusekoristiti
jednostavniobrasci,aprovjeraispravnosti
korisnikogimenailozinkesemoeraditina
nekolikojednostavnihnaina.
PrijavakorisnikaseradiupotrebomCookie ili
Session varijablikojeseprenoseputem
preglednika.

HTMLforme
Posluiteljpreglednikupoaljevrijednostmalog
brojavarijablisnjihovimvrijednostima.
Preglednikprilikompristupanjaposluitelju,
automatskialjetevarijablespripadajuim
vrijednostimanatemeljuegaposluiteljmoe
isporuitiodgovarajuepodatke.
Varijableinjihovevrijednostisesnimajunalokalni
diskskojegkorisnikpristupaInternetuputem
preglednika.

HTMLforme
Osimtosupodacipohranjeninaraunalu
korisnika,vanojeidaposluiteljznatosnjima
uiniti.
Diopodatakaspremamonaserver,dokdio
podatakaspremapreglednikpomouglobalnih
varijabli.
Preglednikprenosikratkuidentifikacijskuoznaku
korisnikatemeljemkojeposluiteljmoe
rekonstruiratiokojojosobijerijete,kojurazinu
pravataosobaima.

Pitanja