STANDARDI U PRIMJENI

INTERNETSKE TEHNOLOGIJE

Upoznavanje
Predavanja:
Bojan Fulanovi
bojan.fulanovic@racunarstvo.hr
Vjebe:
Aleksandar Stojanovi
a.stojanovic@live.com
Mario Fabijani
mario.fabijanic@racunarstvo.hr

O kolegiju
Cilj kolegija:
Nauiti osnovne standarde u primjeni
internetskih tehnologija

5 ECTS bodova
30 sati predavanja (15 termina po 2 sata)
30 sati vjebi (15 termina po 2 sata)
60 sati samostalnog rada (15 tjedana po
4 sati)

Prikupljanje bodova i ocjene

Ukupno 100 bodova:
Prisutnost na nastavi: 3 boda
3 domae zadae : 7 bodova
3 meuispita
M1-25
M2-35
M3-30

Ocjene:

92,01 100,00 bodova: izvrstan (5)

75,01 92,00 bodova: vrlo dobar (4)
58,01 75,00 bodova: dobar (3)
50,01 58,00 bodova: dovoljan (2)

Ishodi uenja
R.br.

Minimalni ishodi uenja

eljeni ishodi uenja

I1

Kreirati statiku HTML stranicu prema detaljnoj specifikaciji

Odabrati odgovarajue HTML

elemente u svrhu izrade statike
HTML stranice prema okvirnoj
specifikaciji

I2

Odabrati odgovarajue CSS stilove prema specifikaciji te ih

primijeniti na HTML stranici u svrhu oblikovanja HTML elemenata

Odabrati odgovarajue CSS stilove

prema specifikaciji te ih primijeniti
na HTML stranici u svrhu
oblikovanja predloka HTML
stranice

I3

Primijeniti Javascript jezine elemente za manipulaciju

elementima HTML stranice

Procijeniti opravdanost koritenja

JavaScript programskih okvira te
implementirati rjeenje

I4

Kreirati dobro definirani XML dokument s pripadajuom XML

shemom

Upravljati XML dokumentom

pomou JavaScript jezika

I5

Primijeniti XSLT jezik na zadani XML dokument prema detaljnoj

specifikaciji

Primijeniti XSLT jezik na zadani XML

dokument prema okvirnoj
specifikaciji

Razdioba bodova
M1

I1

M2

M3

25

Domaa
zadaa

Blicevi

Usmeni
ispit

MAX

27

I2

15

16

I3

20

21

I4

20

21

I5

10

11

30

97+3

Izvan
ishoda
Ukupno

25

35

O kolegiju
Ispiti i gradivo:
Prvi meuispit pokriva ishod uenja 1
Drugi meuispit pokriva ishode uenja 2 i 3
Trei meuispit pokriva ishode uenja 4 i 5

Ishode uenja je mogue popravljati na svim

rokovima
Domae zadae nije mogue popravljati

Domae zadae
Domae zadae e biti najavljene na
predavanjima/vjebama ili na Infoeduci
Domaa zadaa mora se predati u zadanom
roku

HTTP
HyperTextTransferProtocol
Informacija se prenosi u obliku dokumenata (web stranica)
Web stranice su pohranjene na serverima.
Na klijentskim kompjutorima web stranice pregledavamo sa
web preglednicima.
HTTP protokolom informacije se alju i primaju preko mree
po principu request/response (zahtjev/odgovor).
Zahtjev sadri URL (Uniform Resource Locator) koji specificira
odredinu adresu web stranice
Posluitelj alje niz zahtjeva prije nego poalje kod stranice
Zaglavlja su bitna jer govore pregledniku kako da interpretira
kod stranice koji slijedi
Najvanije: Content-Type: text/html

Uvod u HTML

HTML HyperTextMarkupLanguage
HyperText predstavlja tekst na kojeg se moe klikati kako bi
se skakalo s dokumenta na dokument, mogunost stranica da se
meusobno povezuju

Markup predstavlja oznake koje se apliciraju na obian tekst

Language HTML se smatra jezikom za oznaavanje

1993 godine predstavljena je prva vrlo ograniena verzija

1995 godine predstavio se HTML 2.0, prva standardizirana verzija)

koji je bio standardizacija koritenja ve postojeih oznaka (tagova)

1997 godine predstavljena je verzija 3.2 koja nije bila ni po emu

revolucionarna nego je u specifikaciju uvela nove elemente koje su

preglednici ve podravali kao npr. tablice

Uvod u HTML
Praksa proizvoaa internet preglednika bila je da izdaju
vlastite oznake za vlastite potrebe te da ne pruaju potpunu
podrku za odreena svojstva html specifikacije
Nona mora za programere i dizajnere
vie verzija stranica za razliite preglednike

ignoriranje odreenih preglednika

Kako bi se uvelo reda 1998 godine na inicijativu grupe web
programera zapoet je Web Standards Project koji se zalagao
za uvoenje W3C* preporuka kao standarda u pisanju html
dokumenata
Promocijom Internet preglednika koji bi se drali tih
standarda vrili su pritisak na proizvoae da im prije
prihvate standarde
*W3C - WorldWideWebConsortium

Uvod u HTML
Web Standards Project 1999 godine rezultirao je izlaskom
HTML 4.0
HTML 4.0 je stabilizirao jezik i postao standardom skroz do
danas
2000 godine W3C konzorcij izdao je XHTML 1.0 u namjeri da
zamijeni HTML
XHTML (eXtensible HyperText Markup Language) je
predstavljao skup pravila i metodologija XML-a primjenjivih
na HTML
2001 godine izaao je XHTML 1.1
Stranice su se morale isporuivati sa zaglavljem
Content-Type:application/xhtml+xml

"drakonska obrada pogreaka"

slabo prihvaen od strane dizajenra i programera

Uvod u HTML
Nezadovoljni smjerom u kojem se razvijao XHTML, grupa
developera i proizvoaa preglednika se odluila na razvoj
HTML jezika van W3C konzorcija
Oformili su WHATWG* grupu koja je zapoela daljnji razvoj
HTML-a pod vlastitom specifikacijom koju su nazvali Web
Applications 1.0
W3C je priznao njihov rad i prihvatio ga 2007 godine pod
imenom HTML 5

HTML5
kompatibilan s prijanjim verzijama HTML-a
podrava nove API-e
uvodi nove semantike oznake
*Web Hypertext Application Technology Working Group

HTML
HTML (Hyper Text Markup Language) je jezik za opisivanje
web stranica
Nije programski jezik, to je jezik za oznaavanje (markup
language)
Pomou HTMLa moemo odrediti strukturu elemenata u
dokumentu (naslovi, paragrafi, slike, hipertekstualne veze
itd)
Omoguava nam odreivanje izgleda pojedinih elemenata

Internet preglednici ne prikazuju html oznake nego ih koriste

za interpretiranje sadraja stranice

HTML
HTML oznake su kljune rijei ograene izlomljenim
zagradama poput <html>.
HTML oznake redovno dolaze u paru poput <b> </b>.
Prva oznaka u paru je poetna a, druga oznaka je zavrna
Moe ih se jo nazivati otvarajua i zatvarajua oznaka.
HTML se moe pisati u bilo kojem tekstualnom editoru kao
to su Notepad ili Notepad++
Danas postoje mnogi alati koji olakavaju pisanje HTML koda
a rade po principu WYSIWYG. Jedan od najpopularnijih su
Dreamweaver, Visual Studio

HTML elementi
Primjer nekih HTML elemenata:

Naslovi (oznake h1 h6, <h1>)

Odlomci (<p>, <address>, <pre>)
Linkovi (hipertekstualne veze, <a>)

Tablice (<table>, <tr>, <td>, <th>)

Grafika (<img>)

HTML elementi

Glavna oznaka svakog HTML dokumenta je <html>

Eventualni atributi koji se koriste:
lang (kod renderiranja kalendara i datuma)
dir (smjer pisanja kako bi se pravilno renderirala stranica)
Obavezne oznake <html> elementa:
<head> (zaglavlje dokumenta, sadraj se ne prikazuje u
pregledniku, a slui za detaljno opisivanje stranice)

<title> (naslov stranice koji se ispisuje u naslovnoj traci)

<body> (sadraj dokumenta koji e biti prikazan u pregledniku)

HTML elementi
Gotovo svi elementi imaju sadraj. Oni koji nemaju sadraj kao
npr. horizontalna linija ili novi redak, otvaraju se i zatvaraju
odmah
<hr/>
<br/>

Dvije su glavne podjele elemenata

Blok elementi predstavljaju elemente koji iznad i ispod
sebe ostavljaju novi red.
<div>, <p>, <table>, <hn>, <hr/>
Linijski elementi ne izazivaju prijelom reda.
<strong>, <em>, <span>

Atributi
Pojedini HTML elementi ne mogu ispravno raditi bez atributa
Atribute se definira na nain ime="vrijednost"
Veinom su opcionalni no u odreenim sluajevima bez
njihovog navoenja interpretacija elemenata bi bila
nemogua

Primjer takvih atributa:

src atribut oznake <img> predstavlja putanju do slike
href atribut oznake <a> predstavlja adresu
hipertekstualne veze

Atributi
Imena atributa se navode u obliku:
cijelih rijei (align, style)
skraenica (src, vlink)
Navode se tako da slijede ime oznake i odvojeni su razmakom
<body bgcolor="#ffffff" text="#000000">

Pravila pisanja
Koncepti pravilnog pisanja koda kojih bi se trebalo pridravati
radi lakeg snalaenja u kodu, a koji se veu XHTML pravila
su:
Svi elementi i imena atributa piu se malim slovima
Sve vrijednosti atributa moraju biti pod dvostrukim
navodnicima
Svi elementi moraju biti zatvoreni
Svi elementi moraju biti pravilno ugnijeeni
Pisati itljiv kod
na prvi pogled mora biti jasna struktura dokumenta. Ovo je izuzetno
vano ako s istim dokumentom radi vie ljudi

Komentirati kod
korisno kod odravanja, pogotovo na veim projektima

HTML oznaka <head>

Zaglavlje dokumenta, sadri informacije za ispravno renderiranje

stranice, naslov stranice, podatke za pretraivae

Elementi koje moe sadravati: <link>, <script>, <style>,

<title>, <meta>

<meta> oznaka slui za uvanje podataka o HTML dokumentu.

2 osnovna atributa:
charset (kodiranje stranice character encoding koriteno u dokumentu)
name (predstavlja ime podatka navedenog pod atributom content)

HTML oznaka <body>

Sadri sadraj stranice, prikazuje se korisniku
Atributi:
alink boja aktivnog linka unutar dokumenta
vlink boja posjeenog linka na stranici

link boja neposjeenog linka na stranici

background slika pozadine dokumenta
text boja teksta na stranici
bgcolor boja pozadine dokumenta

HTML oznaka <div>

Do HTML5 verzije jedan od najpopularnijih elemenata
Blok element koji slui za grupiranje blok elemenata
Atributi (zajedniki svim elementima):
id identifikator, jedinstveno ime elementa
title dodatno opisuje element, pojavljuje se kao tooltip
style za definiciju linijskog stila
<div>Sadraj div elementa</div>

HTML oznaka <p>

Za izradu odlomaka
Blok element
Atributi:
id, title, style, align za poravnanje teksta
Mogu se jo definirati pomou oznaka:
<address> - ispisuju odlomak kao pisana ukoena slova
<blockquote> - ispisuje odlomak uvuen u desno, za
ispis citata

<pre> - ispisuje odlomak koristei fixed-width font i

zadravajuci razmake i nove redove
<p>Sadraj p elementa</p>

HTML oznaka <span>

Linijski element
Za grupiranje teksta
Za naglaavanje dijela teksta
Morate <span style="mojStil">obavezno</span> donijeti

HTML oznaka <hn>

Predstavlja naslov cjeline u kojoj se nalazi
Ima 6 razina
h1 - najvia razina, vei font
h6 - najnia razina, manji font
Atributi:
align poravnanje (left,

right, center, justify)

HTML oznaka <hr/>

Element koji nema sadraj
Predstavlja horizontalnu crtu
Atributi:
align
noshade uklanja sjenu linije
size visina linije (px)
width irina linije (px ili %)

HTML oznaka <img/>

Za ubacivanje slike u HTML kod
Svaka slika predstavlja novi request na server

Nema sadraj, sadri samo atribute

Atributi:
src putanja do slike
border debljina okvira slike
hspace i vspace razmak u pikselima od teksta koji
okruuje sliku
align top, middle, bottom, left, right
alt alternativni tekst
width irina slike
height visina slike
<img src="slika.jpg"/>

HTML oznaka <ol>

Idealne za prikaz stablaste strukture
brojane
simbolike
definicijske

Brojana lista <ol> (ordered list)

Elementi brojane liste oznaeni su brojevima ili slovima
pojedini elementi liste: <li> (list item)

<ol> atributi:
type - (1-arapski brojevi, a/A-mala/velika slova abecede,
i/I-mali/veliki rimski brojevi)

start poetni broj liste (inicijalni je 1)

<li> atributi:
type - (1-arapski brojevi, a/A-mala/velika slova abecede,
i/I-mali/veliki rimski brojevi)

HTML oznaka <ul>

<ul> atributi:
type
disc puni krug
square puni kvadrat
circle - krug
<li> atributi:
type
disc puni krug

square puni kvadrat

circle - krug

HTML oznaka <a>

Atributi:
href putanja do dokumenta s kojim se povezuje
name definiranje sidra, koristi se kod dugakih dokumenata za izradu
tablice sadraja
target prozor u kojem e se dokument otvoriti
_self unutar istog prozora
_blank u novom prozoru
proizvoljno ime u novom prozoru (svi linkovi s istim

proizvoljnim imenom otvaraju se u istom prozoru)

Postoje 4 vrste hipertekstualnih veza (linkova):

Unutarnje veze pristupaju stranicama unutar sitea (relativne adrese)
Vanjske veze pristupaju stranicama drugih siteova (apsolutne adrese)
Veze prema e-mailu kao putanja koristi se
mailto:neka.mail@adresa.com
Veze unutar dokumenta veze na sidra

Definiranje sidra

Poveznice unutar mape

Poveznice prema mapama nie razine

Poveznice prema mapama vie razine

HTML stilovi
Fiziki (u svim preglednicima izgledaju isto)

<b> - podebljan tekst

<i> - ukoen tekst

<u> - podcrtani tekst

<strike> - precrtani tekst

Logiki (nain renderiranja ovisi o internet pregledniku)

<em> - ukoen tekst

<strong> - naglaen tekst

<code> - dio programskog koda

<small> - tekst pisan smanjenim fontom

<big> - tekst pisan veim fontom

<sub> - indeks

<sup> - eksponent

HTML komentari
Slue za pojanjenje koda
Ne ispisuju se u pregledniku

Korisni kada na istom dokumentu radi vie ljudi

HTML specijalni simboli

HTML stranice uglavnom sadre ASCII (American Standard
Code for Information Interchange) tekst
http://www.asciitable.com/
Simboli se ubacuju u tekst na nain da poinju s ampersand
znakom (&), a zavravaju sa toka-zarez znakom (;)
&copy; &lt; &gt;
http://www.ascii.cl/htmlcodes.htm
ASCII znakove je mogue pisati na isti nain ali nije potrebno.
Npr. Znak @ se moe pisati kao &#64;