Ukiproba 2

Repetitori rade na kom sloju?
Fizičkom
Prvi i najniži OSI model je
Fizički sloj
Ukoliko ne želimo da se neki tekst prelomi u više linija, treba ga napisati između
<nobr> i </nobr>
Ukoliko u HTML dokumentu napišemo više razmaka
Svi oni će se svesti na samo jedan
Dat je deo HTML koda:
<i>Glavni meni<i>
Postoji greška
Označiti tačnu CSS sintaksu
body{color:black;}
OSI referentni model se sastoji od koliko slojeva
7
<tag> t e ks t</tag>
pre
Šta od navedenog jeste atribut taga <body>
H2
Označiti sve autribute koje može imati <font> tag.
face
size
color
Koji atribut definiše tekst koji će biti prikazan umesto slike ukoliko ona ne može
biti
prikazana?
alt
Dimenzije slike se zadaju pomoću atributa widh i height i one se zadaju
u pikselima ili procentima
CSS je skraćenica od
Cascading Style Sheets
Koja boja će se primeniti na paragrafu?
<style type="text/css">
p {color: purple; }
p {color: green; }
p {color: gray; }
Gray
Označiti tačan HTML za postavljanje pozadinske slike
<body background="bakground.gif">
Tag <frameset> zamenjuje koji tah u HTML
<body>
Za multimedjalne aplikacije za prenos galsa ili slike koja se oslanjaju na rad u
realnom
vremenu korisi se TCP protokol
Ne
Spojiti odgovarajuće delove CSS pravila
blockquote ( lin-height: 1.5; )
vrednos : 1.5
Selektor blockquote
svojstvo line-heihht
deklaracija line-heiht: 1.5
Označiti pravilan način povezivanja HTML stranice sa spoljnim CSS fajlom
<link rel="stylesheet" type="text/css" href="/path/mystyle.css"
Koji HTML tag se koristi za definisanje internog CSS Stila
<style>
Ukoliko želimo da se link otvori u posebnom tablu, vrednost atributa___treba da
bude___.
target,_blank
Koji selektor se koristi za označavanje stila za jedan specifičan, jedinstven
element?
id
Pricnip da protokol nižeg nivoa pri preuzimanju podataka dobijenih od protokola
višeg nivoa dodaje sopstvene kontrole
parametre i takav skup podataka prosleđuje protokolu nižeg nivoa (koji primenjuje
isti princip) naziva se
Enkapsulacija
Za šta od navedenog je zadužen sloj prezentacije?
Kompresiju dekompresiju podataka
Koje se svojstvo u CSS-u koristi za menjanje boje pozadine
background-color
Kako se unosi komentar u CSS Fajl
/*komentar*/
Označiti tačan naziv za kreiranje linkova u HTML-u.
<a href="http://viser.edu.rs">VISER</a>
Dat je deo HTML koda
<a>Tekst linka</a href="file.html"?
Da
Po tehnologiji prenosa računarske mreže dele na difuyijske (brodcast) mreže i mreže
od tačke do tačke (point to point).
Da
Gde u HTML kodu treba uključiti spoljni CSS fajl
unutar <head> taga
Tekstualno polje se unutar forme postavlja upotrebom taga
<input>
Koji HTML tag služi za unošenje novog reda
<br>
HTML je skraćenica za
Hyper Text Markup Language
Uz pomoć kog HTML taga se moze napraviti nenumerisana lista?
<ul>
IP (internet protokol) je protokol kojeg OSI referentnog modela?
Mrežnog sloja
Koji HTML atribut se koristi za definisanje linijskih CSS stilova
Style
Označiti tačan tag za dodavanje tekstualne oblasti unutar stranice.
<textarea>
Fajlovi koji prestavljaju HTML stranice imaju ekstenziju
.html
.htm
Kako se link može otvoriti u novom tabu
<a href="url" target="_blank"
Koristeći relativne putanje, napisati šta treba da stoji umesto tri tačke da bi se
unutar
stranice friends ubacila slika bullet.gif
../../../images/bullet.gif
Koristeci relativne putanje, napisati sta treba da stoji umesto tri tačkice tako da
se
napravi link unatar stranice money.html
<a hre="...">Link ka stranici index.html</a>
Koje CSS svojstvo kotrolise velicinu teksta?
font-size
Koji je od navedenih ispravan zapis za dodavanje pozadinske boje?
<body bgcolor="yellow">
Selektor koristi ID elementa, na primer id="podnaslov", na sledeci nacin
#podnaslov
Označiti tačan naziv za dodavanje slike unutar stranice
<img src="image.gif">
Pri kreiranju radio dugmeta, vrednost atributa type <input> taga je "radio".
Da
Koji od navedenih slojeva NE postoji u TCP/IP modelu
Sloj prezentacije
Celija tabele moze obuhvatiti i vise redova kolona, i to se postize atributima
colspan i rowspan
Kako se postavlja pozadina unutar svih <h1> elemenata?
h1 {background-color:#FFFF;}
Da bismo dbili maskirani tekst koristi se tag <password>
Da
Koji protokol pruza usluge aplikacija koje ne zahtevaju pouzdan prenos?
UDP
Oznaciti tacnu CSS sintaktsu
body{color:black;}
Port je ceo broj koji se sastoji od koliko bitova?
8
Poddokumenta <frameset> taga navode se u okviru taga
<frame>
Oblast pokrivanja kod LAN mreze je do nekoliko kilometara
Ne
Za umetanje linka koristi se tag
A
SLOJEVITOST I REFERENTNI MODEL
Uredaji prenosnog podsistema – Modemi, koncentratori, Multiplekseri, HUB (LAN),

Bridge (LAN), Switch (LAN), ruteri
Podela racunarskih mreža
• Po tehnologiji prenosa – difuzijska (broadcast); od tacke do tacke (point-to-
point)
Komutacija poruka – cela poruka se šalje od cvora do cvora dok ne dode do

korisnika.
Komutacija paketa – poruka se deli na manje delove (pakete) koji se prenose
razlicitim putevima kroz mrežu
• Po velicini – LAN (topologija najcešce magistrala, prsten ili zvezda; velika

brzina prenosa podataka), MAN i WAN. internet(sa malim „i“) – više LAN/MAN mreža
povezanih u WAN
OSI model
1. Fizicki – zadužen za ispravan prenos bita duž komunikacionog kanala; Modulacija

– reprezentovanje bita u fizickom komunikacionom kanalu; NIC (Network Interface
Card) – definiše naponske nivoe, broj pinova na konektorima i parica u kablovima.
Mrežne kartice, hubovi i ripiteri su primeri uredaja na fizickom nivou.
Fizicke karakteristike medijuma – žicani, opticki, bežicni
Reprezentacija bitova – tip kodiranja i modulacije
Brzina prenosa – bitska brzina (broj bita koji se prenose u jednoj sekundi); bitski
interval (trajanje jednog bita – reciprocna vrednost bitske brzine)
2. Sloj veze – upravlja prenosom putem fizickog sloja i štiti više slojeve od
grešaka pri prenosu; Sloj veze upravlja i formatom poruka, podaci se konvertuju i
formatiraju u oblik pogodan za mrežni sloj; Definiše i podsloj MAC za pristup
zajednickom kanalu
3.Mrežni – omogucava prenos podataka izmedu mreža, bez obzira na njihove medusobne
razlike. Odreduje prenosne puteve, obavlja funkcije komutiranja; Na ovom sloju vrši
se rutiranje podataka, pa se za rutere kaže da su layer 3 uredaji. Najpoznatiji
protokol ovog sloja je IP protokol
4.Transportni – vodi racuna o prenosu podataka sa kraja na kraj mreže. Prima

podatke od sloja sesije, formira manje delove (ako je potrebno) i predaje delove
mrežnom sloju. Prenos je moguc sa kontrolom grešaka i bez, kao i vodeci racuna o
redosledu slanja i potvrdi o prijemu, i bez; Transportni sloj je prvi koji direktno
povezuje racunare koji komuniciraju
5.Sloj sesije – zadužen za uspostavljanje, održavanje i prekid logickih sesija

izmedu krajnjih tacaka. Sinhronizacija omogucava nastavak prenosa u slucaju prekida
prenosa;
6.Sloj prezentacije – Ne bavi se prenosom. Razliciti racunari razlicito prikazuju

podatke. Ovaj sloj formatira podatke za prezentaciju korisniku;
7. Aplikacije – Opisuje rad aplikacija u mreži i njihovu interakciju sa servisima i

protokolima nižih slojeva. Ovom sloju pripada najveci broj protokola (BIT torrent,
HTTP, FTP; POP3, DHCP, DNS...)
TCP/IP Model
Jednostavniji – prva dva sloja su spojena i nema sloj sesije i prezentacije

Horizontalna komunikacija – mogucnost projektovanja protokola jednog sloja na isti
nacin kao da on direktno komunicira sa udaljenim sagovornikom, tj. bez korišcenja
protokola ispod
Vertikalna komunikacija – slojevi komuniciraju sa višim/nižim slojevima. Primenjuje
se princip enkapsulacije
Redosled isporucenih paketa – nije striktan

Pouzdan prenos podataka – IP nema mogucnost da obavesti izvor da se neki od paketa
izgubio i traži ponovno slanje, pa se ova funkcija prenosi na transportni sloj
Portovi – mehanizam protokola transportnog sloja kojim se omogucava da više

aplikacija koriste usluge jednog jedinstvenog IP-a. Port je 16-bitni broj koji se
pridružuje svakoj aplikaciji koja komunicira preko mreže. Ukupan broj portova
jednog racunara je 2na16
Socket – Krajnja tacka dvosmernog komunikacionog toka preko racunarske mreže

bazirane na IP protokolu. Nekada se par PORT-IP naziva socket.
TCP vs UDP – TCP je protokol sa uspostavom veze, a UDP ne zahteva (Skype,

GoogleTalk – bitno je omoguciti razmenu podataka u realnom vremenu, po cenu gubitka
nekih paketa)
IP ADRESIRANJE I UREÐAJI
Fizicka adresa – MAC adresa, ima 48 bita i jedinstvena za svaki uredaj (prva 24
bita proizvodac, ostatak mrežna kartica)
Tipovi MAC adresa – Unikast, Multikast, Brodkast
Mrežno adresiranje – IP protokol...IPv4 i IPv6. IPv4 – 32 bita, adresa mreže i

adresa hosta...klase A,B,C,D,E
Opseg privatnih IP adresa – 10.0.0.0 – 10.255.255.255; 172.16.0.0 – 172.31.255.255;

192.168.0.0 – 192.168.255.255
Repetitori i habovi – rade na OSI fizickom sloju i regenerišu mrežni signal, tj.
ponovo ga šalju ka drugom segmentu. Ogranicenja – Ne može da poveže razlicite
segmente, segmente sa razlicitim pristupnim metodama, ne može da izoluje ni
filtrira pakete; Može da poveže razlicite tipove medijuma za prenos
Mostovi – jedan ulaz i jedan izlaz; Ne mogu da interpretiraju informacije visokog

nivoa, ne mogu da filtriraju paket na osnovu njegovog protokola. Mostovi rade na
MAC podsloju OSI modela. Najcešce se koriste za povezivanje dve LAN mreže
Repetitori Mostovi
OSI sloj Fizicki Veze
Regeneracija Na nivou signala Na nivou paketa
Smanjuje saobracaj Ne Da
Svicevi – rade na 2.sloju OSI modela. Mogu da interpretiraju adresne informacije,

podsecaju na mostove i smatraju se multiport mostovima. Prednosti: svicevi dele
mrežu u nekoliko izolovanih kanala, smanjuju mogucnost kolizije, svaki kanal ima
sopstveni mrežni kapacitet. Ogranicenje: ne može da otkrije koliziju kad je bafer
pun. Tipicna upotreba je u centru mreže koja ima topologiju zvezde
Ruteri – rade na 3.sloju. Koriste „logicku adresu“ paketa i tabela za rutiranje da

bi odredili najbolju putanju za isporuku.
NAT – Tehnika prevodenja adresa, omogucava da se u okviru sajta koriste privatne

adrese za lokalnu komunikaciju i skup globalnih adresa za komunikaciju sa drugim
sajtovima.
HTTP – protokol aplikativnog sloja, zasniva se na modelu klijent-server i zahteva

pouzdanu vezu na transportnom sloju. Standardno port 80. HTTPS – kombinacija sa
SSL/TSL protokolima, koristi port 443.
MIME tipovi – identifikator formata dokumenta. Bez MIME tipova, email klijent ne bi
mogao da razlikuje formate priloga
URL – sastoji se iz 3 dela – protokol preko koga se pristupa stranici; DNS ime
racunara na kome je stranica locirana; Lokalno ime fajla u kome je stranica
sacuvana
HTML
HTML – fajl tekstualnog formata. Struktura – html, head, title, body...

META – informacije koje opisuju dokument (tip dokumenta, kodni raspored,
keywords...) HTTP-EQUIV – atribut koji povezuje element sa HTTP serverom; NAME;
CONTENT
Srpska slova – 8859-2(latinica), 8859-5 (cirilica)
Atributi
<body background=“URL slike“>; <bgcolor=“#000000“>; <body text=“#000111“>

alink – boja aktivnih linkova; vlink – boja posecenih linkova;
pasusi <p>, odeljci <DIV> ALIGN center, left, right; <BLOCKQUOTE> ; <EM>
(naglašavanje)
<UL> <OL> <LI> <DL> <DT> <DD>
COOKIES
Server dostavlja klijentu zajedno sa traženom stranicom, koji klijent može, a i ne
mora da sacuva. Sadrži 5 polja – Domen servera; putanja; Podaci (ime=vrednost);
Expires (do kad važi cookie); Secure (ako je yes, cookie je šifrovan)
HTTP PROTOKOL – za komunikaciju izmedu citaca i servera, koristi TCP port 80. Vrste
konekcije: Neperzistentna (konekcija se zatvara kad server pošalje podatke citacu);
Perzistentna
SERVERI POSEBNE NAMENE – Proxy (posrednik izmedu LAN korisnika i weba, smanjuje
cekanje na isporuku web stranica; Lokalni (na racunaru), LAN proxy (korporacijski),
ISP) i Firewall
SLIKE U HTML
<img src=“URL slike“> gif – više kontinuiranih delova iste boje; jpg – kod slika sa
vecom paletom boja
ALIGN – top, middle, bottom, left, right
ALT – tekst koji se prikazuje umesto slike
HEIGHT i WIDTH – u pikselima ili %
VSPACE i HSPACE – razmak izmedu teksta i slike (u px)
MAPIRANJE - <USEMAP>gornji levi ugao je koordinatni pocetak; primer: <IMG
SRC="slika1.gif" USEMAP="#mapaA">
Mapa se opisuje pomocu <MAP>, ciji je podelement <AREA> sa atributima: SHAPE, HREF,
COORDS
HIPERVEZA
<A> href – URL adresa stranice na koju se može preci; ID – identifikator sidra;
Target – gde se otvara referencirani dokument (_blank, _parent, _self
(podrazumevano), _top)
TABELE
<TABLE> <CAPTION> (opcioni, za naslov tabele), <TR> <TH> <TD> (colspan, rowspan)
Atributi: ALIGN, VALIGN, BORDER, CELLSPACING (u px, izmedu celija), CELLPADDING,
WIDTH
FONT
<COLOR> <FACE> <SIZE>
FREJMOVI
<FRAMESET> umesto body sekcije. Atributi: COLS, ROWS. U <FRAME> se navode

poddokumenta sa atributima SRC, MARGINWIDTH, MARGINHEIGHT
<IFRAM> prikazuje web stranicu unutar druge web stranice
FORM
ACTION – definiše URL skripte koja obraduje podatke koji se pošalju putem forme.
METHOD – GET; POST (podaci sa posebnom zaštitom, bez ogranicenja velicine)
ELEMENTI - <input type=“text“/“password“ name=“ime“>

<input type=“radio“ name=“pol“ value=“muški“>
<input type=“checkbox“ name=“vozilo“ value=“Auto“>
CSS
selektor {property:value;} deklaracija

Nacini povezivanja stilova i dokumenata – spoljni (zaseban fajl .css); unutrašnji
(<style> tag u <head> sekciji); linijski (inline)
Povezivanje HTML stranice i CSS fajla – link i @import.

<head>
• <title>Titles are required.</title>
• <link rel="stylesheet" href="/path/stylesheet.css">
• </head>
@import cita pravila pre nego što budu primenjena, tako da naknadno definisana
pravila preklapaju ova.
Nasledivanje – konflikti, gde se šta definiše...Prioritet „odozgo na dole“.

Korisnici mogu imati sopstvene stilove (user style sheet) koji preklapaju
podrazumevane stilove citaca
!important – sprecava preklapanje primenom važnosti na neki stil
Redosled primene stilova:

1. Podrazumevani stilovi browser-a
2. Korisnicki definisani stilovi u browser-u
3. Spoljni stilovi
4. Importovani stilovi (dodati pomocu @import funkcije)
5. Ugradeni stilovi (added with the style element)
6. Linijski (Inline) stilovi (dodaju se u pocetnom tagu)
7. Stilovi oznaceni sa !important
8. Korisnicki definisani stilovi sa !important
Box model
Margin, Border, Padding, Content...
Kriterijumi za definisanje selektora
• Tip elementa h2 {color:blue;}

• Kontekst h2 EM {color:grey;}
• ID elementa h2#glavni {color:red;}
• Klasa elemenata EM.myClass {color:green;}
• pseudo klasa elementa h2:naslovi {color:green;}
• atributi sa ili bez vrednosti h2[name] {color:red;}
Selektor koji oznacava primenu stila na grupi (klasi) elemenata piše se npr:
.podNaslovi {color:red;} - tacka je obavezna!
Ime klase se može koristiti zajedno sa tipom elementa, a u tom slucaju se pravilo
primenjuje na elemente tog tipa iz oznacene klase. Na primer: H2.podNaslovi
{ color:red; }
Selektor treba da koristi ID elementa na nacin tako da se prvo stavi #, pa vrednost

ID atributa elementa na koji se stil odnosi. Na primer: h1#glavniNaslov { color:
red; }
Ovaj selektor se odnosi na h1 naslov ciji je id “glavniNaslov“. Selektori mogu
koristiti kombinaciju nekoliko vrsta oznacavanja, na primer:
div#zakljucak p{ color:blue; } oznacava primenu na
paragrafe odeljka ciji je ID=“zakljucak“
Izbor na osnovu roditelja - div#zakljucak > p { color:blue; } - Selektor se odnosi

na paragrafe koji su dete elementi u odnosu na div sa id= “zakljucak“
- samo prvi podelement : first-child
- Da bi se odabrao element na istom nivou, dakle koji ima istog roditelja, koristi
se oznaka +
Na primer: h1#glavniNaslov +p { color:blue; } znaci da se selektuje element p koji
je na istom nivou (tj ima istog roditelja) kao element h1 sa atributom ID koji ima
vrednost glavniNaslov
Selektori na osnovu atributa – [atribut] a[href] {text-decoration:none;}
[atribut=val]
[atribut -=val]
[atribut |=val] [atribut^=value] [atribut$=value]
[atribut*=value]
Pseudoklase
Za znakove koji nisu opipljivi i koji ne mogu „rucno“ da se oznace: npr. first-
child; first-line; first-letter...
Za linkove: link (nije kliknuto, niti je miš nad njima); visited; focus; hover;
active (kada se na njih pritisne)
Uvod u Internet tehnologije
Vežba 1
OSI referentni model
? Krajem sedamdesetih godina prošlog veka, Medunarodna organizacija za

standardizaciju (ISO) predložila je organizaciju racunarskih mreža u sedam slojeva.
? Ovaj model se naziva OSI (Open System Interconnection) model.
? Sedam slojeva OSI modela su, pocev od najvišeg ka najnižem: aplikativni sloj,
sloj prezentacije, sloj sesije, transportni sloj, mrežni sloj, sloj veze podataka i
fizicki sloj.
Sloj aplikacije
? Sloj aplikacije (engl. Application Layer) je sedmi i najviši sloj OSI

referentnog modela.
? To je i najviši sloj TCP/IP modela, koji je razvijan za potrebe Interneta i

jednostavniji je od OSI modela).
? Ovaj sloj opisuje rad aplikacija u mreži i njihovu interakciju sa servisima i

protokolima nižih slojeva. Protokoli sloja aplikacije imaju funkciju da razmene
podatke izmedu pokrenutih programa na prijemnoj i predajnoj strani.
Sloj aplikacije
Mrežne aplikacije
? Mrežne aplikacije su razlog postojanja racunarskih mreža. Bez korisnih

aplikacija, ne bi ni bilo razloga za projektovanje mrežnih protokola koji ih
podržavaju.
? Od kada se internet pojavio, kreirane su brojne korisne i zanimljive

aplikacije. U internet aplikacije spadaju sledece aplikacije:
? za elektronsku poštu,
? prenos datoteka,
? aplikacije za surfovanje vebom i pretraživanje podataka sa interneta,
? za elektronsku prodaju,
? za video konferencije (Skype),
? za distribuciju video zapisa (YouTube),
? onlajn igrice za više igraca (World of Warcraft),
? aplikacije za društvene mreže (Facebook, Twitter).
Sloj aplikacije
Principi mrežnih aplikacija
? Najvažniji deo razvoja neke mrežne aplikacije jeste pisanje programa koji ce
se izvršavati na razlicitim krajnjim sistemima.
? Na primer, veb aplikacija ima dva nezavisna udaljena programa koji

komuniciraju jedan sa drugim:
? program pretraživaca veba (browser), koji se izvršava na racunaru korisnika –

stonom racunaru, laptopu, tabletu, mobilnom telefonu, i
? program za veb server koji se izvršava na racunaru koji ima ulogu veb
servera.
Sloj aplikacije
Arhitektura mrežnih aplikacija
? Pre nego što se pocne sa pisanjem programa, potrebno je odluciti kakva ce

biti arhitektura aplikacije. Postoje dve arhitekture savremenih mrežnih aplikacija
koje preovladuju. To su:
? klijentsko-serverska arhitektura, i
? P2P arhitektura.
Sloj aplikacije
Klijentsko-serverska arhitektura
? Kod klijentsko-serverske arhitekture, uvek postoji dostupan racunar, nazvan

server, cije usluge traži mnogo drugih racunara, koji se nazivaju klijenti.
? Klijenti ne komuniciraju neposredno jedan sa drugim.
? Server ima stalnu, dobro poznatu adresu i uvek je dostupan. Klijent može uvek
da ga kontaktira, šaljuci odgovarajuci paket na IP adresu servera.
? Cesto se dešava da jedan server ne može da se izbori sa svim zahtevima svojih

klijenata. Upravo zato se koristi centar podataka u kome se nalazi veliki broj
racunara da bi se dobio mocan virtuelni server.
? Google ima 30 do 50 centara podataka rasporedenih svuda po svetu, koji

zajedno upravljaju pretragom. Centar podataka može da ima stotine hiljada servera,
koji moraju biti prikljuceni i održavani.
Sloj aplikacije
P2P arhitektura
? Kod P2P arhitekture, aplikacije koriste direktnu komunikaciju izmedu parova

ravnopravnih racunara (engl. peers). Ovi racunari komuniciraju bez posredovanja
posebnog servera, pa se ova arhitektura naziva
arhitekturom ravnopravnih korisnika (engl. peer-to-peer, P2P).
? U ove aplikacije spadaju one za razmenu datoteka (Bit Torrent), internet

telefonija (Skype) i druge.
? Neke aplikacije mogu imati i hibridnu arhitekturu.
Sloj aplikacije
Klijentsko-serverska arhitektura i P2P arhitektura
Sloj aplikacije
Klijentski i serverski procesi
? Program koji se nalazi i izvršava na krajnjem sistemu naziva se proces.

Ukoliko se procesi završavaju na dva razlicita krajnja sistema, medusobno ce
komunicirati razmenom poruka kroz racunarsku mrežu. Predajni proces pravi poruke i
šalje ih u mrežu, dok prijemni proces prima te poruke i po potrebi odgovara šaljuci
poruke nazad.
? Na primer, u slucaju veb aplikacije, proces veb pretraživaca klijenta

razmenjuje poruke sa procesom veb servera. U sistemu P2P razmene datoteka, datoteke
se prenose od procesa na jednom ravnopravnom racunaru do procesa na drugom
ravnopravnom racunaru.
? Za svaki par procesa koji medusobno komunicira, jedan od ova dva procesa
nazivamo klijent, a drugi server.
Sloj aplikacije
Interfejs izmedu procesa i racunarske mreže
? Navedeni procesi medusobno komuniciraju, tj. šalju poruke jedan drugom. Sve
poruke poslate od jednog procesa do drugog moraju da produ kroz mrežu izmedu njih.
Procesi šalju poruke u mrežu i primaju poruke iz mreže preko softverskog interfejsa
koji se naziva soket.
? Poredenje sa kucama i vratima.
? Soket je zapravo posrednik izmedu aplikativnog i transportnog sloja. Naziva

se još i programski interfejs aplikacije izmedu odredene aplikacije i mreže.
? Programer aplikacije može da utice na sve ono što se dogada na strani

aplikativnog sloja soketa, ali veoma malo na ono što se dogada na strani
transportnog sloja sokete. Recimo, može da izabere transportni protokol (ukoliko
uopšte postoji mogucnost izbora).
Sloj aplikacije
Adresiranje procesa
? Da bi proces koji se izvršava na jednom racunaru slao pakete procesu koji se

izvršava na drugom racunaru, neophodno je da prijemni proces ima sdresu. Da bi se
identifikovao prijemni proces, potrebno je odrediti dva podatka: adresu racunara i
identifikator koji odreduje prijemni proces na odredišnom racunaru.
? Racunar se identifikuje svojom IP adresom. To je 32-bitna velicina koja

jedinstveno identifikuje racunar.
? Racunar može da izvršava brojne aplikacije, i za svaku od tih aplikacija mora

imati poseban soket. Za ovu identifikaciju, koristi se broj porta.
? Kombinacija IP adrese i broja porta se zapravo naziva soket.
? Na primer: 192.168.1.1:80.
Sloj aplikacije
Transportne usluge koje su dostupne aplikacijama
? Za prenos poruka od soketa predajnog procesa do soketa prijemnog procesa

odgovoran je protokol transportnog sloja.
? Prilikom programiranja aplikacije, treba se odluciti za jedan od raspoloživih

protokola transportnog sloja.
? Kako se odluciti? Treba prouciti usluge koje nude raspoloživi protokoli

transportnog sloja. Usluge se razvrstavaju na osnovu cetiri parametra:
? pouzdan prenos podataka,
? propusna moc,
? vremenska ogranicenja, i
? bezbednost.
? Internet aplikacijama ponudena su dva transportna protokola: UDP i TCP.
Sloj aplikacije
Protokoli aplikativnog sloja
? Kako su poruke koje šalju procesi struktuirane? Šta znace pojedina polja u
tim porukama? Kada procesi šalju poruke?
? Ova pitanja nas dovode do protokola aplikativnog sloja. On definiše:
? tipove poruka koje se razmenjuju, npr. poruke zahteva i poruke odgovora,
? sintaksu za razlicite vrste poruka, kao što su polja u poruci i kako se ta

polja razlikuju,
? znacenje tih polja tj, znacenje informacija u poljima, i
? pravila po kojima se odreduje kada i kako neki proces šalje podatke i

odgovara na njih.
? Aplikativni protokol veba jeste HTTP (HyperText Transfer Protocol). Protokol

FTP (File Transfer Protocol), koji je suprotnost protokolu HTTP, ce takode biti
pomenut u nastavku.
Sloj aplikacije
Veb i HTTP
? Srce veba je HTTP, tj. protokol za prenos hiperteksta. On se implementira

kroz dva programa: klijentski i serverski program. Ova dva programa, koji se
izvršavaju na dva razlicita krajnja sistema, komuniciraju jedan sa drugim razmenom
HTTP poruka. Protokol HTTP definiše strukturu tih poruka i nacin na koji ih klijent
i server razmenjuju.
? Veb stranice se sastoje od objekata. Objekat je u suštini datoteka – kao što

je HTML datoteka, JPEG slika, Java aplet ili video zapis – koju je moguce
adresirati uniformnim lokatorom resursa (Uniform Resource Locator, URL).
Sloj aplikacije
Veb i HTTP
? Vecina veb stranica se sastoji od osnovne HTML datoteke i nekoliko objekata

koji se u njoj linkuju. Osnovna HTML datoteka linkuje ostale objekte na stranici
putem njihovih URL adresa. Svaka URL adresa sastoji se od dva dela:
? naziva servera na kome se odredeni objekat nalazi, i
? putanje do objekta.
? Na primer, URL adresu http://www.someSchool.edu/someDepartment/picture.gif

sacinjava:
? deo www.someSchool.edu za naziv racunara, i
? deo someDepartment/picture.gif za putanju do objekta.
Sloj aplikacije
Veb i HTTP
? HTTP je protokol za komunikaciju izmedu servera i klijenta, koji funkcioniše
po principu zahtev/odgovor.
? Server konstantno osluškuje zahteve na odredenom mrežnom komunikacijskom

portu (tipicno port 80), cekajuci da se klijent poveže i pošalje svoj zahtev.
Zahtev se sastoji od osnovne HTTP komande (cija je sintaksa propisana standardom i
koja se sastoji od naziva komande, imena traženog dokumenta i verzije podržanog
HTTP-a) i zaglavlja koje se sastoji od odredenog broja redova teksta koji bliže
odreduju aspekte zahteva.
? Pošto se na veb pretraživacima realizuje klijentska strana protokola HTTP,

ravnopravno koristimo izraze veb pretraživac ili klijent. Na veb serverima, na
kojima se realizuje serverska strana protokola HTTP, nalaze se veb objekti do kojih
se dolazi navodenjem njihovih URL adresa.
? U popularne veb servere spada npr. Apache.
Sloj aplikacije
Veb i HTTP
Sloj aplikacije
FTP protokol
? FTP (engl. File Transfer Protocol) protokol je protokol za prenos datoteka.

To je najcešce korišcen protokol za prenos podataka izmedu dva racunara na mreži.
? FTP veza se uspostavlja na zahtev klijentskog racunara
prema serverskom racunaru. Klijentski racunar mora da poseduje program koji

implementira FTP protokol (tzv. FTP klijent), a serverski racunar mora da poseduje
program koji prihvata konekcije na standardnom FTP portu i takode razume komande
protokola FTP (tzv. FTP server). Kada se veza uspostavi, klijentski program šalje
korisnicke komande serverskom programu, koji ih obavlja i šalje odgovor. Taj
odgovor može biti poruka da je komanda uspešno obavljena, datoteka koja je
zahtevana ili poruka o grešci.
Sloj prezentacije
Enkripcija i kodiranje podataka
? Sloj prezentacije (engl. Presentation Layer) je šesti od sedam slojeva OSI

referentnog modela, odgovara na zahteve sloja aplikacije i dalje ih prosleduje
sloju sesije. Ovom sloju se ne mogu kao i inace pridružiti odgovarajuci protokoli
nekog steka. Njegove primarne funkcije su:
? kodiranje i konverzija podataka.

? kompresija/dekompresija podataka pri slanju/prijemu.
? enkripcija/dekripcija podataka.
Sloj sesije
Uspostavljanje sesije krajnjih korisnika
? Sloj sesije (engl. Session Layer) je peti sloj OSI referentnog modela. Kao
što i sam naziv sloja kaže, ovaj sloj je zadužen za uspostavljanje i održavanje
sesije izmedu pokrenutih programa na predajnoj i prijemnoj strani.
? Protokoli sloja sesije imaju funkciju da razmene podatke o uspostavljanju

komunikacije, da održavaju komunikaciju aktivnom, ako je potrebno (u slucaju
prekida) da je ponovo uspostave i na kraju da je završe.
Transportni sloj
? Transportni sloj predstavlja centralni deo slojevite mrežne arhitekture.

Njegova najvažnija uloga je da neposredno obezbedivanje komunikacionih usluga
procesima aplikacija koji se izvršavaju na razlicitim racunarima.
? Na predajnoj strani, transportni sloj pretvara poruku aplikativnog sloja,

koju dobija od procesa aplikacije pošiljaoca, u pakete transportnog sloja, u
internet tehnologiji poznate pod nazivom segmenti transportnog sloja. To se vrši
razbijanjem poruke aplikacije na manje delove i dodavanjem zaglavlja transportnog
sloja u sve te delove. Transportni sloj zatim prenosi te segmente do mrežnog sloja
predajnog krajnjeg sistema, gde se ti segmenti enkapsuliraju u pakete mrežnog sloja
(datagrame) i šalju ka odredištu. Na prijemnoj strani, mrežni sloj iz datagrama
izvlaci segment transportnog sloja i prenosi ga do transportnog sloja. Transportni
sloj zatim obraduje primljeni segment i podatke iz segmenta dostavlja prijemnoj
aplikaciji.
Transportni sloj
? Internet nudi dva transportna protokola. To su UDP (User Datagram Protocol),

koji aplikaciji nudi nepouzdanu uslugu bez uspostavljanja veze,
i TCP (Transmission Control Protocol), koji aplikaciji koja ga koristi nudi

pouzdanu uslugu za uspostavljanje veze. Pri projektovanju mrežne aplikacije,
programer mora da izabere jedan od ova dva transportna protokola.
? Pakete transportnog sloja nazivamo segmentima. Za pakete mrežnog sloja

koristi se izraz datagram.
Transportni sloj
Usluge TCP protokola
? Model usluga TCP protokola obuhvata uslugu sa uspostavljanjem veze i uslugu

pouzdanog prenosa podataka.
? Uspostavljanje veze: Dakle, pre nego što pocne protok poruka na aplikativnom
nivou, TCP protokol razmenjuje kontrolne informacije transportnog sloja izmedu
klijenta i servera. Po završetku ove razmene informacija, kaže se da je
uspostavljena TCP veza izmedu soketa dva procesa. Oba procesa mogu istovremeno da
šalju svoje poruke. Kada završi sa slanjem podataka, aplikacija mora da raskine
vezu.
? Usluga pouzdanog prenosa podataka: Procesi koji razmenjuju podatke koristeci

TCP protokol mogu da budu sigurni da ce svi podaci biti isporuceni bez grešaka i
pravilnim redosledom.
Transportni sloj
Usluge UDP protokola
? Ovaj protokol je pojednostavljeni transportni protokol koji nudi samo

najosnovnije usluge. Protokol UDP ostvaruje se bez uspostavljanja veze, pa nema
potrebe za rukovanjem izmedu dva procesa pre pocetka komunikacije. UDP pruža uslugu
nepouzdanog prenosa podataka, tj. kada neki proces preda poruku u soket protokola
UDP, nema garancije da ce ta poruka zaista stici do prijemnog procesa. Takode,
poruke koje stignu do odredišta mogu da stignu po poremecenom redosledu.
? Recimo, aplikacije za elektronsku poštu, veb i prenos datoteka koriste TCP

jer obezbeduje uslugu pouzdanog prenosa podataka. Sa druge strane, aplikacije
internet telefonije (Skype) cesto tolerišu odredeni gubitak podataka, pa mogu
koristiti UDP ili TCP.
Transportni sloj
Odnos izmedu transportnog i mrežnog sloja
? Znate da transportni sloj leži neposredno iznad mrežnog sloja. Dok protokol
transportnog sloja obezbeduje logicku komunikaciju izmedu procesa koji se
izvršavaju na razlicitim racunarima, protokol mrežnog sloja obezbeduje logicku
komunikaciju izmedu racunara. Ovo se može objasniti korišcenjem analogije sa
obicnim domacinstvima.
Transportni sloj
? Zamislite dve udaljene kuce, na razlicitim krajevima sveta. U svakoj od njih

živi po desetoro dece. Deca u jednoj od kuca su rodaci deci u drugoj kuci. Deca
vole da se dopisuju i svako dete, svake nedelje šalje po jedno pismo svakom svoj
rodaku i svako pismo se otprema u zasebnoj koverti, obicnom poštom. Dakle, svake
nedelje se iz svake kuce šalje po 100 pisama onoj drugoj kuci. U svakoj od ovih
kuca, po jedno dete zaduženo je za prikupljanje i slanje pisama. Ana svake nedelje
obilazi svu svoju bracu i sestre, prikuplja poštu i predaje je poštaru, koji
svakoga dana obilazi kucu. Kada pisma stignu u njenu kucu, Anin zadatak je da
podeli poštu svojoj braci i sestrama. U drugoj kuci, Petar obavlja te iste poslove.
? U ovom primeru, poštanska služba obezbeduje logicku komunikaciju izmedu dve

kuce, poštanska služba, dakle, prenosi pisma od kuce do kuce, a ne od osobe do
osobe. Logicku komunikaciju izmedu rodaka obezbeduju Ana i Petar jer oni preuzimaju
i isporucuju pisma svojoj braci i sestrama. Sa stanovišta rodaka, Ana i Petar jesu
poštanska služba, iako su samo deo isporuke pisma s kraj na kraj. Ovaj primer je
lepo poredenje kojim objašnjavamo kako se transportni sloj odnosi prema mrežnom
sloju:
? poruke aplikacija = pisma u kovertama,
? procesi = rodaci,
? racunari (koji su i krajnji sistemi) = kuce,
? protokol transportnog sloja = Ana i Petar,
? protokol mrežnog sloja = poštanska služba (ukljucujuci i poštare).
Transportni sloj
? Protokol mrežnog sloja interneta zove se IP (Internet Protocol). Protokol IP

obezbeduje logicku komunikaciju izmedu racunara. Model usluga koje nudi protokol IP
je usluga najboljeg pokušaja isporuke. To znaci da protokol IP cini sve što može da
isporuci segmente izmedu racunara, ali ne daje nikakvu garanciju. Tacnije, ne
garantuje isporuku segmenta, ne garantuje redosled isporuke segmenata i ne
garantuje integritet podataka u segmentima. Svaki racunar ima adresu mrežnog sloja
tzv. IP adresu. Više o IP adresiranju, uskoro.
? Najvažniji zadatak protokola UDP i TCP je da uslugu isporuke protokola IP

izmedu dva krajnja sistema prošire na uslugu isporuke izmedu dva procesa koji se
izvršavaju na krajnjim sistemima. Proširivanje isporuke od racunara do racunara na
isporuku od procesa do procesa naziva se multipleksiranje i demultipleksiranje
transportnog sloja. Ovi protokoli takode obezbeduju proveru integriteta, tako što u
zaglavljima segmenata postoje polja za otkrivanje grešaka. Ove dve osnovne usluge
transportnog sloja - isporuka podataka od procesa do procesa i proveravanje grešaka
- jedine su dve usluge koje pruža protokol UDP! Slicno protokolu IP, i protokol UDP
je nepouzdana usluga, ne garantuje da ce podaci koje šalje jedan proces stici
neošteceni (ili stici uopšte!) do odredišnoh procesa.
Transportni sloj
? TCP nudi aplikacijama još nekoliko dodatnih usluga. Prvo i najvažnije, nudi
pouzdan prenos podataka. Koristeci kontrolu toka, redne brojeve, potvrdu prijema i
tajmere, protokol TCP obezbeduje da se podaci od predajnog procesa do prijemnog
procesa isporuce tacno i u ispravnom redosledu. Na ovaj nacin, TCP pretvara
nepouzdanu uslugu protokola IP izmedu krajnjih sistema, u pouzdanu uslugu za prenos
podataka izmedu procesa. Protokol TCP takode obezbeduje kontrolu zagušenja. Ovo
sprecava da neka TCP veza pretrpa podacima linkove i rutere, koji se nalaze izmedu
racunara koji komuniciraju. Protokol TCP nastoji da svim TCP vezama, koje prolaze
preko zagušenog mrežnog linka, dodeli jednak deo propusnog opsega. Ovo se postiže
regulisanjem brzine kojom TCP veza na strani pošiljaoca šalje podatke u mrežu.
Nasuprot tome, UDP ne reguliše brzinu slanja podataka - aplikacija koja koristi UDP
može da šalje podatke proizvoljnom brzinom, dokle god hoce.
Transportni sloj
Portovi
? Svrha porta je da jedinstveno identifikuje razlicite aplikacije ili procese

pokrenute na istom racunaru i na taj nacin im obezbedi da zajedno koriste jednu
fizicku mrežnu konekciju racunara.
? Port je pridružen IP adresi, odvojen karakterom ’:’ i predstavlja jedinstvenu

krajnju tacku na nivou operativnog sistema racunara dodeljenu odredenoj aplikaciji
ili procesu.
? Na primer: 192.168.1.1:80
? Broj porta je 16-bitni broj, u rasponu od 0 do 65535. Brojevi portova od 0 do

1023 nazivaju se dobro poznatim brojevima portova i njihova upotreba je ogranicena,
što znaci da su rezervisani za protokole opšte poznatih aplikacija. U nastavku su
dati neki od dobro poznatih portovi. Na primer, veb server se identifikuje brojem
porta 80.
Transportni sloj
Dobro poznati portovi

? 20 & 21: File Transfer Protocol (FTP)
? 22: Secure Shell (SSH)
? 23: Telnet remote login service
? 25: Simple Mail Transfer Protocol (SMTP)
? 53: Domain Name System (DNS) service
? 80: Hypertext Transfer Protocol (HTTP) used in the World Wide Web
? 110: Post Office Protocol (POP3)
? 119: Network News Transfer Protocol (NNTP)
? 143: Internet Message Access Protocol (IMAP)
? 161: Simple Network Management Protocol (SNMP)
? 194: Internet Relay Chat (IRC)
? 443: HTTP Secure (HTTPS)
? 465: SMTP Secure (SMTPS)
Transportni sloj
Aktivnost
? Upotrebom naredbe netstat, uociti uspostavljene konekcije na vašem racunaru.

Protokoli? Adrese? Portovi?
Transportni sloj
Aktivnost
Mrežni sloj
? Neka su u mreži neka dva racunara. Mrežni sloj racunara koji šalje
informacije ka drugom racunaru preuzima segmente od transportnog sloja, enkapsulira
svaki segment u datagram i zatim šalje te datagrame na najbliži ruter. U prijemnom
racunaru, mrežni sloj prima datagrame od najbližeg rutera, izdvaja segmente
transportnog sloja i isporucuje ih naviše - transportnom sloju prijemnog racunara.
Dakle, uloga mrežnog sloja je prenošenje paketa od predajnog do prijemnog racunara.
Da bi to obavio, mrežni sloj mora da obavi dva važna zadatka:
? Prosledivanje: Kada paket stigne na ulazni link rutera, on mora da ga

premesti na odgovarajuci izlazni link.
? Rutiranje: Mrežni sloj mora da utvrdi rutu ili putanju kojom paketi proticu
od pošiljaoca do primaoca. Algoritme koji izracunavaju te putanje nazivamo
algoritmima rutiranja.
Mrežni sloj
? Mrežni sloj interneta se sastoji od:
? protokola IP (Internet Protocol),
? komponente za rutiranje koja utvrduje putanju kojom datagram putuje od izvora

do odredišta, i
? komponente koja omogucava slanje obaveštenja o greškama u datagramima i

pružanje izvesnih informacija o mrežnom sloju.
Mrežni sloj
Internet protokol
? IP protokol ne zahteva prethodno upostavljanje veze u trenutku slanja

podatka, vec racunar koji šalje podatke pokušava sve dok ne prosledi poruku, prenos
podataka je relativno nepouzdan, što znaci da nema gotovo nikave garancije da ce
poslati paket zaista i doci do odredišta nakon što je poslat. Sam paket u procesu
prenosa se može promeniti, zbog razlicitih osnovnih prenosnih pravaca, može se
dogoditi da segmenti ne stižu po redosledu, mogu se duplicirati ili potpuno
izgubiti tokom prenosa. Ukoliko aplikacija zahteva pouzdanost, koriste se mehanizmi
TCP protokla u sloju iznad samog IP protokola. TCP protokol je isto zadužen za
definisanje redosleda paketa koji stižu (sekvence).
? Trenutno se koriste dve verzije IP protokola. Verzija 4 internet protokola

(IPv4) je opšteprihvacena. Verzija 6 internet protokola (IPv6) je predložena da
zameni
IPv4.
Mrežni sloj
IPv4
? Adresa verzije 4 dugacka je 32 bita. Piše se kao niz cetiri trocifrena broja
(od 0 do 255) razdvojenih tackama.
? Primer: 193.32.216.9.
Mrežni sloj
IPv6
? IPv6 povecava velicinu IP adrese sa 32 bita na 128 bitova. Time je obezbedeno

da se nikad ne potroše sve IP adrese. U ovom slucaju, svako zrnce peska na svetu bi
moglo da dobije svoju IP adresu. IP adresa se piše kao osam cetvorocifrenih
heksadecimalnih brojeva (osam puta po 16 bitova) odvojenih dvotackama.
? Jedan niz nula po adresi može da se izostavi, pa je 1080::800:0:417A isto što

i 1080:0:0:0:0:800:0:417A.
Mrežni sloj
Aktivnost
? Korišcenjem naredbe ipconfig proveriti formate IPv4 i IPv6 adresa.
Mrežni sloj
Aktivnost
Sloj veze
Fizicko adresiranje, pristup medijumu
? Sloj veze (engl. Data Link Layer) je drugi nivo OSI referentnog modela,
zadužen za postavljanje, prijem i prenos paketa putem lokalnog medijuma (veze dvaju
cvorova).
? Tehnika postavljanja paketa na medijum se zove „kontrola pristupa medijumu“.

Tokom samo jedne komunikacije paket može da se prenosi putem više razlicitih
medijuma, pa shodno tome ovom sloju pripada niz razlicitih protokola koji koriste
razlicite metode enkapsulacije paketa u frejmove i pristupa medijumu. Ovi protokoli
odreduju kako formatirati pakete, za prenos putem razlicitih medija.
? Na ovom sloju može najbolje da se uvidi smisao slojevite strukture mreže.

Svaki sloj treba da funkcioniše tako da ima minimalan uticaj i uvid u rad drugih
slojeva. Bez ovog sloja protokoli sloja mreže, kao što je IP morali bi da definišu
kako pristupati svakom tipu medijuma, pa s obzirom na to IP bi morao da se
prilagodava svaki put kad se razvije neka od novih tehnologija ili medijuma.
Sloj veze
MAC adresa
? Sloj veze u slucaju deljenih medijuma (zajednicke logicke mreže) razlikuje

uredaje na osnovu njihovih fizickih adresa (MAC adresa). Ove adrese, izvorišna i
odredišna, navode se u ramu (frejmu), tj. zaglavlju ovog sloja i odnose se samo na
cvorove unutar jedne mreže.
? MAC adresa (engl. Media Access Control Address) je jedinstven broj, kojim se
vrši identifikacija uredaja/interfejsa na lokalnoj LAN mreži. Ovo je adresa sloja
veze OSI referentnog modela, predstavljena sa 6 bajtova najcešce
u heksadecimalnoj notaciji.
? Za razliku od IP adresa, MAC adrese uredajima proizvadaci zadaju za stalno,

tj. pri proizvodnji adaptera ona se upisuje u njegovu ROM memoriju.
? FF-FF-FF-FF-FF-FF
? FF:FF:FF:FF:FF:FF
Sloj veze
Aktivnost
? Korišcenjem naredbe ipconfig /all procitati MAC adrese mrežnih adaptera na

vašem racunaru.
Sloj veze
Aktivnost
Fizicki sloj
Prenos signala
? Fizicki sloj (engl. Physical Layer) je prvi i najniži od sedam slojeva OSI
modela racunarske mreže. Prevodi komunikacijske zahteve od sloja veze u specificne

operacije u tehnickim uredajima, tj. prevodi bitove frejma u odgovarajuci kodiran
elektricni, opticki ili radio signal, a potom vrši predaju, kontrolu prenosa i
prijem. Ovaj sloj se za razliku slojeva viših nivoa u potpunosti odnosi na hardver
i u skladu sa tim, zadužen je za tri primarne funkcije:
? Standardizacija komponenti (adapteri, interfejsi mržnih uredaja, kablovi i

konektori).
? Nacin predstavljanja podataka (modulacija i kodiranje) i kontrolne standarde.

? Signalizacija, sinhronizacija signala, predaja, prijem i prenos medujumom.
? Fizicki sloj je osnovni sloj na kojem se temelje funkcije ostalih slojeva u

mreži. Medutim, sa obzirom na veliku raznovrsnost dostupnih tehnickih uredaja sa
veoma razlicitim karakteristikama, to je možda najsloženiji sloj u OSI arhitekturi.
Fizicki sloj
UTP kablovi
? Kablovi sa upredenim paricama u svom najjednostavnijem obliku sastoji se iz

dva izolovana bakarna provodnika (žice), koji su upredeni jedan oko drugog. U
obliku u kojem se danas najcešce koristi za umrežavanje, žica ima osam (4 para) i
oznacene su razlicitim bojama.
? Upredanje žica smanjuje preslušavanje izmedu razlicitih parica i pruža dobru

zaštitu od slabijih elektromagnetnih smetnji. Da bi se još više smanjilo
preslušavanje, svaka parica ima razlicit korak upredanja, odnosno razlicit stepen
upredanja po jedinici dužine. Radi fizicke zaštite od okoline, cetiri parice
obuhvacene su spoljnim omotacem od PVC-a ili teflonom (ako kabl treba da bude
vatrostalan).
? Postoje dva tipa ovih kablova: sa neoklopljenim paricama (Unshielded Twisted-

Pair, UTP) i okopljenim paricama (Shielded Twisted-Pair, STP).
? Maksimalna dužina jednog segmenta ovog kabla na kojoj racunari mogu biti
povezani bez dodatnih pojacanja je 100 metara.
Fizicki sloj
UTP kablovi
? Ako je rapored žica na oba kabla isti, u pitanju je ravan (engl. Straight-
Through) kabl. Promenom rasporeda na drugom kraju kabla, dobijamo ukršten (engl.
Cross-Over) kabl.
? Ravan kabl se koristi za povezivanje dva uredaja razlicitog tipa u mreži, na

primer racunara i rutera.
? Ukršten kabl se koristi za direktno povezivanje dva uredaja istog tipa, na

primer dva racunara ili dva rutera.
Fizicki sloj
UTP kablovi
? RJ-45 konektor.
? Pribor za povezivanje koji se koristi za UTP kablove dosta je raznovrstan.

Pored konektora RJ-45, tu su i zidne maske, paneli za prespajanje (engl. Patch
Panell),
razvodne stalaže (engl. Distribution Rack)...
Vežba 4
Frejmovi
? Frejmovi omogucavaju da se složeni dokument formatira deljenjem prozora na

više nezavisnih celina.
? Osnovni tag je složeni tag <frameset> koji zamenjuje tag <body> u HTML
dokumentu.
Atributi taga <frameset>
? cols – za vertikalnu podelu prozora
? rows – za horizontalnu podelu prozora
? vrednosti ovih atributa mogu biti u pikselima, procentima ili *
? border – vrednost atributa je debljina granice izmedu frejmova izražena
u pikselima
? bordercolor – definiše boju granice izmedu frejmova
? frameborder – vrednosti "1" ili "yes" prikazuje granicu izmedu dva frejma,
dok vrednosti "0" ili "no" ne prikazuje
? framespacing – definiše razmak izmedu granica frejma i njegovog sadržaja

izraženog u pikselima
Tag <frame>
? Poddokumenti složenog dokumenta se navode u okviru taga <frame>.
? Atributi ovog taga su:
? src – adresa poddokumenta
? marginwidth i marginheight – margine cije se vrednosti navode u pikselima
? noframes – poruka ukoliko nije moguce interpretirati frejmove
? bordercolor – definiše boju za ivicu frejma
? frameborder – prikazivanje granica ili ne
? name – specificira ime frejma koje se može koristiti unutar drugih programski
modula
Primer 1
Forme
? Forme se koriste da bi se podaci od citaca prosledili do servera.
? Forme mogu sadržati razne elemente za unos podataka: tekstualno polje, radio
dugme, polje za potvrdu, dugme za slanje i poništavanje, opadajucu listu,
tekstualne oblasti...
? Definiše se uz pomoc taga <form>.
? Dva najvažnija atributa su:
? action
? method - može imati vrednost GET ili POST
Tekstualno polje
? Definiše se korišcenjem taga <input> i njegovog atributa type koji ce u ovom
slucaju imati vrednost text:
<input type="text" >

? Atributi:
? name – pomocu imena elementa drugi delovi aplikacije mogu citati ili menjati
njegovu vrednost
? value – definiše pocetni tekst pre unosa korisnika
? size – velicina tekstualnog polja
? maxlength - maksimalan broj karaktera koji se mogu uneti
? Ukoliko se želi zamaskirani tekst koji korisnik unosi, za vrednost atributa

type treba koristiti password.
Tekstualno polje
Primer
<html>
<head>
<title>Tekstualno polje</title>
</head>
<form>
Korisnicko ime: <input type="text" name="korisnicno_ime" size="30" maxlength="30">
<br>
Sifra: <input type="password" name="sifra" size="10" maxlength="10">
</form>
</html>
Radio dugme

slucaju imati vrednost radio:
<input type="radio" >
? Ukoliko želimo da bude oznacena neka opcija, potrebno je dodati checked

unutar input taga.
Radio dugme
Primer
<html>
<head>
<title>Radio dugme</title>
</head>
<form>
Pol:
<input type="radio" name="pol" checked> muski
<input type="radio" name="pol"> zenski
</form>
</html>
Polje za potvrdu

slucaju imati vrednost checkbox:
<input type="checkbox" >
Polje za potvrdu
Primer
<html>
<head>
<title>Polje za potvrdu</title>
</head>
<form>
Koje jezike tecno govorite?<br>
<input type="checkbox" name="jezik" checked>srpski<br>
<input type="checkbox" name="jezik">engleski<br>
<input type="checkbox" name="jezik">fransucki<br>
<input type="checkbox" name="jezik">nemacki<br>
</form>
</html>
Dugme
? submit
? definiše dugme pomocu koga se podaci šalju na server
? <input type="submit" name="posalji" value="Potvrdi">
? reset
? definiše dugme koje postavlja sve vrednosti elemenata forme na predefinisane

vrednosti
? <input type="reset" name="ponisti“ value="Ponisti">
Opadajuca lista
? Definiše se pomocu taga <select> i opcija <option>.
? Atributi taga <select> su:
? size – broj opcija koje ce biti prikazane
? multiple – omogucava se izbor više opcija u jednom trenutku
? selected – selektuje odredenu opciju
Opadajuca lista
Primer
<html>
<head>
<title>Opadajuca lista</title>
</head>
<form>
Izabrati omiljenu boju:<br>
<select name="boja">
<option>crvena</option>
<option>plava</option>
<option selected>zelena</option>
<option>zuta</option>
</select>
</form>
</html>
Tekstualne oblasti
? Tag <textarea> prikazuje tekst u odvojenom tekst prozoru.
? Dimenzije prozora se zadaju atributima rows (broj redova teksta) i cols (broj
kolona teksta).
Tekstualne oblasti
Primer
<html>
<head>
<title>Tekstualna oblast</title>
</head>
<form>
Komentar:<br>
<textarea name="tekst" rows="8" cols="40">Ovde uneti komentar...</textarea>
</form>
</html>
Primer 2
? Potrebno je napraviti stranicu po ugledu na sliku sa sledeceg slajda.
? U listi avio kompanija moguce je odabrati više kompanija (koristiti opciju

multiple): Easy Jet, Ryan Air, Fly Niki, Malev.
? Sve HTML elemente prikazati kao na slici sa postavljenim pocetnim vrednostima

na zadate.
? Kod datuma rodenja ograniciti unos na 2+2+4 karaktera, a kod telefona na 3+7
karaktera.
? U padajucoj listi za odlazne aerodrome navesti Aerodrom Nikola Tesla –

Beograd i Aerodrom Car Konstantin Veliki – Niš, a kod dolaznih Madrid Airport
(MAD), Lisbon Airport (LIS), London Heathow Airport (LHR), u
navedenim redosledima i prikazivanjem kao na slici.
Primer 2
nastavak
Vežba 2
Šta je HTML?
? HTML je jezik za opis veb stranica.
? Skracenica je od Hyper Text Markup Language.
? HTML dokumenti su tekstualni fajlovi.
? Kreiraju se pomocu nekog tekstualnog editora, npr. Notepad.
? Imaju ekstenziju .html ili .htm.
? Sastavljeni su od elemenata koji se nazivaju tagovi.
? Online HTML editor:
? https://thimble.webmaker.org
Tagovi
? Tagovi su kljucne reci koje se smeštaju izmedu znakova < i >.
? Tagovi su obicno složeni tj. sastoje se od pocetnog i završnog taga. Završni

tag je isti kao pocetni sa dodatom kosom crtom / ispred imena taga.
<imetaga>sadržaj</imetaga>
? Tagovi mogu biti i prosti, odnosno bez završnog taga.
? U okviru pocetnog taga mogu se pisati i odredeni atributi koji imaju svoje
ime i vrednost.
<imetaga imeatributa= "vrednostatributa">sadržaj</imetaga>
Struktura HTML stranice

<html>
<head>
Ovo je zaglavlje sa osnovnim podacima o stranici.
</head>
<body>
Ovo je sadržaj stranice.
</body>
</html>
Opis tagova
? <html> i </html>
? Oznacava pocetak i kraj HTML dokumenta.
? <head> i </head>
? Oznacava pocetak i kraj zaglavlja dokumenta koje sadrži informacije o

stranici: naslov (<title>, </title>) koji se vidi u naslovnoj liniji, meta podaci
(kodni raspored, kljucne reci, opis strane, autor, osvežavanje stranice...)
? Podaci iz zaglavlja se ne prikazuju.
? <body> i </body>
? Oznacava pocetak i kraj tela dokumenta. Ono definiše sam izgled stranice.
<title>
<title> Ovo je naslov stranice</title>
? Ovaj tag se navodi unutar zaglavlja dokumenta.

? Pomocu ovog taga zadaje se naslov stranice koji se može videti u naslovnoj
liniji pretraživaca.
? Ukoliko se ne navede, naslov stranice ce biti isti kao i naziv

odgovarajuceg .html fajla.
Atributi <body> taga
? Pozadina stranice:
? slika (npr. <body background="URL slike">)
? boja (npr. <body bgcolor="#rrggbb">, gde #rrggbb predstavlja heksadecimalni

kod boje)
? Boja teksta (npr. <body text="#rrggbb">)
? Boja linkova (npr. <body link="#rrggbb" alink="#rrggbb" vlink="#rrggbb">)
? alink – aktivni linkovi
? vlink – poseceni linkovi
? link – ostali linkovi
Primer 1
? Treba napraviti stranicu sa proizvoljnim nazivom i bojom pozadine.
Naslovi (headers)
<hi>Naslov nivoa i</hi>
gde i uzima vrednosti od 1 do 6.
? Ovaj tag se navodi unutar tela dokumenta.
? Koristi za formiranje naslova. Najveci naslov je oznacen brojem 1.

? Ne treba koristiti ovu notaciju u cilju dobijanja podebljanog ili velikog
teksta.
Primer 1
nastavak
? Dodati tri naslova razlicitih vrsta.
Paragrafi
<p>Ovo je tekst paragrafa.</p>
? Ovaj tag pravi pasus tj. tekst sa odgovarajucim proredom.
? Može imati atribut align koji može imati neku od vrednosti:
? left
? center
? right
Komentari
<!–- Ovo je komentar koji nece biti prikazan! -->
? Komentari se nece videti prilikom pregleda stranice uz pomoc nekog veb

pregledaca.
Formatiranje
? <b>Ovaj tekst je podebljan.</b>
? <i>Ovaj tekst je ukošen.</i>
? <u>Ovaj tekst je podvucen.</u>
? <strike>Ovaj tekst je prectan.</strike>
? <em>Ovaj tekst je naglašen.</em>
? H<sub>2</sub>O
? 2<sup>4</sup>=8
? <br> (eventualno <br/>) tag se koristi za prelazak u novi red.
? <hr> tag se koristi za prikazivanje horizontalne linije.
? se koristi za umetanje razmaka.
Primer 1
nastavak
? Dodati po jedan paragraf sa levim, centralnim i desnim poravnanjem. Neka se

svaki sastoji od po tri reda. Formatirati tekstove. Dodati neki komentar.
<nobr>
? <nobr>Ovo je tekst koji ne treba da bude prelomljen.</nobr>
<pre>
<pre>
Ovaj tekst ce biti prikazan sa svim r a z m a c i m a , tabulacijom
i prelascima u novi red. </pre>
? Inace, višestruki razmaci bi se sveli na jedan, a tabulacija i novi red bi

bili zanemareni.
Primer 1
nastavak

svaki sastoji od po tri reda. Formatirati tekstove. Dodati komentar.
? Dodati dugacak tekst koji ne treba da bude prelomljen. Proveriti

funkcionalnost taga <pre>.
<blockquote>
? <blockquote>Ovo je neki citirani tekst koji ce najverovatnije biti prikazan

uvuceno u odnosu na ostatak teksta.</blockquote>
Primer 1
nastavak


? Dodati neki citat.
<font>
? <font face="Comic Sans MS">Ovom tekstu je odreden font.</font>
? <font color="red">Ovaj tekst ce biti crvene boje.</font>
? <font size="5">Ovom tekstu je odredena velicina.</font>
? HTML5 ne podržava ovaj tag! Umesto njega treba koristiti CSS.
Nenumerisane liste
<ul>Liste mogu biti:
<li> nenumerisane <li> numerisane <li> definicione
</ul>
? Ove liste služe za nabrajanje stavki bez navodenja rednog broja.
? Tag <li> ne zahteva završni tag.
Numerisane liste
<ol>Liste mogu biti:
<li> nenumerisane <li> numerisane <li> definicione
</ol>
? Stavke ove liste imaju redne brojeve.
Definicione (opisne) liste
<dl>Liste mogu biti:
<dt> nenumerisane <dd> stavke nemaju redni broj <dt> numerisane <dd> stavke imaju
redni broj
<dt> definicione <dd> stavke se sastoje od termina i njegove definicije
</dl>
? Stavka ove liste se sastoji od:
? termina koji se definiše i
? njegove definicije.
? Termini zapocinju <dt> tagom, a njihove definicije <dd> tagom.
Primer 1
nastavak


? Dodati po jednu nenumerisanu, numerisanu i definicionu listu.
Primer 2
? Napraviti stranicu po uzoru na stranicu datu na sledecem slajdu.

Vežba 4
Slike
? Slike se u HTML stranicu uvode tagom <img>:
<img src="URLslike">
? Atribut src je obavezan i njegova vrednost predstavlja URL slike.
? Slike se mogu umetnuti bilo gde u BODY sekciji.
Slike
atributi
? Poravnanje slike u odnosu na tekst – align:
? top, middle, bottom, left, right
? Definicija teksta koji menja sliku ukoliko ona ne može biti prikazana – alt.
? Velicina okvira oko slike u pikselima – border.
? Iskljucuje se vrednošcu 0.
? Dimenzije slike - height i width.
? Zadaju se u pikselima ili procentima.
? Ukoliko se stvarne dimenzije razlikuju od zadatih, slika ce se izobliciti.
? Dodatni prostor izmedu slike i teksta u pikselima – vspace i hspace.

? vspace - margina ispod i iznad.
? hspace - margina levo i desno.
Primer 1
slike
? Ubaciti sliku na stranicu i iskoristiti neke od navedenih argumenata.
Linkovi
atributi
? Uvode se u HTML stranicu pomocu taga <a>: <a> tekst koji je ujedno i link </a>
? Osnovni atributi:
? href – URL adresa stranice na koju se prelazi
? id – identifikator sidra za referenciranje
? name – isto kao id, id je globalni identifikator
? target – oznacave gde ce se otvoriti referencirani dokument
URL adresa
? Link na stranicu van servera:

<a href="protokol://host.domen[:port]/putanja/fajl"> tekst linka </a>
? Link na stranicu u okviru istog servera:
? upotreba relativnih putanja
? simbol .. oznacava direktorijum iznad
? Link do odredenog mesta u dokumentu :
? to mesto se obicno naziva sidro

<a href="stranica.html#sidro"> veza do sidra </a>
Linkovi
target
? Specificira gde ce se otvoriti referencirani dokument. Vrednosti:
? _blank – u novom prozoru ili tabu
? _parent – u roditeljskom okviru (frejmu)
? _self – u istom okviru (podrazumevano)
? _top – u istom prozoru ali u kompletnom, ne u okviru
? framename – u imenovanom prozoru
Slika kao hiperveza ?
Slika kao hiperveza
? Potrebno je sliku postaviti kao sadržaj hiperveze:
<a href="URL cilja"> <img src= "URL slike"> </a>
? Okvir oko slike ce biti u bojama linkova.
Primer 2
linkovi
? Napraviti link koji vodi do stranice VISER-a.
? Napraviti sliku koja predstavlja hipervezu.
? Neka postoji folder www i u njemu fajl prvi.html, dok se u folderu

www/detalji nalaze fajlovi drugi.html i prvi.html. Napraviti veze izmedu ovih
stranica korišcenjem relativnih putanja.
? Napraviti stranicu koja sadrži tekst podeljen u naslove i podnaslove. Na

pocetku stranice dodati linkovani sadržaj.
Mapiranje slike
? Slika može biti podeljena na delove tako da svaki deo predstavlja jedan link
do nekog odredišta.
? Gornji levi ugao predstavlja koordinatni pocetak mape.
? Za mapiranje se koristi atribut usemap.
Mapiranje slike
? Vrednost atributa usemap taga img odreduje koja ce se mapa koristiti za

mapiranje slike.
? Ako pocinje sa #, podrazumeva se da se mapa nalazi u istom dokumentu kao i

slika.
<img src="URLslike" usemap="#imemape" >
Mapa
? Mapa se opisuje tagom <map>.
? Naziv mape mora da odgovara nazivu iz usemap atributa slike.
? <map name="imemape">
? Mapa se sastoji iz podrucja , tako da u elementu map postoje podelementi

<area> ciji su atributi:
? shape – oblik oblasti:
? rect, circle, poly, default
? href
? coords
? Ako se oblasti preklapaju, prednost ima ona koja je ranije definisana.

? Atribut nohref znaci da izbor te oblasti ne prouzrokuje nikakvu akciju.
Mapa
shape
? rect – pravougaona oblast:
? coords – gornji levi i donji desni ugao pravougaonika u pikselima
? circle – kružna oblast:
? coords – koordinate centra kruga i njegov poluprecnik u pikselima
? poly – mnogougaonik:
? coords – koordinate tacaka zatvorene izlomljene linije u pikselima
? default – podrazumevano:
? nema koordinate, koristi se samo jednom i to za preostalu oblast
Primer 3
mapiranje slike
? Mapirati datu sliku Suncevog sistema:
? pri kliku na Sunce i na svaku od planeta treba obezbediti otvaranje

odgovarajuceg Wikipedia clanka u novom tabu,
? pri kliku na naslov u novom tabu se otvara clanak o Suncevom sistemu.
Tabele
? Tabela se definiše uz pomoc taga <table>.
? Novi red se definiše sa <tr></tr>.
? Zaglavlje celija se definiše u okviru <th></th>.
? Pojedinacna celija se definiše u okviru <td></td>.
Tabele
atributi
? align - za poravnanje
? vrednosti su left, center, right
? border – za podešavanje debljine ivice
? vrednost je broj u pikselima (podrazumevano 0)
? cellspacing – prostor izmedu celija, ukljucujuci ivice
? cellpadding – prostor izmedu ivice celije i njenog elementa
? width – širina tabele
? vrednost je broj u pikselima ili procenat u odnosu na velicinu stranicu
Atributi <tr> taga
? align – horizontalno poravnanje
? vrednosti mogu biti left, center, right
? valign – vertikalno poravnanje
? vrednosti mogu biti top, middle, bottom
? bgcolor
? vrednost je željena boja
Atributi <td> taga
? colspan – omogucava da se jedna celija proteže duž više kolona
? rowspan – omogucava da se jedna celija proteže duž više redova
? Vrednosti atributa se zadaje brojem kolona ili redova tabele duž kojih treba
da se prostire data celija.
Primer 4
tabele
? Napraviti HTML kod za prikaz tabele:

3/13/2014
1
UVOD U
INTERNET
TEHNOLOGIJE
14:41 1
O predmetu
? I UVOD U INTERNET TEHNOLOGIJE
? 1. Uvod, istorijat, osnovni pojmovi i
koncepti.
? 2. Racunarske mreže: topologija,
slojevitost i adresiranje.
? 3. Internet servisi, protokoli, aplikacije
i citaci.
? IIHTML/XHTML
? 4. Projektovanje HTML stranice, osnovna
struktura i osnovni elementi.
? 5. Rad sa listama, tabelama, objektima i
apletima.
? 6. Veze, adresiranja, forme
14:41 2
? 7. Stilski listovi, CSS: sintaksa
? 8. Umentanje stilskih listova, njihove
vrednosti i pozicioniranja, klase.
?
? III JEZIK ZA OZNACAVANjE
? 9. Osnove XML tehnologije
? 10. Validacija podataka i objektni model
dokumenta - DOM
3/13/2014
2
O ispitu
? Bodovanje
? Diskusije i zadaci do 10 poena
? Projekat do 20 poena
? Kolokvijum do 35 poena
? Završni ispit do 70 poena ako nije raden kolokvijum
? Ocenjivanje
? od 51 do 60 poena: ocena 6
? od 91 poena: ocena 10 14:41 3
Literatura
? F. Maric, Uvod u Veb i Internet tehnologije,
Prirodno-matematicki fakultet, Beograd, 2011.
? 2.B. Nikolic, Internet programiranje,
elektronsko izdanje Viša elektrotehnicka škola
Beograd, 2005.
? J.N.Robbins, Naucite Web dizajn Mikro knjiga 2009
? Elliotte Rusty Harold, W. Scott Means, XML za
programere, O'Reilly, 2006.
14:41 4
3/13/2014
3
Pitanja?
14:41 5
Osnovni pojmovi
14:41 6
3/13/2014
4
Uvod
? Internet je racunarska mreža koja medusobno povezuje
milione uredaja. Donedavno su vecinu ovih uredaja
cinili tradicionalni stoni PC racunari, Linux radne
stanice i tzv. serveri koji cuvaju i prenose informacije
kao što su veb stranice i elektronska pošta. Medutim,
sve je više za internet neoubicajenih krajnjih sistema
(uredaja), kao što su PDA (engl. Personal Digital
Assistant) racunari, televizori, prenosivi racunari,
mobilni telefoni, automobili, senzori za pracenje stanja
životne sredine, okviri za slike, kucni elektronski i
bezbednosni sistemi povezuje se sa internetom.
? Štaviše, izraz racunarska mreža pocinje da zvuci
pomalo zastarelo imajuci u vidu sve veci broj
netradicionalnih uredaja koji se povezuju sa
internetom. U žargonu interneta, svi ovi uredaji
nazivaju se maticni racunari (eng. host) ili krajnji
sistemi.
14:41 7
? Krajnji sistemi medusobno su povezani u mrežu
komunikacionim linkovima i komutatorima paketa.
? Kada jedan krajnji sistem šalje podatke drugom
krajnjem sistemu, polazni krajnji sistem razdvaja te
podatke u manje delove i svim tim delovima dodaje
odredeni blok bajtova u zaglavlje. U žargonu
racunarskih mreža ovako spakovane informacije
nazivaju se paketi. Ovi paketi se kroz mrežu šalju do
odredišnog krajnjeg sistema, gde se ponovo slažu u
prvobitne podatke.
14:41 8
3/13/2014
5
14:41 9
? Komutator paketa preuzima paket koji stiže nekim od
ulaznih komunikacionih linkova i prosleduje ga dalje
nekim od svojih izlaznih komunikacionih linkova. Postoji
više razlicitih oblika i modela komutatora paketa, ali
dva najrasprostranjenija u savremenom internetu su
usmerivaci (ruteri) i komutatori sloja veze (svicevi).
Zajednicko za obe ove vrste komutatora jeste to da
pakete prosleduju do njihovih konacnih odredišta.
? Od polaznog krajnjeg sistema do odredišnog krajnjeg
sistema, citav niz komunikacionih linkova i komutatora
paketa kojima paketi prolaze poznati su kao ruta ili
putanja kroz mrežu.
14:41 10
3/13/2014
6
Uredaji prenosnog podsistema:
-Modemi
-Koncentratori
-Multipleksori
-Statisticki multiplekseri
-Hub (LAN)
-Bridge (LAN)
-Switch (LAN)
-Router
14:41 11
? Krajnji sistemi, komutatori paketa i ostali sastavni
delovi interneta, koriste protokole koji kontrolišu slanje
i prijem informacija u okviru interneta. TCP (eng.
Transmission Control Protocol) i IP (eng. Internet
Protocol) predstavljaju dva najvažnija internet
protokola. Protokol IP utvrduje format paketa koje
ruteri i krajnji sistemi šalju i primaju izmedu sebe.
Glavni internet protokoli opšte su poznati pod nazivom
TCP/IP.
14:41 12
3/13/2014
7
Podele racunarskih mreža
Racunarske mreže možemo podijeliti po raznim osnovama:
tehnologiji prenosa, velicini, ...
Po tehnologiji prenosa razlikujemo:
? difuzijske mreže (engl. broadcast network)
? mreže od tacke do tacke (engl. point to point network)
14:41 13
? Iznajmljena linija je obicno simetricna veza koja povezuje
dve lokacije. Za razliku od obicnih analognih telefonskih
(PSTN) linija ovakve veze nemaju telefonski broj jer su dve
strane stalno povezane. Mogu se koristiti za telefonski
razgovor, prenos podataka ili Internet servis.
? Standardne brzine se krecu od 64k, 128k, 256k, 512k, pa do
2M i više.
14:41 14
3/13/2014
8
komutacija poruka - cela poruka se šalje od cvora do cvora
dok ne dode do korisnika)
komutacija paketa - poruka se deli na manje delove (pakete)
koji se mogu prenositi razlicitim putevima kroz mrežu.
14:41 15
Prema velicini racunarske mreže možemo podeliti na
LAN, MAN i WAN mreže.
? LAN (eng. Local Area Network) su mreže u privatnom
vlasništvu unutar jedne ili nekoliko zgrada cija udaljenost nije
veca od nekoliko kilometara.
? MAN (eng. Metropolitan Area Network) je veca verzija
LAN koja koristi slicnu tehnologiju. Povezuje npr. više
poduzeca ili grad i može biti privatna ili javna.
? WAN (eng. Wide Area Network) mreže povezuju
podrucja velicine države ili kontinenta.
14:41 16
3/13/2014
9
Kategorije mreža (LAN)
? Umrežavanje racunara i drugih mrežnih uredaja u
relativno ogranicenom podrucju, npr. u jednoj zgradi ili
kompleksu zgrada.
? Oblast pokrivanja - do nekoliko kilometara.
? Omogucava korišcenje zajednickih resursa od strane
više racunara.
? Topologija najcešce magistrala, prsten ili zvezda.
? Velika brzina prenosa podataka: 10-100Mbs, sa
tendencijom ka 1Gbps.
? Broadcast mreže - poruke koje jedna stanice emituju u
mrežu primaju sve ostale stanice.
14:41 17
LAN
LAN na jednom spratu ili
u jednoj zgradi
LAN koji pokriva više odvojenih mreža
14:41 18
3/13/2014
10
MAN
? Mreža na nivou
jednog grada
? Jedna mreža, ali i
mreža više
povezanih LAN-ova.
? U vlasništvu jedne
privatne
kompanije, ili
servis koji nudi
neka javna
kompanija
14:41 19
WAN
? WAN (Regionalna racunarska mreža) - prenos podataka na velike
daljine.
? Pokriva vece geografsko podrucje, kao što je jedna država ili
kontinent. Koristi javne, iznamljene ili privatne (obicno u
kombinaciji) komunikacione linije i uredaji.
14:41 20
3/13/2014
11
internet i Internet
? internet (sa malim i)
? Više LAN i/ili MAN povezanih u WAN mrežu.
? Ruter: uredaj za medumrežno povezivanje
? Internet (sa velikim I) – najveca svetska mreža.
14:41 21
Protokoli
14:41 22
3/13/2014
12
Pojam
23
? Svime što se dešava na internetu, a obuhvata komunikaciju
dva ili više udaljenih samostalnih delova upravlja neki
protokol.
? Neki protokoli su hardverski implementirani, kao u
interfejsima mrežnih kartica dva fizicki povezana racunara.
? Tipican primer je kada se pošalje zahtev veb serveru, tj kada
se u veb citac upiše URL adresu neke veb strane. Ono šta se
dešava prikazano je na desnoj polovini slike
? Prvo, vaš racunar šalje poruku sa zahtevom za povezivanje
odgovarajucem veb serveru i ceka njegov odgovor. U
najvecem broju slucajeva, veb server prima ovaj zahtev i
odgovara porukom da je povezivanje moguce. Znajuci da sada
može da zatraži odredeni veb dokument, vaš racunar porukom
GET šalje naziv veb stranice koju želi da preuzme sa veb
servera. Na kraju, veb server šalje tu veb stranicu (fajl) vašem
racunaru.
14:41
14:41 24
3/13/2014
13
Uvod
? Standard!
? Interakcija uredaja (hardware-a), programa, servisa
(software-a) i protokola pri mrežnim komunikacijama opisuje
se OSI modelom.
? Koriste ga proizvodaci pri projektovanju mreža, kao i
strucnjaci pri izucavanju mreža. OSI model deli arhitekturu
mreže u sedam logickih nivoa, daje spisak funkcija, servisa i
protokola koji funkcionišu na svakom od nivoa.
? OSI referentni model (eng. Open Systems Interconnection) deli
funkcije mreže na sedam manjih, lakše upravljivih celina
(slojeva).
? Svaki sloj definiše odredene funkcije mreže.
? Svaki sloj se može zameniti drugim slojem istog nivoa bez
uticaja na ostatak sistema. 14:41 25
ISO
? Internacionalna Organizacija za Standardizaciju, ISO
(eng. International Organization for Standardization)
razvila je model za komunikaciju izmedu raznorodnih
sistema.
? Model je objavljen 1984. godine i nazvan je Open System
Interconnection Basic Reference Model ili, skraceno, OSI
model.
14:41 26
3/13/2014
14
Zašto OSI model?
? Prednost upotrebe OSI modelu ogleda se u:
? Smanjenju kompleknosti
? Standardizaciji interfejsa
? Sprecavanju uticaja promene jednog sloja na druge slojeve, cime
je olakšan razvoj pojedinacnih funkcija
? Dakle:
? Prihvatanjem ovog ISO standarda proizvodaci su bili u
mogucnosti da ostvare potpunu komunikaciju sa sistemima
bez uvida u njihovu internu specifikaciju i format
podataka.
? Operativni sistemi takode.
? Aplikacije pod operativnim sistemima takodje.
14:41 27
ISO / OSI model
14:41 28
3/13/2014
15
Formiranje bita za prenos po
slojevima
14:41 29
? Zadužen je za ispravan prenos bita duž komunikacionog kanala.
? Reprezentovanje bita u fizickom komunikacionom kanalu – modulacija.
? Mogucnost prenosa istovremeno u oba smera –semi i full duplex.
? Postupak uspostavljanja i prekidanja veze.
? Definiše karakteristike fizickog medijuma za prenos.
? Protokoli ovog sloja definišu elektricna i fizicka svojstva mrežnih uredaja,
NIC (eng. Network Interface Card) . Definiše naponske nivoe, broj pinova na
konektorima (odnosno parica u kablovima), ili debljinu omotaca koaksijalnog
kabla. Mrežne kartice (integrisane na maticnoj ploci ili samo utaknute u
magistralu na maticnoj ploci), hub-ovi i repeater-i su primeri uredaja na fizickom
sloju OSI modela.
30
1. Fizicki sloj
14:41
3/13/2014
16
FIZICKI SLOJ 14:41 31
? Fizicke karaketristike medijuma:
? Definiše tip prenosnog medijuma (žicani, opticki ili bežicni) i elektricne
i mehanicke karakteristike interfejsa za spregu uredaja na medijum,
sve do nivoa tipova konektora i rasporeda pinova na prikljucnim
konektorima
? Reprezentacija bitova:
? Tip kodiranja i modulacije (kako se bitovi konvertuju u signal).
? Brzina prenosa:
? Broj bita koji se jednoj sekundi
prenose preko fizickog
medijuma (bitska brzina), u
jedinicama kao što su: Kbps
(kilobits-per-scond) - ili Mbps
(Megabits-per-second).
? Bitski interval - trajanje jednog
bita - reciprocna vrednost
bitske brzine. 14:41 32
3/13/2014
17
2. Sloj veze
? Pruža uslugu gornjem, mrežnom sloju
? Upravlja prenosom putem fizickog sloja.
? Štiti slojeve višeg nivoa od grešaka nastalih pri prenosu
podataka.
? S obzirom na to da je jedinica prenosa fizickog sloja
bit, sloj veze upravlja i formatom poruka (definiše
pocetak i kraj poruke)
? Podaci se konvertuju – formatiraju u oblik pogodan za
mrežni sloj
14:41 33
? Transformiše fizicki sloj u pouzdani link za isporuku podataka od cvora do
cvora
? Detektuje i ako je to moguce koriguje greške u prenosu. Koordiniše rad brzog
predajnika i sporog prijemnika. Obezbeduje kontrolu deljivog fizickog
medijuma (kod multipoint linkova).
? Definiše i podsloj - MAC (Media Access Control) za pristup zajednickom kanalu
? MAC ima sopstvenu adresu.
14:41 34
3/13/2014
18
Formiranje okvira
? Niz bitova iz gornjeg sloja mreže deli se na manje
jedinice koje se zovu okviri (ili frejmovi).
? Sinhronizacija. Pocetak i kraj okvira moraju biti
jednoznacno odredeni. Po prijemu sekvenece za
pocetak, prijemnik prepoznaje da je poceo prenos
novog okvira.
okvir
Sinc
14:41 35
Fizicko adresiranje
? Fizicka adresa je jedinstveni identifikator cvora u broadcast mreži
23 43 52 29 Sinc
23 43
34 32
52 29
MAC adresa
odredišta
MAC adresa
izvora
14:41 36
3/13/2014
19
Kontrola protoka
? U razmeni paketa postoji realni problem sinhronizacije
predajenika i prijemnika
? Regulisanje inteziteta saobracaja izmedu cvorova
? Koristi se povratni frejmovi
Usporiti ili ubrzati !
14:41 37
Kontrola grešaka
? Uzroci grešaka:
? Signal_na_prijemu = Signal_na_predaji + Šum
? Gubitak sinhronizacije
? Zaštitno kodiranje:
? Kontrolna suma: Ks = f(Okvir)
? Prenosi se zajedno sa okvirom i ponovo izracunava na prijemu
? Ne postoji idealna zaštita
23 43 52 29 Sinc
23 43
52 29
Kontrolna
suma
Ks
14:41 38
3/13/2014
20
? Šta uraditi kada
prijemnik primi okvir
sa greškom?
1. Prijemnik odbacuje
okvir (prepušta višim
slojevima da reše
problem), ili
2. Retransmisija:
ponovno slanje istog
okvira
Timeout
14:41 39
3. Mrežni sloj
? Mrežni sloj omogucava prenos podataka izmedu mreža
bez obzira na njihove medusobne razlike (npr. razlicito
adresiranje,velicina paketa, protokoli itd.).
? Sloj mreže odreduje prenosne puteve, obavlja funkcije
komutiranja tj. uspostavlja, održava i raskida veze.
? Brine se o transparentnom prenosu podataka izmedu
prenosnih slojeva krajnjih stanica.
14:41 40
3/13/2014
21
? Ovaj sloj bira put od izvora ka odredištu koji ce minimizirati ukupnu
"cenu" prenosa, što ukljucuje dužinu, brzinu prenosa, kašnjenje u
propagaciji, kašnjenje u cvorovima itd.
? Mrežni sloj daje funkcionalne i proceduralne mehanizme prenosa podataka
razlicite dužine od izvora ka odredištu preko jedne ili više mreža, vodeci
racuna o kvalitetu usluga (eng. Quality of Service- QoS) koji zahteva
Transportni sloj. Na ovom sloju se vrši rutiranje podataka, te se za Rutere
kaže da su Layer 3 uredaji. Najpoznatiji protokol ovog sloja je IP (internet
protocol).
14:41 41
4. Transportni sloj
? Prenosni sloj vodi racuna o prenosu podataka sa kraja
na kraj mreže. To znaci da program na racunaru odakle
se šalju podaci komunicira sa slicnim programom na
drugom kraju tj. odredišnom racunaru, koristeci
zaglavlja poruka i upravljacke poruke. Pri tome mogu
biti odvojeni bilo kojim brojem usmjernika (engl.
router).
14:41 42
3/13/2014
22
? Prima podatke od sloja sesija, formira manje delove (ako je
potrebno) i predaje delove mrežnom sloju.
? Moguc prenos sa korekcijom grešaka i bez korekcije grešaka.
Ovaj sloj može izvršiti i dodatnu kontrolu grešaka pri prenosu
(dodatnu u smislu da je ona vec izvršena na sloju veze)
? Podaci mogu biti preneseni tako da se vodi racuna o redosledu
slanja i potvrdi prijema i na nacin bez potvrde prijema i
kontrole redosleda paketa (npr. prenos upita i odgovora na
upite).
? Transportni sloj je prvi sloj koji direktno povezuje racunare
koji komuniciraju
? Slojevi ispod transportnog postoje u ruterima – usmerivacima
koji ih povezuju duž putanje paketa
? Prenosni sloj mora posedovati i mehanizam za upravljanjem
protokom podataka, tako da se ne dogodi da brzi uredaj zaguši
sporiji uredaj podacima.
? Taj problem se najcešce rešava multipleksiranjem više poruka
na isti kanal, a informacija koja poruka pripada kojoj vezi
sadržana je u zaglavlju transportnog sloja. Zbog ovih zahteva
ovaj sloj mora rešiti uspostavu i raskid veze (s kraja na kraj),
što zahteva mehanizam adresiranja.
14:41 43
5. Sloj sesije
? Svrha sesija jeste definisanje stanja (ili faza) svakog
dijaloga radi definisanja validnih akcija u svakom od
stanja.
? Zadužen za uspostavljanje, održavanje i prekid logickih
sesija izmedu krajnjih tacaka.
? Na osnovu toga se vrši upravljanje transportnim slojem
i provera podataka dobijenih od njega.
? Upravlja saobracajem, na primer može omoguciti
istovremeni prenos u oba smera ili samo u jednom (u
tom slucaju odreduje ko ima pravo za prenos).
? Sinhronizacija koja omogucava nastavak prenosa u
slucaju prekida prenosa.
? Daje mogucnost dodatnih usluga korisnih kod nekih
aplikacija.
14:41 44
3/13/2014
23
6. Sloj prezentacije
? Ne bavi se prenosom
? – to rade slojevi ispod
? Razliciti racunari prikazuju podatke na drugaciji nacin (npr.
ASCII, Unicode). Ovaj sloj omogucava komunikaciju racunara
koji razlicito prikazuju podatke (koriste drugacija kodiranja u
racunaru).
? Formatira podatke za prezentaciju korisniku. Uskladuje
format podataka izmedu ucesnika u komunikaciji i sloju
aplikacije dostavlja ove podatke u formatu koji on zahteva.
? Na primer, sloj prezentacije može originalne podatke dobijene
od sloja aplikacije komprimovati radi efikasnijeg prenosa.
? Ovakve podatke sloja prezentacije na strani drugog ucesnika ne
može direktno proslediti sloju aplikacije vec je pre toga
neophodno izvršiti dekompresiju.
? Podatke koji se razlicito predstavljaju treba apstraktno
prikazati - nezavisno u novom zajednickom formatu.
14:41 45
7. Sloj aplikacije
Sloj aplikacije (eng. Application layer) je sedmi i najviši nivo OSI referentnog
modela.
Opisuje rad aplikacija u mreži i njihovu interakciju sa servisima i protokolima
nižih
slojeva. Protokoli sloja aplikacije imaju funkciju da razmene podatke izmedu
pokrenutih
programa na prijemnoj i predajnoj strani. Upravo zbog toga (raznovrsnosti
aplikacija)
ovom sloju pripada najveci broj protokola, koji se i dalje razvijaju.
Na ovom sloju programer koristi API-je kojima ostvaruje mrežnu komunikaciju s
odredenom svrhom, a da pritom ne mora voditi racuna o nižim slojevima, za koje se
brine
operativni sistem.
?BitTorrent protokol
?HTTP, HyperText Transfer Protocol, World Wide Web, servis
?FTP, File Transfer Protocol
?POP, POP3, Post Office Protocol (verzija 3)
?SMTP, Simple Mail Transfer Protocol
? Outlook ekspres meil klijent (aplikacija)
? Mozila tanderberd klijent
? Elektronska pošta (e-mail) servis
14:41 46
? DHCP, Dynamic Host Configuration Protocol
? DNS, Domain Name System
? FTP, File Transfer Protocol
? IMAP, IMAP4, Internet Message Access
Protocol (verzija 4)
? SNMP, Simple Network Management
Protocol
? RDP, Remote Desktop Protocol
? Telnet, Terminal Emulation Protocol
? VTP, Virtual Terminal Protocol
3/13/2014
24
TCP/IP model
14:41 47
TCP/IP vs. OSI
14:41 48
3/13/2014
25
? Razvijan za potrebe Interneta.
? Jednostavniji je od OSI modela
? Karakteristike slojevitih modela su horizontalna i vertikalna komunikacija
? Horizontalna komunikacija predstavlja mogucnost projektovanja protokola
jednog sloja na isti nacin kao da on direktno komunicira sa udaljenim
sagovornikom tj. bez korišcenja protokola koji se koriste ispod njega
? Vertikalna komunikacija je osobina slojeva da komuniciraju sa višim/nižim
slojevima. Vertikalna komunikacija podrazumeva enkapsulaciju
14:41 49
50
Horizontalna komunikacija
14:41
3/13/2014
26
51
Vertikalna komunikacija
14:41
Enkapsulacija
14:41 52
3/13/2014
27
? Princip enkapsulacije: protokol nižeg nivoa pri preuzimanju podataka dobijenih
od protokola višeg nivoa dodaje sopstvene kontrolne parametre (zaglavlje) i
takav skup podataka prosleduje protokolu nižeg nivoa (koji primenjuje isti
princip)
14:41 53
Transportni sloj
TCP/IP
14:41 54
3/13/2014
28
? Transportni sloj je 4 nivo OSI modela. Predstavljen je istim
nazivnom i u TCP/IP steku i može se definisati na sledeci
nacin:
Predstavlja metode i protokole u okviru slojevite
arhitekture, koji su odgovorni za enkapsulaciju blokova
podataka u datagrame pogodne za prenos preko mrežne
infrastrukture do odredišta, ili sa strane odredišta za
prihvatanje datagrma pristiglih sa mreže i prosledivanje
višem nivou.
Transportni sloj
14:41 55
? Primarna uloga transportnog nivoa je razmena podataka
izmedu aplikacija na racunarima na mreži. Pošto na
jednom racunaru može biti pokrenuto više aplikacija koje
koriste mrežu, uloga transportnog nivoa je
multiplekisranje odnosno prenos informacija iz više
aplikacija preko jedinstvenog IP komunikacionog kanala.
connection-oriented komunikacija
IP protokol je connection-less protokol, odnosno da bi dva
racunara komunicirala nije potrebno prethodno
uspostavljanje veze. Neke aplikacije zahtevaju prethodno
uspostavljanje veze, tako da je jedna od uloga
transportnog nivoa pružanje ovakvih usluga aplikacijama
koje to zahtevaju.
14:41 56
3/13/2014
29
- Redosled isporucenih paketa – kako je takode ranije
receno, IP protokol je best effort delivery protokol, pa je
moguce da paketi na odredište u drugacijem redosledu
nego što su poslati.
- Pozdan prenos podataka –U pakteskom prenosu podataka
nije nemoguce da neki od paketa ne stigne do odredišta.
Uzrok može biti otkaz nekog cvora u putu. IP nema
mehanizam kojim može da obavesti izvor da se njegov
paket izgubio i traži ponovno slanje paketa. Dakle, ova
funkcija se prenosi na sloj iznad – transporni.
-Redosled isporucenih paketa
-Pouzdanost prenosa
14:41 57
- Kontrola toka –Razlicitost u brzini veze dva racunara koji
komuniciraju može da prouzrokuje gubitak paketa.
Mehanizmi za kontrolu toka su ugradeni u protokole
transpornog sloja.
- Tok informacija – na IP sloju postoji prenos paketa. Na
ovom sloju paketi nisu od znacaja tj. vrši se prenos
podataka izmedu dva uredaja kao jedinstveni tok
informacija, bez ogranicenja u velicini.
- Portovi – portovi su mehanizam protokola transportnog
nivoa kojim se omogucava da više aplikacija (na
aplikativnom nivou) koriste usluge jednog jedinstveog IP-a.
Kontrola toka
Tok informacija
Portovi
14:41 58
3/13/2014
30
? Najpoznatiji protokoli ovog sloja su TCP i UDP.
? TCP se koristi za connection-oriented komunikaciju koje se
karakteriše uspostavljanjem veze, dok se UDP (eng. User
Datagram Protocol) koristi za komunikacije aplikacija koje
ne zahtevaju prethodno uspostavljanje veze. (Razmislite
za koje aplikacije mogu biti korišceni jedan odnosno drugi
protokol)
? Manje poznati protokoli ovog nivoa su DCCP (eng.
Datagram Congestion Control Protocol) i SCTP (eng.
Stream Control Transmission Protocol) protokoli.
TCP vs UDP
14:41 59
14:41 60
3/13/2014
31
? UDP protokol je protokol transportnog nivoa koji pruža
usluge aplikacijama koje ne zahtevaju prethodno
uspostavljanje veze, niti pouzdan prenos.
? Koristi se za multimedijalne aplikacije za prenos glasa ili
slike koje se oslanjaju na rad u realnom vremenu (na pr.
telefoniranje preko Interneta Skype, GoogleTalk,..).
? Kod ovakvih aplikacija bitno je omoguciti razmenu
podataka u realnom vremenu po cenu gubitka nekih
paketa.
UDP
14:41 61
? Na primer, za VoIP aplikacije je za korisnika bolje da se
umetnute neki šum u vidu paketa koji stižu van redosleda,
jer ovo nece toliko smetati ucesnicima u razgovoru, koliko
to da veza „secka“ i da se na izgovoreni slog ceka duže
vremena.
? Za prenos fajlova je zahtev suprotan.
? Za aplikacije koje komuniciraju preko mreže, ukoliko
koriste usluge UDP-a, kaže se da razmenjuju datagrame.
14:41 62
3/13/2014
32
? UDP proširuje usluge IP sloja tako što aplikacijama pruža
uslugu pod nazivom Portovi.
? Napomena:
? UDP je pogodan za servere kod kojih klijenti postavljaju
upit i dobijaju kratke odgovore u jednom paketu tj.
datagramu. Na primer DNS servis (engl. domain name
service).
14:41 63
Portovi
14:41 64
3/13/2014
33
? Host može da pokrene veliki broj aplikacija koji koriste
internet usluge, odnosno koje komunicijraju sa drugim
aplikacijama na nekom drugom hostu.
? IP paket sadrži IP adresu hosta. Za rad aplikacije potrebno
je da se doda dodatna informacija za koju je aplikaciju
pristigli paket namenjen.
14:41 65
Opeseg IP, UDP i TCP
protokola
14:41 66
3/13/2014
34
? Port je 16-to bitni ceo broj koji se pridružuje svakoj
aplikaciji koja komunicira preko mreže, bilo da se radi o
TCP, ili UDP protokolu.
? Ukupan broj portova jednog racunara je 216=65.535, što je
i teoretski maksimum razlicitih aplikacija koje je moguce
pokrenuti na jednom racunaru koje pristupaju mreži.
? Tipicno predstavljanje adrese i porta je razdvajanjem
dvotackom. Na primer, aplikacija na racunaru sa IP
adresom 123.1.1.1 komunicira na portu 80, što se obicno
zapisue 123.1.1.1:80. Na istom racunaru mail server je na
123.1.1.1:25.
14:41 67
14:41 68
3/13/2014
35
Broj porta i aplikacija
? Vezba:
? cmd
? >netstat –o
? >tasklist
14:41 69
Opsezi za portove
? Dodela portova je pod kontrolom medunarodne
neprofitne organizacije ICANN (Internet Corporation
for Assigned Names and Numbers)
Nisu dodeljeni (organizacija ICANN nije definisala njihvou namenu), ali koje neke
druge organizacije mogu registrovati kod ICANN da bi se predupredila dupliciranja
?dobro-poznati? portovi -
Dodeljuje ih (definiše njihovu
namenu) organizacija ICANN
Mogu se koristiti kao
privremeni ili privatni portovi
14:41 70
3/13/2014
36
Pojam: Socket
Mrežni soket je krajnja tacka dvosmernog meduprocesnog
komunikacionog toka preko racunarske mreže bazirane na IP
protokolu. Takode, nekada se u kontekstu par PORT - IP naziva se
SOCKET, tj. krajnje spojne tocke u komunikaciji izmedu RACUNARA.
14:41 71
Enkapsulacija korisnickih
datagrama
14:41 72
3/13/2014
37
Multipleksiranje i
demultipleksiranje
14:41 73
TCP
TCP (Transmission Control Protocol - Protokol za kontrolu prenosa) je
konekcioni, pouzdani proces-proces transportni protokol koji pruža
puni transportni servis udaljenim aplikacijama.
TCP sprovodi kontrolu protoka i kontrolu grešaka, a projektovan je
tako da se može dinamicki prilagoditi promenljivim karakteristikama
Interneta i održi pouzdanu vezu cak i u slucajevima pojave raznih
vrsta otkaza u mrežnoj infrastrukturi
14:41 74
3/13/2014
38
TCP
14:41 75
TCP servisi
? Koje servise TCP pruža aplikacijama?
? Proces-proces komunikacija
? Prenos toka podataka, a ne pojedinacnih poruka
? Dupleks komunikacija
? Konekcioni servis (uspostavljanje veze, prenos podataka,
raskidanje veze)
? Pouzdani servis (pouzdanost prenos podataka je
odgovornost TCP-ja, a ne aplikacije)
14:41 76
3/13/2014
39
Proces-proces komunikacija
Slicno UDP-u, TCP omogucava komunikaciju od procesa do procesa
korišcenjem 16-bitnih brojeva portova za identifikaciju procesa.
Opsezi portova (dobro-poznati, registrovani i dinamicki) su
identicni kao kod UDP-a
TCP numeriše sve bajtove podataka koji se prenose putem
uspostavljene konekcije. Redni brojevi se koriste za kontrolu
protoka i kontrolu grešaka.
Za razmenu rednih brojeva u zaglavlju TCP segmenta predvidena
su dva polja:
Sequence Number (SEQ broj) - redni broju prvog bajta u segmentu.
Acknowledgement Number (ACK broj, ili broj potvrde) - redni broj
prvog sledeceg bajta kojeg pošiljalac segmenta ocekuje da primi.
Koristi se za kumulativnu potvrdu prijema.
14:41 77
Redni brojevi
? Za razmenu rednih brojeva u zaglavlju TCP segmenta
predvidena su dva polja:
? Sequence Number (SEQ broj) - redni broju prvog bajta u
segmentu.
? Acknowledgement Number (ACK broj, ili broj potvrde) -
redni broj prvog sledeceg bajta kojeg pošiljalac segmenta
ocekuje da primi. Koristi se za kumulativnu potvrdu
prijema.
14:41 78
3/13/2014
40
Format TCP segmenta
14:41 79
Enkapsulacija TCP segmenta
14:41 80
3/13/2014
1
Adresiranje
? TCP/IP adresiranje ima 3 sloja adresa:
1. fizicke adrese
2. logicke (mrežne, IP) adrese
3. adrese portova.
14:42
Dijagram adresiranja
14:42
3/13/2014
2
Fizicka adresa - 1
? ...predstavlja adresiranje sa podacima o fizickom uredaju. Cvor sa
jednom adresom šalje okvir cvoru sa drugom adresom. U zaglavlju
paketa su obe adrese.
MAC, eternet adresa, fizicka adresa:
04:03:01:02:2C:2B
14:42
Fizicka adresa - 2
? Struktura MAC adrese
14:42
3/13/2014
3
Fizicka adresa - 2
? MAC (eng. Medica Access Controls) adresa je adresa
kodirana u ROM (engl. Read Only Memory) memoriji
svakog mrežnog uredaja. Sastoji se od 48 bita i
jedinstvena je za svaki uredaj.
? Sa 48 bita može se adresirati 248 uredaja.
? IEEE predvida da se taj adresni prostor nece potrošiti do
2100. godine.
? Prva 24 najznacajnija bita se dodjeljuju proizvodacu,
tzv. OUI (engl. Organizationally Unique Identifier), a 24
najmanje znacajna bita su rezervisana za pojedinu
mrežnu karticu proizvodaca. Za zapisivanje MAC adresa
koristi se heksadecimalni brojevi npr. 00-1A-4D-5B-05-
91.
14:42
Lista nekih firmi i njima
dodeljenih OUI kodova
00-00-E2 - Acer
00-80-C2 - IEEE 802.1 grupa
00-A0-3E - ATM Forum
00-AA-00 - Intel
08-00-09 - Hewlett-Packard
08-00-20 - Sun
08-00-2B - DEC
08-00-46 - Sony
08-00-56 - Stanford University
08-00-5A - IBM
80-00-10 - AT&T
00-00-0C - Cisco
00-00-0E - Fujitsu
00-00-5E - IANA
00-00-AA - Xerox
00-00-C0 - Western Digital
14:42
3/13/2014
4
Tipovi MAC adrese
1. Unikast – adresa za samo jedan cvor. Paket sadrži MAC
adresu krajnjeg uredaja kome je upucen paket.
2. Multikast – adresa je više cvorova. Adrese pocinju sa
odredenim brojem.
3. Broadcast – adresa su svi cvorovi
? FF-FF-FF-FF-FF-FF je MAC adresa kada, sve pakete koji
imaju ovu adresu kao adresu odredišta, primaju svi cvorovi
u tom domenu
14:42
Mrežno adresiranje
? Podsecanje:
? IP (engl. Internet Protocol - RFC 791) je osnovni
protokol TCP/IP arhitekture. Koriste ga protokoli
svih viših slojeva.
? To je protokol bez uspostave veze, tj predajnik i
prijemnik se ne dogovaraju o pocetku ili završetku
prenosa podataka. Predajnik pošalje paket i na dalje
ne dobija potvrdu o prijemu paketa.
? Protokoli viših slojeva mogu da proveravaju
konzistentnost podataka. Ti protokoli obavljaju
detekciju i korekciju grešaka. Zbog toga se IP
protokol cesto naziva "nepouzdani protokol".
? Paket na nivou sloja IP se naziva datagramom.
Datagrami su paketi promenljive dužine i sastoje se
iz dva dela: zaglavlje i podaci. Dužina zaglavlja je od
20 do 60 bajta. Zaglavlje sadrži informacije bitne za
rutiranje i isporuku datagrama.
14:42
3/13/2014
5
Format IP paketa
Version - Verzija IP protokola.
Internet Header Length (IHL) -
Dužina IP zaglavlja u 32-bitnim
recima, omogucava odredivanje
pocetka podataka.
Type of Service - Tip usluge,
omogucava ruterima razlicit
tretman pojedinih paketa u cilju
postizanja zadovoljavajuceg
kvaliteta usluge (QoS).
Total Length - Ukupna dužina IP
paketa u oktetima, ukljucujuci IP
zaglavlje i podatke
Identification - Identifikator
paketa, važan je pri povezivanju
svih fragmenata u paket.
Flags - Kontrolne zastavice, definišu
je li je fragmentacija dopuštena i
ako jest, ima li još fragmenata istog
paketa.
Fragment Offset - Definiše mesto
fragmenta u originalnom paketu
14:42
IP adresiranje
? Postoje dva standarda: IPv4, IPv6. Ako se ne naglasi ili
ne govori eksplicitno o standardu IPv6, onda se radi o
standardu IPv4.
? Internet ili IP adresa je 32-bitna (ili 4-bajtna) adresa
(identifikator) koja na jedinstven i univerzalan nacin
definiše vezu hosta ili rutera na Internet.
? Adresni prostor (broj razlicitih adresa) IP protokola je
2
32 ili 4,294,967,296
14:42
3/13/2014
6
Osnovi delovi IP adrese
? IP adresa je velicine 32 bita tj. cetiri okteta i sastoji se
od dva dela:
1. Adrese mreže (engl. network adress) - Identifikuje
podmrežu
2. Adrese racunara (engl. host address) - Identifikuje host
unutar podmreže.
14:42
Tackasta notacija
? Zapisuje se kao cetiri broja u decimalnom obliku
medusobno odvojena tackama:
? N.N.N.N
? gdje je svaki broj N decimalni broj velicine jednog
okteta kada se zapiše binarno i može imati decimalnu
vrijednosti u granicama od 0 do 255.
? Definisano je znacenje svakog broja i svakog bita unutar
adrese.
? Primer IP adrese u decimalnom obliku:
? 192.168.1.30
? Ili binarno:
? 11000000 10101000 00000001 00011110 14:42
3/13/2014
7
Grupisanje IP adresa
? IP adrese su grupisane u pet mrežnih klasa (kategorija) A, B, C, D i E.
? Mrežna klasa ima svoj opeg odnosno tacno odreden pocetak adrese i
još
? NetId – adresa mreže
? HostId – adresa hosta tj racunara
14:42
Uporedne velicine opsega
adresa klasa
? Svaka klasa zauzima jedan kontinualni deo
adresnog prostora.
? Na slici je graficki prikazana velicina opsega adresa po
klasama
14:42
3/13/2014
8
Posebne adrese
? Adrese svih mrežnih klasa sa svim bitima adrese
hosta u nuli oznacavaju samu mrežu; npr. adresa
161.53.0.0 je adresa mreže (prva adresa)161.53
klase B.
? Adrese sa svim bitima koje su jedinice (engl.
broadcast) na adresi hosta su adrese razašiljanja,
tzv brodkast (engl. broadcast) adresa (poslednja
adresa). Paket upucen na adresu na
161.53.255.255 ce biti dostavljen svim hostovima
u mreži 161.53.0.0.
14:42
Mrežna adresa
? Mrežna adresa je prva adresa u bloku.
? Definiše mrežu (a ne host). (Ruteri
usmeravaju pakete na osnovu mrežne
adrese)
? Na osnovu mrežne adrese, može se
odrediti klasa, blok i opseg adresa u
bloku.
14:42
3/13/2014
9
Primer mrežne adrese
IP adresa je 142.22.0.0, odrediti klasu, blok i opseg
adresa.
Klasa adrese je B zato što je prvi bajt izmedu 128 i 191.
Adresa pripada bloku sa netid = 142.22.
Opseg adresa je 142.22.0.0 do 142.22.255.255.
14:42
Primeri
? Odrediti klase sledecih IP adresa:
00000001 00001011 00001011 11101100
11000001 10000011 00011011 11111100
10100111 11011011 10001011 01101100
11110011 10011011 11111011 00001111
14:42
3/13/2014
10
Primeri
Odrediti klase IP adresa:
227.12.14.87
193.14.56.22
14.23.120.8
252.5.15.111
134.11.78.56
Rešenje:
Prvi bajt je 227 (izmedu 224 i 239); klasa je D.
Prvi bajt je 193 (izmedu 192 i 223); klasa je C.
Prvi bajt je 14 (izmedu 0 i 127); klasa je A.
Prvi bajt je 252 (izmedu 240 i 255); klasa je E.
Prvi bajt je 134 (izmedu 128 i 191); klasa je B.
14:42
Privatne IP adrese
? Osim javnih adresa koje su vidljive na internetu postoje
i privatne IP adrese koje se koriste za komunikaciju
unutar jednog autonomnog sistema i nisu vidljive na
internetu.
? Primenom privatnih IP adresa unutarašnja mreža može
biti vidljiva na internetu samo preko javne IP adrese.
? Tako se povecava sigurnost mreže i smanjuje potrošnja
javnih IP adresa.
? Firma placa ISP-u samo jednu javnu adresu, a unutar
svog autonomnog sistema ima proizvoljno veliku mrežu.
Ruteri na internetu odbacuju sve pakete s privatnim IP
adresama.
14:42
3/13/2014
11
Opseg privatnih IP adresa
? Opseg privatnih IP adresa prema RFC 1918 je:
1. 10.0.0.0 - 10.255.255.255
2. 172.16.0.0 - 172.31.255.255
3. 192.168.0.0 - 192.168.255.255
14:42
Podmreže
? Svaka IP adresa pripada jednoj od klasa adresa.
? Primenom mrežnih maski (engl. network mask, ili
netmask) omoguceno je formiranje podklasa i podmreža
unutar jedne dodeljene mrežne klase.
? Tako se povecava broj mreža na racun broja
racunara.Ovo se naziva podmrežavanje (engl.
subnetting). Obrnutni postupak, kada se na racun broja
mreža povecava broj racunara naziva
se nadmrežavanje (engl. supernetting).
? Kod podmrežavanja biti adrese racunara se koriste za
adrese mreže, a kod nadmrežavanja biti adrese mreže
se koriste za adrese racunara.
14:42
3/13/2014
12
Primer podmreže 141.14.0.0
14:42
Mrežna maska
? Mrežna maska je 32-bitni broj.
? Ukazuje na to koji biti IP adrese se koriste kao biti
adrese mreže.
? Ako je bit mrežne maske u stanju logicke jedinice
smatra se da taj bit IP adrese pripada adresi mreže, svi
ostali bitovi koji su u stanju logicke nule definišu adresu
racunara.
? Svaka klasa adresa ima pripadnu mrežnu masku
(podrazumevane mrežne maske):
? Klasa A: 255.0.0.0
? Klasa B: 255.255.0.0
? Klasa C: 255.255.255.0
14:42
3/13/2014
13
? Adresa 192.168.1.21 ima mrežnu masku 255.255.255.0
može se zapisati i kao 192.168.1.21 / 24 (CIRD
notacija), što znaci da prvih 24 bita te adrese pripada
adresi mreže.
? Granice klasa su /8, /16 i /24 bita. Da bi se mreža
optimalno adresirala koriste maske sa promenljivom
dužinom (engl. Variable Length Subnet Mask), što znaci
da ne moramo koristiti mrežne maske na granici klase.
? Svrha? Takva adresna šema dodatno smanjuje
nepotrebnu potrošnju adresa, olakšava održavanje
mreže, povecava sigurnost i smanjuje velicinu tablica
usmeravanja rutera.
? CIRD (eng. Classless Inter-Domain Routing) notacija
? U maski, na kraju iza kose crte, se zapisuje broj jedinica.
? Na primer, adresa 18.46.74.10, koja je iz klase A sa
podrazumevanom maskom 255.0.0.0, se zapisuje kao
18.46.74.10/8.
14:42
Primer
? Zadatak. Ako je IP adresa 181.60.30.0. napraviti šest
podmreža?
1. 181.60.30 je zajednicki deo za svih 6 podmerža.
2. Treba odabrati 6 razlicitih opsega. Stoje na raspolaganju
sledeci:
000 001 010 011 100 101 110 111
3. Preostalih 5 bita ne ulaze u adrese podmreže. Dakle,
• 181.60.30.0 (00000000)
• 181.60.30.32 (00100000)
• 181.60.30.64 (01000000)
• 181.60.30.96 (01100000)
14:42
3/13/2014
14
Podmreža Adresa podmreže Raspon korisnih adresa Adresa razašiljanja
1 181.60.30.0 181.60.30.1 -
181.60.30.30 181.60.30.31
2 181.60.30.32 181.60.30.33 -
181.60.30.62 181.60.30.63
3 181.60.30.64 181.60.30.65 -
181.60.30.94 181.60.30.95
4 181.60.30.96 181.60.30.97 -
181.60.30.126 181.60.30.127
5 181.60.30.128 181.60.30.129 -
181.60.30.158 181.60.30.159
6 181.60.30.160 181.60.30.161 -
181.60.30.190 181.60.30.191
7 181.60.30.192 181.60.30.193 -
181.60.30.222 181.60.30.223
8 181.60.30.224 181.60.30.225 -
181.60.30.254 181.60.30.255
Mrežna maska svih podmreža: 255.255.255.224
14:42
Uredaji za
umrežavanje
14:42
3/13/2014
15
Funkcije mrežnih uredaja
• Odvajanje (povezivanje) mreža ili proširenje
mreže.
• Na pr. Repetitori, habovi, mostovi, ruteri,
svicevi, gejtvej uredaji.(engl. repeaters, hubs,
bridges, routers, switches, gateways)
• Povezivanje - udaljeni pristup
• Na pr. Modemi (56k, ADSL,HDSL)
14:42
A. Proširenje mreže
• Mreža se ne može proširivati jednostavnim dodavanjem
novih hostova i kablova…
• Gubi na efikasnosti !!
• Moguce je instaliranje uredaja za
• segmentaciju (deljenje) velikog LANa na manje LAN
mreže
• Povezivanje više LAN mreža
• Uredaji za to su
• Repetitori, mostovi, ruteri, svicevi ili gateway uredaji
14:42
3/13/2014
16
• Repetitori ili habovi rade na OSI fizickom sloju i vrše
regeneraciju mrežnog signala odnosno ponovno slanje istog ka
drugom segmentu.
• Primitivni hab se može posmatrati kao multiportni repetitor.
• Regeneriše podatke i šalje ih ka svim portovima
a. Repetitori i Habovi
Hub
14:42
Ogranicenja i funkcije
• Ne može da poveže razlicite segmente
• Ne može da poveže segmente sa razlicitim pristupnim metodama
(pr. CSMA/CD i token passing)
• Ne može da izloluje ili filtrira pakete
• Može da poveže
razlicite tipove
medijuma za prenos.
• Najjeftiniji nacin za
proširenje mreže
14:42
3/13/2014
17
b. Mostovi
• Imaju jedan ulaz i jedan izlaz
• Koriste se da izoluju mrežni saobracaj
• Imaju „inteligenciju“ da ispitaju adresu dolazeceg paketa i
adresu destinacije
• Ne mogu da
interpretiraju
informacije visokog
nivoa
• Ne mogu da filtriraju
paket na osnovu
njegovog protokola
14:42
Kako mostovi rade?
• Mostovi rade na Media Access Control Sub-layer MAC
podsloju OSI modela
• Tabela za rutiranje je
kreirana tako da zapisuje
segmente mreže ne adrese.
• Ako je adresa odredišta ista
kao adresa segmenta izvora,
prenos se ne vrši, u
suprotnom se vrši
prosledivanje.
14:42
3/13/2014
18
Kreiranje tabela za odredivanje putanje
• Zasniva se na adresama sa kojih se salju paketi
• Nova adresa se dodaje tek ako ne postoji.
Add01
Add03
Add02
S 01 D 02
Switching Table
Seg 1 Seg 2
01
02 Stop
S 02 D 01
14:42
Najcešce se koriste za povezivanje dve LAN mreže.
14:42
3/13/2014
19
Razlike izmedu mostova i repetitora
Repetitori Mostovi
OSI sloj Fizicki Veze podataka
Regeneracija Na nivou signala Na nivou paketa
Smanjuje
saobracaj
Ne Da
14:42
c. Svicevi
Cisco Catalyst 2900 switch
• Svicevi rade na drugom sloju - Data Link layer OSI
modela
• Mogu da interpretiraju adresne informacije
• Svicevi podsecaju na mostove i mogu se smatrati
multiport mostovima
• Pošti imaju više portova
mogu da bolje iskoriste
ogranicenje opsega i
omoguce efikasnije
prebacivanje paketa od
mostova
14:42
3/13/2014
20
• Svicevi dele jednu mrežu na nekoliko izolovanih kanala
• Paketi koji se šalju od kanala 1 nece biti prosledeni ako
se drugacije ne specificira
• Svaki kanal ima sopstveni kapacitet i nije potrebno da
bude deljen sa drugim kanalima
10Mbps
10Mbps
10Mbps
10Mbps
Switch
Hub 3.3Mbps
3.3Mbps
3.3Mbps
14:42
Prednosti sviceva
• Svicevi dele mrežu u nekoliko izolovanih kanala (ili
kolizionih domena)
• Smanjuju mogucnost kolizija
• Kolizija je jedino moguca ako dva uredaja pokušaju da
pristupe istom kanalu istovremeno
• Može se izbeci baferisanjem jednog od paketa i njegovim
naknadnim slanjem
• Svaki kanal ima sopstveni mrežni kapacitet
• Pogodno za real-time aplikacije tj video conferencing
• Pošto je izolovan postaje i bezbedniji
• Podaci ce biti prosledivani samo na odredište, ne ostalima 14:42
3/13/2014
21
Ogranicenja kod sviceva
• Iako sadrži bafere za smeštaj dela saobracaja paketa,
ipak može postati prepunjen u slucaju jakog
saobracaja
• Uredaj ne može otkriti koliziju kad je bafer pun
14:42
• Kratak rezime za svic.
• Kao i hub, svicevi povezuju veci pbroj racunara
zajedno u jednu LAN.
Tipicna upotreba svica je u centru mreže koja ima
topologiju zvezde (ili kao deo neke hibridne mreže) –
svicevi imaju kablove utaknute u sa druge stran u
racunare.
Svicevi su više inteligentni uredaji od hub-ova: kada
prime neku poruku, proveravaju kome je poruka
adresirana, i šalju je samo ka odredenom racunaru.
Zbog toga, mreže koje koriste sviceve su bezbednije
nego one bazirane na hub-ovima, ali su nešto skuplje.
14:42
3/13/2014
22
d. Ruteri
• Svicevi na sloju 2 ne mogu iskoristiti višestruke putanje
• Ruteri rade na OSI sloju 3 (mrežni sloj)
• Koriste “logicku
adresu” paketa i
tabela za rutiranje
da bi odredili
najbolju putanju za
isporuku.
14:42
Kako rade ruteri?
• Pošto se paketi proslede od jednog do drugog rutera,
adresa sloja veze (Data Link) za izvor i odredište se
odvaja i ponovo kreira.
• Omogucava da neki ruter prosledi paket od TCP/IP
Ethernet mreže na drugi tip mreže, na pr TCP/IP token
ring.
• Samo paketi sa poznatom mrežnom adresom ce biti
prosledeni – tako se redukuje saobracaj.
• Ruteri osluškuju mrežu i odreduju najzauzetiji deo.
• Mogu odrediti optimalnu putanju za prenos paketa. 14:42
3/13/2014
23
• Ruteri su uredaji na sloju 3
koji prepoznaju mrežne
adrese
• Mostovi su uredaji na sloju
2 koji prate adresu u MAC
podnivou
• Mostovi prosleduju sve što ne
prepoznaju
• Ruteri selektuju najbolju
putanju
Razlika izmedu mostova i rutera
14:42
Zakljucak
• Repetitori su najjeftiniji nacin za proširivanje mreže, ali
sa više ogranicenja u pogledu povezivanja segmenata
• Mostovi slicno repetitorima ali razumeju adrese cvorova
• Svicevi predstavljaju višeportne mostove, mogu deliti
mrežu na logicke kanala
• Ruteri vrše medumrežno povezivanje i omogucavaju
funkcije filtriranja. Mogu da odreduju i najbolje rute.
14:42
3/13/2014
24
NAT
Tehnika prevodenja adresa NAT, (engl. Network
Address Translation) omogucava da se u okviru sajta
koriste privatne adrese za loklanu komunikaciju i skup
globalnih adresa za komunikaciju sa drugim sajtovima.
Preduslov je da sajt mora imati jednu konekciju ka
globalnom Interentu posredstvom rutera na kome se
izvršava NAT softver
14:42
Koncept
14:42
3/13/2014
25
Prevodenje adresa
14:42
Tabela prevodenja (jedna
IP adresa)
14:42
3/13/2014
26
Tabela prevodenja (sa pet kolona)
Privatna
adresa
Privatni
port
Eksterna
adresa
Eksterni
port
Transportni
protokol
172.18.3.1 1400 25.8.3.2 80 TCP
172.18.3.2 1401 25.8.3.2 80 TCP
. . . . . . . . . . . . . . .
14:42
HTTP
HTTP 14:42
3/13/2014
27
Uvod
? HTTP (Hypertext Transfer Protocol) je protokol
aplikacijskog sloja.
? Omogucava prenos fajlova koji su hypertext dokumenti.
? Hipertekst dokumenti u sebi sadrže veze na druge
dokumente.
? Veze do drugih dokumenata nazivaju se hipertekstualne
veze (engl. hyperlinks).
? Primjenjuje se od 1990. godine pojavom usluge interneta
WWW - World Wide Web.
HTTP 14:42
Osobine HTTP protokola
? HTTP 1.0 verzija protokola zasniva se na modelu klijent
– server.
? Za prenos podataka zahteva se pouzdana veza na
transportnom nivou.
? Ne vezuje uz odredeni protokol, vec dopušta u buducim
primenama i neki drugi protokol osim TCP-a.
? Standardno je prikljucna tacka na kojoj web server
osluškuje sadržaj port 80, ali se može defisati i
drugacije.
? HTTP 1.0 protokol definiše otvaranje odvojenih TCP
linkova za prenos svakog dokumenta. Na primer, HTML
dokument koji poziva dve slike unutar stranice izaziva
otvaranje dve nove TCP veze od klijenta prema serveru.
HTTP 14:42
3/13/2014
28
Klijent - server
? Web pretraživac (browser) - klijent
? Aplikacioni program za pribavljanje i
prikazivanje stranica.
? Najpoznatiji pretraživaci: Internet Explorer,
Firefox, Opera, Chrome
? Web server
? Cuva i isporucuje Web stranice
HTTP 14:42
WEB
? Veb, Web (eng. World Wide Web) je kolekcija ogromnog
broja elektronskih dokumenata sacinjenih od povezanih
Web stranica napisanih u HTMLu na Internetu.
? Komponente veba su veb server, veb klijent, HTML URL
(Uniform Resource Locator) i HTTP.
HTTP 14:42
3/13/2014
29
Hipertekst
? Koncept dokumenta koji sadrži vezu do drugih
srodnih stranica.
14:42 HTTP
Web pretraživac
? Program koji može da prikazuje HTML stranice i
reaguje kada se mišem klikne neki objekat na
stranici.
? Kada je objekat izabran, pretraživac prati
hipervezu pridružen objektu i pribavlja izabranu
stranicu.
? URL - nacin imenovanja Web stranica
? Npr. http://www.b92.net/sport/kosarka/vesti.php
? http - ime protokola
? www.b92.net - simbolicko (DNS) ime racunara kome
se pristupa
? /sport/kosarka/vesti.php - ime datoteke koja sadrži
stranicu
HTTP 14:42
3/13/2014
30
HTTPS
? (eng. Hypertext Transfer Protocol Secure)
? Je kombinacija Hypertext Transfer Protocol-a sa SSL/TSL
protokola kako bi se obezbedilo šifrovanje i sigurna
identifikacija servera.
? Obicno koristi port 443. HTTPS ne treba mešati sa
Secure HTTP (S-HTTP).
? Lokacija HTTP (i HTTPS) dokumenata se odreduje
pomocu URL adrese.
HTTP 14:42
Web pretraživac
? HTML - jezik za pisanje Web stranica
? Web pretraživac - HTML interpretator
? Dodatne funkcije koje olakšavaju navigaciju na
Web-u:
? Dugme za povratak na prethodnu stranicu,
? Dugme za prelazak na sledecu stranicu i
? Dugme za direktno ucitavanje stranice koju je korisnik
oznacio kao svoju pocetnu stranicu.
? Podrška za bookmark-e, tj. kreiranje liste cesto
posecivanih stranica.
? Ucitane stranice se mogu štampati ili snimiti na hard
disk.
? Opcije za podešavanje izgleda stranice.
HTTP 14:42
3/13/2014
31
Web pretraživac
1. Pretraživac se obraca specijalnom serveru da mu umesto naziva vrati IP
adresu za www.b92.net
2. Specijalni server (DNS server) odgovara sa 91.222.6.80
3. Umesto tipicne adrese stranice moglo bi se pisati
http://http://91.222.6.80/sport/kosarka/vesti.php
4. Pretraživac uspostavlja TCP konekciju sa hostom 91.222.6.80 na portu
80.
5. Pretraživac šalje zahtev tražeci fajl /sport/kosarka/vesti.php
6. Server odgovara slanjem fajla.
7. TCP konekcija se zatvara.
8. Pretraživac prikazuje tekst sadržan u falju.
9. Pretraživac pribavlja i prikazuje sve slike iz ovog fajla.
14:42 HTTP
Multimedijalni sadržaji - 1
? Web stranice osim HTMLa mogu sadržati:
? Dokumente u PDF formatu
? Fotografije u JPEG formatu
? Muziku u MP3 formatu
? Video u MPEG formatu
? ... bilo koji sadržaj u jednom od stotina razlicitih
tipova fajlova i formata
? Pretraživac mora biti u stanju da prepozna i
pravilno interpretira sve ove formate.
? Kako ?
HTTP 14:42
3/13/2014
32
Multimedijalni sadržaji - 2
? Web server, zajedno sa stranicom, šalje i dodatne
informacije o stranici, kao što je MIME tip stranice.
? Stranice tipa text/html se prikazuju direktno u
pretraživacu, a to važi i za još nekoliko drugih
ugradenih tipova.
? Za tipove koje ne podržava direktno, pretraživac
konsultuje svoju tabelu MIME tipova u kojoj su MIME
tipovima pridruženi odgovarajuci programu za
prikazivanje.
? Programi za prikazivanje specificnih formata, mogu biti:
? Plug-in-ovi odnosno add-on
? Pomocne aplikacije
HTTP 14:42
Plug-in
? …su programski moduli, koje, po potrebi, pretraživac instalira kao
svoje sopstveno proširenje
? Plug-in nije program za sebe, vec se izvršava kao deo pretraživaca
i na taj nacin ima pravo pristupa tekucoj stranici i može je
procesirati
? Nakon što je plug-in obavio svoj zadatak, on se odstranjuje iz
memorije pretraživaca.
? Pre korišcenja plug-in mora biti instaliran u sistem
? Plug-in se preuzima sa odgovarajuceg Web sajta
? Kopira u direktorijum za plug-in-ove i
? Registruje u sistem (MIME tip kojeg plug-in obraduje se upisuje u
tabelu MIME tipova)
HTTP 14:42
3/13/2014
33
Plug-in
? Plug-in-ovi odredenog pretraživaca imaju zajednicki interfejs (skup
procedura koje pretraživac može da poziva). Pretraživac koristi sve
plug-in-ove na identican nacin.
? Ako se zahteva obrada novog tipa fajla (tj. formata) zahteva se
kreiranje odgovarajuceg plug-in-a, ali se ne zahteva bilo kakva
izmena u pretraživacu.
HTTP 14:42
Plug-in
? Na primer, unesite u adres bar Chrome pretrazivaca:
chrome://plugins/
? Add-on takode predstavlja proširenje funkcionalnosti,
ali se obicno misli na istog proizvodaca programa i
dodatka.
? Najcešci dodatak za pretraživace su linije sa alatkama
(toolbars) koje sadrže precice i oduzimaju prostor na
vrhu aplikacije. Cesto se spominju i kod igrica.
HTTP 14:42
3/13/2014
34
Pomocne aplikacije
? ..su zasebni programi koji se izvršavaju nezavisno od
pretraživaca
? Adobe Acrobat Reader, Microsoft Word, ...
? Komunikacija izmedu pretraživaca i pom.aplikacije:
? Ne koristi se interfejs, vec
? Pomocnoj aplikaciji se prosleduje ime fajla koji treba obraditi
? Pomocna aplikacija otvara naznaceni fajl i prikazuje njegov sadržaj.
? Pomocne aplikacije se koriste za celine koje su posebno definisane
sopstvenim internet tipom, tzv MIME tip.
HTTP 14:42
MIME tipovi
? Internet medija tip je identifikator za formata
dokumenta. Identifikatori su prvobitno definisani u
standardom RFC 2046 za Internet poštu u okviru SMTP
protokola, ali je njihovo korišccenje prošireno i na
druge protokole kao što su: HTTP, RTP i SIP.
? Originalno primena MIME tipova (eng. Multipurpose
Internet Mail Extensions) je bila da se ne-ASCII delovi
elektronske pošte (tj razni medija fajlovi koji se šalju u
istoj poruci) razdvoje od samog teksta poruke. Bez MIME
tipova email klijent ne bi mogao da razlikuje formate
priloga (eng. attachment).
?
HTTP 14:42
3/13/2014
35
HTTP
Medija tip je sacinjen od 2 ili više delova: tipa,
podtipa, i nula ili više opcionalnih atributa.
Na primer podtip od tipa text ima opcionalni charset
atribut koji se može koristiti da ukaže na tip
enkodiranja karaktera recimo text/html;
charset=UTF-8
Dozvoljene vrednosti za atribut charset su definisane
u listi IANA karakterskih setova.
IANA vodi brigu o registraciji MIME tipova.
14:42
Pomocne aplikacije
? Na primer pretraživaci koriste MIME tip application
? application/pdf za PDF fajlove ili
? application/msword za Word fajlove.
? U Windowsu, program koji se instalira na racunar
ujedno i registruje MIME tipove koje želi da obraduje.
? Konflikt nastaje kada u sistemu postoji više prikazivaca
za isti MIME podtip (npr. video/mpg).
? Obicno poslednji program koji je registrovan prepisuje
postojecu asocijaciju ?MIME tip - pomocna aplikacija? i
dati MIME tip/podtip vezuje za sebe.
HTTP 14:42
3/13/2014
36
Otvaranje lokalnih fajlova
? Pretraživaci mogu otvarati i lokalne fajlove (sa hard diska).
? Lokalnim fajlovima nisu pridruženi MIME tipovi. Kako
pretraživac zna koji plug-in ili pomocnu aplikaciju da
pokrene ?
? Na osnovu ekstezije u imenu fajla. (npr. za nesto.doc se
otvara Word)
HTTP 14:42
Web server
HTTP 14:42
3/13/2014
37
Web server - 1
? Web server - program koji neprekidno, u petlji, obavlja
sledeci niz aktivnosti:
? Prihvata TCP konekciju od klijenta (pretraživaca).
? Preuzima ime zahtevanog fajla.
? Pronalazi fajl (na svom hard disku).
? Šalje fajl klijentu.
? Zatvara TCP konekciju.
? Plus brojne dodatne mogucnosti.
? Na svaki zahtev upucen od strane klijenta, server
pristupa hard disku radi uzimanja traženog fajla.
? Broj zahteva je cesto veliki, a ocekivano vreme odziva
mora biti što manje.
? Npr. ako je vreme pristupa fajlu na hard disku 5 ms, server
bi mogao da obradi najviše 200 zahteva/s, što je
nedovoljno bruzo. HTTP 14:42
Web server - 2
? Kako bi obezbedio brži odziv server stranice „kešira“.
? U operativnoj memoriji servera kreira se keš sa n
najskorije zahtevanih fajlova.
? Ako je traženi fajl u kešu, tada nije potrebno pristupati
hard disku jer se fajl može uzet direktno iz memorije.
HTTP 14:42
3/13/2014
38
Višenitni koncept
? Drugi koncept koji server primenjuje radi bržeg odziva je rad sa više niti u isto
vreme (engl. Multithreading)
? Pristupni modul prihvata dolazne zahteve i prosleduje ga jednom od k
pozadinskih modula (svaki modul jedna nit)
? Dok su jedan ili više pozadinskih modula blokirani cekajuci na završetak
operacije (i zbog toga ne troše CPU vreme), ostali moduli mogu biti aktivno
upošljeni na obradi novih zahteva
HTTP 14:42
Web server
? U zavisnosti od tipa pristiglog zahteva, pozadinski modul
obavlja neki podskup sledeceg niza aktivnosti:
? Odredivanje imena zahtevane Web stranice iz URL-a.
? Provera autenticnosti klijenta
? Provera prava pristupa klijenta.
? Provera prava pristupa Web stranici.
? Provera keša.
? Pribavljanje zahtevane stranice sa diska.
? Odredivanje MIME tipa koji ce biti sadržan u odgovoru koji se vraca
klijentu.
? Slanje odgovora klijentu.
? Kreiranje zapisa u log fajlu.
HTTP 14:42
3/13/2014
39
Web server - farma servera
? Koristi se za hostovanje Web sajtova sa veoma velikom brojem pristupa u
sekundi.
? Sadrži više cvorova (racunara) sa više hard diskova
? Svi cvorovi poseduju sve Web stranice
? Pristupni modul raspodeljuje zahteve rezlicitim cvorovima
? Ne postoji zajednicki keš
? traženi fajl prisutan u kešu nekog cvora, a da zahtev je prosleden cvoru kod
kojeg se
fajl mora procitati sa diska. Zato pristupni modul vodi evidenciju o tome kome je
poslao svaki zahtev, a naredne zahteve koji odnose na istu stranicu šalje istom
cvoru.
HTTP 14:42
URL - 1
? URL-u (Uniform Resource Locator - uniformni lokator resursa) -
mehanizma za imenovanje i lako lociranje stranica
? Daje odgovor na pitanja:
1. Koje je ime stranice?
2. Gde se stranica nalazi?
3. Kako se stranici može pristupiti?
? Svaka stranica na Web-u poseduje URL, kao svoje svetski
jedinstveno ime
? Sastoji se iz tri dela:
1. Protokol (ili šema) - kao se stranici pristupa;
2. DNS ime racunara na kome je stranica locirana i
3. Lokalno ime fajla u kojem je stranica zapamcena
HTTP 14:42
3/13/2014
40
URL -2
? Deo za ime fajla može biti izostavljen:
? Web server se preusmerava na glavnu stranicu Web sajta
? Deo za ime fajla može da sadrži putanju do direktorijuma, ali ne i
samo ime fajla
? Web server se preusmerava na podrazumevani fajl u tom direktorijumu
HTTP
http://www.viser.edu.rs/predmeti/uit.html
Protokol Host Ime fajla: relativna putanja
+ ime samog fajla
14:42
URL - 3
? Protokol - sadrži ime aplikacionog protokola koji se
koristi za pristup stranici. Dakle, nije ogranicen na http
Prot. Koristi se za Primer
http Hipertekst (HTML) http://viser.edu.rs
ftp FTP ftp://ftp.viser.edu.rs
file Lokalni fajl file:// C:\Primeri\UIT\test.doc
news Newsgroup news:comp.os.minix
gopher Gopher gopher://gopher.tc.umn.edu/11/Libraries
mailto slanje elektronske pošte mailto:vpetrovic@viser.edu.rs
telnet Udaljeni login telnet://www.w3.org:80
14:42 HTTP
3/13/2014
1
Cookie - 1
? Web ne koristi koncept stanja (stateless) ili bez
memorije. Kod Web-a ne postoji sesija:
? Pretraživac šalje zahtev, a server vraca nazad fajl. Nakon
obavljene transakcije, server ne vodi racuna niti na bilo koji
nacin pamti šta je kome slao.
? Medutim novi servis zahtevaju suprotno.
? Kako Web server zna da li zahtev potice od registrovanog ili
neregistrovanog korisnika ?
? Neki veb sajtovi nude opciju da svaki korisnik može da
konfiguriše sadržaj pocetne stranice birajuci informacije koje
ce biti prikazane uvek kada ucita stranicu.
2:43
Cookie - 2
? Da li bi bilo dovoljno da server sacuva podatak o IP adresi sa koje
je upucen zahtev?
? Korisnici koriste dinamicke IP adrese
? IP adresa identifikuje racunar, ali ne i korisnika koji trenutno radi na
racunaru.
? Rešenje je upotreba kolacica - cookie
? Mali string ili fajl koji server dostavlja klijentu zajedno sa traženom
stranicom.
? Klijent može a ne mora da sacuva taj podatak.
? Kada se neredni put obraca serveru, kijent zajedno sa zahtevom šalje i cookie,
ako postoji.
? Princip rada
? Pretraživac, pre nego što pošalje zahtev za nekom stranicom, proverava da li u
svom direktorijumu, predvidenom za cookie-je postoji cookie ranije poslat iz
domena kome ce zahtev biti upucen.
? Server preuzima cookie i interpretira njegov sadržaj.
2:43
3/13/2014
2
Cookie - 3
? Sadrži najviše pet polja:
? (Domain, Path, Content, Expires, Secure)
? Domain - domen porekla cookie (domen servera)
? Path - sadrži putanju u strukturi direktorijuma servera koja
ukazuje na stablo direktorijuma unutar kog stranice mogu koristiti
cookie.
? Content – podaci. Oblika su: ime = vrednost. Ime i vrednost mogu
biti bilo koja informacija koju server želi da uvrsti u cookie.
? Expires - datum i vreme kada prestaje važnost cookie-ja. Ako ovo
polje ne postoji, pretraživac uništava cookie prilikom svog
zatvaranja (neperzistentni cookie).
? Secure - ako ima vrednost Yes, nalaže pretraživacu da cookie mora
biti u šifrovanom obliku
2:43
Primer pristupa sajtu za registrovane
korisnike
? Prilikom prve posete sajtu za on-line kupovinu, od korisnika se zahteva da se
registruje, tj unese potrebne podatke i kreira korisnicko ime i lozinku.
? Server kreira cookie sa sadržajem
? korIme=amin
? lozinka=admin
? Server šalje cookie klijentu.
? Pretraživac izdvaja cookie iz odgovora i smešta ga u odgovarajuci
direktorijum.
? Kad god kasnije korisnik pristupi ovom sajtu, pretraživac zajedno sa zahtevom
šalje serveru i odgovarajuci cookie
? Na osnovu sadržaja cookie-a, Web server vrši proveru dobijenih podataka i
prijavu korisnika na sajt.
2:43
3/13/2014
3
Staticki Web
? Web stranice su staticke kada su odgovarajuce datoteke
smeštene na nekom serveru u istom obliku u kome ce
biti isporucene klijentu na zahteve.
? Takve stranice su napisane HTML jezikom.
? Dakle, HTML je jezik za kreiranje statickih Web stranica
2:43
Dinamicki Web
? Sadržaj koji se isporucuje klijentu nije unapred
formiran vec se kreira na zahtev. Sadržaj koji se
isporucuje se formira na osnovu podataka koji se
dobijaju od klijenta i podataka koji se na serveru
ažuriraju (obicno u nekoj bazi).
? Treba razlikovati:
? Dinamicki web- Web server, po prijemu zahteva, pokrece
odgovarajuci aplikacioni servis koji kreira dokument, a
klijentu vraca izlaz programa.
? Aktivni web - Web stranica osim statickog sadržaja (HTML,
slike i sl.) sadrži i program koji se nakon ucitavanja
stranice izvršava u pretraživacu.
2:43
3/13/2014
4
2:43
Dinamicki web
Staticki web
Dinamicki dokumenti
? PHP
? Poseduje promenljive, stringove, polja i vecinu
upravljackih struktura koje srecemo u C-u
? Open source i dostupan je za slobodno korišcenje.
? Posebno je projektovan za rad sa Apache web serverom
(koji je takode open source).
? Alternative:
? JSP (JavaServer Pages).
? Dinamicki deo stranice se piše u programskom jeziku Java.
Stranice koje koriste ovu tehniku obicno imaju nastavak .jsp.
? ASP (Active Server Pages) je Microsoft-ova verzija za
kreiranje dinamickog web-a.
? Za generisane dinamickog sadržaja se koristi skript jezik C#
(ili VB skript). Stranice koje koriste ASP, obicno imaju nastavak
.asp
2:43
3/13/2014
5
HTTP protokol
? HTTP (HyperText Transfer Protokol - protokol za prenos
hiperteksta)
? Zasnovan na tekstualnom formatu.
? Koristi se za komunikaciju izmedu citaca i Web servera.
? Protokol aplikacionog sloja, koji, za prenos podataka
koristi TCP (Web server na portu 80).
2:43
Vrste konekcije - 1
A. Konekcija nije trajna, tj. neperzistentna
? Preko uspostavljene konekcije citac šalje zahtev,
server vraca HTML stranicu i konekcija se zatvara.
? Ako ucitana Web stranica sadrži slike ili neki
drugi dodatni sadržaj, neophodno je da
pretraživac radi prenosa svakog takvog
entiteta uspostavi posebnu TCP konekciju sa
serverom.
? Neefikasan ako se prenose Web stranice koje
osim HTML-a sadrže i veci broj slika, ikona ili
drugih pratecih sadržaja.
2:43
3/13/2014
6
Vrste konekcije - 2
B. Konekcija je neprekidna, tzv perzistentna
? Citac uspostavlja konekciju, šalje zahtev i dobija odgovor.
? Nakon slanja odgovora, Web server ne zatvara konekciju, vec
je ostavlja otvorenom tako da citac može da uputi sledeci
zahtev.
? Server zatvara konekciju po isteku nekog vremena a nakon
poslednjeg zahteva.
? Prednosti:
? Efikasniji prenos – izbegava se dodatno usporavanje usled
stalnih uspostavljanja i raskidanja konekcije
? Pretraživac može dodatno da optimizuje prenos u ovakvom
prenosu 2:43
Serveri posebne namene
? Web klijent i Web server direktno komuniciraju
razmenom HTTP poruka preko Interneta.
? Medutim, komunikacija klijent-server se, po
pravilu, ostvaruje posredstvom jednog ili više
medu-servera. Spomenucemo:
? Firewall
? Proxy server
2:43
3/13/2014
7
Proksi server u razlicitim
ulogama
? Forward
? Open
? reverse
2:43
Tipicna konfiguracija
2:43
3/13/2014
8
Proksi server - 1
? Proxy - posrednik izmedu LAN korisnika i Web-a.
? Omogucava optimizaciju tj smanjuje cekanje na isporuku
Web stranica.
? Web pretraživaci u mreži koja koristi proxy server su
konfigurisani tako da svoje HTTP zahteve ne upucuju
direktno udaljenim Web serverima vec ih šalju lokalnom
proxy serveru koji u njihovo ime obavlja zahtevanu
transakciju (gateway).
2:43
Proksi server - 2
? Pošto jedan LAN korisnik pristupi odredenoj Web stranici, proxy
sacuva kopiju te stranice.
? Kada sledeci put neki LAN korisnik pristupi istoj stranici, proxy
uzima podatke iz svog keša i ne šalje zahtev preko Interneta.
? Koji je moguci problem zbog ovog nacina rada?
? Efektivno skracuju vreme pribavljanja Web stranica, znacajno
redukuju saobracaj na Internetu i smanjuju opterecenje Web
servera.
2:43
3/13/2014
9
Tipovi proksi servisa
? Tri tipa povezani hijerarhijski
? Lokalni proxy – aplikativni proces na klijentskom racunaru
? LAN (korporacijski) proxy
? ISP proxy
? 1. Zahtev se šalje lokalnom proksiju,
? 2. Ako nije u stanju da opsluži zahtev, zahtev se prosleduje LAN proksiju.
? 3. Ako LAN proksi nije u stanju da opsluži zahtev isti se prosleduje serveru
provajdera internet usluga, sve dok se u nekom kešu ne pronade tražena
stranica.
? Ako stranica ne postoji u kešu proxy servera na vrhu hijerarhije, ona se
direktno traži od Web servera, a onda prosleduje nazad do pretraživaca koji
je uputio zahtev i pri tome pamti u keševima svih posrednih proxy servera.
? U HTTP postoji nekoliko namenskih zaglavlja
? Web server može da kontroliše kako proksiji obraduju svaku Web stranicu
koristeci u zaglavlju Max_Forewards koji oznacava maksimalan broj poxy
servera izmedu Web servera i klijenta.
2:43
Do kada cuvati sadržaj u kešu?
? Ako se predugo cuva može da zastari, tj original
može da bude u meduvremenu promenjen.
? Ako se kopija cuva kratko - smanjuje se efikasnost.
? Neke stranice se brže menjaju od drugih. Npr.
stranica sa vremenskom prognozom se menja svaki
dan a stranica za prikaz standardnih jedinica mere
ne.
? Sklonost stranice promenama može da varira u
vremenu
? Dinamicke Web stranice se ni u kom slucaju ne mogu
keširati.
2:43
3/13/2014
10
Firewall server
? ... Ili sigurnosi gateway
? Ovaj server je lociran na granici izmedu LAN
mreže i Interneta.
? Osnovna uloga je zaštitna.
? Spoljnim korisnicima se obicno zabranjuje
direktan pristup racunarima LAN mreže. Server
sav saobracaj ka LAN mreži odnosno Internetu
nadgleda i filtrira.
2:43
Uloga firewall servera
? Firewall kontroliše saobracaj u oba smera
? Presrece i filtrira pakete koji su sa Interneta upuceni
lokalnim serverima, kao i sve zahteve koji se iz intraneta
šalju prema Internetu.
? Filtriranje se vrši na osnovu izvornih i odredišnih IP adresa i
brojeva portova sadržanim u TCP/UDP paketima ili na bazi
nekih drugih kriterijuma
2:43
3/13/2014
11
Konfigurisanje
2:43
3/13/2014
1
HTML
Uvod
? HTML dokument je fajl tekstualnog formata.
? Pri formiranju HTML dokumenta se može koristiti
bilo koji tekst-editor.
? HTML fajlovi obicno imaju ekstenziju (sufiks u
svom imenu) .html ili .htm.
? Elementi u HTML fajlu se nazivaju tagovi.
Smešteni su izmedu znakova manje/vece (npr.
<BODY>).
? Element može biti složen tj. sastavljen iz 2
dela, pocetnog i završnog. Završni tag tj.
oznaka ima isti naziv ali sa dodatnom kosom
crtom, (npr. </BODY>).
3/13/2014
2
Uvod
? Neki elementi nemaju završni tag </...>
(npr.<BR>). Takvi elementi se obicno
nazivaju prostim elementima.
? Osim svojim nazivom, jedan HTML element
je odreden i svojim atributima.
? Atributi se pišu u okviru pocetnog taga
elementa.
? Atribut ima svoj naziv i vrednost.
? Npr. <BODY bgcolor="yellow">
Struktura HTML dokumenta
? <HTML>
<HEAD>
Zadati opis osnovnih podataka o dokumentu
</HEAD>
<BODY>
Zadati sadržaj dokumenta
</BODY>
</HTML>
? U <HEAD> elementu se obicno navodi naziv
dokumenta (vidljiv u naslovnoj liniji), tip dokumenta,
kodni raspored, jezik, kljucne reci,..
? U <BODY> sekciji su elementi kojima se definiše
izgled stranice.
3/13/2014
3
Neka pravila prisanja
? Programi za prikaz sadržaja HTML
dokumenta (npr. Chrome, Opera, Mozilla,
IE,...) ignoriše razliku malih i velikih slova u
nazivima elemenata.
? Elementi se mogu pisati malim ili velikim
slovima ili kombinovano. Npr.
? <BOdY>sadržaj dokumenta</bOdy>
? Nije od znacaja eventualno postojanje
praznih redova, tabulatora ili praznina. Da bi
se prikazao novi red, tabulator ili praznina
koriste se odgovarajuci HTML elementi.
Primer 1
? Formirajte tekstualnu datoteku primer1.html i unesite sadržaj.
• <HTML>
• <HEAD>
• <TITLE> Prvi HtmL Primer </title>
• </HEAD>
• <body>
• <H1> Naslov br1: Uvod </H1>
• <p> Prvi paragraph: Pre ove recenice je
ubaceno vise praznina </p>
• <p>Drugi paragraf.
• Pre ove recenice postoji novi red u dokumentu. </p>
• </body>
• </html>
? Pomocu nekog browser-a progledajte kako izgleda vizuelna
interpretacija.
3/13/2014
4
<HEAD>
<TITLE>
? Oznacava naslov dokumenta u prikazu
?
Naslov HTML dokumenta se prikazuje u vrhu
ekrana (u naslovnoj liniji odgovarajuceg
programa za pregled HTML dokumenta).
? Naslov dokumenta se navodi u HEAD
elementu i predstavlja njegov podelement.
? Nije isto što i ime datoteke u kojoj se nalazi
dokument. Ako se naslov ne navde,
dokument dobija naziv datoteke.
3/13/2014
5
<META>
? U ovom elementu se definišu tzv. meta informacije
o dokumentu koje ga bolje opisuju.
? Meta informacije koriste serveri ili WWW klijenti,
na primer da bi rangirali stranicu u rezultatima
pretrage.
? Neke meta informacije su:
• tip dokumenta, kodni raspored, jezik, kljucne
reci,..
? WWW serveri citaju sadržaj HEAD sekcije tzv.
zaglavlja dokumenta da bi generisali zaglavljeodgovor
na osnovu vrednosti atributa HTTP-EQUIV.
HTTP-EQUIV
atribut koji povezuje element sa HTTP serverom
(zapravo zaglavljem njegovog odgovora)
?< META HTTP-EQUIV="Expires" CONTENT="09 Mart 2013
22:08:08 GMT">
NAME
atribut koji imenuje meta informaciju,
na primer: name="Keywords" za pružanje kljucnih
reci mašinama za pretragu kao dodatak terminima
pronadenim unutar dokumenta
CONTENT sadržaj meta informacije
3/13/2014
6
? Tip sadržaja i kodni raspored
? Tip sadržaja i kodni raspored se definišu koristeci atribut
http-equiv koji se postavlja na vrednost "ContentType".
? Tip sadržaja se definiše vrednošcu atributa content a
kodni raspored vrednošcu atributa charset.
? <META http-equiv="Content-Type" content="text/html;
charset=iso-8859-5">
? <META http-equiv="Content-Type" content="text/html;
charset=iso-8859-2">
? Kljucne reci
? Definišu se atributom name kome se pridružuje
vrednost "Keywords".
? Kljucne reci se navode kao sadržaj atributa
content. One se koriste od strane servera i
pretraživaca.
? <META name="Keywords" content="internet,
web, html">
? <META name="Keywords" content=„sport,
kosarka, pravila">
3/13/2014
7
Srpska slova
? U odeljku zaglavlja (<HEAD>) se definiše kodna
strana koja se koristi za prikaz grafickih karaktera
(npr. ISO-8859-1 za zapadno-evropsku latinicu,
ISO-8859-2 za istocno-evropske latinice, ISO
8859-5 za cirilicu). Zadavanje kodne strane se vrši
pomocu meta-zaglavlja META oblika:
? <META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-2">
Slovo kod 8859-2 Slovo kod 8859-2
C 262 c 263
C 268 c 269
Ð 272 d 273
Š 352 š 353
Ž 381 ž 382
Kodovi srpskih slova prema ISO-8859-2:
3/13/2014
8
Primer 2
• <html>
• <head> <title>Simbolisti </title>
• <META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-2">
• </head>
• <body>
• Aleksa Šantić <BR>
• Milan Rakić<BR>
• Jovan Dučić
• </body>
• </html>
UTF-8
? Ukoliko HTML document sacuvate kao tip UTF-8 ili
Unicode, mogu se koristiti svi karakteri bez eksplicitnog
navodenja svakog posebno!
3/13/2014
9
<BODY>
Atributi
? Definišu osnovna svojstva prikaza HTML sadržaja.
? Pozadina stranice se definiše na 2 nacina. Kao:
• slika (npr. <body background="URL slike">)
• boja (npr. <body bgcolor="#rrggbb">, gde rrggbb predstavlja heksadekadni
triplet kôda boje: cifre rr (r=0..9a..f) odreduju kolicinu crvene boje, cifre
gg (g=0..9a..f) odreduju kolicinu zelene boje, cifre bb (b=0..9a..f)
odreduju kolicinu plave boje)
? boja teksta se definiše atributom text (npr. <body text="#rrggbb">)
? boja linkova se postavlja atributima link, alink, vlink
(npr. <body link="#rrggbb" alink="#rrggbb" vlink="#rrggbb">) gde je
? alink boja aktivnih linkova
? vlink boja posecenih linkova
? link boja ostalih linkova (neposecenih i neaktivnih)
3/13/2014
10
Primer 3, zadavanje boja
• <HTML>
• <HEAD>
• <TITLE>Atributi elementa BODY </TITLE>
• </HEAD>
• <BODY BGCOLOR="#a0a0a0" TEXT="#00ffFF">
• <H2 ALIGN="CENTER"> Narodne poslovice </H2>
• Ko se dima ne nadimi....<BR>
• Ko rano rani....<BR>
• <FONT COLOR="#AA00">Ova recenica je u elementu font koji ima
sopstveni atribut color</FONT> <BR>
• </BODY>
• </HTML>
NASLOVI
? Postoji šest vrsta naslova/podnaslova.
? Navode se unutar <BODY> sekcije.
? U odnosu na tekst dokumenta naslov se prikazuje vecim
i/ili naglašenim fontom uz pojavu praznih linija pre i/ili
posle naslova.
? Tag za prikaz najveceg naslova je <H1>...</H1>.
? Ostali idu redom:
<H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</
H5> <H6>...</H6>
? Veci broj je manji naslov.
3/13/2014
11
Komentari
? Komentarisani HTML kôd se ne prikazuje od strane
browser-a, ali je vidljiv u izvornom HTML kodu.
? Cemu služi?
? Komentarom se smatra ma koji tekst izmedu
oznaka
? 
?
Primer 4
• <HTML>
• <HEAD><TITLE>Testiranje naslova</TITLE>
• </HEAD>
• <BODY>
• <H1>Naslov prvog nivoa</H1> 
• <H2>Naslov drugog nivoa</H2><BR>
• <H3>Naslov treceng nivoa</H3><BR>
• <H4>Naslov cetvrtog nivoa</H4><BR>
• <H5>Naslov petog nivoa</H5><BR>
• <H6>Naslov sestog nivoa</H6><BR> 
• <H7>Naslov sedmog nivoa</H7> <BR> 
• Ostali tekst koji nije naslov.
• </Body>
• </HTML>
3/13/2014
12
Formatiranje teksta
? Pasusi / paragrafi
? Element za pasus koji se prikazuje sa
odgovarajucim proredom:
? <P> . . . Neki tekst . . . </P>
? Dodaje se atribut ALIGN sa vrednostima left, right,
center radi poravnanja sadržaja pasusa.
? Ukoliko sledi pasus za pasusom, završni tag </P>
se može izostaviti.
? Odeljak
? <DIV> . . . Neki tekst . . . </DIV>
? Dodaje se atribut ALIGN sa vrednostima left, right,
center radi poravnanja sadržaja pasusa.
3/13/2014
13
? Blok za tekst
? <BLOCKQUOTE> . . . Neki tekst . . . </BLOCKQUOTE>
? oznacava poseban blok unutar teksta. Obicno
predstavlja citirani pasus iz nekog izvora.
Tipican prikaz je uvucen ulevo i/ili iskošenim slovima.
<p>Renowned type designer, Matthew Carter, has this to say about his
profession:</p>
<blockquote>
<p>Our alphabet hasn't changed in eons; there isn't much latitude in
what a designer can do with the individual letters.</p>
<p>Much like a piece of classical music, the score is written
down – it's not something that is tampered with – and yet, each
conductor interprets that score differently. There is tension in
the interpretation.</p>
</blockquote>
3/13/2014
14
? Novi red
? Tekst se u browser-u prikazuje jednu po jednu
liniju u zavisnosti od šifirne prozora. Pri tome se
višestruke belike svode na jednu, a novi red ili
tabulator se ignorišu.
? Za novi red u prikazu koristi se prost element
<BR> (eventualno <BR/>).
? Ako odredeni teksta ne sme da bude prelomljen
koristi se element:
? <NOBR>.neki tekst koji se ne sme prelomiti,
recimo da je jako dug</NOBR>
? PREFORMATIRAN TEKST
? Tekst koji se nalazi izmedu oznaka
? <PRE> . . .</PRE>
? prikazuje se kao tekst sa neproporcionalnim
fontom, sacuvanim podacima o višestrukim
belinama, tabulatorima i novim redovima. Dakle,
tekst ce biti prikazan na ekranu bez izmena u
pogledu praznina.
3/13/2014
15
Primer 5
• <HTML>
• <HEAD><TITLE>Primer 5</TITLE>
• </HEAD>
• <BODY>
• <P align="center">Prvi pasus teksta <BR>koji se prikazuje<BR> kao
centriran.<BR>Neka druga recenica istog pasusa.</P>
• <P align="right">Drugi pasus <BR> poravnat <BR>na desno</P>
• <PRE>
• I
• B
• M
• - primer upotrebe elementa pre
• </PRE>
• <DIV align="left">Prvi odeljak, div, poravnat <BR>u levo, odnosno <P
align="center">
• novi pasus u istom odeljku <BR> koji je <BR> centriran</P>
• <P align="right">Drugi pasus u<BR>prvom odeljku, a pasus <BR>je
• <BR>poravnat u desno.</P>Tekst u odeljku van pasusa.
• </DIV>
• </HTML>
? Naglašavanje teksta
? Element <EM>...</EM> se koristi da istakne deo
neke recenice (engl. Emphasized).
? <p><em>Matt</em> is very smart.</p>
? <p>Matt is <em>very</em> smart.</p>
? Naglašeni tekst se skoro uvek prikazuje ukošeno.
? Citaci mogu imati razlicit nacin i toniranje
naglašenog teksta.
3/13/2014
16
Liste
? <UL> NENUMERISANE
? Koriste se za predstavljanje nenumerisane (engl.
Unorderd List) liste clanova odvojenih praznih
redom i oznacenih specijalnim vodecim znakom
(eng. bullet: kružic, disk, kvadrat).
? Lista se navodi izmedu elemenata <UL> odnosno
</UL>.
? Stavka liste (engl. List Item) se navodi elementom
<LI> koje ne mora da ima zavšni tag </LI>
Primer 6
• <HTML>
• <head>
• <title>Unorderd List</title>
• </head>
• <body>
• <UL> Studijski programi VSER-a
• <li>NRT <li>RT <li>....
• </UL>
• <UL>Izborni predmeti
• <li>Programiranje 1
• <li><em>Uvod u internet programiranje </em>
• <li>....
• </UL>
• </BODY>
• </HTML>
3/13/2014
17
? NUMERISANE LISTE
? Koriste se za predstavljanje listi cije su stavke
numerisane.
? Lista se navodi elementom <OL>stavke</OL>,
(engl. Oredered List).
? Svaka stavka liste pocinje obeležjem <LI> koja ne
mora da ima završni tag. </LI>
Primer 7
? <HTML>
? <HEAD>
? <TITLE> Ordered List</TITLE>
? </HEAD>
? <BODY>
? Tekst pre liste
? <OL> Tekst pre stavki u listi <LI>stavka<LI>stavka
? <LI>....
? </OL>
?
? </BODY>
? </HTML>
3/13/2014
18
? OPISNE LISTE
? Koriste se za predstavljanje listi cije stavke ne
treba oznaciti brojevima, slovima ili buletima, vec
iza stavki sledi opis.
? Lista se navodi elementom <DL>...</DL>.
? Svaka stavka liste sadrži termin koji se definiše i
odgovarajuci opis. Termin pocinje obeležjem
<DT>, a opis pocinje obeležjem <DD>.
Primer 8
• <HTML>
• <HEAD>
• <title>Primer DL liste </TITLE>
• </HEAD>
• <BODY>
• <DL> serveri posebne namene:
• <DT>proksi <DD>server za kesiranje stranica
• <DT>firewall <DD>server za zastitu od upada
• <DT>... <DD>...
• </DL>
• </BODY>
• </HTML>
21.3.2014.
1
Zadatak
? Napisati HTML stranicu
ciji prikaz je dat na
slici.
22:19 1
Rešenje
1. <html>
2. <head>
3. <title>zadatak za prisecanje uradjenog</title>
4. </head>
5. <body text="white" bgcolor="#000000">
6. <h1> Tekst na crnoj pozadini sa belim slovima </h1> <br>
7. <ul>
8. Lista 1
9. <li>
10. <ol>Lista2
11. <li>stavka21
12. <li>stavka22
13. </ol>
14. <li>stavka12
15. <li>stavka13
16. </ul>
17. </body>
18. </html>
22:19 2
21.3.2014.
2
Slike
22:19 3
Slike
? Slika se u HTML stranicu uvodi elementom:
? <img src="URLslike">
? pri tome se navodi obavezni atribut SRC cija je
vrednost putanja, URL, do slike.
? Citaci podržavaju upotrebu GIF i JPEG formata.
Format GIF se preporucuje za slike koje su crteži
odnosno imaju više kontinuiranih delova iste boje,
dok JPEG se preporucuje za slike kod kojih je
prisutna veca paleta boja.
22:19 4
21.3.2014.
3
? Poravnanje slike u odnosu na tekst odreduje se
atributom ALIGN sa vrednostima top, middle, bottom,
left, right.
? Ako je poravnavanje left ili right, slika se prikazuje sa
leve ili desne strane paragrafa u kome je i tekst, dok
je tekst rasporeden oko nje.
? Ako se koriste vrednosti middle, bottom ili top onda
se linija teksta poravnava sa sredinom, dnom ili
vrhom slike.
22:19 5
Primer 9
. . .
<BODY>
Tri slike u tekstu, sve tri poravnate na levo.
<img src="slika.gif" align="left">xxxxx…<img src="slika.gif" align="left">
xxxxx ….<img src="slika.gif" align="left">
<br><br><br><br>
<p align="right">
Tri slike u tekstu koji je poravnat na desno, a sve tri poravnate na levo.
<img src="slika.gif" align="left">xxxxx….<img src="slika.gif" align="left">….
<img src="slika.gif" align="left">
</p>
<br><br><br><br>
<p align="right">
Tri slike u tekstu koji je poravnat na desno, a sve tri bottom
<img src="slika.gif" align="bottom">…xxxxxxx<img src="slika.gif"
align="bottom"><img src="slika.gif" align="bottom"></p>
<br><br><br><br>
. . .
22:19 6
21.3.2014.
4
? Atribut ALT definiše tekst koji ce biti prikazan umesto
slike ukoliko slika ne može biti prikazana. Teks se
pojavljuje kao komentar ili objašnjenje.
? Slika se ne može prikazati ako citac nema mogucnost
grafickog prikaza ili je prikaz slika namerno iskljucen
ili fajl za sliku nije naden.
? Atributom BORDER definiše velicina okvira u
pikselima koji se prikazuje oko slike. Okvir se
iskljucuje ako se vrednost postavi na 0.
22:19 7
? Dimenzije slike se zadaju atributima WIDTH (za širinu slike)
i HEIGHT (za visinu slike). Osim što se može promeniti
velicina slike, može se ubrzati ucitavanje slike.
? Dimenzije slike se zadaju u pikselima ili procentima.
? Na primer <img src="slika.jpg" width="102" height="10%">
Ako se stvarne dimenzije slike razlikuju od navedenih, onda
ce slika biti izoblicena.
22:19 8
21.3.2014.
5
? Za obezbedenje dodatnog prostora izmedu slike i teksta
mogu se koristiti atributi VSPACE i HSPACE. Vrednosti se
zadaju u pikselima. VSPACE se odnosi na marginu ispod i
iznad, a HSPACE se odnosi na marginu levo i desno od
slike.
22:19 9
Primer 10
. . .
<img src="slika.gif" width="130" height="140">
Dimenzije se zadaju u pikselima.
<br><br>
<img src="slika.gif" width="12%" height="10%" border="1">
Dimenzije se zadaju u procentima, slika ima okvir.
<br><br>
<p>. . . <img src="slika.gif" width="12%" height="10%" border="1" hspace = "10"
vspace="10"> . .
Dimenzije se zadaju u procentima, slika ima okvir, hspace=10, vspace=10.
</p>
<br><br>
. . .
22:19 10
21.3.2014.
6
Hiperveza
? <A> tekst koji je ujedno link </A>
? Element A se koristi za umetanje linkova.
? Osnovni atributi su:
? HREF – URL adresa stranice na koju se može preci
? ID – identifikator sidra koji se koristi pri referenciranju
? NAME – isto kao ID, ID je globalni identifikator
? TARGET – gde ce se otvoriti referencirani dokument
22:19 11
URL
? Upotreba URLa (uniformnih lokatora resursa) omogucava
da se referencira tekst, HTML dokument, slika,...
? URL adrese je oblika
? protokol://host.domen:port/stablo_dir/fajl
? Znacenje navedenih oznaka:protokol - oznacava
protokol odnosno uslugu koja se koristi pri
referenciranju fajla:
? file, ftp, http gopher, news…
? host - ime racunara (ili ip adresa) na kome se nalazi fajl
? domen - Internet domen racunara
? port - u vecini slucajeva 80, tako da se može izostaviti.
? stablo_dir – putanja do fajla kroz stablo dir.
? fajl - Naziv fajla zajedno sa ekstenzijom
22:19 12
21.3.2014.
7
? Web prezentacija se obicno sastoji od više dokumenata,
slika i drugih fajlova koji se nalaze u jednom
direktorijumu (sa poddirektorijumima)
? Pravilno je da se fajlovi u aplikaciji referenciraju
navodenjem relativne putanje.
• Na primer:
• Ako se prvi.html i drugi.html nalaze u folderu /www, a
treci.hmtl u /www/detalji onda se ovi važi sledece
referencijranje:
• prvi.html
• <a href="drugi.html">veza do drugog.html</a>
<a href="detalji/treci.html">veza do treci.html</a>
22:19 13
• treci.html
• <a href="../prvi.html">veza do prvi.html</a>
<a href="/www/prvi.html">veza do prvi.html</a>
? Kada se napravi sajt u jednom folderu, prebacivanje
istog na servera se obavlja kopiranjem.
? Isto važi i pri formiranju dokumenata.
22:19 14
21.3.2014.
8
? Hiperveza može da vodi i do odredenog mesta u
dokumentu. To mesto mora biti oznaceno da bi se moglo
referencirati i obicno se naziva sidro.
? Dakle, URL, koji je vrednost atributa href, u ovom
slucaju sadrži dodatak, ime sidra.
? Na primer:
? Prvi.html
• ….
• <a href= "drugi.html#xyz">veza do?</a>
• ….
• <a href= "#abc">veza do?</a>
• ….
• <a id= "abc">deo koji pocinje se referise…</a>
22:19 15
? Veza može biti stavka u listi.
? Primer:
<ul>
<li><a href="http://www.foodnetwork.com/">The Food Network</a>
</li>
<li>Epicurious</li>
</ul>
22:19 16
21.3.2014.
9
? Atribut target specificira gde ce se otvoriti
referencirani dokument. Može imati vrednosti
_parent – u roditeljskom okviru (frejmu)
_self – u istom frejmu. Podrazumevano.
_top – u istom prozoru ali u kompletnom, ne u frejmu
framename – u imenovanom prozoru
22:19 17
Hiperveza za sliku
? Da bi slika imala funkciju hiperveze potrbno je sliku
postaviti kao sadrzaj hiperveze.
? U tom slucaju element veze dobija oblik:
? <A HREF="URLcilja"> <IMG SRC="URLslike" tekst> </A>
? Ako slika predstavlja hipervezu, okvir oko slike ce biti
u bojama veze koje su postavljene kao vrednosti
atributa link, alink, vlink.
? Podsecamo da okvir može biti nevidljiv ako se postavi
vrednost atributa border na 0.
22:19 18
21.3.2014.
10
Primer 11
<HTML>
<HEAD> <TITLE>Veze </title> </HEAD>
<BODY>
<H3>Kontakti</H3>
<UL>
<LI><a href="www.viser.edu.rs"><img alt="VSER" src="viser.jpg" width="30"
height="30" border="0"/>naj visa</a>
<LI><a href="https://www.viser.edu.rs/sservis/" target="_blank">studentski
servis</a>
<LI><a href="mailto:sgolubovic@viser.edu.rs"><img alt="mail"
src="email.jpg" width="30" height="30"/>kontakt</a>
</UL>
Zasto link ka skoli ne radi? <br>
Ako email klijent ne radi, pokusajte da objasnite zasto?
</BODY>
</HTML>
22:19 19
Mapiranje slika
? Slika može biti podeljena na delove tako da a svakom
delu može biti dodeljena adresa nekog odredišta tako
da kada se "klikne" na odredeni deo prebacuje se na
na razlicite URLove.
? Ovo deljenje nazivamo mapiranje slika.
? Koordinatni pocetak mape je gornji levi ugao slike.
? Mapiranje se izvodi pomocu atributa USEMAP
22:19 20
21.3.2014.
11
? Atribut USEMAP taga IMG ukazuje da se radi o mapiranju na
strani klijenta.
? Vrednost atributa USEMAP odreduje koja ce se mapa koristiti
za mapiranje slike u formatu slicnom atributu HREF kod
hipertekstualnih veza.
? Ako pocinje sa #, podrazumeva se da se mapa nalazi u istom
HTML dokumentu kao i tag IMG.
? Na primer:
? <IMG SRC="URLslike" USEMAP="URLmape#sidro">
? Na primer:
<IMG SRC="slika1.gif" USEMAP="#mapaA">
<IMG SRC="../slike/slika2.gif" USEMAP="mapa.html#mapa2">
22:19 21
? Mapa se opisuje pomocu elementa:
? <MAP> . . . </MAP>
Opis može biti istom HTML fajlu gde se koristi ili u zasebnom
fajlu.
? Naziv mape (tj. vrednost atributa NAME) mora odgovarati nazivu
za upotrebu mape unutar taga IMG.
? Mapa se sastoji od podrucja. Zato u elementu MAP postoje
podelementi AREA ciji su atributi:
• SHAPE
• HREF
• COORDS
? Ako se dve oblasti preklapaju, prednost ima ona koja je prvo
definisana.
? Atribut NOHREF znaci da izbor te oblasti ne prouzrokuje akciju.
22:19 22
21.3.2014.
12
? SHAPE vrednost definiše oblik oblasti u slici:
? RECT- pravougaona oblast.
• COORDS vrednosti su gornji levi i donji desni ugao
pravougaonika u pikselima
? CIRCLE - kružna oblast.
• COORDS vrednosti su kordinate centra kruga i poluprecnik
kruga u pikselima
? POLY – oblast mnogougaonik.
• COORDS vrednosti su koordinate tacaka zatvorene
izlomljene linije u pikselima.
? DEFAULT- podrazumevano.
• Nema koordinate i koristi se samo jednom za oblast koja
obuhvata koordinate koje ne pripadaju nijednom od vec
definisanih oblasti.
22:19 23
Primer 12
<img src="geoimag2.jpg" usemap="#geoshapes2">
<map name="geoshapes2">
<area shape="CIRC" coords="150,100,28" href="primer2.html">
<area shape="POLY" coords="35,9,121,9,95,60,9,60" href="primer3.html">
<area shape="RECT" coords="182,10,293,61" href="primer4.html">
<area shape="RECT" coords="34,141,85,192" href="primer5.html">
<area shape="POLY" coords="263,142,293,193,182,193" href="primer6.html">
</map>
22:19 24
21.3.2014.
13
Tabele
22:19 25
26
Tabele
Elementi za rad sa tabelama.
<TABLE> osnovni element za tabelu
<CAPTION> opcioni element za naslov tabele
<TR> red tabele
<TH> element podatka u zaglavlju tabele
<TD> element podatka u tabeli
22:19
21.3.2014.
14
<table>
<tr>
<th>Menu item</th>
<th>Kalorije</th>
<th>Masti (gr.)</th>
</tr>
<tr>
<td>Pileca supa</td>
<td>100</td>
<td>2</td>
</tr>
<tr>
<td>Cezar salata</td>
<td>300</td>
<td>20</td>
</tr>
</table>
Primer
• Obratite pažnju na
• detalje u prikazu.
• Šta bi mogli da uradimo
• da bi izgled bio bolji?
22:19 27
28
<TABLE> Atributi
? ALIGN = left, center, right
? BORDER=broj, širina ivice u pikselima (podrazumevano je 0)
? CELLSPACING=broj, prostor u pikselima izmedu celija,
podrazumevano 3, ukljucuje border
? CELLPADDING=broj, prostor u pikselima izmedu ivice celije i
elementa tabele, podrazumevano 1
? WIDTH=broj[%], širina u pikselima ili procentima stranice ili
frejma
22:19
21.3.2014.
15
cellpadding=0
cellspacing=0
CELLPADDING
CELLSPACING
22:19 29
30
BGCOLOR=boja – pozadinska boja tabele, takode važi
za <TR>, <TH>, odnosno <TD>
Atribut BGCOLOR
22:19
21.3.2014.
16
31
<TR> atributi
Važeci atributi za red tabele:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- color
<table align="center" width="300" height="200">
<tr align="left" valign="top" bgcolor="red"><td>Jedan</td><td>Dva</td>
<tr align="center" valign="middle" bgcolor="lightblue"><td>Tri</td><td>Cetiri</td>
<tr align="right" valign="bottom" bgcolor="yellow"><td>Pet</td><td>Šest</td>
</table>
22:19
32
<TD> Atributi
colspan = broj -– oznacava koliko kolona obuhvata celija
rowspan = broj -– oznacava broj redova obuhvacenih tom celijom
Zadatak:
Napisati tabelu koja treba da
ima izgled kao na slici
<table align="center" width="300" height="200" border="1">
<tr>
<td colspan="1" rowspan="2">a</td>
<td colspan="1" rowspan="1">b</td>
</tr>
<tr>
<td colspan="1" rowspan="1">c</td>
</tr>
</table>
22:19
21.3.2014.
17
Primer
? Napisati html kod za prikaz tabele
22:19 33
<Font>
? Za promenu vrste karaktera (fonta) koristi se
element font. Atributi ovog elementa su:
color #xxxxxx
colorname boja teksta
face font_family naziv fonta
size Number Velicina fonta
22:19 34
21.3.2014.
18
Primer
<font size="4" color="red">Crveni tekst velicine 4!</font> <br>
<font size="3" color="blue">Plavi tekst velicine 3!</font> <br>
<font face="verdana" color="green" size="2">Verdana, zelen, velicine
2!</font> <br><br>
22:19 35
? Osim toga mogu se pisati i slova u indeksu ili
eksponentu.
? Indeks se dodaje pomocu taga <SUB> a eksponent
pomocu taga <SUP>.
22:19 36
21.3.2014.
19
NOBR
? Tekst se u citacu prelama na kraju reda. Da bi se
garantovalo da neki deo teksta tj linije bude u celosti u
jednom redu (znaci da prelamanja ne bude na tom
tekstu) vrši se oznacavanje tog dela teksta posebno.
? <NOBR> tekst koji se svakako nece prelomiti </NOBR>
? Ukoliko je tekst prevelik da stane u jedan red u okviru
ekrana, na dnu prozora ce se pojaviti horizontalni
"scrollbar".
? Ukoliko se želi da se red prelomi, ako treba, baš na
odredenom mestu, ubacuje se tag <WBR> taga. Za
? razliku od <br> taga koji ce obavezno prelomiti red,
ovaj tag ce prelomiti red samo ako je to neophodno. Na
primer omogucava da se prelomi neka dugacka rec na
kraju reda.
22:19 37
HR
? Nova celina se naglšava novim redom. Ako se želi jace
naglašavanje koristi se horizontalna linija.
? <HR SIZE=3 WIDTH="55%">
? Dobija se linija debljine 3 piksela i širine 55% od širine
prozora.
?
?
? Ako se ne želi da linija bude zasencena, vec
potpuno crna, koristiti atribut NOSHADE.
? Dimenzije linije se zadaju sa sledeca dva atributa: SIZE
(debljina u pikselima) i WIDTH (širina u pikselima ili %)
? Ovaj element može sadržati ALIGN atribut.
? Boja linije se može regulisati pomocu COLOR
atributa. 22:19 38
21.3.2014.
20
Praznine i specijalni karakteri
? Prazno mesto, kada je više od jednog, se oznacava
&NBSP;
? Ako se želi tri prazna mesta jednostavno se ponovi tri
puta, odvojeni tackom-zarezom:
22:19 39
28.3.2014.
1
Zadatak
? Napisati HTML stranicu koja ce prikazivati sadržaj kao na slici:
08:45 1
Frejmovi
08:45 2
28.3.2014.
2
Frejmovi
? Koncept okvira, tzv frejmova, omogucava formiranje
složenih dokumenata od dva i više razlicitih dokumenta.
? Citac, ukoliko može da radi sa frejmovima,
interpretira frejmove tako što deli prozor prikaza na
više nezavisnih celina, od kojih svaki sadrži adresirani
? Osnovni tag <FRAMESET>.
? Ovaj element zamenjuje BODY element u HTMLdokumentu.
08:45 3
Atributi
Osnovni atributi su cols i rows koji odreduju broj kolona i
redova u tabelarnom izgledu podele glavnog prozora.
Dakle:
? COLS = [broj][%] [*] – širina u pikselima ili % frejmova
? ROWS = [broj][%] [*] – visina u pikselima ili % frejmova
? Poddokumenta se navode u okviru elementa FRAME ciji
su atributi:
? SRC - adresa dokumenta koji ce biti prikazan
? MARGINWIDTH – leva i desna margina u pikselima
? MARGINHEIGHT – gornja i donja margina u pikselima
08:45 4
28.3.2014.
3
Zadatak
? Kakav izgled ce formirati HTML kod u citacu?
• <frameset rows="25%,*,25%">
• <frame src="primer2.html">
• </frameset>
08:45 5
08:45 6
28.3.2014.
4
<frameset rows="25%,*,25%" cols="*,*,50%">
<frame src="primer2.html">
</frameset>
08:45 7
IFRAME
? Koristi se da prikaže web stranicu unutar druge web
stranice.
? Sintaksa je:
? <IFRAME SRC="URL"></IFRAME>
? Atributi HEIGHT i WIDTH definišu visinu i širinu IFRAME u
pikselima ili u procentima.
? Atribut FRAMEBORDER specificira debljinu ivice oko
IFRAME. Ako se postavi na "0" ivica postaje nevidljiva.
08:45 8
28.3.2014.
5
Primer 13
............
<iframe src="primer6.html" width="80%" height="200" align="right"></iframe>
.............
08:45 9
Form
? HTML forme se koriste da bi se podaci od citaca
prosledili do servera.
? HTML forme sadrže elemente za unos podataka, kao što
je tekstualno polje, polje za potvrdu, radio dugme,
dugme za slanje...
? Takode može da sadrži listu za izbor, tekstualnu oblast
(više linija u odnosu na tekstualno polje), labele..
? <form>
.
input elements
.
</form> 08:45 10
28.3.2014.
6
? Forma može da sadrži i druge elemente osim formi.
? Forma može da sadrži i blok elemente, kao što su <p>,
<H1>,liste...
? Atribut ACTION definiše URL aplikacije, tacnije skripte koja
obraduje podatke koji se pošalju od forme.
? Na primer, slanje podataka skripti mailinglist.php.
? <form action="/mailinglist.php" method="post">...</form>
08:45 11
GET-POST
? Postoje samo dve metode za slanje podataka serveru.
• POST
• GET
? I one se definišu kao vrednost atributa METHOD
? POST metodom se podaci šalju praceni posebnim
zaštitom i bez ogranicenja u velicini podataka koji se
šalju.
? Koristi se za manju kolicinu podataka i pri tome su
podaci koji se šalju dostupni.
08:45 12
28.3.2014.
7
Elementi u formi
? Tekstualno polje
? <form>
username: <input type="text" name="username"><br>
password: <input type="password" name="password">
</form>
? Predstavlja jednolinijsko polje za unos teksta.
? Polje tipa password je identicno tekstualnom ali se tekst ne prikazuje
korisniku, tacnije maskiran je.
08:45 13
Radio dugme
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Check box
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
08:45 14
Zadatak
? Koristežci frejmove
napisati html
stranicu po uzoru
sa slike.
13:40 1
CSS
13:40 2
Uvod
? CSS je skracenica od engleskog naziva Cascading Style
Sheets.
? Stil (engl. Style) definiše prikaz HTML elemenata.
? CSS se može na jedinstven nacin primeniti da više
elemenata ili grupa elemenata pa tako na dosledan nacin
definisati izgled i funkcionalnost stranica.
? Stil se piše u elementu <head>, u eksternim stilskim
stranicama ili u samom elementu.
? Cešce korišcena varijanta je pisanje CSS-a u eksternim
stranicama.
? Napomena: Zbog lakšeg ucenja u našim primerima bice
cešce korišcen interni stil pisanje stilova.
13:40 3
Struktura zapisa
? Izmedu tagova <head> i </head> dodaje se:
• <style type="text/css">
• . . . . . . . .
</style>
? Na primer, da bi promenili boju teksta na stranici u plavo:
• <style type="text/css">
• body{color: blue;}
• </style>
13:40 4
Struktura zapisa stila
? U terminologiji CSSa dve glavne sekcije pravila su:
selektor koji definiše element ili elementa na koje ce
menjati i deklaracije koje se ondnose na formiranje
izgleda.
? Deklaracija zapravo odreduje svojstva izgleda i sastoji
se iz naziva svojstva (npr. color) i vrednosti svojstva
(npr. green).
? Jedna ili više deklaracia se smeštaju u viticaste
zagrade, odvojene medusobno tacka zarezom.
13:40 5
#cssPodloga {
background-color:#003366;
padding: 20px;
border: 1px;
color: #FFFFFF;
height: 100%;
width: 50px;
}
...
<body id="cssPodloga">
13:40 6
Selektori
? Na primer:
? h1 { color: green; }
? p { font-size: small; font-family: sans-serif; }
? U primerima, h1 odnosno p su HTML elementi koji su
korišceni kao selektori, pa se ovi selektori nazivaju
selektorima tipa elementa (eng. element type selector)
i predstavljaju osnovi tip selektora.
? Svojstva koja su definisana za svako od pravilo bice
primenjena na svaki h1 odnosno p element dokumenta.
? Postoje mnogo napredniji selektori koje cemo upoznati
kasnije.
13:40 7
Deklaracije
? Sastoje se od parova svojstvo/vrednost.
? Može da postoji više od jedne deklaracije za jedno pravilo,
npr. pravilo za element p koje je navedeno u prethodnom
primeru, ukljucuje velicinu fonta i naziv fonta.
? Svako pravilo se mora završiti sa tacka-zapetom, kako bi se
odvojilo od ostalih. Ako se izostavi tacka-zapeta,
deklaracija se ignoriše.
? CSS ignoriše praznine i nove redove. Zato se cesto
deklaracije pišu u zasebnim redovima i sa belinama.
• p {
• font-size: small;
• font-family: sans-serif;
• }
13:40 8
Primer 1
? U folderu cssPrimer1 otvorite kod.
? Prikažite navedenu stranicu.
? Ukljucite stilove koji su bili pod komentarom.
? Prikažine novu stranicu.
? Pogledajte kod i razmislite kako utice na prikaz.
13:40 9
Nacini povezivanje stilova i
dokumenata
? U prethodnom primeru smo povezali stil sa nazivom
elementa i to u tekucem dokumentu. To je jedan od 3
nacina povezivanja.
? Spoljni – zaseban fajl koji mora imati ekstenziju .css.
Stilovi se naknadno povezuju ili importuju u jedan ili
više HTML dokumenata. Na ovaj nacin ceo web sajt deli
iste stilove, što je dobar nacin za održavanje.
? Unutrašnji – Ovaj stil cesto koristimo u našim primerima
i na vežbama. Ubacen je u HTML dokument i deluje
samo na taj dokument. Element style je smešten u
zaglavlju dokumenta
13:40 10
<head>
<title>Required document title here</title>
<style>
/* ovako se pisu komentari, npr <style type="text/css">
se pise za XHTML i HTML 4.01 verzije*/
</style>
</head>
Linijski (engl. inline) – Moguce je da se stil primeni na
samo 1 element koristeci sopstvene atribute tog elementa.
Na primer:
13:40 11
? <h1 style="color: red"></h1>
? Da bi koristili višestruka svojstva, samo je potrebno da
ih razdvojimo tacka-zapetom, na primer:
? <h1 style="color: red; margin-top:
2em">Introduction</h1>
? Linijske stilove treba izbegavati, osim ako je apsolutno
neophodno kako bi se promenilo delovanje spoljašnjih
stilova.
? Eventualna izmena sajta zahteva pretraživanje
pojedinacnih elemenata, što je izuzetno neprakticno.
13:40 12
Povezivanje HTML stranice sa
CSS fajlom
? link
? @import
13:40 13
<link>
? Link element se najcešce koristi za povezivanje spoljnih fajlova
sa HTML dokumentom.
? Navodi se u head elementu.
? Atributi su:
? rel="stylesheet" – definiše relaciju sa tekucim dokumento. Kada je
css fajl onda je uvek vrednost stylesheet.
? href="url" – lokacija .css fajla.
? Na primer:
• <head>
• <title>Titles are required.</title>
• <link rel="stylesheet" href="/path/stylesheet.css">
• </head>
13:40 14
@import
? Drugi nacin da se neki .css fajl ukljuci u oblikovanje nekog HTML
dokumenta je koristeci pravilo @import.
? Može se primeniti takode i u spoljnom .css fajlu kao i u html
dokumentu.
• <head>
• <style>
• @import url("/path/stylesheet.css"); /*moze i bez url-a tj
navodeci samo vrednost*/
• p { font-face: Tahoma;}
• </style>
• <title>Naslov dokumenta</title>
• </head>
• @import cita pravila pre nego što budu primenjivana. Na taj nacin,
pravila koja su naknadno definisana preklapaju ova pravila.
13:40 15
? Mala je razlika izmedu @import i link nacina
ukljucivanja spoljnih css fajlova. Import dozvoljava da
se spoljni css fajl ukljuci u definiciju stila, na primer:
? <style type="text/css">@import url("styles.css");</style>
? Stariji citaci ne prepoznaju import što takode može biti
iskorišceno. Na primer
? @import url(../style.css);
? Nece biti primenjeno u slucaju IE3,4 ili Netscape 4....
13:40 16
Kaskadni koncept stilova
? Nasledivanje
? HTML elementi se koriste za prikaz elemenata u nekoj
web stranici za sadržaj koji povezuje te elemente. Na
primer, ako se koristi em element u nekom paragrafu u
kom je definisana velicina i oblik karaktera, ocekivano
je da velicina ostane ista i za naglašeni tekst.
Bez primene stila
Sa primenom stila:
p {
font-size: small;
font-family: sans-serif;
13:40 } 17
? Zbog ovog koncepta, struktura HTML dokumenta je
bitna za CSS.
? HTML dokumenti imaju hijerarhijsku strukturu.
13:40 18
? Na primer, kada se napiše stil za definisanje fonta za p
element (pasus) kao selector, pravilo se primenjuje na
sve paragrafe u dokumentu kao i na sve elemente koje
ti paragrafi sadrže. Prethodni primer to pokazuje. Na
slici se vidi na koje elemente važi primena pomenutog
stila. Zapazite da je img element iskljucen iz stabla
primene jer se font ne može primeniti na slike.
13:40 19
Konflikti više stilova
? Ukoliko se stil definiše u body elementu primenjuje se
na sve elemente HTML stranice.
? Medutim, nastaje konflikt sa stilovima koji su posebno
definisani ili se primenjuju na unutrašnje elemente, kao
što je bio slucaj sa stilom koji se primenjuje na paragraf
p.
13:40 20
Kaskadno rešavanje
konflikata
? CSS dozvoljava da se primenjuje nekoliko stilova na istom
dokumentu. Medutim, višestruka primena znaci i konflikte.
Na primer, ako se na h1 element primeni jedan spoljni stil
koji nalaže da naslov bude crven, a takode postoji i
ugradeni stil koji za naslove nalaže da budu zeleni, koje
boje ce naslov biti prikazan?
? Razrešavanje ovog slucaja je toliko važno da je nacin
važenja ugraden u sam naziv "kaskadnih" stilova. Dakle,
pravilo se se primenjuje "odozgo na dole" sve dok ne bude
preklopljeno stilom koji ima vecu težinu.
? Na primer, ako se ne primeni ni jedan stil, važeci stil je
interni stil citaca, koji nazivamo podrazumevani stil za
renderovanje tj formiranje prikaza.
13:40 21
? Posebno korisnici mogu imati sopstvene stilove (engl.
user style sheet) koji preklapaju podrazumevane
stilove citaca.
? Stilovi koji se definišu u web stranici, dakle, stilovi koje
definiše autor web stranice i važe za istu, preklapaju i
korisnicke i podrazumevane stilove.
? Jedini izuzetak su stilovi koje korisnik identifikuje kao
„important“.
13:40 22
? Dakle, css stilovi su hijerarhijski i na taj nacin se
odreduje koji ce biti važeci. Kao što je vec
napomenuto, postoje 3 nacina da se stil „prikaci“ za
dokument.
? Uopšteno, stil koji je „bliže“ definisan za neki element
ima vecu težinu. Na primer, unutrašnji stil ima vecu
težinu od spoljnog stila.
? Na primer, h1 element iz našeg primera primenice
zelenu boju, kako je navedeno u unutrašnjem stilu.
? Stilovi u elementu imaju najvecu težinu pošto se ne
može naci bliži stil za taj element.
13:40 23
!important
? Da bi se promenio podrazumevani nacin primene kaskadnih
stilova, moguce je spreciti preklapanje primenom važnosti
na neki stil.
? Ovo se postiže ubacivanje indikatora !important.
? Na primer, da bi tekst u paragrafu bio plav uvek, koristi se
pravilo:
? p {color: blue !important;}
? Cak i u slucaju da se naknadno ukljuci drugi „inline“ stil, na
primer:
? <p style="color: red">
? Paragraf ce i dalje da ima plav tekst jer se stil sa
indikatorom !important ne može preklapati sa drugim
stilovima.
13:40 24
? Kako smo rekli, da bi promenili boju paragrafa, ne
uticuci na ostatak web sajta, postavili smo indikator
!important.
? p {color: blue !important;}
? Ipak, da li je moguce promeniti ovaj stil?
? Jedini nacin da se neki !important stil preklopi jeste da
drugi stil koristi takode indikator !important, ali da
bude sa vecim prioritetom.
13:40 25
Redosled primene stilova
? Informacija o stilu može da potice od razlicitih izvora.
Izvori su navedeni u listi, od opštijih ka specificnijim.
Tako ce stavke u listi na nižoj poziciji preklopiti stavke
iznad.
1. Podrazumevani stilovi browser-a
2. Korisnicki definisani stilovi u browser-u
3. Spoljni stilovi
4. Importovani stilovi (dodati pomocu @import funkcije)
5. Ugradeni stilovi (added with the style element)
6. Linijski (Inline) stilovi (dodaju se u pocetnom tagu)
7. Stilovi oznaceni sa !important
8. Korisnicki definisani stilovi sa !important
13:40 26
? Šta se dogada ako imamo konflikt izmedu stilova
jednake težine?
? Na primer:
? Ili
? U ovom scenariju, važeci stil ce biti onaj koji je
poslednji definisan!
13:40
<style>
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
<style>
p { color: red;
color: blue;
color: green; }
</style>
27
Box model
13:40
Svi HTML elementi su u sopstvenim “kutijama”. Ovaj termin se
koristi kada se govori o prikazu odnosno dizajnu..
Box model je model koji predstavlja oiviceni HTML element jednim
pravougaonikom koji se sastoji od: margina, ivica, padding, i od
sadržaja.
Ovaj model nam dozvoljava da pomocu CSS umecemo ivice,
praznine i sl. U odnosu na druge elemente.
28
Primer 2
? <html>
? <head>
? <style>
? div {
? width: 200px;
? padding: 10px;
? border: 5px solid gray;
? margin: 0px;
? }
? </style>
? </head>
? <body>
? <div class="ex">Ovo je ne. . . .
? . . . .
? </div>
? </body>
? </html>
? Kolika je ukupna širina / visina
„div“ oblasti?
13:40 29
Box model kroz pomocne
razvojne alate
13:40 30
Blok elementi
? Neki elementi se uvek prikazuju od same leve ivice
prozora citaca tj. od novog reda.
? Ovi elementi se nazivaju blok elementima.
? Primeri:
? <h1>
? <p>
? <ul>
? <li>
13:40 31
Linijski elementi
? Neki elementi se uvek prikazuju tako što se nadovezuju
kroz linijski prikaz u susednih elemenata.
? Ovi elementi su poznati kao linijski (engl. inline)
elementi.
? Na primer:
? <a>
? <b>
? <em>
? <img>
13:40 32
Primer
13:40 33
Formiranje selektora
13:40 34
Kriterijumi za definisanje
selektora
? Selektor definiše elemente na koje se stil primenjuje.
Definisanje tih elemenata se vrši koristeci:
? Univerzalni selektor
? * { }
? Tip elementa
? H2 { color:blue; }
? Kontekst
? H2 EM { color:gray; }
? ID elementa, tj odnosi se na tacno odredeni element
? H2#glavni { color:red; }
? Klasa elemenata, odnosi se na elemente odredene klase
? EM.myClass { color:green; }
13:40 35
? Koristeci pseudo klasu elementa
? H2:naslovi { color:red; }
? Koristeci atribute sa ili bez vrednosti elemenata
? H2[name] { color:red; }
13:40 36
Selektor po ID odnosno klasi -
1
? Da bi se koristio ovaj selektor potrebno je da elementi u
HTML dokumentu budu oznaceni sa ID odnosno klasom.
? Upotreba atributa ID uz element, na primer
ID=“glavniNaslov“ znaci da element ima jedninstvenu
vrednost ID, i na ovaj nacin se stil primenjuje na
odredeni elemenat.
? Svrstavanje više elemenata u grupe vrši se koristeci
atribut CLASS=“podNaslovi“.
13:40 37
2
? Podsecanje. Da bi se stil mogao primeniti na iskljucivo
jedan odredeni element, taj element mora imati
definisan atribut ID.
? Zapazite. Slicno nacinu kako element <a> referiše sidro,
tako selektor koristi ID elementa tako da se prvo stavi #
pa vrednost ID atributa elementa na koji se stil odnosi.
Na primer:
? h1#glavniNaslov { color: red; }
? div#zakljucak p{ color:blue; }
? Prvi selektor se odnosi na h1 naslov ciji je id
“glavniNaslov, dok drugi oznacava primenu na paragrafe
odeljka ciji je ID=“zakljucak“
13:40 38
3
? Selektor koji treba da oznaci primenu stila na grupi (klasi)
elemenata piše se na primer:
? .podNaslovi{ color:red; }
? Obratiti pažnju da se ispred naziva klase stavlja tacka.
Tacka je obavezna.
? Selektori mogu koristiti kombinaciju nekoliko vrsta
oznacavanja. Na primer, može se kombinovati tip elementa
sa nekim od ova dva tipa.
? Na primer: Ime klase se može koristiti zajedno sa tipom
elementa. U tom slucaju se pravilo primenjuje na elemente
tog tipa iz oznacene klase.
? H2.podNaslovi{ color:red; }
13:40 39
Selektor za elemente u
kontekstu
? Koristeci CSS selektore moguce je odabrati elemente
koji su u odredenoj relaciji sa drugim elementima.
? Neke relacije su: roditelj, dete, preci, potomci ili su na
istom nivou u hijerarhijskoj strukturi (blizanci).
? Izbor na osnovu roditelja:
? Sintaksa je: selektorRoditelj > selektorDete. Na primer
? div#zakljucak > p { color:blue; }
? Selektor se odnosi na paragrafe koji su dete elementi u
odnosu na div sa id= “zakljucak“
13:40 40
Selektori za potomke elementa
? Elementi u HTML stranici su hijerarhijski uredeni poštujuci na taj
nacin strukturu teksta u dokumentu. Primena selektora takode je
hijerarhijska.
? Na primer, ako crvenom bojom želimo da naglasim tekst uokviren
sa elementom em, u naslovu h1, da li je dobar stil?
? h1 { color: red }
em { color: red }
? Ne! Promena ce se odraziti i na sve em elemente, a ne samo na
em element unutar h1 elementa.
<H1>This headline is <EM>very</EM> important</H1>
? Dakle, potrebno to pravilo napisati drugacije. Ukljucivanje drugog
pravila u prvo pravilo bi bilo:
? h1 em { color: blue }, a važilo bi i na slucaj (ne samo na
dete element vec na sve potomke):
? <H1>This <SPAN class="myclass">headline is
<EM>very</EM> important</SPAN></H1>
13:40 41
Selektori na osnovu atributa
? [atribut]
? Izbor elemenata se može izvršiti na osnovu atributa u
tim elementima odnosno na osnovu vrednosti tih
atributa. Na primer:
• a[href] {
• text-decoration: none;
• }
? Rezultat je da, gde god se pojavio href atribut u nekom
elementu, link nece biti podvucen.
13:40 42
? [atribut=val]
? Drugi nacin je da se selektuje ne samo atribut, nego i
vrednost tog atributa. Na primer:
• a[href=“http://www.viser.edu.rs"] {
• }
• Rezultat je da, gde god se pojavio href atribut u nekom
elementu, a ukazuje na školu, link nece biti podvucen.
13:40 43
? [atribut~=val]
? Izbor elemenata se vrši na osnovu vrednosti atributa.
Samo oni elementi ciji atributi koji sadrže navedenu
vrednost kao jednu rec odvojenu razmaknicom u stringu
odgovaraju selektoru. Na primer:
• a[naziv~="upis"] {
• }
• Rezultat primene su elementi sa atributom naziv koji
imaju vrednost "upis", "junski upis"
13:40 44
? [atribut |= val]
? Izbor elemenata se vrši na osnovu vrednosti atributa i to
tako da atribut ima navedenu vrednost ili sa crticom iza
nje. Praznina znaci da se nece selektovani ni jedan. Na
primer:
• a[naziv|="main"] {
• color: red;
• }
• Rezultat primene su elementi sa atributom naziv a
deluje samo ukoliko a element ima atribu naziv sa
vrednostima "main", "main-1".
13:40 45
? [atribut ^= val]
tako da atribut ima navedenu vrednost ili pocinje sa
tom vrednošcu. Na primer:
• a[naziv|="nsl3"] {
• color: red;
• }
vrednostima "nsl3", "nsl33".
13:40 46
? [atribut $= val]
tako da atribut ima navedenu vrednost ili se završava sa
tom vrednošcu. Na primer:
• a[naziv|=".png"] {
• color: red;
• }
vrednostima "slika1.png", "slika2.png".
13:40 47
? [atribut *= val]
tako da atribut ima navedenu vrednost ili sadrži
navedeni podstring. Na primer:
• a[naziv|="viser"] {
• color: red;
• }
vrednostima "www.viser.edu.rs".
13:40 48
Primena na više atributa
? Primenjuju se kada je potrebno da se stil primeni na
nekoliko atributa jednog elementa ili nekoliko puta na
istom atributu. Na primer:
? span[hello="Cleveland"][goodbye="Columbus"] {
color: blue; }
13:40 49
Primena grupe selektora
? Grupe selektora se pišu tako što se pre narednog stavi
zapeta i tako dalje. Na primer:
? h1,h2 { color:red; }
? Boja ce biti primenjena na naslove h1 i h2.
? Osim primene grupe selektora, možete koristiti i bilo
koje kombinacije navedenih nacina oznacavanja
selektora.
13:40 50
Pseudoselektori
pseudoelementi i pseudoklase
? Na osnovu strukture dokumenta nije bilo moguce
primeniti stilove u nekim slucajevima, a koji nisu retki.
? Na primer, ni jedan element ne referiše prvu liniju
paragrafa i zato ne postoji jednostavan CSS selektor koji
bi tu liniju izdvojio. Za takve slucajeve je uveden
koncept pseudoelemenata i pseudoklasa.
? Kreiraju apstrakcije koje nisu obuhvacene stablom
dokumenta. Dakle, omogucavaju dizajnerima primenu
stila na sadržaj koji ne postoji u izvornom dokumentu
(na primer :before daje pristup u kontekstu)Mogu biti i
dinamicke, tj nemaju uvek isti ishod.
13:40 51
Pseudoklase
? Za izbor dela elementa koriste se pseudo elementi. Radi
se o vrstama selektora za znakove koji nisu opipljivi i
koje ne možete da „rucno“ oznacite. Na primer:
? div > p:first-child { text-indent: 0 }
? Važi za: Ne važi za:
? p:first-line { color:red; }
? oznacava prvi red u nekom pasusu, dok
? p:first-letter{ color:blue; }
? oznacava prvo slovo u pasusu. 13:40
<DIV class="note">
<P> Prvi paragraf.
</DIV>
<DIV class="note">
<H2>Note</H2>
<P> Prvi paragraf.
</DIV>
52
Pseudoklase za stanja linkova
? Poseban slucaj je da se selektor odnosi ne na element
vec na stanje elementa. Tako se za definisanje stanja
linkova koristi se sledeci stil:
? A : naziv { color:red; }
? naziv ima moguce vrednosti:
? link – odnosi se na veze na koje nije kliknuto niti je miš
iznad njih
? visited – odnosi se na veze koje su korišcene
? focus – ako je veza u fokusu
? hover – kada se na vezu pokaže
? acitve – kada se na njih pritisne
13:40 53
Pregled
13:40 54
Selektor Opis
:first-child Prvo dete element
::first-line Prva linija u prikazu
::first-letter Prvo slovo
::before Ubacivanje sadržaja i stila ispred selektora
::after Ubacivanje sadržaja posle selektora
:focus Selektuje se stanje fokusa kontrole za unos
:link
:visited
:active
:hover
Selektuje stanje veza, dakle ne element vec
stanje!
Primer 3
<head>
<style>
div p:first-line {
color:red;
}
p:first-letter {
color: blue;
font-size: 3em;
font-weight: normal;
}
p#naslov {
text-transform: uppercase;
}
</style>
</head>
<body>
<div>
<p id="naslov">
Primeri:
</p>
</div>
<div>
<p>
Studijski programi <nobr>Visoke škole . . .</nobr> izradeni .
. .
<p>
Sadržaj kvalifikaci . . .
<p>
Da bi koncept . . .
</div>
</body>
</html>
13:40 55
Primer 4
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<p>Pozadina postaje žuta kada se element
nadje u fokusu:</p>
<form>
First name: <input type="text"
name="firstname" /><br>
Last name: <input type="text"
name="lastname" />
</form>
<p>Fokus radi na vecini novih citaca, ne
i na starijim.</p>
</body>
</html>
13:40 56
Primer 5
? <html>
? <head>
? <style>
? form:before {
? content: "<hr>";
? }
? p:before {
? content: ">>";
? }
? blockquote:before {
? content: "##";
? font-size: 24px;
? color: purple;
? }
? blockquote:after {
? content: "#";
? font-size: 24px;
? color: purple;
? }
? </style>
? </head>
? <body>
? <p>Pozadina postaje žuta kada se element nadje u fokusu:</p>
? <form>
? First name: <input type="text" name="firstname" /><br>
? Last name: <input type="text" name="lastname" />
? </form>
? <p>Fokus radi na vecini <blockquote>xxxx xxx xxxxxx xxxx xxxx xxx xxxxxx
xxxx xxxx xxx xxxxxx xxxx xxxx xxx xxxxxx xxxx</blockquote> novih citaca,
ne i na starijim.</p>
? </body>
? </html>
13:40 57
Rezime
? Univerzalni selector *, odgovara svim elementima
? * { font-family:serif; }
? Selektor tipa, odgovara svim elementima cije je ime u
selektoru
? div { font-style: italic; }
? A B , selektuje sve potomke od elementa A koji su B
? p em { color: blue; }
13:40 58
? A > B , selektor za dete element. Selektuje sve B
elemente koji su dete elementa A.
? div.glavniOdeljak > p {color: red; }
? A+B, selektuje B element koji sledi element A, na istom
nivou.
? li + li {color: red; }
? .classname, klasni selektor koji odgovara vrednosti class
atributa u svim elementima koji pripadaju toj klasi.
? P.novosti { font-size: 8em; }
13:40 59
? ID selektor, odgovara tacno jednom elementu sa def ID
? #glavnaVest {font-weight: bold; }
? Atribut selektor A[attr] , odgovara svim elementima koji
imaju odredeni atribut, ili ako je definisana vrednost u
selektoru, onda se odosi na elemente sa atributom sa
tom vrednosti.
? table [border] {background-color; white; }
? U ovu grupu spadaju i selektori posebnih atributa:
? table[class~=“primer“] {background-color: orange; }
? a[hreflang|=“es“] {. . . . .}
13:40 60
5/5/2015
1
Zadatak
? Na fajlu ulazniZadatak start.html uraditi sledece:
? 1. Kreirati spoljni css fajl u folderu css koji ce sve glavne naslove
h1 obojiti u purple, a zatim promeniti font na stranici u Arial ili
sans serif. Ispitati promenu u prikazu u zavisnosti od odabranog
fonta.
? Pomoc:
? {
font-weight:bold;
color: purple;
}
? {
font-family:Arial,sans-serif;
}
? 2. Koristeci ugradeni stil u html stranici uvecati font za 10% u
svakom pasusu u odeljcima:
? Pomoc:
? {
font-size: 110%;
}
12:13 1
? Sav tekst treba da bude plave boje (navy) osim vec
podešenog naslova.
? Posebno paragraf sa id=„poziv“ treba iskositi koristeci
font-style.
? Pomoc:
? {
font-style:italic;
}
12:13 2
5/5/2015
2
? Gde god postoji referenca na b92.net treba boldovati.
? Pomoc:
? {
font-weight:bold;
}
12:13 3
? Sadržaj svih em elemenata boldovati naknadno koristeci
important oznaku:
12:13 4
5/5/2015
3
CSS
tipografija
12:13 5
Svojstva fontova
? font-size
? font-style
? font-weight
? font-family
? font-variant
? font (shorthand property)
12:13 6
5/5/2015
4
font-family
? Dizajner ili programer definišu nacin prikaza teksta
koristeci font. Medutim, prikaz stranice se vrši na strani
klijenta gde definisani font može ali ne mora da postoji.
Zato se pri definisanju fonta vrši izbor porodice fontova
ili više fontova kako bi se dobio željeni prikaz.
? Porodica fontova se definiše pomocu stila.
? font-family:name1,name2
? Gde je name1 prvi izbor fonta, a name2 drugi.
? Za izbor se može dodati proizvoljan broj fontova.
12:13 7
? Omogucava specificiranje fonta koristeci familije fonta
(npr. sans-serif) ili specificni font (npr. Arial).
? p {font-family: sans-serif;}
? p {font-family: arial;}
12:13 8
5/5/2015
5
CSS porodice fontova
Genericka familija Font familija Opis
Serif Times New Roman
Georgia
Serif fontovi imaju male
linije na krajevima karaktera
Sans-serif Arial
Verdana
"Sans" znaci „bez“- ovi
fontovi nemaju male linije na
krajevima karaktera
Monospace Courier New
Lucida Console
Svi karakteri imaju istu
širinu
12:13 9
Primeri porodica fontova
12:13 10
5/5/2015
6
Primeri porodica fontova
? Osim 3 navedena koriste se još dve vrste:
? Cursive – simulira skript ili rukopis.
? Fantasy – u potpunosti dekorativan i podesan za naslove
i posebne namene. Retko se koristi za web zbog toga što
ovi fontovi nisu zajednicki podržani od svih platformi.
12:13 11
Najcešci fontovi
12:13 12
5/5/2015
7
Web fontovi
? Da bi font bio vidljiv na korisnickoj strani, isti font mora
biti prisutan na korisnickom racunaru.
? Ukoliko ne postoji font koji je naveden, font se može
ugraditi ili referisati na nacin pogodan za korišcenje.
? Datoteka koja se koristi kao izvor za ugradivanje fonta
ne može biti bilo kog formata vec je standardizovana.
Odgovarajuci format je moguce dobiti iz vec postojecih
fontova racunara primenom odgovarajucih programa za
izvoz u željeni format.
12:13 13
Web fontovi - formati
? Za ukljucivanje fontova u web stranice neophodno je
razumevanje da razliciti brauzeri podržavaju razlicite
formate fontova.
? Vecina fontova su u OpenType (OTF) ili TrueType (TTF)
formatu. Internet Explorer prihvata Embedded Open
Type (EOT) format.
? Osim pomenutih postoji novi standard za upakivanje
fontova koji su prihvatljivi svim citacima. Novi format
je WOFF (Web Open Font Format).
12:13 14
5/5/2015
8
Web fontovi
licenciranje,
hostovanje
? Fontovi se placaju.
? Veliki broj fontova je zašticen autorskim pravima. Neki su
licencirani tako da se mogu koristiti na ogranicenom broju
mašina i obicno „download“ i upotreba nisu moguci bez
ogranicenja!
? Postoje dva pristupa koja obezbeduju korišcenje fontova:
samostalno hostovanje ili korišcenje font servisa.
? Hostovanje fontova. Pošto nadete font potrebno je da ga
postavite na server u svim zahtevanim formatima a zatim
da ga linkujete i ukljucite u stranicu koristeci @font-face
rule.
? Za izbor fontova za ovaj nacin korišcenja možete koristiti
pomoc sajtova: fontspring.com, fontsquirrel.com.
12:13 15
Web fontovi
hostovanje
? Font treba da sacuvajte u više formata.
? Postoje alati koji konvertuju izvorni font u druge
formate, ali takode postoji i jedan servis koji vam može
obezbediti sve potrebno:
www.fontsquirrel.com/fontface/generator
? Nakon upload-a vašeg fonta, dobija se font u formatima
TTF, EOT, WOFF, odnosno SVG, kao i CSS kod potreban
da font bude ugraden.
? Vodite racuna da servis koristite samo za fontove koji su
dozvoljeni za web upotrebu. Takode, bolji kvalitet fonta
se dobija ukoliko se može skinuti sa sajta samog
kreatora fonta, a ne koristeci generator.
12:13 16
5/5/2015
9
@font-face
? Nakon preuzimanja fajlova i smeštanja istih u
odgovarajuci direktorijum na serveru, potrebno je
ukljuciti font u css kod.
? Na primer:
• @font-face {
• font-family: 'Font_name'; src: url('myfont-webfont.eot?#iefix')
format('embedded-opentype'), url('myfont-webfont.woff')
format('woff'), url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
• }
? A zatim se ukljuceni font može koristiti pri definisanju
stilova:
• p {font-family: Font_name; }
12:13 17
Povezivanje sa font servisima
? Drugi nacin za ukljucivanje posebnih fontova je
korišcenje specijalizovanih servisa.
? Neki od servisa su besplatni i nude fontove visokog
kvaliteta, a takodje nude i opciju licenciranja i zaštite
autorskih prava.
? Servisi pružaju interfejs i alate koji omogucavaju
ugradnju fontova kao i kopiranje.
? Vodite racuna o licenci odnosno ceni.
12:13 18
5/5/2015
10
Google Web Fonts
? Google Web Fonts je servis na lokaciji
www.google.com/fonts
? Google Web Fonts je besplatan servis koji nudi pristup
velikom broju besplatnih fontova cak i za komercijalnu
upotrebu.
? Sve što morate da uradite je da odaberete neki font,
onda kopirate i nalepite kod koji je generisan.
12:13 19
Zadatak, font family - 1
? Zadatak: Datu stranicu menu.html izmeniti po sledecim zahtevima:
? Dodati ugradeni style element za ovaj zadatak.
? Rešenje:
? <head><title>... ... ....</title>
<style>
</style>
</head>
? Zadatak: Glavni tekst treba da se prikazuje u fontu Verdana ili
nekom drugom sans-serif fontu.
? Rešenje: Umesto da se piše stil za svaki element dovoljno je
primeniti stil samo na body element. Potrebno je dodati sledece
pravilo:
? <style>
body {font-family: Verdana, sans-serif;}
</style>
12:13 20
5/5/2015
11
? Zadatak: Potrebno je posebno formatirati naslov na
stranici “Black Goose Bistro, Summer Menu” koristeci
font „ Marko One“ iz Google kolekcije
www.google.com/fonts.
? Zadatak: Pronaci deo koji opisuje nacin povezivanja
fonta:
? Rešenje:
? <link
href='http://fonts.googleapis.com/css?family=Marko+
One' rel='stylesheet' type='text/css'>
12:13 21
? Zadatak: Zatim dodajte pravilo za primenu linkovanog
fonta na naslov.
Zapazite da je specificiran i font Georgia ili drugi serif
font:
? Rešenje:
? <style>
body {font-family: Verdana, sans-serif;}
h1 {font-family: "Marko One", Georgia, serif;}
</style>
12:13 22
5/5/2015
12
Font-size
Definisanje velicina
? Da bi se definisala velicina fonta ili margine ili
nekog drugog objekta, neophodno je najpre da
definišemo mere koje se koriste za definisanje
velicine.
? U dizajnu web stranica koriste se 2 vrste mere:
? apsolutne
? relativne
12:13 23
Apsolutne mere
? Apsolutne jedinice mere koje se koriste za velicine su:
? Inci (engl. Inches [in])
? Centimetri (cm)
? Milimetri (mm)
? Points (pt)
? Picas (pc)
? Jedna tacka 1pt je velicine 1/72in
? 1pc = 12pt
? Negativne vrednosti nisu dozvoljene.
12:13 24
5/5/2015
13
Apsolutne mere
? Specificiraju fiksne velicine. Na primer:
P {margin: 1.25in;}
? VAŽNO Apsolutne mere se ne mogu skalirati na
klijentsom prikazu.
? Treba da budu korišcene samo kada je poznata tacna
velicina klijentskog medijuma.
12:13 25
Relativne mere
? Relativne jedinice mere
? Zadaju se u odnosu na neke druge jedinice mere. Tu
spadaju:
? Em
? X-height (ex)
? Pixels (px)
? Omogucavaju projektovanje skalabilnih Web stranica
koje se prilagodavaju razlicitim velicinama i tipovima.
? Po W3C preporukama ove mere treba uvek koristiti pri
dizajnu.
12:13 26
5/5/2015
14
em
? Em jedinica je podrazumevana velicina fonta koja je
podešena na citacu.
? Tradicionalno predstavlja širinu velikog slova M. (Nema
nikakve veze sa elementom em)
? Odnosi se i na horizontalnu i vertikalnu meru.
12:13 27
? Kada se postavi font-size u em jedinicama, zadata
vrednost predstavlja faktor skaliranja podrazumevane
velicine, slicno procentu.
? Na primer, ako je podrazumevana velicina u body
elementu 16px, pdešavanjem elementa h1 na 1.5 em
postavlja se velicina fonta u h1 elementu na 24 px.
? body { font-size: 100%; }
? h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */
12:13 28
5/5/2015
15
ex
? X-height (ex) predstavlja velicinu malog slova x u fontu.
? Visina malog slova x može da prilicno zavisi od vrste
fonta.
12:13 29
px
? Pixel-najmanja tacka koja može da se prikaže.
? Predstavlja osnovni element slike na displeju.
? Velicina piksela je odredena rezolucijom displeja.
? Mera je dobra za racunarski prikaz, ali nije dobra za
druge medije kao na primer za štampanje.
12:13 30
5/5/2015
16
%
? Procenti se uvek koriste za relativno definisanje
velicine, u odnosu na neku drugu velicinu.
? Na primer, sledece pravilo
? body {font-size: 150%;}
? postavlja velicinu fonta za <body> element na1.5 puta
velicine fonta koja je podrazumevana u citacu.
Deca elementi nasleduju vrednosti od roditeljskih
elemenata, pa i vrednosti o velicini.
? Na primer, <b> tekst u sledecem primeru je 125% veci
od teksta u <p> koji ga sadrži:
p {font-size: 12pt;}
p b {font-size: 125%;}
12:13 31
em, %
? em i % su relativne jedinice mere.
? Razlika je u tome u odnosu na koju velicinu su relativne
velicine koje su iskazane ovim jedinicama.
? em je uvek relativan u odnosu na velicinu fonta.
? % je relativan u odnosu na roditeljski blok, obicno
body, div, table, osim kada se primenjuje na font-size u
tom slucaju se primenjuju u odnosu na roditeljski font.
12:13 32
5/5/2015
17
Zadavanje velicine kljucnim
recima
? Velicina fonta se može definisati pomocu kljucnih reci:
xx-small, x-small, small, medium, large, x-large i xxlarge.
? Kljucne reci ne odgovaraju posebnim merama vec su

mere skalirane konzistentno u odnosu jedna na drugu.
Podrazumevana velicina je medium u važecem citacu.
Na primer:
12:13 33
Zadatak – definisanje velicina
? Definisati velicinu fonta da bude 14piksela umesto
podrazumevanih 16.
? Resenje:
? Postaviti velicinu fonta uradicemo koristeci relativne
mere:
14/16 = 0.875.
? Može se koristiti 87.5% ili:
• p, dl {
font-size: .875em;
}
12:13 34
5/5/2015
18
Nastavak zadatka
? Postaviti velicinu teksta u hederu h1 da bude 1.5 puta
veci nego u body tekstu.
? Velicina fonta u h2 zaglavljima treba da ostane ista:
text size = 1em.
? Rešenje:
? h1 {
font-family: "Marko One", Georgia, serif;
font-size: 1.5em
}
h2 {
font-size: 1em;
}
12:13 35
font-style
? Font stilovi:
? Da bi font bio ukošen koristi se:
? font-style:italic
? Osim ukošenog, font može biti
? normal
? italic
? oblique
12:13 36
Ovo je jedan paragraf, font-style:normal.
Ovo je jedan paragraf, font-style:italic.
Ovo je jedan paragraf, font-style:oblique.
5/5/2015
19
font-weight
? Debljina fonta:
Da bi podesili podebljanost slova koristi se:
? font-weight:bold
? bold
? normal
? lighter
? 100,200,...900
12:13 37
Zadatak – boldovanje teksta
? Koristeci CSS boldovati stavke u listama.
? Rešenje:
? dt { font-weight: bold; }
12:13 38
5/5/2015
20
font-variant
? font-variant: normal | small-caps
? Simulira mala slova skalirajuci velika na velicinu malih
12:13 39
<html>
<head>
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">Ovo je primer za: font-variant:normal.</p>
<p class="small">Ovo je primer za: font-variant:small-caps.</p>
</body>
</html>
Ovo je primer za: font-variant:normal.
OVO JE PRIMER ZA: FONT-VARIANT:SMALLCAPS.
Skraceno definisanje fonta
? Postoji i stil za opis fonta sastavljen od prethodnih
svojstava. Na primer:
? p {font-weight: bold; font-size: 18pt;
line-height: 24pt; font-family: arial;}
? Skraceno, isti font se može zapisati kao:
? p {font: bold 18pt/24pt arial;}
12:13 40
5/5/2015
21
? Puna sintaksa je:
? font: font-style font-weight font-variant font-size/lineheight
font-family
? Zapazite da:
a. Svojstva fonta su odvojena razmakom.
b. Redosled zadavanja vrednosti je važan!
c. Minimalni sadržaj mora imati velicinu i familiju fonta.
Izbacivanjem jedne ili izmenom redosleda, zadavanje
fonta postaje nevažece. Na primer, minimalni stil je:
? p { font: 1em sans-serif; }
12:13 41
? Ako se zadaje više familija, kao i ranije, one se zadaju
koristeci zapetu:
p.stil1
{
font:15px arial,sans-serif;
}
p.stil2
{
font:italic bold 12px/30px Georgia,serif;
}
12:13 42
5/5/2015
22
Zadatak – ubaciti skraceni opis
? Umesto definisanih odvojenih svojstava fonta, definisati
font koristeci skraceni opis.
? Rešenje:
? h1 {
font: bold 1.5em "Marko One", Georgia, serif;
}
? Napomena. Možda se cini da je upotreba bold svojstva
nepotrebna jer je h1 element inace boldovan. Medutim,
ako se izostavi ovo svojstvo, dogodice se resetovaje na
podrazumevanu vrednost za svojstvo ne za
podrazumevanu vrednost citaca. U ovom slucaju je
podrazumevana vrednost normal.
12:13 43
Boja teksta
? Boja teksta se menja pomocu svojstva color.
? Boja se nasleduje, a zadaje se na 2 nacina.
? imenom ili numericki
? Primeri:
? h1 { color: gray; }
? h1 { color: #aabb66; }
? h1 { color: #ab6; } /*jednostavno se duplira cifra za
svaku boju, pa je isto kao u prethodnom primeru*/
? h1 { color: rgb(102,102,102); }
12:13 44
5/5/2015
23
Pozadinska boja
? Koristeci svojstov background-color postavlja se
pozadinska boja na bilo koji element.
? background-color : color value (naziv ili broj)
? Na primer:
blockquote {
border: 4px dashed;
color: #409A29;
background-color: #C3EAF6;
}
12:13 45
Zadatak – promena visine
reda
? Zadatak. Povecati rastojanje izmedju redova i tako
uvecati citljivost, a istovremeno uciniti font malim
(small)
? Rešenje:
? body {
font-family: Georgia, serif;
font-size: small;
line-height: 1.75em;
}
12:13 46
5/5/2015
24
nastavak
? Zadatak. Promeniti boju h1 naslova postavljajuci je na „purple“
a u paragrafima odeljka info na „gray“.
? Rešenje:
? h1 {
font: bold 1.5em “Marko One”, Georgia, serif;
color: purple;
}
? div#info p {
font-style: italic;
color: gray;
}
12:13 47
nastavak
? Zadatak. Postavite h1 i h2 zaglavlja kao i info sekciju na
sredinu stranice.
? Rešenje:
? h1, h2, #info {
text-align: center;
}
12:13 48
5/5/2015
25
nastavak
? Zadatak. Formatirati h2 zaglavlja tako da mala slova
budu nalik velikim, ali da ostanu iste velicine, zatim
promenite razmak izmedu slova na 0.5em i postaviti
boju na purple.
? Rešenje:
? h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: .5em;
color: purple;
}
12:13 49
nastavak
? Zadatak. Prvi paragraf nakon naslova h2 treba centrirati
i ukositi:
? Rešenje:
? h2 + p {
text-align: center;
font-style: italic;
}
12:13 50
5/5/2015
26
Visina reda
? Definiše rastojanje izmešu baznih linija dva reda u tekstu.
Bazna linija je zamišljena linija na kojoj su smešteni
karakteri u jednoj liniji.
? Mada se visina reda racuna od jedne do druge bazne linije,
vecina citaca ubacuju dodatni prostor iznad i ispod teksta
radi razdvajanja dve linije, na taj nacin centrirajuci tekst u
jednoj liniji.
? P{font-family:“Tahoma“, line-height:150%}
? Ista vrednost je 150%, 1.5em, 1.5
12:13 51
? Moguce vrednosti za definisanje visine linije su:
? line-height: normal|number|length|initial;
? Pogledati primer:
http://www.w3schools.com/cssref/playit.asp?filename=playcss
_line-height&preval=initial
? Na primer, podešavanje visine reda se može uciniti na 3
nacina:
? 1. p { line-height: 2; }
? 2. p { line-height: 2em; }
? 3. p { line-height: 200%; }
12:13 52
5/5/2015
27
Indents
? Uvlacenje teksta prve linije se reguliše svojstvom:
text-indent : length measurement | percentage
? Može se definisati u jedinicama dužine ili procentima.
? Procentualne vrednosti se racunaju u odnosu na širinu
roditeljskog elementa.
? Na primer:
? p#p1 { text-indent: 2em; }
? p#p2 { text-indent: 25%; }
? p#p3 { text-indent: -35px; }
12:13 53
Primer - 1
12:13 54
5/5/2015
28
Primer - 2
? U trecem primeru je korišcena negativna vrednost. U
ovom slucaju je prva linija izvan leve ivice pasusa
? Napomena. Ovo svojstvo se nasleduje, ali to nije od
koristi. Na primer, ako je neki odeljak širine 800 piksela
i ako ima 10% uvucenog prvog reda, tj znaci da je prvi
red uvucen 80 piksela i ta vrednost bi se prosledivala
kaskadno na podelemente, a ne 10%.
12:13 55
Horizontalno poravnjavanje
? Poravnjavanje teksta u web stranicama, baš kao u tekst
procesorima, se postiže primenom svojstva:
? text-align: left | right | center | justify
? Podrazumevano: left za jezike u kojima je citanje
sleva na desno, a desno za jezike u kojima je citanje s
desna na levo
12:13 56
5/5/2015
29
Primer poravnavanja
12:13 57
Dekoracije
? Dekoracije teksta se koriste kada treba da se:
tekst podvuce, precrta ili postavi crta preko teksta.
? text-decoration: none | underline | overline | linethrough
? Cesto se koristi da bi se kod linkova iskljucilo
oznacavanje – podvlacenje, ali ne i ona svojstva linkova
koja nisu obuhvacena dekoracijom:
? a { text-decoration: none; }
12:13 58
5/5/2015
30
Transformacija slova
? CSS ima mogucnost transformacije teksta u velika i mala
slova. Ovo svojstvo se definiše koristeci sintaksu:
? text-transform : none | capitalize | lowercase |
uppercase
12:13 59
Razmak izmedu reci
? Razmak izmedu reci se definiše pomocu:
? word-spacing: length measurement | normal
12:13 60
5/5/2015
31
Razmak izmedu slova
? Razmak izmedu slova se definiše pomocu:
? letter-spacing: length measurement | normal
12:13 61
Vertikalno poravnavanje
? Poravnavanje unutrašnjeg elementa po vertikali.
? vertical-align: baseline|length|%|sub|super|top|texttop|middle|bottom|text-
bottom|initial
? (Pogledati primer:
http://www.w3schools.com/cssref/playit.asp?filename=
playcss_vertical-align&preval=25px)
? vertical-align: baseline|length|sub|super|top|texttop|middle|bottom|text-bottom|
initial
12:13 62
5/5/2015
32
Beli prostor
? white-space : normal | pre | nowrap | pre-wrap | pre-line
? Definiše nacin kako se beli prostor u elementu obraduje u
prikazu.
? pre – cuvaju se praznine kao i kod pre html elementa.
Nema prelamanja osim ako postoji novi red u html kodu
? pre-wrap – beli prostor se cuva a tekst se prelama samo ako
je neophodno i to na belinama, ili ako postoji novi red u
html kodu.
? nowrap – tekst se prelama samo ako postoji <br> (slicno
kao kod pre) a višestruke beline se odbacuju.
? pre-line – višestruke beline se odbacuju. Tekst se prelama
kada je neophodno i ako postoji novi red u html kodu.
12:13 63
12:13 64
5/5/2015
33
Vidljivost
? visibility: visible | hidden | collapse
? Koristi se da sakrije element. Pri tome se prostor koji
taj element zauzima cuva (hidden) ili ne (collapse) u
zavisnosti od podešenih svojstava.
? collapse – važi samo za table elemente. collapse
izbacuje neki red ili kolonu, ali to ne utice na prikaz
tabele. Prostor zauzet sa redom ili kolonom bice na
raspolaganju drugim elementima. Ako se koristi za
druge elemente ponaša se kao "hidden"
12:13 65
Nevidljivi tekst
? Ako se podesi velicina fonta 0 onda se ponašanje prikaza
definiše samim citacem. Neki citaci ce ignorisati ovu
vrednost, drugi ce tekst uciniti nevidljivim…
? Da bi tekst bio nevidljiv koristi se svojstvo display
? Na primer:
p {
display: none;
}
Kako se sve može koristiti display pogledajte primer:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_di
splay&preval=inline
12:13 66
5/5/2015
34
Markeri uz stavke listi
? Markeri uz stavke listi koji su definisani tipom nabrojivih
odnosno nenabrojivih lista u html listama, postavljaju
se koristeci sintakstu:
? list-style-type: none | disc | circle | square | decimal
| decimal-leading-zero | lower-alpha | upper-alpha |
lower-latin | upper-latin | lower-roman | upper-roman
| lower-greek
12:13 67
12:13 68
5/5/2015
35
• <html>
• <head>
• <style>
• ul.a {list-style-type:circle;}
• ul.b {list-style-type:square;}
• ol.c {list-style-type:upper-roman;}
• ol.d {list-style-type:lower-alpha;}
• </style>
• </head>
• <body>
• <p>Example of unordered lists:</p>
• <ul class="a">
• <li>Coffee</li>
• <li>Tea</li>
• <li>Coca Cola</li>
• </ul>
• <ul class="b">
• <li>Coffee</li>
• <li>Tea</li>
• </ul>
• <p>Example of ordered lists:</p>
• <ol class="c">
• <li>Coffee</li>
• <li>Tea</li>
• </ol>
• <ol class="d">
• <li>Coffee</li>
• <li>Tea</li>
• </ol>
• </body>
• </html>
12:13 69
Ako se pridruži stil koji nije odgovarajuci
listi, bice prikazane stavke kao u stilu?!
5/5/2015
1
Boje
12:14 1
? Postoje 2 osnovna nacina da se specificiranja boja preko
CSSa.
? Prvi nacin je koristeci predefinisana imena boja.
? Na primer:
? color: red; color: olive; color: blue;
? CSS2.1 17 standardnih boja, CSS3 140
? Drugi nacin je koristeci brojnu vrednost koja predstavlja
RGB komponente boje koja se definiše.
? Na primer :
? color: #FF0000; color: #808000; color: #00F;
12:14 2
5/5/2015
2
Primer imenovanih boja
? 17 standardnih boja u CSS2.1
12:14 3
? 140 boja u CSS3
12:14 4
5/5/2015
3
Zadavanje boje kao
numericke vrednosti
? Zapisivanje boje u CSS kroz numericku vrednost moguce je
izvesti na nekoliko nacina.
? Svaka komponenta se zapisuje intenzitetom od 0-255. Na
primer za „lavender“ boju zapis bi bio sledeci:
? color: rgb(200, 178, 230);
? Vrednost može biti iskazana i preko procenata.
? color: rgb(78%, 70%, 90%);
? Ili koristeci samo broj, ali sa oznakom # ispred boroja i
tada se zapis vrši kao 3 hexadecimalna broja. Svakoj
komponenti pripada 1/3 cifara od ukupnog broja cifara.
? Na primer:
? color: #C8B2E6;
? hex(200)=C8, hex(178)=B2, hex(230)=E6
12:14 5
? Ako se koriste parovi od dupliranih cifara za svaku od
komponenata boja, kao na primer:
? color: #FFCC00; or color: #993366;
? može se za svaku komponentu koristiti samo 1 cifra .
? Gornji primer je ekvivalentan:
? color: #FC0; or color: #936;
12:14 6
5/5/2015
4
RGBA
? Zadavanje boja pomocu RGBA vrednosti nije podržano
za starije citace. Može se koristiti za IE9+, Firefox 3+,
Chrome, Safari, odnosno Opera 10+.
? RGBA vrednosti su proširenje RGB vrednosti sa alfa
kanalom koji specificira transparentrnost ( opacity )
objekta na koji se primenjuje.
? Sintaksa je: rgba(red, green, blue, alpha).
? Alpha parametar je broj izmedu 0.0 (potpuna
transparentnost) i 1.0 (poptuna neprozirnost).
12:14 7
<h1 style="color:rgba(9,9,9,0.1)">Studenti …
<h1 style="color:rgba(9,9,9,1)">Studenti …
Sve boje u prednjem planu
foreground
? Boja u prednjem planu se zadaje svojstvom color.
? Prednji plan elementa tj. foreground se sastoji od
sadržaja i ivice, ako je ivica definisana.
? Definisanje boje znaci boju sadržaja i ivice. Boja ivice
se može i posebno definisati.
12:14 8
<style>
blockquote {
border: 3px dotted;
color: darkblue;
}
</style>
5/5/2015
5
CSS3: HSL, HSLA
Hue, Saturation, Lightness
12:14 9
? Novo u CSS3. Alternativni nacin definisanja boja.
? Hue – izražava se kao ugao od max 360 stepeni
? Saturation – izražava se u procentima
? Lightness – izražava se u procentima. 0% predstavlja
belo, 50% normalno a 100% crno.
? Koristi se u kombinaciji sa Alpha faktorom tj
transparentnošcu koja se iskazuje kao decimalni broj od
0 do 1.
? color:hsla { 0, 100%, 100%, 0.5 }
Background color
? Pomocu svojstva background-color vriši se postavljanje pozadinske
boje nekog elementa. Sintaksa:
? background-color: color value (name or numeric) | transparent
? Podrazumevana vrednost: transparent
? Ovo svojstvo se ne nasleduje.
? Pozadinska boja ispunjava površ iza elementa koja ukljucuje površ
sadržaja elementa, padding prostor (extra prostor) dodat oko
sadržaja, proširen sa ivicom do spoljne granice ivice.
12:14 10
blockquote
{
border: 3px dotted;
color: darkblue;
}
5/5/2015
6
Zadatak1a
? 1. Sve h1 elemente posaviti da budu boje: purple (R:153, G:51,
B:153, ili #993399)
? Zapazite: boju je moguce zadati i kao #939
? 2. Promeniti boju h2 elemenata svetlo narandžasto braon boju
(R:204, G:102, B:0, tj #cc6600).
? 3. Postaviti pozadinsku boju cele stranice u svetlo zelenu
(R:210, G:220, B:157, tj #d2dc9d).
? Rešenje:
• h1 {
• color:#939;
• }
• h2 {
• color: #c60;
• }
• body {
• background-color: #d2dc9d;
• }
12:14 11
Nastavak zadatka 1b
? 4. Postaviti pozadisku boju div elementa
„uvod“ na belu sa 50% prozirnošcu.
? 5. Iskljuciti podvlacenje linkova (textdecoration:none),
a dodati boju linkova
da budu purple.
? 6. Vec posecene linkove obojiti sa
#937393.
? 7. Ako je miš iznad linka promeniti boju
na #c700f2 i dodati pozadinsku boju
linka da bude bela.
? 8. Kada se mišem klikne na link, podloga
treba da je bela a tekst boje #ff00ff.
12:14 12
Rešenje:
#uvod {
background-color: rgba(255,255,255,0.5);
}
a {
text-decoration: none;
}
a:link {
color: #939;
}
a:visited {
color: #937393;
}
a:hover,a:focus {
background-color: #fff;
color: #c700f2;
}
a:active {
background-color: #fff;
color: #f0f;
}
5/5/2015
7
Pozadinske slike
? Pozadinska slika se dodaje odredenom
elementu koristeci svojstvo backgroundimage.
? Sintaksa je:
? background-image: url | none
? Default: none
? Na primer:
? body {
? background-image:url(html5.png);
? }
? blockquote {
? background-image: url(viser.png);
? padding: 2em;
? border: 4px dashed;
? }
12:14 13
? Zapazite da kada se koristi svojstvo background-color
zajedno sa svojstvom background-image, slika ce doci
preko boje tj prekrice pozadinsku boju stranice.
? Medutim, kada se koristi format slike koji podržava
transparentost, kao na primer png format, tada ce
pozadinska boja biti vidljiva ispod transparentnih delova
slike.
12:14 14
5/5/2015
8
background-repeat
? Zapazite i to da se slika ponavlja ukoliko je
manja od podloge na koju se primenjuje.
? Ovo svojstvo ponavljanja se može dodatno
opisati pravcom po kom se slika ponavlja.
Sintaksa je:
? background-repeat: repeat | repeat-x |
repeat-y | no-repeat
? Podrazumevana vrednost: repeat
? Na primer:
12:14 15
body {
background-image: url(html5.png);
background-repeat:no-repeat;
}
blockquote {
background-image: url(viser.png);
background-repeat:repeat-y;
padding: 2em;
border: 4px dashed;
}
Zadatak 1c
? U nastavku zadatka uraditi sledece:
? 1. Dodati u pozadini cele stranice logo beogradskog sajma.
? 2. Na vrhu blockquote prvog odeljka dodati slicice zvezdica.
? Rešenje:
• body {
• background-image: url(Beogradski-sajam-logo-300x75.jpg);
• }
• blockquote {
• background-image: url(zvezdica.gif);
• background-repeat:repeat-x;
• border: 4px dashed;
• }
12:14 16
5/5/2015
9
Background position
? Svojsvo background-position odreduje poziciju slike na
pozadini. Ukoliko se slika multiplicira u prikazu, ovo
svojstvo odreduje prvu sliku u prikazu. Sintaksa je:
? background-position: vrednost | percentage | left |
center | right | top | bottom
? Podrazumevano: 0% 0% (tj. left top). Medutim, ako je
definisano samo jedna vrednost, druga dobija vrednost
center.
? Ako su koordinate u pikselima onda se prva velicina
odnosi na horizontalno rastojanje od leve ivice, a druga
koordinata na vertikalno rastojanje od vrha.
12:14 17
12:14 18
5/5/2015
10
? Medutim, ako se koordinate zadaju u procentima, onda
je prvi % pozicija gornjeg-levog ugla slike u odnosu na
širinu prozora, a drugi % je pozicija donjeg-desnog ugla
slike u odnosu na visinu prozora. Važno je da se uoci da
ove koordinate se ticu ne samo prozora vec i slike koja
se postavlja. Dakle, ako je 0% 100%, gornji levi ugao
slike je u gornjem levom uglu prozora, a donji desni
ugao slike je u donjem desnom uglu prozoru, tj slika je
skroz levo i skroz dole. Ako je 0% 0% slika je skroz levo i
skroz gore u prozoru.
? Ako nedostaje jedna velicna onda je podrazumevana
vrednost 50% (center)
12:14 19
Background attachment
? Kada se sadržaj neke stranice skroluje tada se zajedno
sa sadržajem pomera i pozadinska slika.
? Moguce je da pozadinska slika bude nezavisna tj da stoji
fiksna u pozadini i u slucaju skrolovanja. Ovo se postiže
svostvom background-attachment. Sintaksa je:
? background-attachment: scroll | fixed | local (CSS3)
? Podrazumevano: scroll
12:14 20
5/5/2015
11
Skraceni opis pozadinske slike
? Umesto pojedinacnih svojstava, za kompletan opis pozadinske
slike, može se koristiti jedno svojstvo:
? background: background-color background-image backgroundrepeat
background-attachment background-position
? Na primer, ovako bi glasilo jedno pravilo:
? body {
background: white url(viser.png) no-repeat right top fixed;
}
? Sve vrednosti su opcione i mogu se pisati u bilo kom redosledu.
? Jedino ogranicenje je da se pri navodenju koordinata
horizontalna vrednost se navodi prva.
12:14 21
Višestruke pozadinske slike: CSS3
? Noviji citaci podržavaju istovremeni prikaz nekoliko
slika kao pozadinske.
? U ovom slucaju se podaci svojstava za svaku sliku
posebno navode razdvojeni zapetom.
12:14 22
body {
background-image: url(image1.png),
url(image2.png), url(image3.png);
background-position: left top, center center, right
bottom;
background-repeat: no-repeat; no-repeat; no-repeat;
…
} body {
background:
url(image1.png) left top no-repeat,
url(image2.png) center center no-repeat,
url(image3.png) right bottom no-repeat;
…
}
5/5/2015
12
Padding, Borders, Margins
12:14 23
? Ranije smo objasnili box-model kao jedan od osnovnih
koncepata CSSa. Na osnovu tog modela svaki element u
dokumentu je smešten u pravougaonik koji je opisan
svojstvima:
širine, visine, pedinga, ivice i margina
12:14 24
5/5/2015
13
? Oblast sadržaja (eng. Content area)
? U jezgru svakog elementa je njegov sadržaj koji je
prikazan u ovoj oblasti (oznacen belom bojom na slici)
? Unutrašnja ivica (eng. Inner edges)
? Ivica koja odvaja oblast sadržaja od ostatka predstavlja
unutrašnju ivicu elementa. Mada se ova ivica prikazuje
u box modelu, ona nije vidljiva u prikazu.
? Oblast za odvajanje sadržaja (eng. Padding)
? Ova oblast stoji izmedu sadržaja i opcione ivice. Na
slici, ova oblast je prikazana žuto-narandžastom bojom.
Ova oblast je opciona.
12:14 25
? Ivica (eng. Border)
? Ivica je linija (nekada stilizovana linija) koja oivicava
element i njegov padding. Ivica je opciona.
? Margin
? Margina je opciona. Predstavlja prostor koji se dodaje
spolja u odnosu na ivicu. U dijagramu margina je oznacena
sa svetlo-plavom bojom, ali u realnoj primeni, margina je
uvek transparentna tako da se podloga vidi u ovom
prostoru.
? Spoljna ivica (eng. Outer edge)
? Spoljna ivica je ujedno i spoljna ivica margine i predstavlja
ivicu celog elementa. Ona oivicava je ukupnu površ koju
zauzima element na stranici ukljucujuci sadržaj, peding,
border i margine. Na slici je oznacena tackastom linijom,
ali u stvarnosti ova linija nije vidljiva.
12:14 26
5/5/2015
14
Dimenzije
? Podrazumevano, širina i visina jednog blok elementa se
racuna automatski od strane citaca. Širina je obicno
širina klijentske oblasti prozora citaca ili drugog
elementa koji ga sadrži, a visina je ona koja je potrebna
da se podesi sadržaj.
? Medutim, može se definisati širina i visina da bi sadržaj
elementa bio odredene velicine. Ove velicine se ne
nasleduju.
? width: vrednost | percentage | auto
? podrazumevano: auto
? height: vrednost | percentage | auto
? podrazumevano: auto
12:14 27
Primer
? p {
background: #c2f670;
width: 500px;
height: 150px;
padding: 20px;
border: 2px solid gray;
margin: 20px;
}
12:14 28
20px + 2px + 20px + 500px width + 20px + 2px + 20px = 584 pixels
5/5/2015
15
overflow
? Kada se podešava velicina nekog elementa treba voditi
racuna o velicini sadržaja koji treba smestiti u taj
element. Ukoliko je velicina elementa previše mala da
bi prihvatila sadržaj, moguce je specificirati nacin kako
ce se sadržaj prilagoditi koristeci svojstvo overflow.
? overflow: visible | hidden | scroll| auto
podrazumevano: visible
12:14 29
padding
? Svojstvom padding se definiše prostor izmedu sadržaja
elementa i ostalog sadržaja. Moguce je posebno definisati
velicinu pedinga u odnosu na svaku ivicu elementa. Takode
postoji i skracenica koja omogucava kompaktno zapisivanje
ovih zasebnih svojstava u jednom. Posebno se svojstva
definišu kao:
? padding-top, padding-right, padding-bottom, padding-left:
vrednost | procenat
? Ili skraceno
? padding: vrednost | procenat
? Podrazumevano je uvek: 0
12:14 30
5/5/2015
16
Primer
? blockquote {
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 3em;
background-color: #D098D4;
}
12:14 31
? Skraceno zapisivanje se izvodi sa svojstvom
? padding: top right bottom left;
? Ako se navedu 3 vrednosti one su u redosledu:
? padding: top rightleft bottom;
? Ako se navedu 2 vrednosti:
? padding: topbottom rightleft;
? Na kraju ako se navede 1 vrednost ona se odnosi na sve
4 ivice.
? Cesto se ovaj redosled pamti kao “TRouBLe”.
12:14 32
5/5/2015
17
Stilovi za ivice
? Ako ne postoji definisan stil za ivice, ivica ne postoji.
? Drugim recima, mora se uvek navesti stil ivice koja se
prikazuje. Stilovi ivica se primenju na svaku ivicu
posebno ili koristeci skraceni opis za sve ivice.
? border-top-style, border-right-style,
border-bottom-style, border-left-style
? vradnosti: none | dotted | dashed | solid | double |
groove | ridge | inset | outset
? podrazumevano: none
12:14 33
Zadatak
? Napisati stranicu kao na
slici.
12:14 34
5/5/2015
18
Rešenje zadatka: borderS.html
• <html>
• <head>
• <style>
• p.one {
• border-style: solid;
• border-width: 5px;
• }
• p.two {
• border-width: medium;
• }
• p.three {
• border-width: 1px;
• }
• </style>
• </head>
• <body>
• <p class="one">border-style:solid;border-width:5px;</p>
• <p class="two">border-style:solid;border-width:medium;.</p>
• <p class="three">border-style:solid;border-width:1px;.</p>
• <p><b>Note:</b> "border-width" ne radi ocekivano ako se
koristi samo. Koristiti zajedno sa "border-style" kojim se
definiše stil ivice prethodno.</p>
• </body>
• </html>
12:14 35
float
? U podrazumevanom prikazu HTML stranice, CSS definiše
prikaz elemenata od vrha ka dnu, odnosno s leva na
desno (ako se u jeziku cita s leva na desno), u redosledu
u kom se navode u kodu.
? Blok elementi grade jedan stek od vrha i popunjavaju
raspoloživu širinu prozora sa elementima. Unutrašnji
elementi i karakteri teksta popunjavaju linije svakog
bloka posebno.
12:14 36
Blokovi se pojavljuju u redosledu kao u kodu. Svaki blok
ispunjava raspoloživi prostor.
5/5/2015
19
? Na ovaj nacin je obezbedeno da se elementi ne preklapaju,
ne nagovilavaju i popunjavaju prostor prozora citaca.
Medutim, moguce je promeniti ovaj standardni nacin
rasporeda elemenata.
? Svojstvo float prebacuje elemente iz vertikalnog u
horizontalni redosled, dozvoljavajuci da se ostali sadržaj,
istog kontejner elementa, postavlja oko tog elemenata.
? Svojstvo plutajuceg toka (float) predstavlja važno svojstvo
modernog CSS dizajna i jedno od osnovih alata pri kreiranju
prikaza sa više kolona, navigacionih toolbar kontrola...
Sintaksa je:
? float : left | right | none
? Podrazumevano: none
? Ne nasleduje se
12:14 37
Na primer
12:14 38
5/5/2015
20
? Naziv potice od ponašanja tj. elementi dobijaju svojstvo
nalik ostrvu u nekom toku.
? Zapazite da slika menja poziciju u odnosu na normalni
tok uticuci na okolne elemente. Zato se koristi analogija
sa tokom u kome je element koji je oznacen sa float
zapravo ostrvo u toku koji ga okružuje.
? Plutajuci element ostaje deo sadržaja roditeljskog
elementa.
? Važno je zapaziti i da plutajuci element predstavlja deo
roditeljskog elementa tj smešten je u oblast tog
elementa.
12:14 39
Primer
? Za razliku od cistog html-a, u kom smo mogli postavljati
samo sliku unutar paragrafa, uz pomoc CSS-a to se može
izvesti i sa bilo kojim drugim elementom ukljucujuci i
elemente koji sadrže tekst.
12:14 40
em {
float: right;
margin: 10px;
width: 200px;
color: #FFF;
background-color: #9D080D;
padding: 4px;
}
p {
padding: 15px;
background-color: #FFF799;
border: 2px solid #6C4788;
}
5/5/2015
21
Primeri
12:14 41
12:14 42
5/5/2015
22
Iskljucivanje plutanja-clear
? Svojstvo float se može pridružiti elementu kako bi
element bio plutajuci u odnosu na okolni sadržaj.
Medutim, potrebno je nekada ovo svojstvo i iskljuciti
kako bi se dobila podrazumevana tj. prethodna svojstva
prikaza. Ovo se postiže pomocu svojstva clear. Sintaksa
je:
? clear: left | right | both | none
? Podrazumevano: none
? Primenjuje se na block elemente, a ne nasleduje se.
12:14 43
Primer
? Ukoliko je slika sa
svojstvom float, onda bi
oko slike bio sav sadržaj
koji sledi. U primeru koji se
navodi, float se iskljucuje
od primene pocev od
elementa h2 i to primenom
svojstva clear.
img {
float: left;
margin-right: 10px;}
h2 {
clear:none;
margin-top: 2em;}
</style> 12:14 44
5/5/2015
23
Više plutajucih elemenata
? Primena float svojstva ima znacajnu primenu u dizajnu
modernih UI, recimo pri implementaciji horizontalnih
menija.
? Kada je više elemenata sa svojstvom float, u pozadini,
vrši se kompleksno racunanje izgleda stranice. U osnovi
se postiže takav prikaz da se u definisanoj visini bloka
postavljaju float elementi s leva na desno.
12:14 45
12:14 46
5/5/2015
24
Primer horizontalog menija
12:14 47
<ul>
<li><a href="#">File</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Format</a></li>
<li><a href="#">View</a></li>
<li><a href="#">Help</a></li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
float: left;
margin: 1;
padding: 5 10;
background-color:gray;
}
a:link {
color:white;}
a:visited {
color: white;}
Primeniti clear na sve elemente koji slede
iza menija!
Zadatak
? Napisati meni koji ce izgledati kao na slici:
12:14 48
5/5/2015
25
Kreiranje kolona
? Svojstvo float se može koristiti i kod dizajna stranica u
kojima se sadržaj prikazuje u više kolona.
? Za dve kolone moguce je primeniti 3 scenarija:
1. Jedan div element uciniti plivajucim, a dodati širu
marginu sa strane tekst elementa koji okružuje div.
2. Postaviti float svojstvo na oba div elementa uz levu ili
desnu stranu.
3. Postaviti float svojstvo na jedan div levo odnosno na
drugi div desno.
12:14 49
#kol1 {
width: 55%;
float: left;
padding 1em;
margin: 1em;
border: dotted 1px
lightblue;
color: blue;
}
12:14 50
5/5/2015
26
Primer
? 1. Na testKolona start.html uvesti dve kolone: prvu na #product a
drugu na #testimonials.
? Resenje:
? #products {
? background-color: #FFF;
? line-height: 1.5em;
? padding: 1em 2%;
? border: double #FFBC53;
? margin: 0 2% 1em;
? clear: both;
? width: 55%;
? float: left;
? }
12:14 51
****Vrste pozicioniranja
? Sintaksa:
? position: static | relative | absolute | fixed
podrazumevano: static
? Bez nasledivanja
? static - normalna šema pozicioniranja u kom su
elementi pozicionirani u normalnom toku dokumenta.
? relative - relativno pozicioniranje pomera okvir
elementa relativno u odnosu na njegovu originalnu
poziciju.
12:14 52
5/5/2015
27
? absolute - ovako pozicionirani elementi se ne obraduju
u okviru toka dokumenta, a pozicioniraju se u odnosu na
element koji ih sadrži. Ovako pozicionirani elementi ne
uticu na vizuelni raspored okolnih elemenata, tj.
zasebni su u odnosu na druge.
? fixed - ostaju na istoj poziciji i tokom skrolovanja.
Fiksni su u odnosu na prozor citaca.
12:14 53
Definisanje pozcije
? Pošto se definiše nacin pozicioniranja, postavljaju se
vrednosti za pozcije koristeci sledeca vrednosti za
sledeca svojstva:
? top, right, bottom, left
? vrednost: broj | procenat | auto
? Podrazumevana vrednost: auto
? Nema nasledivanja.
12:14 54
5/5/2015
28
Relativno pozicioniranje
? Relativno pozicioniranje vrši pozicioniranje u odnosu na poziciju
koja bi inace bila tj. u odnosu na podrazumevanu poziciju.
? CSS:
? position: relative;
top: -0.2em;
left: 0.2em;
color: blue;
background-color:lightgray;
12:14 55
Apsolutno pozicioniranje
? Apsolutno pozicioniranje se obavlja u odnosu na poziciju
roditeljskog elementa.
? CSS:
? position: absolute;
top: -0.2em;
left: 0.2em;
color: blue;
background-color:lightgray;
12:14 56
5/5/2015
29
Kontekst pozicioniranja
? Po specifikaciji, pozicija nekog elementa se odreduje u
odnosu na element koji ga sadrži.
a) Ako element nije sadržan unutar drugog pozicioniranog
elementa, tada ce biti relativno pozicioniran u odnosu na
inicijalni HTML blok.
b) Ali, ako element ima pozicionirane pretke elemente, koji
imaju relativnu, apsolutnu ili fiksnu poziciju, element se
pozicionira relativno u odnosu na ivice tog elementa.
? Na primer, ako p element sadrži em element koji je
apslolutno pozicioniran, a pri tome p element nije
pozicioniran i nema drugih pozicioniranih elemenata
predaka, tada ce em element biti relativno pozicioniran u
odnosu na blok u kom je sadržan.
12:14 57
Pozicioniranje u
zavisnosti od pozicije
roditeljskog elementa
#a{
position: absolute;
top: 10%;
left: 10%;
}
#b{
position: absolute;
bottom: 10%;
right: 10%;
}
12:14 58
Pasus nije pozicioniran, pa su pozicije slika u pasusu
definisane u odnosu na prozor citaca.
Pasus je pozicioniran, pa su pozicije slika u pasusu u
odnosu na sam pasus.
5/5/2015
30
Primer sa dva elementa
? HTML:
<div id="zeleniKvadrat">
van paragrafa
<p
id="oznaceniParagraf">Neki
tekst</p>
van paragrafa
</div>
? Pozicioniranje 1.
#zeleniKvadrat{
width:150px;
height:150px;
border:solid green 3px;
position: absolute;
top:5%;
left: 5%;
}
#oznaceniParagraf{
border:solid red 1px;
/*static je podrazumevano:
position: static;
top:50px;
left: 50px;*/
color:red;
}
12:14 59
12:14 60
#oznaceniParagraf{
position: fixed;
top:5px;
left:5px;
color:red;
}
#oznaceniParagraf{
position: absolute;
top:5px;
left:5px;
color:red;
}
#oznaceniParagraf{
position: relative;
top:5px;
left:5px;
color:red;
}
5/5/2015
31
? Ako se izbaci definicija pozicije za zeleni kvadrat, tj ostane samo CSS kod:
#zeleniKvadrat{ width:150px; height:150px; border:solid green 3px;}
Menja se izgled za apsolutno pozicioniranje paragrafa u odnosu na zeleni kvadrat.
Fiksno i relativno pizicioniranje ostaje isto tj u odnosu na prozor citaca i u
odnosu na
„normalnu“ poziciju. Zapravo, u ovom slucaju apsolutno pozicioniranje postaje isto
što i fiksno.
12:14 61
#zeleniKvadrat{
width:150px;
height:150px;
border:solid green 3px;
}
#oznaceniParagraf{
position: absolute;
top:5px;
left:5px;
color:red;
}
Z-index
? Elementi koji koriste apsolutno pozicioniranje mogu
doci u koliziju medusobno tj do preklapanja. Postoji
definisani redosled koji u prikazu definiše redosled
iscrtavanja tj. koji ce element iznad odnosno ispod.
? Na primer:
? <img id="a" src="a.png"/>
<img id="b" src="b.png"/>
<img id="c" src="c.png"/>
12:14 62
Preklapanje dobijeno apsolutnim pozicioniranjem, bez uticaja
na z-indeks
5/5/2015
32
? Redosled koji je podrazumevan se može promeniti
postavljanjem svojstva z-index.
? Brojevi sa vecim indeksom ce biti iscrtavani posle onih
sa manjim brojem i prirodno ce biti pozicionirani iznad
njih.
? Ukoliko u prethodnom primeru želimo da obrnemo
redosled potrebno je uvesti sledece stilove:
12:14 63
#a{ z-index: 2; }
#b{ z-index: 3; }
#c{ z-index: 1; }
5/5/2015
1
Primeri prakticnih šablona
web stranica
12:14 1
Uvod
? Web stranice se prikazuju na razlicitim uredajima i
rezolucijama, od malih na mobilnim uredajima do onih
ogromnih na bioskopskim platnima.
? Osim zahteva da prikaz bude adekvatan za tako razlicite
„uredaje“, neophodno je i da korisnik može da
podešava velicinu prikazanog teksta koji takode utice na
prikaz stranice.
? Vremenom se izdvojilo nekkoliko standardnih prikaza
stranica koji se koriste u razlicitim slucajevima:
12:14 2
5/5/2015
2
Vrste prikaza (dizajna)
stranica
? Fiksni prikaz – fiksna širina stranice u pikselima
bez obzira na velicinu citaca ili velicinu teksta.
? Fluidni prikaz – prikaz se menja istovremeno tj.
proporcionalno sa promenom velicine prozora
citaca.
? Elasticni prikaz – promena prikaza je
proporcionalna, a zasnovana na velicini teksta.
? Hibridni prikaz – kombinuje fiksne i skalabilne
oblasti.
12:14 3
Dizajn fiksnim
pozicioniranjem
12:14 4
5/5/2015
3
? Fiksni dizaj, baš kako ime govori, kreira se tako da bude
fiksna širina stanice u pikselima. Ovako dizajnirana stranica
dozvoljava laku kontrolu medusobnih odnosa velicina
elemenata na stranici, poravnavanja i dužine linije. Ovaj
prikaz je postao popularan u praksi usled cinjenice da su
korisnici do sada uglavnom imali tradicionalni pogled na
Web sa racunarskih monitora, a dizajneri nastoje da
reprodukovani dizajn tacno odgovara dizajniranom na
svakom ekranu tj. prikazu. Naravno, ovakav dizan ne može
da odgovori sve vecim potrebama korisnika.
? Kada se definiše prikaz fiksne širine treba definisati
nekoliko stvari. Prvo treba odrediti širinu stranice. Vecina
monitora ima rezoluciju 1024x768 I vecu, pa se u vecini
sajtova širina postavlja 960px širine. Osim ove širine, cesto
se koriste i stranice sa manje piskela, recimo 800px, širine
što je dizajnerska odluka prvenstveno.
12:14 5
? Druga stvar koja se mora definisati je pozicija stranice u
odnosu na širinu prozora. Podrazumevano ta pozicija je
levo i u tom slucaju sav prazan prostor je sa desne
strane. Cešce se koristi centralna pozicija stranice kada
se prazan prostor deli na ove strane.
? Dalje, širina prozora citaca ne mora biti dovoljna da se
obuhvati celokupna širina stranice (što se može dogoditi
i zbog podešavanja velicine fonta u prikazu citaca, a ne
samo rezolucije ekrana). U tom slucaju deo sadržaja sa
desne strane nece biti vidljiv, mada ce postojati
horizontalni skrol-bar, ipak prvi pogled na stranicu nece
biti kompletan.
12:14 6
5/5/2015
4
Dve kolone sa apsolutnim
pozicioniranjem
? #container{
width:900px;
...
}
12:14 7
? #container{
width:900px;
...
margin:0 auto;
}
12:14 8
5/5/2015
5
? Zatim se dodaje prva
kolona pozicionirana sa
leve strane kontejnera i
širine od 200 piksela
? #container {
...
position: relative;
? }
#col1 {
position: absolute;
left: 0px;
width: 200px;
}
12:14 9
? Druga kolona se dodaje takode
apsolutinim pozicioniranjem u
odnosu na kontejner.
Pozicioniranje se vrši
podešavanjem leve margine u
odnosu na kontejner. Imajuci u
vidu da je širina prve kolone
200px, margina treba da bude
veca od 200px za prostor kojim ce
biti razdvojene kolone. U našem
slucaju to je uradeno primenom
margin-left:220. Isti efekat bi bio
primenom istog svojstva kao i u
slucaju prve kolone.
12:14 10
#col2 {
position: absolute;
margin-left:220;
/* ili left: 220px; */
width: 680px;
}
5/5/2015
6
Dve kolone fiksne širine uz
primenu svojstva float
12:14 11
#container{ margin: 0 auto; width: 900px; }
<body>
<div id=”container”>
<div id=”header”> . </div>
<div id=”navigation”> . </div>
<div id=”content”>
<div id=”col1”> .</div>
<div id=”col2”> .</div>
<div id=”footer”> .</div>
</div>
</div>
</body>
12:14 12
#header{
background: #ddd;
padding: 20px;
}
#content{
float: left;
width: 900px;
background: #fff;
}
#col1{
float: left;
width: 200px;
padding: 20px 0;
margin: 0 0 0 20px;
}
#col2{
float: right;
width: 640px;
padding: 20px 0;
margin: 0 20px 0 0;
}
#footer{
clear: both;
background: #ddd;
padding: 10px;
padding: 10px;
}
5/5/2015
7
12:14 13
? Na kraju, kod dopunjujemo navigacijom:
? <div id="navigation">
<ul>
<li><a href="#">O Školi</a></li>
<li><a href="#">Studiranje</a></li>
<li><a href="#">Upis</a></li>
<li><a href="#">E - ucenje</a></li>
</ul>
</div>
? ...
? #navigation{
float: left;
width: 900px;
background: #555;
}
#navigation ul {
list-style-type:
none;
margin: 0;
padding: 0;
}
#navigation ul li{
display: inline;
}
? #navigation li a{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration:
none;
border-right: 1px
solid #fff;
}
#navigation li a:hover {
background: #999;
}
12:14 14
5/5/2015
8
12:14 15
Fluidni dizajn
12:14 16
5/5/2015
9
? U fluidnom dizajnu, oblast stranice, odnosno kolone u
stranici imaju promenljivu širinu popunjavajuci
celokupan prostor citaca. Drugim recima prati se
podrazumevano ponašanje normalnog toka elemenata u
pogledu popunjavanja stranice. Ne vrši se kontrola
širine ili prelom linija tj. dozvoljeno je da tekst menja
tok u skladu sa medijumom za prikaz.
? Na primer W3.org
12:14 17
? Ovaj stil dizajna stranica je jedan od stilova koji „vode
racuna o korisnicima“. Danas postoji velika raznovrsnost
citaca, posebno onih koji su manji od tradicionalnih
monitora, što pomera zahteve korisnika ka dizajnu koji je
fleksibilan na širinu.
? Prednosti:
? Fluidni dizajn omogucava da se ostvari veza sa prirodom
citaca.
? Izbegava se potencijalno nekontrolisani prazni prostor
pošto se popunjava ceo prozor.
? Na desktop citacima, korisnik može kontrolisati širinu
prozora i sadržaja.
? Nema horizontalne skrolbarove.
12:14 18
5/5/2015
10
? Nedostaci:
? Na velikim monitorima, dužine linija mogu biti veoma
duge i teške za citanje.
? Ovaj dizajn je delimicno nepredvidiv. Elementi mogu
biti raštrkani ili sabijeni u slucaju citaca ekstremnih
dimenzija.
? Mnogo je teže postici željeni prazni prostor.
? Mnogo je više matematike ukljuceno u racunanje
velicina.
12:14 19
Kreiranje fluidnog dizajna
? Kreiranje ovakvog dizajna podrazumeva definisanje
širine u procentima. Takode se može izbaciti definisanje
širine tj upotreba atributa width, ako je
podrazumevana širina auto tako da element popunjava
raspoloživu širinu prozora ili roditeljskog elementa.
? Na primer, u slucaju dizajna sa dve kolone, širina svakog
div elementa je specificirana procentom raspoložive
ukupne širine. Glavna kolona je 70% širine prozora,
desna kolona je 25% širine prozora a preostalih 5% se
koristi kao margina izmedu kolona, bez obzira na
velicinu prozora.
12:14 20
5/5/2015
11
? Sadržaj u dve kolone
12:14 21
12:14 22
#container{
margin: 0 auto;
width: 100%;
}
#header{
background: #ddd;
padding: 20px;
}
#navigation{
float: left;
width: 100%;
background: #333;
}
#content{
float: left;
width: 100%;
background: #FFF;
}
#col1{
float: left;
width: 25%;
}
#col2{
float: right;
width: 70%;
}
#footer{
clear: left;
background: #ddd;
text-align: center;
padding: 10px;
}
5/5/2015
12
12:14 23
? Tri (ili više) kolona, sve kolone uz levu ivicu
12:14 24
#col1 {
float: left;
width: 27%;
margin: 0 3% 0 0;
}
#col2 {
float: left;
width: 47%;
margin: 0 3% 0 0;
}
#col3 {
float: left;
width: 20%;
}
5/5/2015
13
12:14 25
? Tri kolone koje su
apsolutno pozicionirane
? HTML:
? <div id="container">
<div id="header"> </div>
<div id="content">
<div id="col1"> </div>
</div>
</div>
12:14 26
CSS:
#container {
margin: 0 auto;
width: 900px;
}
#content {
position: relative;
width: 900px;
}
#col1 {
position: absolute;
top: 0; left: 0;
width: 25%;
}
#col2 {
position: absolute;
top: 0; left: 30%;
width: 45%;
}
#col3 {
position: absolute;
top: 0; left: 80%;
width: 20%;
}
5/5/2015
14
12:14 27
Elasticni dizajn
12:14 28
5/5/2015
15
? Treci dizajnerski pristup sažima osobine promenljive
velicine teksta sa predvidljivom dužinom linije.
? Ovaj dizajn povecava ili smanjuje velicinu teksta.
? Ako korisnik ucini tekst vecim, okvir koji sadrži taj tekst
ce se proširiti proporcionalno. Slicno, ako korisnik ucini
tekst veoma malim, okvir za taj tekst ce se takode
smanjiti.
? Rezultat je da dužina linije ostaje ista bez obzira na
velicinu teksta. Ovo je prednost u odnosu na fluidni
dizajn u kom dužine linije mogu postati veoma duge
odnosno u odnosu na fiksni dizajn kada veliki tekst može
postati sa neocekivano malim brojem karaktera po
liniji.
12:14 29
? Kada velicina teksta postane veca, veca je i površina
koja tekst sadrži, tako prelomi linija ostaju na istim
pozicijama.
12:14 30
5/5/2015
16
? Opcija „ full-page zoom“ kod novijih citaca je
zasnovana na svojstvima elasticnog dizajna. U tom
„stanju“ sve web stranice se pojavljuju skalirane
proporcionalno na osnovu velicine podrazumevanog
fonta.
? Pristalice elasticnog dizajna vezuju proporcije stranice
za proporcije tipografskog sadržaja. Imajuci u vidu
današnje trendove i mobilne uredaje ovo ima i smisla.
Ipak, ovaj dizajn ima nedostataka kao u slucaju fiksnog
dizajna sa velikim tekstom. Osim toga, sa promenom
teksta se menja stranica, ali slike i filmovi ne.
12:14 31
? Prednosti
? Omogucava konzistentan i ocekivani prikaz uz
omogucavanje fleksibilnosti velicine teksta.
? Jaca kontrola dužine linije teksta u odnosu na fluidne i
fiksne prikaze.
? Nedostaci
? Slika i video se ne skaliraju sa promenom velicine
teksta.
? U slucaju najvecih tekstova, velicina sadržaja može biti
veca od velicine prozora citaca
12:14 32
5/5/2015
17
? Nije tako od koristi kada se koristi za razlicite uredaje
tj citace razlicitih velicina.
? Teži za kreiranje od dizajna sa fiksnim prikazom.
12:14 33
Kreiranje elasticnog dizajna
? Kljuc za elasticni dizajn je jedinica mere em, kojom se
definiše velicina teksta.
? Mada se em jedinica koristi za definisanje velicine
fonta, u ovom dizajnu dimenzije elemenata koji su
kontejneri tj sadrže druge elemente treba da budu u em
jedinicama.
? Na primer, ako je velicina teksta u sekciji body 16px,
što je u vecini slucajeva podrazumevano (1em), a
stranica je podešena na širinu od 40em, rezultujuca
širina ce biti 640 px. (40em x 16px/em).
? Ako korisnik promeni velicinu teksta na 20 px, stranica
se poveca na 800px.
12:14 34
5/5/2015
18
? #container{
margin: 0 auto;
width: 50em;
}
#navigation{
float: left;
width: 50em;
background: #333;
}
#content{
float: left;
width: 50em;
background: #FFF;
}
#col1{
float: left;
width: 15em;
padding: 1em 0;
margin:0 0 0 0,5em;
}
#col2{
float: right;
width: 33em;
padding: 1em 0;
margin:0 0.5em 0 0;
}
#footer{
clear: left;
background: #ddd;
text-align: center;
padding: 1em;
}
12:14 35
12:14 36
5/5/2015
19
Hibridni dizajn
12:14 37
? Dizajn koji koristi kombinaciju piksela, procenata i em
jedinica mere se po nekada naziva hibridni dizajn.
? U mnogim scenarijima, ima smisla koristiti mešavinu
fiksnih i skalabilnih sadržaja. Na primer, ako imate sa
strane prostor (sidebar) koji sadrži banere sa oglasima
koji moraju ostati odredene velicine. Tada možete
definisati da je sidebar sa posebnom širinom iskazanom
u px, a dozvoljavajuci sledecoj koloni da se podešava na
osnovu preostalog prostora.
12:14 38
5/5/2015
20
? U mnogim scenarijima, ima smisla koristiti mešavinu
fiksnih i skalabilnih sadržaja. Na primer, ako sa jedne
strane treba postaviti kolonu fiksne širine (engl.
sidebar) koja sadrži banere sa oglasima koji moraju
ostati tacno odredene velicine. Tada se može definisati
da je ta kolona sa posebnom širinom iskazanom u px, a
pri tome dozvoljavajuci sledecoj koloni da se podešava
na osnovu preostalog prostora.
? U narednom primeru je prikazana realizacija
prethodnog scenarija, tj. kada je prva kolona fiksne
širine 200px u koju su smeštene slike širine 150px.
Druga kolona ce biti proširena do širine prozora.
12:14 39
? <body>
<div id=”container”> . </div>
<div id=”header”> . </div>
<div id=”navigation”> . </div>
<div id=”content”>
<div id=”sidebar”> .</div>
sadržaj druge kolone
<div id=”footer”> .</div>
</div>
</body>
12:14 40
#container{
margin: 0 auto;
width: 100%;
}
#header{
background: #ddd;
padding: 20px;
}
#content{
width: 90%;
padding: 5%;
background: #ddd;
}
img{
position: relative;
left:20px;
}
#sidebar{
float: left;
/*float: right;*/
width: 190px;
padding: 5px 0;
background:lavender;
}
#footer{
clear: both;
background: #ddd;
text-align: center;
padding: 10px;
}
5/5/2015
21
12:14 41
***Definisanje pozadina
kolonama
? Dodavanje boja kolonama utice predstavlja efikasan
nacin da se istakne podela u podacima uz malo
ukljucenja boja.
? U prethodnim primerima, ako bi ukljucili ivice oko
kolona zapazili bi da se cesto elementi kolone
zaustavljaju pre samog dna stranice.
? Ne postoji podrška za postavljanjem visine kolona
elementa na 100% visine strancice. Takvo rešenje bi bilo
moguce uz upotrebu JavaScript-a ili nekog dopunskog
frejmorka.
? Postoje i rešenja koja mogu zadovoljiti u slucaju
šablona sa fiksnim širinama.
12:14 42
5/5/2015
22
? Potrebno je da se kreira jedna slika koja ce sadržati boje i
proporcije kolona sa tacnom širinom i nebitnom visinom.
Replikacijom, tj ponavljanjem te slike po vertikali dobija
se pozadinska boja. Ovo rešenje primenio je prvi Dan
Cederholm 2004. u knjizi Web Standards Solutions.
? Ovaj metod je primenljiv samo u slucaju kada je širina
kolona odnosno stranice definisana u pikselima.
? Na primer, stil bi bio sledeci:
? #omotac {
width: 960px;
margin: 0 auto;
background-image: url(two_column.gif);
background-repeat: repeat-y;
}
12:14 43
? #content{
float: left;
width: 900px;
background-image: url(fix2kol.jpg);
}
12:14 44
5/5/2015
23
Pozadina kolona kod fludinog
dizajna
? U fluidnom dizajnu nije unapred poznata širina kkolona,
ali su poznate „tacke“ u koje su granice izmedu kolona.
? Na primer, ako je naš dizajn web stranice sastavljen od
dve fluidne kolone:
12:14 45
#col1{
float: left;
width: 27.5%;
margin: 0 2.5% 0 0;
}
#col2{
float: right;
width: 67.5%;
..margin: 0 0 0 2.5%;
}
? #content{
float: left;
width: 100%;
background-image: url(fluid2col.jpg);
background-position: 30%;
}
12:14 46
5/5/2015
24
Tri kolone
? Za tri kolone postupak je slican, medutim u ovom
slucaju nam treba dve pozadinske slike. Jedna slika
obezbeduje boju za levu kolonu, pri cemu je desni deo
transparentan. Druga slika daje boju za desnu kolonu a
levi deo je transparentan
12:14 47
5/5/2015
1
CSS tehnike
12:16 1
Uvod
? Prvi deo je posvecen oslobadanju dizajna od
primenjenog CSSa tj bavi se resetom CSSa, zatim
upotrebom slika umesto teksta (ako je to neophodno) i
redukovanjem broja zahteva od servera.
? Razmatraju se tehnike korišcenja sprajtova, i na kraju..
? Bavimo se posebnim dizajniranjem formi i tabela.
12:16 2
5/5/2015
2
CSS reset - 1
? Kao što je vec poznato i objašnjeno na startu kada smo
ucili o CSSu, citaci imaju sopstvene ugradene stilove koji se
koriste za prikaz HTML elemenata. Ovi stilovi imaju niži
prioritet od onih koji se navedu u izvornom kodu i
predstavaju nacin prikaza elemenata kada sopstveni stilovi
nisu prisutni.
? Na primer, h1 element ima definisani stil koji tekst oznacen
sa h1 prikazuje boldovan, odvojen od sustednih elemenata i
velikog fonta u odnosu na normalni tekst. Stvarna velicina
fonta i prostor koji odvaja h1 je definisan podrazumevanim
stilovima citaca, što rezultuje i razlicit prikaz sadrzaja
html koda u razlicitim citacima.
? Takode, elementi u nekom dokumentu mogu naslediti neke
stilove od stilova ugradenih u citac, tako prouzrokujuci
neocivani rezultat.
12:16 3
CSS reset - 2
? Zbog toga, mnogi dizajneri koriste tzv. CSS Reset kako bi
se vec postojeci stilovi poništili.
? CSS Reset je kolekcija stilova koji preklapaju sve
ugradene stilove u citac tako kreirajuci pocetni
maksimalno nezavisni stil.
? CSS Reset zahteva da se eksplicitno specificira font,
text, margina i peding za svaki element u dokumentu.
? Najpopularniji reset je napisao Eric Meyer. Taj kod
dajemo u nastavku.
12:16 4
5/5/2015
3
? /*http://meyerweb.com/eric/tools/css/rese
t/ v2.0 | 20110126 License: none (public
domain) */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt,
var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
? /* HTML5 display-role reset for older
browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ''; content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
12:16 5
? Da bi se primenio reset, navedeni kod sa stilovima treba
se postavi na vrh sopstvenih stilova.
? Više o ovome možete procitati na:
? meyerweb.com/eric/tools/css/reset/
meyerweb.com/eric/thoughts/2007/04/18/resetreasoning/
12:16 6
5/5/2015
4
Zamena teksta slikama
? Pre nego što su web fontovi postali upotrebljivi na nacin
kako danas fukncionišu, koristile su se slike svaki put kada
smo želeli ili morali da koristimo specijalne fontove.
? Danas je to redak slucaj. Ipak, kada se koriste stilizovani
logo neke kompanije ili uobicajene ikone umesto teksta,
potrebno je ubaciti slike.
? Izbacivanje odredenog teksta i njegova zamena sa img
elementima u html izvornom kodu nije dobro rešenje, jer
se na taj nacin gubi sadržaj.
? Bolje rešenje je upotreba CSSa na nacin da se izvrši zamena
sa slikom. Na taj nacin se u vizuelnoj predstavi pojavljuju
slike a istovremeno se cuva ukupan sadržaj, što daje
mogucnosti pretrage, citaca sa ekrana, pomocnih alatki i
lakše održavanje sadržaja.
12:16 7
? Jedan dobar nacin za to je predstavio Scott Kellum, zasniva
se na korišcenju svojstva text-indent tako da se tekst
pomeri u stranu van vidljivog pravougaonika.
? Neka je potrebno umesto naziva kompanije „123netdoo“,
koji se nalazi u naslovu web stranice, postaviti logo te
komanije, i neka je pocetni HTML odnosno CSS kod:
? HTML
? <h1 id="logo">123netdoo</h1>
? CSS
? h1#logo {
width: 200px;
height: 50px
}
12:16 8
5/5/2015
5
? Svojstvom text-indent pomera se rec rec „123netdoo” udesno
za citavu širinu bloka koji se koristi, što je u kodu oznaceno
sa 100%, tako da ce rec biti izvan vidljivog pravougaonika.
? Istovremeno se postavlja pozadinska slika primenom
background svojstva, tako da se naslov minimalno pomeri, a
istovremeno pojavi pozadinska slika u naslovu.
? CSS
? h1#logo {
width: 200px;
height: 50px
background: url(123netdoo.png) no-repeat;
text-indent: 100%;
white-space: no-wrap;
overflow: hidden;
}
12:16 9
? Takode, postavljanjem svojstva white-space na vrednost nowrap
osiguravamo da u slucaju dužeg stringa tekst nece biti
prelomljen i na taj nacin postati vidljiv. Na kraju, postavkom
overflow: hidden daje se instrukcija citacu da bilo šta što ce
se naci izvan okvira elementa, u ovom slucaju je to samo tekst
u h1, nece biti prikazan.
12:16 10
5/5/2015
6
? Osim pomenute CSS tehnike mogu se naci i druge. Jedna
od najpopularnijih je tehnika Phark koji koristi jako velike
negativne vrednosti za text-indent, tipicno: -9999px, kako
bi „izgurao“ HTML tekst izvan leve ivice vidljive oblasti.
? h1#logo {
width: 200px;
height: 50px
background: url(123netdoo.png) no-repeat;
text-indent: -9999px;
}
? Nedostatak ove tehnike je što se citaci forsiraju da
racunaju, a neki cak iscrtavaju velike elemente iako oni
nece biti ukljuceni u prikaz, pa se na taj nacin gubi na
efikasnosti.
12:16 11
CSS sprajtovi
? Vreme pristupa nekoj web stranici zavisi od kolicine
podataka koje je potrebno ucitati da bi se stranica
prikazala. Osim kolicine podataka na vreme ucitavanja
utice i broj zahteva ka serveru koji prati sadržaj. Jedan od
nacina da se smanji broj zaheva ka serveru je da se smanji
broj slika na stranici, imajuci u vidu da svaka slika znaci
posebnu vezu ka serveru.
? U slucaju HTML stranica koje koriste puno manjih slika,
može se umesto više manjih slika koristiti jedna velika
zajednicka slika, koja ce sadržati sve manje slike, koje
tada nazivamo sprajtovima. Pomocu pozicioniranja
pozadinske slike elementa, tj. koristeci svojstvo
background-position, iz velike slike se može izdvojiti svaki
sprajt posebno. Na ovaj nacin se izbegava otvaranje više
konekcija zbog više manjih, a time se uvecava efikasnost.
12:16 12
5/5/2015
7
? Na primer, ako se na sajtu koriste slicice za
predstavljanje dvanaest cesto korišcenih linkova,
umesto dvanaest posebnih slika moguce je koristiti
jednu, kao na slici.
12:16 13
? Slika sadrži 4 kolone i 3 reda dimenzije 300 x 400
piksela, tako da je svaki sprajt dimenzije 100 x 100
piksela.
? Izdvajanje odredenog sprajta iz slike se izvodi
pozicioniranjem pozadinske slike u HTML elementu,
imajuci u vidu da se x koordinata za pozicioniranje
proteže s leva na desno, pocev od vrednosti 0, a y
koordinata odozgo na dole, takode od vrednosti 0.
12:16 14
5/5/2015
8
HTML kod:
<li><a href=http://twitter.com
class="sprites1 twitter">Twitter</a></li>
<li><a href=http://facebook.com
class="sprites1 fb">Facebook</a></li>
<li><a href=https://www.behance.net
class="sprites1 be">Behance</a></li>
<li><a href=https://www.linkedin.com
class="sprites1 linkedin">LinkedIn</a></li>
<li><a href=https://vimeo.com
class="sprites1 vimeo">Vimeo</a></li>
<li><a href=http://google.com
class="sprites1 google">Google</a></li>
<li><a href=http://www.skype.com
class="sprites1 skype">Skype</a></li>
12:16 15
CSS kod:
sprites1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
li a {
display: block;
width: 100px;
height: 100px;
background-image: url(ikone.png);
}
li a.twitter {
background-position: 0 0;
}
li a.fb {
background-position: -100px 0;
}
li a.be {
background-position: -200px 0;
}
li a.linkedin {
background-position: 0px -100px;
}
li a.vimeo {
background-position: -200px -100px;
}
li a.google {
background-position: -100px -200px;
}
li a.skype {
background-position: 0 -300px;
Svakoj stavci u listi je pridružen element a,
dimenzije 100x100 piksela koji dimenzijom
odgovara jednom sprajtu. Takode, svaki link
unutar stavke ima istu pozadinsku sliku
ikone.png, koja sadrži sve sprajtove, što je
definisano CSS kodom. Na ovaj nacin, samo je
jedna slika ucitana pri ucitavanju stranice tj.
samo je jedna dodatna konekcija otvorena.
Stilizovanje formi
? Inicijalni izgled web formi je takav da bi ga svakako trebalo
dodatno stilizovati.
? Razlog nije samo vizuelni izgled nego pre svega lakši i brži unos
podataka.
? Za stilizovanje formi ne postoje neka specijalna svojstva; potrebno
je koristiti standardne boje, pozadinu, font, ivice i peding.
12:16 16
5/5/2015
9
? Unos tekstualnih podataka (text, password, email,
search, tel, url)
? Najcešce se podešavaju dimenzije, pozadinska svojstva,
ivice i margine. Može se stilizovati i unutrašnji tekst sa
bojom i fontovima.
? Element textarea
? Za ovaj element se vrše podešavanja kao i za prethodnu
grupu, ali sa dodacima. Na primer, ugradeno pravilo za
textarea znaci podrazumevanu primenu „monospace”
fonta, pa stilizacija obicno ukljucuje promenu fonta. Pošto
kontrola sadrži više linija teksta, obicno se definiše i visina
linije. Takode, neki citaci prikazuju u donjem desnom uglu
graficku oznaku koja ukazuje da se može menjati velicina,
što se može poništiti dodavanjem stila resize:none;
12:16 17
? Ulazna Dugmad (submit, reset, button)
? Dugmad su podrazumevano podešena tako da se velicina
kontrole prilagodava minimalnoj velicini teksta koji se
prikazuje. Neki citaci dodaju izvesni prostor - peding.
Svojsta koja se najcešce koriste za stilizaciju su: width,
height, border.
? Radio odnosno checkbox dugmad
? Dobra praksa je da se ovi elementi ne menjaju.
? Drop-down
? Obicno treba podesiti širinu i visinu ovih elemenata. Neki
citaci daju mogucnost da se upravlja bojom, pozadinskom
bojom, odnosno fontom, ali je jedno od najboljih rešenja
ne dirati ta svojstva tj. ostaviti ih pod kontrolom citaca
odnosno operativnog sistema.
12:16 18
5/5/2015
10
Grupisanje elemenata u formi
? Za grupisanje elemenata u formi koristi se HTML elemet
<fieldset>. Primenom ovog elementa iscrtava se
pravougaounik oko obuhvacenih elemenata.
Pravougaonik može imati i tekst kojim se dodatno
opisuje grupa. Dodatni tekst se oznacava posebnim
elementom <legend>.
12:16 19
Fieldset
? <fieldset>
<legend>Licni podaci:</legend>
Ime <input type="text"> <br>
Email <input type="text" > <br>
Telefon <input type="text"> <br>
</fieldset>
12:16 20
5/5/2015
11
? Element fieldset u novoj specifikaciji ima atribute:
? disabled – oznacava da je unos podataka za celu grupu
elemenata onemogucen. Npr.
<fieldset disabled>...
</fieldset>.
? form – oznacava formu kojoj pripada grupa kontrola. To
znaci da se van forme može definisati grupa koja bi
pripadala formi.
? name – ime grupe.
12:16 21
Label,for
? Element <label> definiše labelu za neki ulaz forme tj.
za neki <input> element. Element <label> ne nudi
nikakva posebna svojstva korisniku, osim što omogucava
kontrolu u slucaju klika mišem.
? Element label ima atribut for kojim se odreduje
element na koji se labela odnosi. Vrednost ovog atributa
treba da odgovara vrednosti atributa id ciljanog
elementa.
12:16 22
5/5/2015
12
? Jedan od nacina je i ugnježdavanje elementa za unos u
labelu, na taj nacin je iskorišceno da su labela i
element na koji se odnosi bliski. Na primer
12:16 23
<label>
<input type="radio" name="color" value="red"> Crvena
</label>
Primer
12:16 24
5/5/2015
13
12:16 25
<form action="" method="">
<h2>Podaci za unos</h2>
<ul>
<li>
<label for="form-name">Ime</label>
<input type="text" name="username“
id="form-name" class="textinput">
</li>
<li>
<label for="form-email">Email</label>
<input type="email" name="emailaddress“
id="form-email" class="textinput">
</li>
<li>
<label for="form-tel">Telefon</label>
<input type="tel" name="telephone“
id="form-tel" class="textinput">
</li>
<li>
<label for="form-komentar"> Komentar
</label>
<textarea name="story" maxlength="300“
id="form-komentar" rows="3" cols="30“
placeholder="Manje od 300 kar.">
</textarea>
</li>
<li>
<label for="sizes">Velicina</label>
<select name="size">
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<em>Standardne velicine</em>
</li>
<li>
<fieldset id="colors">
<legend>Boja</legend>
<ul>
<li>
<label>
<input type="radio" name="color“
value="red"> Crvena
</label>
</li>
<li>
<label>
<input type="radio" name="color"
value="blue"> Plava
</label>
</li>
<li>
<label>
<input type="radio" name="color„
value="black"> Crna
</label>
</li>
<li>
<label>
<input type="radio" name="color"
value="silver"> Srebrna
</label>
</li>
</ul>
</fieldset>
</li>
<li>
<fieldset id="Dodaci">
<legend>Features</legend>
<ul>
<li>
<label> <input type="checkbox„
name="feature" value="laces"> MP3
</label>
</li>
<li>
<label> <input type="checkbox"
name="feature" value="logo" checked>
Metalik </label>
</li>
<li>
name="feature" value="heels"> Aluminijum
</label>
</li>
<li>
name="feature" value="mp3"> Osiguranje
</label>
</li>
</ul>
</fieldset>
</li>
<li class="buttons">
<input type="submit" value="Naruci">
<input type="reset">
</li>
</ul>
</form>
Jedan postupak stilizacije formi
12:16 26
1. Osnovna podešavanja definišu stilove koji se odnose na podešavanje
elemenata celokupne stanice, naslova i listi. Takode, ovaj skup pravila treba da
sadrži pravila za form element, kao što su širina, pozadinska boja, peding i
slicno. U našem primeru je dodato svojstvo ogranicenog prikaza
overflow:hidden, kao i iskljucivanje plutajuceg rasporeda u stavkama liste.
ul li {
clear: both;
list-style:none;
}
form {
width: 35em;
border: 1px solid #333;
background-color: lightblue;
padding: 1em;
overflow: hidden;
}
? Nakon osnovne stilizacije dobijamo:
5/5/2015
14
? Sledeci korak bi bilo poravnavanje. Da bi izvršili poravnavanje
kontrola potrebno je da labele budu tacno odredene širine, ali
i da budu sa statusom plutajucih elemenata uz levu ivicu, dok
njihov sadržaj treba da bude poravnat uz desnu ivicu, tako da
budu blizu ulaznih kontrola na koje se odnose. Naravno, treba
dodati i malu marginu koja doprinosi osecaju razdvajanja po
kolonama.
? label {
float: left;
width: 7em;
text-align: right;
margin-right: 1em;
}
12:16 27
? Ocekivano je i da sve kontrole za unos teksta budu
poravnate, za to je potrebno definisati odredenu širinu
kontrola.
? Kontrola textarea se može dodatno podešavati
svojstvima margine, overflow i resize.
12:16 28
5/5/2015
15
? U nastavku cemo podesiti stilove za grupisane elemente
unutar kontrole fieldset, kao i za samu legendu koja se tice
ove kontrole. Umesto okvira sa naslovom videcemo da se
gurpa može organizovati na potpuno drugaciji vizuelni
nacin. Postavicemo tekst koji je u elementu legend u
vizuelno istu liniju kao i ostale labele, a opcije jednu do
druge, ne jednu ispod druge kako je porazumevano.
Krenimo redom. Prvo cemo iskljuciti okvir oko grupa.
? fieldset {
margin: 0;
padding: 0;
border: none;
}
? Zatim, vršimo formatiranje naziva grupa na nacin da bude
vizuelno isti kao i formatirane labele.
? legend {
width: 7em;
float: left;
margin-right: 1em;
text-align: right;
color: darkblue;
} 12:16 29
? Stavke u prvoj listi postavljamo u jednoj liniji, a u drugoj
listi jednu ispod druge poravnate uz levu ivicu.
? #colors label, #dodaci label {
float: none;
width: auto;}
#colors ul li{
display: inline;
margin-bottom: 0;}
? #dodaci ul {
margin-left: 6em;
}
#dodaci ul li {
margin-bottom: 0;
clear: none;
}
12:16 30
5/25/2015
1
XML
Osnove
15:40 1
Pojam - XML?
? Skracenica od:
? EXtensible
? Markup
? Language
? XML po W3C preporukama
Zoran Cirovic 15:40 2
5/25/2015
2
Svojstva XML-a - 1
? XML je danas postao de-facto standard za opis sadržaja i
strukture (tekstualnih i multimedijalnih) dokumenata i
razmenu dokumenatta naWeb-u
Markup omogucava
? specijalno znacenje podataka
? koristi se tag za predstavljanje markup-a
Extensible
? proširljiv jezik, dozvoljava definisanje novih tagova
? predstavlja meta jezik koji omogucava definisanje
drugih markup jezika
Struktura XML
dokumenta
5/25/2015
3
Jedan XML element
? XML dokument se sastoji iz teksta oraganizovanog uz pomoc tagova u
elemente
Prosti i složeni XML elementi
? Elementi su osnovni blokovi XML-a
? <pozdrav> Hello XML! </pozdrav>
? Složeni / kontejner element cini par tag-ova (pocetni i
krajnji tag) sa sadržajem
? Prost/prazan element obicno se za krajnji tag koristi
skracenica />
? <poruka/>
? <pozdrav tekst = “Hello XML” />
5/25/2015
4
Struktura dokumenta
Zoran Cirovic 7
? XML dokument sadrži jedan element koji
nema roditelja.
? To je prvi element i sadrži sve druge
elemente.
? Taj element nazivamo korenskim (engl. root).
15:40
<person>
<name>
<first_name>Alan</first_name>
<last_name>Turing</last_name>
</name>
<profession>computer
scientist</profession>
<profession>mathematician</profession>
<job>cryptographer</job>
</person>
Pravila XML dokumenata
15:40 8
5/25/2015
5
Reference - 1
Zoran Cirovic 9
? Znakovni podaci unutar elementa ne smeju da sadrže znak manje od (<),
vece, ampersend.. Ovaj karakter se uvek tumaci kao pocetak taga. Ako
želite da koristite baš ovaj karakter u vašem tekstu, možete koristiti
referencu <
? Kada neki parser cita dokument vrši se zamena < reference sa stvarnim
znakom < . Na primer:
? <SCRIPT LANGUAGE="JavaScript">
if (location.host.toLowerCase( ).indexOf("cafeconleche") < 0)
{
location.href="http://www.cafeconleche.org/";
}
</SCRIPT>
15:40
Reference - 2
Zoran Cirovic
? < < <
> >
& &
' ‘
" “
15:40 10
5/25/2015
6
Znaci navoda
? Vrednosti atributa moraju biti unutar znaka navoda.
Moguce je koristiti jednostruke ili dvostruke znake
navoda:
<ime="Krcun"> ili:
<ime='Krcun'>
? Dupli znaci navoda su cešci. Nekada je neophodno koristiti
jednostruke kao u sledecem primeru:
? <ime='Slobodan "Krcun" Penezic'>
Komentari
Zoran Cirovic
? 
? Koristi se za dodatne informacije radi citljivosti. Sadržaj u komentaru ne može
imati
--, sve ostale markup karaktere može.
? Aplikacije za parsiranje mogu a ne moraju da prosledjuju informacije o
komentarima (misli se na sam sadržaj komentara).
? Primeri:
? 
? 
? 
? 
15:40 12
5/25/2015
7
Odeljak CDATA
Zoran Cirovic
? XML dokumenti imaju strogo definisana pravila. Ukoliko je potrebno da
dokument sadrži obican tekst i specijalne zankove, dokument postaje
teško citljiv. U takvim slucajevima može se koristiti odeljak CDATA koji
obezbedjuje da se sadržaj tretira kao sirovi tekst. Na primer.
<p>ovde ide neki tekst </p>
<pre>
<![CDATA[
<svg xmlns=“http://www.w3.org/2000/svg”
width=“12cm” height=“10cm”>
<ellipse rx=“110” ry=“130” />
<rect x=“4cm” y=“1cm” width=“3cm” height=“6cm” />
]]>
</pre>
15:40 13
Instrukcije obrade
Zoran Cirovic
? <?target data?>
? Instrukcije se koriste kako bi pružile informaciju aplikacijama za
obradu XML dokumenata. Mogu sadržati informacije kako dokument
obraditi, prikazati i slicno.
? Sastoje se iz dva dela: ime instrukcije /target/ i od podataka za
insturkciju /data/
? <?target data?>
? Target mora da zadovolji ista pravila za imena kao i elementi i
atributi, osim završnog karaktera za sekvencu ( ?> )
? Sav markap deo se ignoriše unutar konteksta instrukcije, ali po
preporukama W3C konzorcijuma ova sekvenca ne sme pocinjati sa
xml sekvencom.
15:40 14
5/25/2015
8
Deklaracija XML dokumenta
Svaki XML dokument mora da sadrži XML deklaraciju. Ovo je prva
konstrukcija u dokumentu.
Osnovni oblik XML deklaracije: <?xml version =“1.0”?>
Opcioni oblik XML deklaracije:
<?xml version =“1.0” encoding= “UTF-8”?>
<?xml version =“1.0” encoding= “UTF-16”?>
Opšti oblik XML deklaracije:
<?xml version='1.0'
encoding='character encoding'
standalone='yes|no'?>
Praznine u XMLu
? U XML-u je sacuvan prazan prostor. Korišcenjem XML-a
prazan prostor je prikazan u parsiranom dokumentu. Na
primer:
<body>Puno pozdrava iz Beograda</body>
ce u parseru biti:
Puno pozdrava iz Beograda
(to sa HTML-om nije slucaj)
5/25/2015
9
Prostori imena
Prostor imena - namespace
Zoran Cirovic
? Uloga prostora imena je:
? 1. da omoguci razlikovanje istoimenih elemenata
? 2. da grupiše srodne elemente
? Mnogi XML dokumenti kombinuju više grupa elemenata koji poticu od
razlicitih aplikacija. Na primer, neki XHTML dokument može da sadrži i
SVG slike i MathMl jednacine.
? U ovim slucajevima, dokument sadrži elemente koji moraju biti
jednistveni koristeci imenski prostor kome pripadaju.
? Takode, XML dozvoljava dizajneru da odabere sopstvene elemente, pa je
verovatna pojava istoimenih elemenata.
15:40 18
5/25/2015
10
Kvalifikovano ime
Zoran Cirovic 19
? XML prostor imena omogucava razdvajanje XML
elemenata koji imaju isto lokalno (kratko) ime, koristeci
jedinstveni identifikator resursa - URI(engl. Uniform
Resource Identifier).
? URI predstavlja jedinstveni string za definisanje punih
imena na osnovu lokalnih imena i URIa.
? Dakle, prostor imena i lokalno ime zajedno cine
globalno jedinstveno ime.
15:40
Korišcenje prostora imena
Zoran Cirovic
? Deklaracija prostora imena se vrši unutar pocetnog taga.
? Mapiranje prostora imena se vrši u jedan drugi string,
obicno kraci, poznat kao prefiks prostora imena.
? xmlns:prefix='URI'
? Ako se izostavi prefiks, na primer, xmlns='URI' , onda se
mapiranje vrši u podrazumevani prostor imena.
15:40 20
5/25/2015
11
Primer
Zoran Cirovic 21
? <rdf:RDF
xmlns:rdf="http://www.w3.org/TR/REC-rdfsyntax#">
<rdf:Description
about="http://www.cafeconleche.org/examples
/im pressionists.xml">
<title> Impressionist Paintings </title>
<creator> Elliotte Rusty Harold
</creator>
<description> A list of famous
impressionist paintings organized by
painter and date </description>
<date>2000-08-22</date>
</rdf:Description>
? </rdf:RDF>
15:40
Opseg važenja prostora imena
Zoran Cirovic
? Opseg važenja (eng. scope) prostor imena je skup
elemenata na koje se odnosi taj prostor imena.
? Prostor imena važi za elemenat u kome je deklarisan
i u svim elementima koji su hijerarhijski ispod tog
elementa.
15:40 22
5/25/2015
12
Nekvalifikovani elementi
Zoran Cirovic 23
? Ako element nema prefiks, onda pripada
podrazumevanom prostoru imena, ako postoji.
? Elementi koji nisu u poznatom prostoru imena nazivaju se
nekvalifikovanim elementima. Prostor imena takvih
elemenata je prazan string - “ “.
?
? Ako postoji podrazumevani prostor imena za neki
elemenat, a želi se da taj elemenat bude nekvalifikovan,
tada se taj (podrazumevani) prostor imena moze maskirati
koristeci deklaraciju oblika xmlns=“ “ u tom elemntu.
15:40
Kvalifikovani i nekvalifikovani
elementi - 1
Zoran Cirovic
? Primer 1.
<pre:Person xmlns:pre='urn:example-org:People' >
<name>Martin</name>
<age>33</age>
</pre:Person>
? Element Person ima prefiks pre koji je mapiran u prostor imena
urn:example-org:People . Ovaj elemenat sadrži podelemente sa
lokalnim imenima name, age. Oba podelementa su nekvalifikovana;
zato što nisu u nijednom prostoru imena. Razlikovati oblast
vazenja prostora imena od primene na neko ime!
15:40 24
5/25/2015
13
elementi - 2
Zoran Cirovic
? Primer 2.
<Person xmlns='urn:example-org:People' >
<name xmlns=''>Martin</name>
<age xmlns=''>33</age>
</Person>
? Element Person nema prefiks. Ujedno isti elemenat definiše
podrazumevani prostor imena urn:example-org:People . Ovaj
elemenat sadrži podelemente sa imenima name odnosno age.
Medutim, oba podelementa maskiraju podrazumevani prostor
imena sa prostorom '‘ (prazan string). Dakle, oba podelementa su
nekvalifikovana, zato što nisu u nijednom prostoru imena (tj.
pripadaju prostoru imena koji je prazan string). Ovaj primer je
ekvivalentan primeru 1.
15:40 25
elementi - 3
Zoran Cirovic
? Primer 3.
<pre:Person xmlns:pre='urn:example-org:People' >
<pre:name>Martin</pre:name>
<pre:age''>33</pre:age>
</pre:Person>
? Element Person ima prefiks, kao i podelementi. Elemenat
definiše pre prostor imena urn:example-org:People .
15:40 26
5/25/2015
14
elementi - 4
Zoran Cirovic
? Primer 4.
<Person xmlns='urn:example-org:People' >
<name>Martin</name>
<age>33</age>
</Person>
? Element Person definiše podrazumevani prostor imena
urn:example-org:People. Taj prostor imena koriste
podelementi. Ovaj primer je ekvivalent primeru 3.
15:40 27
Dobro formiran
XML dokument
5/25/2015
15
Da bi XML document bio
dobro-formiran treba da:
1. Postoji XML deklaracija.
2. Dokument sadrži jedan i samo jedan koreni element u kome su
ugnježdeni svi ostali elementi i njihovi sadržaji.
3. Svi elementi i atributi u dokumentu moraju da budu sintaksno
ispravni.
4. Elementi moraju imati završni tag (<…> … </…>). Jedini izuzetak
predstavlja empty tag koji nema ni sadržaj ni telo, a oznacava se
<…/>.
5. Elementi moraju biti ugnježdeni.
6. Imena tagova u XML-u su case-sensitive (zavise od velikih i malih
slova). Pri dodeljivanju imena se moraju poštovati odredena pravila.
7. Sve vrednosti atributa moraju biti u okviru navodnika. Zoran Cirovic 15:40 29
Primer dobro formiranog dok.
Zoran Cirovic
? <?xml version='1.0' encoding='UTF-8' ?>
? <p:Person xmlns:p='urn:example-org:People'
>
? <name>Martin</name>
? 
? <age>33</age>
? <height units='inches' >64</height>
? </p:Person>
15:40 30
5/25/2015
16
Primer loše formiranog
dokumenta
Zoran Cirovic
? <?xml version='1.0' encoding='UTF-8' ?>
? <p:Person>
? <name>Martin</name>
? <age value='33' >A young <b><i>and</b></i>spritely
person
</age>
? <height units='inches' units='in'>64</height>
? <weight xmlns:x1='urn:example-org:People’
xmlns:x2='urn:example-org:People’
x1:units='stone' x2:units='shekels' >10
</weight>
? </p:Person>
? <p:Person/>
15:40 31
DTD
5/25/2015
17
Svrha uvodenja DTD?
1. Da bi se uvela ogranicenja tj opis strukture podataka i
time dobile nove mogucnosti. Opis strukture je javan
i svima potpuno razumljiv. Sadrži:
? broj podelemenata (dece elemenata)
? redosled podelemenata
2. Automatizacija provere ispravnosti dokumenta.
3. Višestruka upotreba definisanih delova dokumenta.
? DTD je dodatni dokument koji može biti pridružen
nekom XML dokumentu i pruža gore navedene osobine.
33 15:40
Definicija DTD?
? Skracenica od naziva: Document Type
Definition
? DTD definiše sledece:
1. elemente koji se pojavljuju u dokumentu
2. broj elemenata u dokumentu
3. nacin ugnježdavanja
4. skup dozvoljenih, zahtevanih i podrazumevanih
atributa
34 15:40
5/25/2015
18
Šta DTD može da deklariše?
? Tip elementa
? Opisuje tip elementa, kao i tipove podataka koje on
sadrži.
? Tip atributa
? Opisuje tip atributa, kao i tipove podataka koje on
može da sadrži.
? Listu atributa
? Elementi imaju atribute navedene u listi. Liste
omogucavaju grupisanje svih srodnih atributa
elementa.
35 15:40
Šta DTD ne može da
deklariše?
? Koji je korenski element.
? Koliko primeraka elemenata pojedinih vrsta ima u
dokumentu.
? Kako izgledaju znakovni podaci unutar elemenata.
? Semantiku, tj. znacenje elemenata; na primer, da li
odredeni element sadrži datum ili ime neke osobe.
36 15:40
5/25/2015
19
Primeri
<person>
<name>
<first_name>Alan</first_name>
<last_name>Turing</last_name>
</name>
<profession>computer
scientist</profession>
<profession>mathematician</profession>
<profession>cryptographer</profession>
</person>
<!ELEMENT person (name,
profession*)>
<!ELEMENT name (first_name,
last_name)>
<!ELEMENT first_name (#PCDATA)>
<!ELEMENT last_name (#PCDATA)>
<!ELEMENT profession (#PCDATA)>
37 15:40
Kako se DTD pridružuje XML
fajlu?
Na više nacina:
• Kao poseban fajl u odnosu na XML
• Može biti naknadno više korišcen
• Kao deo XML dokumenta
• kombinacijom prethodna dva slucaja, tj. deo DTD-a je u
posebnom dokumentu, a deo u XML dokumentu
<!DOCTYPE root-element [element-declarations]>
38 15:40
5/25/2015
20
XML i DTD su zasebni dokumenti, prosleduje se URI na kome je DTD fajl
hello.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE message SYSTEM “http://www.viser.edu.rs/dtd/message.dtd">
<message>
<greeting>Hello, World!</greeting>
<farewell>Goodbye, World!</farewell>
</message>
http://www.viser.edu.rs/dtd/message.dtd
<!ELEMENT message (greeting,farewell)>
<!ELEMENT greeting (#PCDATA)>
<!ELEMENT farewell (#PCDATA)>
Spoljašnji DTD
39 15:40
Relativna putanja do fajla
? Ako se dokument nalazi na istoj osnovnoj lokaciji kao i DTD, može se
koristiti relativna putanja (adresa) umesto apsolutne, na primer:
? <!DOCTYPE message SYSTEM “/dtd/message.dtd">
? Ako se dokument nalazi u istom direktorijumu može se zadati samo ime
datoteke:
? <!DOCTYPE message SYSTEM “message.dtd">
40 15:40
5/25/2015
21
Javni identifikatori
<!DOCTYPE root_element PUBLIC "publicID" "OpcioniURL">
? Standardni DTD-ovi mogu biti smešteni na više URL adresa. Ime javnog
identifikatora (public ID) jednoznacno odreduje XML aplikaciju za koju se
koristi. U isto vreme se navodi i rezervna URL adresa, za slucaj da
analizator validnosti ne prepozna javni identifikator.
? Primer: javni DTD Rich Site Summary (Netscape)
? <!DOCTYPE rss PUBLIC “-//Netscape Communications//DTD RSS
0,91//EN” “http://my.netscape.com/publish/formats/rss-0.91.dtd">
41 15:40
? Primer
? XHTML-a se deklariše sa:
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtl1/DTD/xhtml1-
transitional.dtd">
15:40 42
5/25/2015
22
XML i DTD su u istom dokumentu
hello.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE message [
<!ELEMENT message (greeting,farewell)>
<!ELEMENT greeting (#PCDATA)>
<!ELEMENT farewell (#PCDATA)>
]>
<message>
<greeting>Hello, World!</greeting>
<farewell>Goodbye, World!</farewell>
</message>
Ugradeni DTD
43 15:40
Blokovi koji se definišu preko
DTDa
? Elementi
? Atributi
? Entiteti
? Neki karakteri imaju specijalno znacenje. (<,>,&..). Entiteti se ekspanduju
kada se neki dokument parsira.
? PCDATA
? Parsed Character Data.
? Tekst koji ce biti procesiran od parsera. Tekst ce biti analiziran kao markap
celine.
? CDATA
? Character Data.
? Oznacava tekst koji nece biti parsiran. Tagovi u okviru ovog teksta nece biti
tretirani kao markap.
44 15:40
5/25/2015
23
Primer
DTD deklaracija:
<!ELEMENT phonebook (page)+>
<!ELEMENT page (heading, (entry|advert)+)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT entry (#PCDATA)>
<!ELEMENT advert (#PCDATA)>
Ispravan XML:
<phonebook>
<page>
<heading>The whole town</heading>
<entry>John Smith, 555-1212</entry>
<advert>Fred's Fish n' Chips - 123-4567</advert>
</page>
</phonebook>
Neispravan XML :
<phonebook><page><entry/><entry/></page></phonebook>
ili
<phonebook><page/></phonebook>
45 15:40
Primer:
DTD:
<!ELEMENT shirt (#PCDATA)>
<!ATTLIST shirt type CDATA #REQUIRED>
<!ATTLIST shirt collar CDATA #IMPLIED>
<!ATTLIST shirt size (small|medium|large) "large">
<!ATTLIST shirt manufacturer CDATA #FIXED "Levi">
Validan XML:
<shirt type="short">cotton</shirt>
<shirt type="short" size="large">wool</shirt>
<shirt type="short" manufacturer="Levi">denim</shirt>
<shirt type="short sleeve" collar="button-down"></shirt>
Nevalidan XML:
<shirt></shirt>
<shirt type="short" size="medium large">cardigan</shirt>
<shirt type="short" manufacturer="Gap">designer</shirt>
46 15:40
5/25/2015
24
Primer:
DTD:
<!ELEMENT book (#PCDATA)>
<!ATTLIST book
id ID #IMPLIED
isbn CDATA #REQIURED
booktype (Harcover|Paperback) “Paperback”
storeloc CDATA “5th Avenue”
year CDATA #FIXED “2000”
comment CDATA #IMPLIED>
Validan XML:
<book isbn=“1-35267-742-4“ storeloc=“Times Square">
XML Pocket Reference
</book>
47 15:40
ENTITY
? To su promenljive korišcene za definisanje skracenica ka standardnom
tekstu ili specijalnim karakterima.
? Interna deklaracija
? <!ENTITY entity-name "entity-value">
? Primeri:
<!ENTITY writer "Donald Duck.">
<!ENTITY copyright "Copyright W3Schools.">
<author>&writer;&copyright;</author>
? Važno: Entity ima 3 dela: ampersend (&), entity ime, i tacka-zarez (;).
? Eksterna deklaracija
? <!ENTITY entity-name SYSTEM "URI/URL">
? DTD Example:
<!ENTITY writer SYSTEM "http://www.w3schools.com/entities.dtd">
<!ENTITY copyright SYSTEM "http://www.w3schools.com/entities.dtd">
XML example:
<author>&writer;&copyright;</author>
< <
> >
& &
' ‘
" “
48 15:40
5/25/2015
25
Nedostaci DTD-a
Glavni nedostaci DTD-a su:
? odsustvo tipizacije podataka (#PCDATA može biti bilo koji string)
? sintaksa DTD nije uskladena sa sintaksom XML-a
? postoje ogranicenja koja se ne mogu lako izraziti DTD-om (na pr.
element x se može pojaviti od 4 do 17 puta)
Mnoga ogranicenja DTD-a uspešno prevazilazi XML Schema (XML
šema).
49 15:40
XHTML
15:40 50
5/25/2015
26
? XHTML document HTML dokument napisan po
standardima koji važe za jedan XML document tj.
zadovoljava sve kriterijume koje mora imati dobro
formiran XML document.
? Osim ovog uslova XHTML zadovoljava
standard ”International Standard ISO 8879”,
tj. SGML (engl. Standard Generalized Markup Language),
kao i HTML.
15:40 51
? XHTML mora da zadovolji stroga pravila.
? Mora biti dobro formiran.
? Mora biti validan po pravilima DTD dokumenta.
? Korenski element je html.
? Korenski element mora imati deklaraciju imenskog
prostora http://www.w3.org/1999/xhtml
? Primer root elementa je:
15:40 52
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5/25/2015
27
? Mora postojati deklaracija DOCTYPE u dokumentu pre
korenskog elementa. Javni identifikator koji je ukljucen
u DOCTYPE referiše sledece DTD definicije:
o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
15:40 53
? HTML 4.01 Strict
? Ovaj DTD sadrži sve HTML elemente i atribute, ali ne
ukljucuje zastarele elemente (na primer font) kao i
element frameset.
? HTML 4.01 Transitional
? Ovaj DTD sadrži sve HTML elemente i atribute, ukljucujuci
zastarele elemente. Element frameset nije dozvoljen.
? HTML 4.01 Frameset
? Ovaj DTD je isti kao HTML 4.01 Transitional, ali je
dozvoljeno korišcenje elementa fremeset.
15:40 54
5/25/2015
28
? Deklaracija XML dokumenta nije obavezna ali se obicno postavlja
na vrh dokumenta. Na primer:
? <?xml version="1.0" encoding="UTF-8"?>
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
? <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
? <head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
15:40 55
Razlike u odnosu na HTML
? 1. Dokumenti moraju biti dobro formirani
<p>here is an emphasized <em>paragraph</em>.</p>
<p>here is an emphasized <em>paragraph.</p></em>
? 2. Elementi i atributi moraju biti zapisani malim slovima
? 3. Ako element nije prazan mora imati završti tag.
<p>here is a paragraph.</p><p>here is another paragraph.</p>
<p>here is a paragraph.<p>here is another paragraph.
15:40 56
5/25/2015
29
? 4. vrednosti atributa moraju uvek biti zapisani pod
znacima navoda.
<td rowspan="3">
<td rowspan=3>
? 5. Atributi moraju uvek imati vrednost
<dl compact="compact">
<dl compact>
? 6. Prazni elementi moraju imati 1 tag koji se završava
sa /
<br/><hr/>
<br><hr>
15:40 57
? 7. Beli prostor se mapira u jedan razmak ako je
unutrašnji ili bez praznina na pocetku ili kraju.
? 8. css
? <link rel="stylesheet" type="text/css"
href="style.css">
? <style type="text/css">
? <div style="font-weight:bold;
color:blue;">Bold Font</div>
15:40 58
5/25/2015
30
? 9. Umesto atributa name koji se koristi u HTML
potrebno je koristiti atribut id. Ovaj atribut je u DTD
definisan kao ID tj jedinstvene vrednosti.
Dobar HTML
<input type="submit" name="s" value=" Search " >
Dobar XHTML
<input type="submit" id="s" value=" Search " />
15:40 59
1
DIZAJN sajta
Proces dizajna jednog sajta
1. Definisati zadatak - tj šta uraditi
2. Jasno odrediti svrhu sajta
3. Cilj korisnika, šta posetilac sajta želi
4. Nacrt sajta
5. Plan sajta
6. Osnovni dizajn i opcije
7. Prilagoditi dizajn da bude privlacan
posetiocima...
2
1. Definisanje zadataka
? Razumevanje zadataka aplikacije u
velikoj meri pomaže dostizanju istog.
? Potrebno je uvek imati na umu cilj
aplikacije kada se vrši dizajn.
? Zato je potrebno na startu dizajna
definisati cilj dizajera. Na primer:
? Da li je cilj pokazati šta umemo?
? Da li je cilj zadovoljan klijent?
? Da li je cilj uspešna prodaja?
2. Svrha sajta - 1
• Cilj koji ima dizajner nije isti kao cilj samog
sajta, dakle, potrebno je definisati i cilj tj
svrhu samog sajta, tj narucioca.
• Narucilac posla može zahtevati da cilj sajta
bude povecanje prodaje odredenog
proizvoda, ali dizajner mora definisati sve
aspekte ovog cilja.
• Dizajner sa svog aspekta definiše se šta ce
predstavljati uspeh i kako ce se proceniti da li
je postignut.
3
2. Svrha sajta - 2
? Tokom izrade sajta:
? Donositi mnoge odluke u toku
realizacije aplikacije
? Komunicirati sa klijentom i dizajnerima
? Održavati poverenje klijenta kroz samu
realizaciju
? Dokazivati da su ispoštovani dogovori
3. Cilj korisnika sajta - 1
? Obicno korisnik ne koristi Internet radi
zabave, vec da bi pronašao odredene
informacije i postigao odredene ciljeve.
? Ako je moguce, u fazi testiranja
aplikaciju treba pokazati vecoj grupi
potencijalnih korisnika i primetiti koje
opcije su prihvacene, a koje ne.
? Pošto to obicno nije moguce, moraju se
primeniti druge tehnike.
4
? Korisnike treba grupisati, na primer:
? stalni kupci,
? povremeni kupci,
? zaposleni
? dobavljaci.
? Zatim, za svaku grupu definisati njihove
tipicne ciljeve.
? Ciljevi treba da budu dovoljno
sveobuhvatni da pripadaju svim korisnicima
iz odredene grupe.
? Na primer, povremene kupce zanima zašto je
odredeni proizvod sa sajta bolji od konkurentskog.
? Kriterijumi za formiranje grupa:
? Nivo obucenosti rada za racunarom, ostala tehnicka znanja
? Zaposlen, student ili nezaposlen
? Starost
? Kulturno naslede (jezik, navike, ...)
? Koje opšte ciljeve žele da postignu
? Koje specificne ciljeve žele da postignu
? Koje su njihove licne karakteristike
? Na koji nacin su upoznati sa sajtom; preko reklame, trenirani su,
slucajno, ...
? Koliko cesto posecuju sajt
5
4. Nacrt sajta
? Kada se definišu ciljevi sajta i ciljevi korisnika,
kao i nacin kako se sve to može postici, sledeca
faza je planiranje strukture sajta.
? Prvi korak je pomocu olovke i papira prikazati
najvažnije interakcije izmedu korisnika i sajta.
? Potrebno je naznaciti koje su ulazne tacke u
sistemi, moguce akcije, kretanje korisnika po
sajtu.
5. Plan sajta - 1
? Sledeca faza je definisanje plana sajta, tj. koje
stranice treba da se nalaze u okviru sajta, kako su
grupisane i kako ce korisnik posetiti sve
postavljene stranice.
? Na osnovu smišljenog plana treba napraviti
strukturu sajta koja je jednostavna i eknomicna.
6
5. Plan sajta - 2
? Koji globalni ili top-level linkovi treba da se nalaze
na svakoj strani
? Ako postoji više sekcija treba obezbediti
jednostavan nacin da se pronade željena
? Ne treba puno deliti teme. Ako postoji više sekcija
sajt ce izgledati prevelik i težak za navigaciju.
Izbegavati sa kreiranjem sekcija koje nemaju
dovoljno sadržaja ("No news is bad news").
? Ukljuciti sve potrebne opcije (kao što su Contact
ili Login), koje možda nisu bile ukljucene u
prvobitni scenario
5. Plan sajta - 3
? Koristiti pametne i linkove u dubinu, koje ce
korisniku omoguciti direktan pristup traženim
informacijama
? Optimizovati sajt, tako da se kljucni pojmovi i
informacije lako uoce
? Koristiti principe grafickog dizajna (jednostavnost,
kontrast, prazan prostor, balans i porvananje)
7
Arhitektura sajta
? Jedna stranica
? Jednoslojna arhitektura
? Indeksirana
? Ulancana
? Stroga hijerarhija
? Višeslojna hijerarhija
? Pretraživanje
Model jedne stranice
? Najjednostavniji model.
? Ceo sadržaj se postavlja na jednu stranicu.
? Lako za upotrebu i lako za održavanje
Home
8
Jednoslojna arhitektura
? Sve stranice se postavljaju u istu ravan.
Svakoj stranici se može pristupiti iz bilo
koje druge.
? Primer kod jednostavnijih sajtova: Home,
About Us, Contact Us, Products
Home
Indeksirana arhitektura - 1
? Posebna stranica koja predstavlja listu sadržaja
datog sajta – indeks
? Organizovana da omoguci jednostavniju pretragu
samog sajta
? Ova organizacija je primenljiva na listu fajlova u
direktorijumu ili listu ljudi sortirana po
prezimenu, recnici i telefonski imenici
? Dobri rezultati se postižu u slucajevima kada ima
srednja kolicina podataka i kada se podaci mogu
sortirati po nekom redosledu. Zašto?
9
Indeksirana arhitektura - 2
Home
Ulancana - 1
? Ovaj model je koristan za razgranate linerane algoritme
? Dobar primer je email aplikacija
? Povratak u inbox deo posle nekoliko opcija, na primer
posle citanja poruke, slanja nove poruke, ili dodavanja
novog kontakta u adresar.
10
Ulancana - 2
Home
Stroga hijerarhija - 1
? Stranica se može posetiti samo preko „roditeljske” stranice tj.
prethodnika.
? Ovakav model se može primeniti na realan svet, gde postoji
stroga parent-child relacija izmedu objekata
? Mnogi modeli podataka imaju ovakvu strukturu, kao na primer
niti (thread)
? Svaka nit pripada odredenom objektu, a jedan objekat može
imati više niti
11
? U nekim slucajevima, iako j u realnom
problemu postoji stroga hijerarhija, to ne
znaci da je i ova arhitektura sajta najbolje
rešenje problema.
? Treba se bazirati na ciljeve sajta i korisnika i
nacine korišcenja sajta.
? Iako je moguce podeliti sve proizvode u
kategorije i podkategorije, to nije
najefikasniji nacin da ih korisnik i pronade.
? Na primer: U nekim supermarketima odredeni
proizvodi se nalaze na više mesta, jer se
pretpostavlja da ih kupci traže u više
kategorija..
Home
12
Višeslojna hijerahija - 1
? Nastaje ako postoji više nacina nalaženja istog sadržaja tj. više kategorija
kojima sadržaj pripada.
? Na taj nacin, postoji više hijerarhija nad istim sadržajem. Struktura se
prikazuje razlicito u
zavisnosti od nacina pretrage tj. nekog moda posetioca sajta.
? Na primer: Sajtovi za filmove.
? Na priemr: Amazon - moguce je pretraživati knjige po žanru, ili naslovu, ili po
nekoj kljucnoj reci.
? Svaka od ovih hijerarhija odgovara odredenoj osobini sadržaja, koja može
koristiti korisnicima u razlicitim situacijama.
Višeslojna hijerahija - 2
13
Pretraga - 1
? Predstavlja mogucnost sajta za brzo
dobijanje odredene informacije.
? Pretraga je deo navigacije, a ne arhitekture.
Medutim, pretraga je cesto ugradena u
arhitekturu sajta. Funkcije pretrage
predstavljaju dinamicki pogled na sam sadržaj
i nude direktne linkove na svaki dobijeni
rezultat.
? Omogucava se korisniku da automatski prede
na samu informaciju, bez prethodnog
pretraživanja po hijerhiji ili indeksima.
? Ako opcija pretrage fukcioniše pravilno i
efikasno, predstavlja veliku prednost samog
sajta.
Pretraga - 2
14
Organizacija podataka - 1
? Postoji veliki broj opcija i mogucnosti kako se
mogu organizovati i prikazivati informacije,
tako da se ne može unapred definisati
najefikasniji.
? Izbor pravilne prezentacije zavisi od velikog
broja faktora, kao što su korisnikovi ciljevi,
okruženje (na primer protok podataka,
rezolucija, ...), tehnicke arhitekture,
kompatibilnosti, itd.
? Nekada je jednostavna struktura sadržaja i
najpodesnija. U takvim slucajevima dovoljne
su opcije tipa Home, About Us, Services (sa
opcijom Products), i Contact Us.
? Na primer: Ako se pojavi potreba da se u okviru
Home stranice ukljuci i opcija News, treba
razmotriti sledece:
1. Da li svi posetioci sajta treba da imaju i opciju
pregleda poslednjih vesti (ciljevi sajta)
2. Da li su sve vesti kompanije od interesa za sve
posetioce sajta (korisnicki ciljevi)
3. Možda je dovoljno prikazati samo kratak opis
vesti ili omoguciti i link ka odredenom artiklu ili
novinskom clanku.
4. Da li vesti treba podeliti po odredenim
kriterijumima (proizvod/servis/region/korisnicka
grupa …)
15
? Za jednostavnije e-commerce sajtove, treba
napraviti listu proizvoda, i omoguciti proces
ponude i prodaje.
? Proizvodi se mogu prirodno podeliti u odvojene
kategorije.
? U nekim slucajevima nije moguce sve opisati na
jednoj stranici, vec je potrebno napraviti
odvojene sekcije, i omoguciti korisnu navigaciju
izmedu sekcija
Arhitektura prilagodena
korisnicima
? Sajt koji služi za prodaju avionskih karata može da
ima na pocetnoj stranici opcije “Rezervacije”,
„Traženi letovi“, i “Plan putovanja” sa mogucnošcu i
rezervacije hotela i kola uz kupljenu kartu.
? Sajt softverske kompanije može imati više razlicitih
poddelova:
? Tehnološkim ekspertima treba omoguciti opcije o
mogicnostima proizvoda, kao i poredenje sa konkurentnim
? Kupcima treba na razumljiv nacin prikazati proizvode sa
nacinima upotrebe (case studies)
? Za medije omoguciti opcije "Press releases" i "Press
contacts"
16
Višedimenzionalna arhitektura
? Mogucnost pregleda po kategoriji: pravi se stablo iz
više nivoa, ali uzimajuci u obzir da jedan proizvod
npr. knjiga može biti u više kategorija
? Neki korisnici žele da pretražuju po specificnom
autoru ili naslovu
? Da bi se povecala prodaja mogu se reklamirati
naslovi slicni onima za koje je korisnik zainteresovan
? Organizovati promišljeni menadžment zasnovan an
sadržaju. Tipa “korisnici koji kupuju ovu knjigu,
kupuju i ovu”, “ova knjiga je preporucena od 90%
korisnika koji su kupili tu i tu knjigu”, “uz vasu
knjigu kupite i ovu, pa cete dobiti popust 28%”.
? Na primer: sajt o veb dizajnu- flat arhitektura
(broj clanaka 50)
? Svakom clanku se može pristupiti sa bilo koje
stranice
17
? Nedostatak - ako se broj clanaka
povecava, i to posebno vezanih za jednu
odredenu temu.
? Sajt se deli u nekoliko glavnih sekcija
(Home, Basics, i Principles)
? Basics - “Web design”, “How people use
web pages”, i “Other online factors”
? Neke stranice imaju linkove na druge u istom nivou u
na drugom nivou u istoj sekciji.
? Na kraju se dobija gusta, nestrukturirana
višedimenzionalna hijerarhija
18
? Mali ili srednji broj stranica (ispod 100)
? Sadržaj stranica je relativno nezavisan i po nekom
kriterijumu se može urediti
? Informacije se mogu koristiti na nekoliko nacina
6. Osnovni dizajn i opcije
? Nakon definisanja plana sajta, sledeci
korak je vizuelni izgled i prikaz opcija.
? Može koristiti olovka i papir za prve
nacrte.
? Krece se od pocetne zamisli, korišcenog
layout-a sa jednostavnim interfejsom.
? U ovoj fazi treba pozicionirati sadržaj,
deo za navigaciju, logo i osnovne linije.
19
7. Prilagoditi dizajn da bude
privlacan posetiocima....
? Velicina elemenata
? Boja elemenata
? Kontrasti vizuelnih elemenata
? Kretanje elemenata (animacija ili dinamicke linije
koji pružaju utisak pokreta)
? Prazan prostor
? Poravnanje
Nacini realizacije navigacije
a) Sadržaj (lista opcija)
b) Linkovana lista
c) Horizontalni meniji
d) Tabovi
e) Dugme sa padajucim menijem
f) Navigaciono stablo
g) Stranicna navigacija
20
a) Sadržaj
• Samo navoditi moguce opcije
• Ovaj nacin navigacije je podesan kada postoji nekoliko
releventnih tema na samoj stranici ili do kojih se može
doci pomocu date stranice
b) Linkovana lista
• Prikazuje se korisniku gde se trenutno nalazi u samoj hijerarhiji sajta i
omogucava mu jednostavan povratak
na bilo koju stranicu u okviru te hijerarhije.
• Pogodan je u slucajevima kada postoji više nivoa u
hijerarhiji i kada korisniku treba omoguciti da se vrati
na neki od prethodnih stranica u toj hijerarhiji.
21
c) Horizontalni meniji - 1
? Horizontalni meniji na vrhu stranice su najcešce
korišceni nacin navigacije. Kako je kretanje korisnika
po stranici od vrha ka dnu superiornije od kretanje s
leva na desno, prirodno je postaviti menije najviseg
nivoa iznad samog sadržaja.
? Problem koji se može pojaviti je da je sam meni širi
nego stranica.
? Vertikalni scroll bar - horizontalni scroll bar
? Ako se koristi tekst bazirana navigacija koja je
promenljive velicine, meniji mogu biti manji ili veci
u zavisnosti od podešavanja korisnikovog Web citaca.
? U situacijama kada je broj opcija unapred poznat,
kada se nove opcije nece u buducnosti dodavati, i
kada ima dovoljno prostora da se sve opcije navedu
pod minimalnim tehnickim uslovima (na primer 800
px)
c) Horizontalni meniji - 2
22
d) Tabovi - 1
? Omogucavaju prikaz aktivne sekcije/selekcije na veoma
jasan nacin
? Prirodno poseduju vizuelnu hijerarhiju
? Oni su eksluzivni, ne postoji mogucnost da dva taba
budu selektovana .
d) Tabovi - 2
23
e) Dugme sa padajucim menijem - 1
? Ovaj nacin navigacije je postao uobicajeni
mehanizam navigacije poslednjih nekoliko
godina iako je komplikovaniji od prethodnih.
? Kada korisnik klikne na dugme ili prede preko
stavke menija pokažu se opcije podmenija u
formi drop-down menija.
? Prednost ovakvog modela je mogucnost
prikaza velikog broja opcija sa zauzimanjem
relativno malo prostora.
? Vodite racuna da posetilac sajta ne zna koje opcije su vezane za
dugme (ili stavku u meniju) dok ga ne pritisne tj. dok se ne upozna
sa sajtom.
? Ne postoji standardno ponašanje posetioca sajta. Na primer za
odredivanje da li podmeni treba da nestane kada kurzor miša izade
sa njegove površine ili kada korisnik klikne mišem izvan podmenija
? Ako je prekid operacije na dogadaj mouseOut, cesto može biti
frustrirajuce za korisnike izabrati opciju iz više podmenija, posebno za
one ne tako vešte sa racunarom
? Ako je prekid operacije na klik izvan menija, korisnik može biti zbunjen
gde treba da klikne
? Korišcenje ovog modela zahteva odredene veštine od korisnika, pa
može predstavljati teškocu korisniku da ga koristi na efikasan
nacin. Ako postoji dovoljno prostora alternativni mehanizmi su
mnogo brži.
24
f) Navigaciono stablo - 1
? Ovo je kompleksan model koji omogucava
korisniku da pregleda hijerarhije koje se
sastoje iz više nivoa.
? Ovakav nacin pretrage je uobicajen za
desktop aplikacije, kao što su aplikacije za
rada sa dokumentima, ali se ponekad
primenjuje i u Web sistemima, korišcenjem
DHTML-a na klijentskoj strani ili serverskih
skript jezika.
? Prednosti ovog modula su intuitivnost i
familijarnost korisnika sa njegovim
mogucnostima. Ovaj model predstavlja
jednostavan pristup kompleksnijim
strukturama.
25
f) Navigaciono stablo - 2
? Rešenje sa skript jezikom na klijentskoj
strani je suviše kompleksno, teško za
održavanje i zavisi od platforme.
? Rešenje sa serverskim skript jezicima je
jednostavnije za implementaciju, ali
zahteva više ucitavanja iste stranice, što
utice na perfomanse sistema.
? Treba izbegavati korišcenje nestandardnih
ikonica, da bi se povecala efikasnost
f) Navigaciono
stablo – 3
26
g) Stranicenje - 1
? Blisko vecini korisnika.
? Primenjuje se u slucajevima kada je
odredeni sadržaj podeljen u nekoliko
stranica - dugacki clanci, forumi, rezultati
pretrage, …
? Standardni alat za navigaciju unazad,
unapred ili na tacno odredenu stranicu.
27
g) Stranicenje - 2
? Prednost ovog modela je bliskost korisnika sa
nacinom upotrebe.
? Jedan od problema može biti koje stranice
prikazati u direktnim linkovima, tj sortiranje po
stranicama. Kada postoji više stranica sa
rezultatima da li da trenutni prikaz stranice
bude u sredini, na pocetku ili na kraju. Pitanje
je da li korisnika zanimaju i prethodni ili sledeci
rezultati.Ako je u pitanju pretraga logicno je da
krene od prve stranica, pa dalje, ali da mu se
omoguci i prelazak na prethodnu ili sledecu.
? Sa druge strane ako su rezultati na neki nacin
indeksirani (na primer po pocetnom slovu), tada
treba korisniku dati sve mogucnosti (zanima ga
neka stranica sa slovom L), pa da može direktno
da ode na željenu stranicu
5/25/2015
1
HTML5
Plan
1. Istorija, vizija & karakteristike HTML5
2. StrukturaWeb stranice
3. Novi elementi
4. Forme
5. Audio i Video
6. HTML5 Canvas
7. Uvod u Data Storage
8. Uvod u Geo location
5/25/2015
2
1. Istorija, vizija & karakteristike HTML5
1.1 Šta je HTML5?
• Naslednik standarda HTML 4.01 odnosno XHTML 1.1
• Sadrži nove tagove, karakteristike i API
• Specificne karakteristike:
– Novi strukturni elementi (<header>, <footer>, <nav> and more)
– Forms 2.0 i „client-side“ validacija
– Ugradena podrška za video i audio (<video>, <audio>)
– Canvas API i SVG
– Web storage
– Offline aplikacije
– Geolokacija
– Drag & Drop
– Novi komunikacioni API
1.Istorija, vizija & karakteristike HTML5
1.2 Istorija HTML5?
• Decembar 1997: W3C je objavio HTML 4.0
• Febroar - Mart 1998: XML 1.0
• Decembar 1999 - Januar 2000: XHTML i HTML 4.01
• Maj 2001: XHTML 1.1
• Avgust 2002: XHTML 2.0
• Decembar 2002: XHTML 2.0
• Januar 2008: W3C radna vercija HTML5, krajem 2014 standardizovan
5/25/2015
3
2. Struktura Web page
2.1. Novi i izmenjeni HTML5 elementi
HTML5 donosi 28 novih elemenatas:
<section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <figure>,
<figcaption>, <video>, <audio>, <source>, <embed>, <mark>,<progress>, <meter>,
<time>, <ruby>, <rt>, <rp>,<wbr>, <canvas>, <command>, <details>,<summary>,
<datalist>, <keygen>, <output>
HTML stranica startuje obavezno sa deklaracijom DOCTYPE
HTML5 takode uvodi izmene nekih postojecih elemenata:
• <a> može imati plutajuci sadržaj umesto do sada samo prostog teksta
• <hr> predstavlja jedan prekid paragrafa
• <cite> predstavlja samo naslov rada
• <strong> predstavlja važnost umesto jakog isticanja
2. Struktura Web page
2.2. Prva HTML5 stranica
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Ovo je ceo sadržaj moje prve HTML5 stranice
</body>
</html>
5/25/2015
4
3. Novi elementi
<nav>
Predstavlja glavni blok za navigaciju. U ovom elementu se grupišu linkovi ka
drugim stranicama ili delovima tekuce stranice.
<nav> ne mora biti korišcen na svakom mestu gde se koriste linkovi.
Na primer, futeri cesto sadrže linkove, ali je dovoljno imati samo ovaj
element.
<nav>
<ul>
<li> <a href="/"> pocetna </li>
<li> <a href="/dogadjaji"> dogadjaji </li>
<li> <a href="/kontakti"> adrese </li>
</ul>
</nav>
3. Novi elementi
<header>
• specificira zaglavlje dokumenta
• Ovaj element ne mora biti korišcen
samo na stranicama gde stoji na
vrhu u vidu naslova. Može se
koristiti i kao deo sa naslovom i
datumom na blogu.
<body>
<header>
<h1>Naslov dokumenta </h1>
<nav>
<ul>
</ul>
</nav>
Ovo je ceo sadržaj moje prve HTML5 stranice
</header>
<p> sadrzaj van zaglavlja </p>
</body>
<article>
<header>
<h1>Naslov...</h1>
<time datetime="2015-04-05" pubdate>5.4.2015.</time>
</header>
<p>
Neki clanak...
</p>
</article>
5/25/2015
5
3. Novi elementi
• <article>, <section>
• <article> Ovaj element menja cesto korišceni odeljak <div class="article">.
Koristi se
uglavnom za sadržaj. Na primer novosti, blog zapisi... Jedan article element ne
znaci obavezno
i clanak tj sadržaj u vidu clanka. U article elementu može stajati elementi header
i footer. Na
primer, cest je slucaj da clanak ima naslov struktuiran u vidu zaglavlja.
• <section> Koristi se za grupisanje temetski slicnih sadržaja. Za razliku od div
elementa i ovaj
element ima semanticku vrednost.
<body>
<h2>Moj blog</h2>
<article>
<header>
<h1>Naslov teme...</h1>
<p></p><time datetime="2015-04-05" pubdate>5.4.2015.</time></p>
</header>
<p>
Opis teme ...
</p>
<footer>
<a href="coments/page1.html">Ostavite komentar</a>
</footer>
</article>
</body>
3. Novi elementi
<aside>
Ovaj element se koristi za odeljak koji je obicno nekako povezan sa glavnim
sadržajem ali koji može biti odvojen od njega.
<article>
<p>
Viša elektrotehnicka škola u Beogradu osnovana je 1974....
</p>
<aside>
Studentima je pružena mogucnost da kroz medunarodnu razmenu
studentata...
</aside>
</article>
5/25/2015
6
3. Novi elementi
<footer>
Slicno kao i element "header", obicno se referiše kao podnožje stranice.
Ovih elemenata može biti više u jednom dokumentu. Može postojati futer u svakoj
sekciji ili
svakom clanku.
<article>
<header>
<h1>Naslov teme...</h1>
<p>Opis teme ... </p>
</header>
<footer>Objavljeno datuma:<time datetime="2015-04-05"
pubdate>5.4.2015.</time></footer>
</article>
<footer>
<nav>
<ul>
</ul>
</nav>
</footer>
3. Novi elementi
<progress>, <meter>
• Elementi koji se koriste za vizuelni prikaz stanja nekog procesa ili napretka.
Progres1... <progress value="60" max="100">60%</progress> <br />
Meter1... <meter value="4" min="0" max="15">4 od 15</meter><br />
Meter2... <meter value="0.6">60%</meter><br />
5/25/2015
7
3. Novi elementi
<mark>
Ovim elementom se markira deo teksta, obicno sa namerom da se istakne ili znacenjem
izdvoji od
ostatka.
Viša elektrotehnicka škola u Beogradu <mark>osnovana je 1974. godine.</mark>..
3. Novi elementi
<figure>, <figcaption>
Ovaj element specificira sadržaje koji pripadaju ovom elemenu, kao što su
ilustracije, dijagrami,
fotografije, listinzi koda,...
Mada je sadržaj ovog elementa povezan sa glavnim tokom, pozicija je nezavina, tj
izbacivanje ovog
elementa ne menja tok u dokumentu.
<p>Tekst u paragrafu1.</p>
Tekst ispred slike:
<figure>
<img src="jabuka.jpg" alt="Jabuka">
<figcaption> Sl.1. Jabuka</figcaption>
</figure>
Tekst u nastavku
<p>Tekst u paragrafu2. Šta se dogada ako izbrišete figure element?</p>
5/25/2015
8
3. Novi elementi
<details> <summary>
Element <summary> omogucuje da se sadržaj u elementu <details>
klikom na summary prikažu ili sakriju.
<!DOCTYPE html>
<html>
<body>
Na današnji dan:
<details>
<summary>6.4.1876.</summary>
<p> - Srpska vojska je ušla u ...
</details>
<details>
<p> - Nacisticka Nemacka je u ...
</details>
<details>
<p> - U Beogradu je otvorena nova zgrada ...
</details>
</body>
</html>
• Element <time> definiše vreme ili datum i vreme (atributom
datetime). Podatak nije vidljiv za korisnika.
<!DOCTYPE html>
<html>
<body>
<article>
<header>Naslov</header>
<time datetime="2008-02-14 20:00">datum</time>
</article>
</body>
</html>
5/25/2015
9
Atributi ping, download
ping – deklarise putanju, kako bi url adrese registrovale kada korisnik
pritisne na link. Može se navesti više adresa. Obicno je to URL neke
skripte.
download – pokazuje da citac veba treba da preuzme datoteku.
<a href=http://www.minkbooks.com/content/myfile.pdf
ping="http://www.jdgauchat.com/control.php" download>
klikni ovde
</a>
3. Novi elementi
3.3. Primer dizajna blog-a koristeci html5
5/25/2015
10
HTML 5 Forme
4. Forms
Uvod
HTML5 donosi nove elemente formi, ulazne tipove i drugo. Mnoge od ovih
karakteristika
postojale su i ranije na web stranicama, ali osnovna razlika je što je za to bilo
neophodno
ukljucivanje JavaScript-a, a sada su sto samostalni elementi tj. njihova ponašanja
su
ugradena u same elemente.
HTML5 omogucava lakše formiranje formi ali i formi sa boljim karakteristikama. Na
strani klijenta je obezbedeno prirodno rukovanje validacijama od strane web citaca,
brže
ucitavanje stranica bez JavaScripta.
Pogledajmo
HTML5 Form atribute
HTML5 Input tipove
HTML5 Form elemente
5/25/2015
11
4. Forms
form atributi: autocomplete
<form>,<input>
Specificira da li se na formi ili ulaznom polju vršti automatizovano popunjavanje
ili ne.
Kada je ukljuceno, web citac automatski dopunjuje vrednost polja na osnovu vec
unetog od strane
korisnika.
<form action="test.asp" method="get" autocomplete="on">
ime:<input type="text" name="ime"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
4. Forms
form, input atributi: novalidate
Ima vrednost bool tipa. Ako je prisutan forma nema validacije.
• <form action="nebitno.asp" novalidate>
• E-mail: <input type="email" name="email">
• <input type="submit">
• </form>
input atributi autofocus
Slicno atributu novalidate i ovaj atribut je tipa boolean.
Kada postoji oznacava da jedan <input> element treba da primi automatski fokus kada
se stranica
ucita.
Samo jedan element može imati autofokus na jednoj stranici.
5/25/2015
12
4. Forms
input atributi formaction
• Ovaj atribut oznacava URL koji ce obraditi ulazne kontrole kada se podaci forme
pošalju.
• Ovaj atribut preklapa atribut action elementa <form>.
• Ovaj atribut se koristi u tipovima kontrola type="submit" odnosno type="image“
input atributi formmethod
• Ovaj atribut preklapa atribut method elementa <form>.
• Ovaj atribut se koristi u tipovima kontrola type="submit" odnosno type="image"
4. Forms
• input atributi formnovalidate
• Ovaj atribut je tipa boolean.
• Ako postoji, oznacava da se <input> elementi ne validiraju kada se šalju
(submit).
• Preklapa ranije novalidate atribut <form> elementa.
• Može se koristiti samo sa type="submit".
• input atributi formtarget
•
Oznacava ime ili kljucnu rec koja definiše gde ce se prikazati odgovor koji je
primljen nakon slanja
forme
• Preklapa raniji atribut target.
• Može se koristiti sa tipovima type="submit" and type="image".
5/25/2015
13
4. Forms
4.2. input atributi required
Oznacava obavezu da Web citac može poslati podatke samo ako su oznacena polja
korektno
popunjena.
Ako je polje prazno ili nevalidno, forma nece poslati podatke, a fokus ce se
prebaciti na prvu nevalidnu
kontrolu.
Ovaj atribut se može postaviti na bilo koju kontrolu osim na button, range, color,
hidden, sve koji imaju podrazumevanu vrednost.
<form action="action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
4. Forms
input atributi placeholder
Atribut kojim se postavlja kratak tekst u kontrolu kojom se pomaže korisniku u vidu
upustva šta se
unosi u to polje
Obicno je taj tekst prikazan nekom sivom nijansom cime se ukazuje da polje nije
popunjeno.
• <form action="action_page.php">
• <input type="text" name="fname" placeholder="First name"><br>
• <input type="text" name="lname" placeholder="Last name"><br>
• <input type="submit" value="Submit">
• </form>
5/25/2015
14
4. Forms
input atributi readonly
Ovo svojstvo je slicno atributu disabled: korisnik ne može da unese vrednost tj
vrednost se samo cita.
Kontrola može primiti fokus i ta vrednost se salje sa ostalim podacima forme.
• <input type="text" name="viser" id="rez224" readonly>
• <label for="rez224"> Naslov </label>
input atributi multiple
Oznacava da se, kada je prisutan, višestruke vrednosti mogu uneti u kontrole forme.
Ranije je
postojao samo u elementu select. U html5 postoji i u tipovima email i file.
To znaci da korisnik može selektovati više od jednog fajla ili ukljuciti comma-
separated više email
adresa.
• Odabrane slike: <input type="file" name="img" multiple>
• </form>
4. Forms
input tipovi
Pre pojave HTML5 ulazni tipovi tj kontrole
su:
¦ button
¦ checkbox
¦ file
¦ hidden
¦ image
¦ password
¦ radio
¦ reset
¦ submit
¦ text
HTML5 omogucava korisniku više
specificnosti. HTML5 novi tipovi su:
¦ search
¦ email
¦ url
¦ tel
¦ datetime
¦ date
¦ month
¦ week
¦ time
¦ datetime-local
¦ number
¦ range
¦ color
5/25/2015
15
4. Forms
input tip search
Tip koji se koristi za pretragu. Ne ukljucuje automatski neku pretragu.
input tip email
Koristi se za podatke tipa elektronske pošte. Može ukljuciti više email adresa. Web
citaci
rade osnovnu validaciju a smartphone uredjaji cesto nude dodavanje .com domena kao
podrazumevanog.
• E-mail:
• <input type="email" name="email">
• </form>
4. Forms
input tip url
Koristi se za ulazna polja koja sadrže neki URL.
Ukljucuje se automatska validacija.
• Add your homepage:
• <input type="url" name="homepage">
• </form>
input tip tel
Za telefonske brojeve koristi se ovaj tip (type="tel"). Tip tel ne forsira neki
poseban uzorak za proveru
validnosti.
• Telephone:
• <input type="tel" name="usrtel">
• </form>
5/25/2015
16
4. Forms
input tip range
Prikazuje klizac slider kontrolu. Prateci atributi su
min, max, odnosno step.
• <form action="action_page.php" method="get">
• Jacina:
• <input type="range" name="points" min="0" max="10">
• </form>
4. Forms
input tip color
Omogucava izbor boje koristeci standarni prozor za izbor boja.
• Odaberi boje:
• <input type="color" name="boja" value="#ff0000">
• </form>
5/25/2015
17
4. Forms
input tip output
Koristi se da bi se u formi recunale neke vrednosti
Atributi
for
Lista ID vrednosti razdvojenih razmakom cije vrednosti ucestvuju u izracunavanju.
form
Sadrži naziv forme koja je vlasnik ovog (output) elementa. Vrednost mora biti ID
forme u istom
dokumentu. Ovaj atribut nam omogucava da output element bude izvan forme na koju se
odnosi.
name
Naziv elementa.
• <form onsubmit="return false" oninput="o.value = parseInt(a.value) +
parseInt(b.value)">
• <input name="a" type="number" step="any"> +
• <input name="b" type="number" step="any"> =
• <output name="o"></output>
• </form>
HTML 5 audio & video
5/25/2015
18
5. Audio & video
Element <audio>
Do pojave HTML5 nije postojao standard za „puštanje“ audio fajlova. Za to je bilo
potrebno koristiti
plug-in ove.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="pesma1.mp3" type="audio/mpeg">
Vas web citac ne podržava audio element
</audio>
</body>
</html>
5. Audio & video
Element <video>
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
....
</video>
</body>
</html>
Atribut Vrednost Opis
autoplay autoplay Automatsko startovanje
controls Controls Specificira da li se kontrole
prikazuju
height, width pixels, pixels Podešavanje visine i širine
src URL URL fajla koji se emituje
5/25/2015
19
HTML 5 canvas
6. Canvas
6.1. Šta je Canvas
1. Canvas API omogucava crtanje. Može se crtati bez ogranicenja uz pomoc
JavaScript-a.
2. Primenom Canvas tehnike mogu se dobiti bolje performanse u odnosu na ucitavanje
slika.
Primenom Canvas-a mogu se cratati oblici i linije, isecci, lukovi, tekst,
gradijenti i šabloni.
• Jedan canvas je pravougaona površ na HTML stranici. Podrazumevano bez ivice i
sadržaja.
• <canvas id= "testCanvas" width="200" height="100"></canvas>
• Napomena: Uvek treba specificirati id atribut kao i širinu i visinu površi.
5/25/2015
20
6. Canvas
6.2. Crtanje
Prvo se dodaje funkcija za crtanje draw u script sekciji, a zatim se u njoj
referiše
Canvas pomocu ID vrednosti.
• <script>
• function draw(){
• var q = document.getElementById("testCanvas");
• }
• </script>
Zatim se kreira kontekst za crtanje u 2d koristeci metodu getContext
• <script>
• function draw(){
• var q = document.getElementById("testCanvas");
• var ctx = q.getContext("2d");
• }
• </script>
6. Canvas
6.2. ispunjavanje površi i bojenje ivice
<!DOCTYPE html>
<html>
<body>
<canvas id="testCanvas" width="200" height="100" style="border:2px
solid red;">
Vaš citac ne podržava HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("testCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 100, 75);
ctx.strokeStyle = "#0000FF";
ctx.strokeRect(100,75,100,25);
</script>
</body>
</html>
5/25/2015
21
6. Canvas
6.2. iscrtavanje linija
<script>
ctx.moveTo(0, 50);
ctx.lineTo(50, 100);
ctx.lineTo(180, 0);
ctx.strokeStyle = "#00BBBB";
ctx.stroke();
</script>
6. Canvas
6.2. kreiranje kruga odnosno isecka
<script>
ctx.fillStyle = "#aa0000";
ctx.beginPath();
ctx.moveTo(50, 50); ctx.lineTo(90, 50);
ctx.arc(50, 50, 40, 0, Math.PI / 2);
ctx.lineTo(50, 50);
ctx.fill();
ctx.strokeStyle = "#00aa00";
ctx.beginPath();
ctx.arc(150, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
5/25/2015
1
CSS3
Vendor Prefiksi
? Neka CSS pravila ne mogu raditi bez specificnih prefiksa web citaca.
? Mozilla Browsers (Firefox)
-moz
? Webkit Browsers (Safari, Chrome)
-webkit
? Opera
-o
? Internet Explorer
-ms

? Not all CSS rules work with all browsers:
? http://www.caniuse.com/
? http://www.css3.info/selectors-test/
? http://quirksmode.org/css/contents.html
5/25/2015
2
Šta novo
donosi
CSS3?
Novi selektori!
? element1~element2
Selektruje jedan elementi koji je sledeci blizanaca drugog
elementa.
Example:
http://www.quirksmode.org/css/selector_sibling.html
? [attribute^=value]
Element ciji atribut pocinje sa prefiksom value.
? [attribute$=value]
Element ciji atribut se završava sa value.
? [attribute*=value]
Predstavlja neki element sa atributom cija vrednost sadrži
value.
Example:
http://www.quirksmode.org/css/selector_attributeAdvanced.html
5/25/2015
3
Novi pseudo elements/klase!
? :first-of-type
? :last-of-type
? :only-of-type
? Selektuje elemente koji su prvi, poslednji ili jedini dete element ili emenent
tipa.
? Example:
http://www.quirksmode.org/css/type.html
? :first-child
? :only-child
? :last-child
? Examples:
http://www.quirksmode.org/css/firstchild.html
http://www.quirksmode.org/css/onlychild.html
Još novih pseudo
elemenata/klasa!
? nth-child(n)
? :nth-of-type(n)
? Example:
http://www.quirksmod
e.org/css/nthchild.html
? :nth-last-child(n)
? :nth-last-of-type(n)
? Example:
http://www.quirksmode.
org/css/nthlastchild.h tml
? :root
? Selects the root initial
containing block (in HTML, this is the
<html> tag)
? Example:
org/css/root.html
? :empty
? Selektuje elementi bez sadržaja (“empty”).
? Example:
org/css/empty.html
5/25/2015
4
Još novih pseudo
elemenata/klasa!
? :enabled
? :disabled
? :checked
? Omogucava dizajneru da primeni stil da bi oznacio elemente forme.
? Example:
http://www.quirksmode.org/css/enabled.html
? :not(selector)
? Negacija selektora.
? Example:
http://www.quirksmode.org/css/not.html
? ::selection
? Defines style for text that a user selects.
? Example:
http://www.quirksmode.org/css/selection.html
***Nova svojstva! (ili grupe
svojstava!)
• Animation
• Background
• Border and outline
• Box
• Color
• Content Paged
Media
• Dimension
• Flexible Box
• Font
• Generated content
• Grid
• Hyperlink
• Linebox
• List
• Margin
• Marquee
• Multi-column
• Padding
• Paged Media
• Positioning
• Print
• Ruby
• Speech
• Table
• Text
• 2D/3D Transform
• Transition
• User-interface
CSS Grupe svojstava:
5/25/2015
5
Animacije - 1
? Animacija predstavlja postepeno menjanje stila od
jednog ka drugom.
? Može se menjati veci broj CSS svojstava proizvoljan broj
puta.
? Da bi se koristile CSS3 animacije potrebno je prvo
definisati kljucne frejmove za animaciju.
? „Keyframes“ cuvaju stilove elemenata koji ce se
pojavljivati u animaciji u odredenim trenucima.
Animacije - 2
? @keyframes
? @keyframes test {
from {background-color: blue;}
to {background-color: green;}
}
? Animacija se menja od jednog stila do drugog koji oznacavaju promenu
više svojstava.
? Da bi animacija bila vidljiva, potrebno ju je primeniti na nekom
elementu.Na primer na <div> elementu.
? div {
width: 100px;
height: 100px;
background-color: blue;
animation-name: test;
animation-duration: 5s;
}
? Animacija ce trajati 5 sekundi, za to vreme ce se promeniti od 0% (from)
do 100% (to)
5/25/2015
6
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; -webkit-animationduration:
4s;
animation-name: example;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
}
@keyframes example {
}
Animacije - 3
? @keyframes - Definiše animaciju
? animation - Skraceno svojstvo za sva svojstva animacije nabrojana ispod, osim
animation-play-state
? animation-name - Definiše ime za @keyframes animaciju
? animation-duration - Definiše trajanje u sekundama ili milisekundama za 1 ciklus
? animation-timing-function - Definiše funkciju brzine animacije
? animation-delay - Definiše kada ce animacija startovati
? animation-iteration-count – Definiše broj ciklusa animacije
? animation-direction – Definiše da li ce animacija imati možda suprotan ciklus.
? animation-play-state – Definiše da li je anmacija pauzirana ili pokrenuta
? Primeri:
http://www.leemunroe.com/css3-animations/
http://css3.bradshawenterprises.com/animations/
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_animation1
http://www.standardista.com/sxsw/#slide24
5/25/2015
7
Transition
? Da bi se kreirao neki efekat u vidu tranzicije potrebno
je definisati:
1. CSS svojstvo kojim se želi postici efekat
2. Trajanje efekta
? Ukoliko trajanje nije definisano, podrazumevana
vrednost je 0.
Transition
? transition – Skraceno svojstvo
? transition-property - Definiše ime svojstva za tranziciju
? transition-duration - Definiše vreme tranzicije u sekundama ili
milisekundama
? transition-timing-function - Definiše naziv funkcije promene
brzine tranzicije
? transition-delay - Definiše vreme za koje krece tranzicija
? Primer:
http://css3.bradshawenterprises.com/transitions/
5/25/2015
8
Primer
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background: red;
-webkit-transition: width 1s;
-webkit-transition: height 4s;
transition: width 1s, height 4s;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Funkcije promene
? Svojstvo transition-timing-function definiše brzinu i
nacin promene svojstva u tranziciji. Moguce vrednosti
su:
? ease – spori start, brzo i spori kraj
? linear – ista brzina sve vreme tranzicije
? ease-in – spori start
? ease-out – spori kraj
? ease-in-out – spori start i kraj
? cubic-bezier – definisanje sopstvene funkcije
5/25/2015
9
Transform
? Na primer
? #myDIV {
background-color:lightblue;
transform:rotateX(10deg);
}
? transform - Primenjuje transformaciju na neki element
? transform-origin – Omogucava promenu pozicije transformisanog elementa
? transform-style – Definiše nacin
Specifies how nested elements are rendered in 3D space
? perspective – pogled na 3D elemente
? perspective-origin - Donja pozicija 3D elemenata
? backface-visibility - da li je vidljiva ili ne
? Primeri:
http://westciv.com/tools/3Dtransforms/index.html
http://css3.bradshawenterprises.com/transforms/
Vrste transformacija
? Transformacije elementa mogu biti 2D i 3D
? Moguce su:
? Rotacija
? Skaliranje
? Pomeranje,
? Iskrivljenje,…
? Sintaksa je:
? transform: transform-functions|initial|inherit;
5/25/2015
10
Funkcije transformacije
? matrix, matrix3d
? translate(x,y), translate3d(x,y,z), translateX(x),
translateY(y), translateZ(z)
? scale(x,y), scale3d(x,y,z), scaleX(x), scaleY(y), scaleZ(z)
? rotate(ugao), rotate3d(x,y,z, ugao), rotateX(ugao),
rotateY(ugao), rotateZ(ugao)
? skew(x- ugao,y- ugao), skewX(ugao), skewX(ugao)
? perspective(n) – Odreduje pogled za 3D transformisani
element
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #animiraniDiv {
6. border: 1px solid blue;
7. width: 200px;
8. height: 100px;
9. background-color: lavender;
10. color: white;
11. -webkit-animation:
rotacija360 5s infinite;
12. animation: rotacija360 5s
infinite;
13. }
14. #animiraniDiv h1 {
15. text-align:center;
16. color: violet;
17. }
18. @-webkit-keyframes rotacija360 {
19. 100% {
20. -webkit-transform:
rotate(360deg);
21. }
22. }
23. @keyframes rotacija360 {
24. 100% {
25. transform:
rotate(360deg);
26. }
27. }
28. </style>
29. </head>
30. <body>
31. <div id="animiraniDiv">
32. <h1>Zdravo!</h1>
33. </div>
34. </body>
35. </html>
5/25/2015
11
? transform-origin – omogucava da promeniti poziciju za
transformisane elemente. Mora se koristiti zajedno sa
transformacijom. Definiše tacku u odnosu na koju se
izvodi transformacija.
? 2D transformacije mogu menjati x- odnosno y-ose nekog
elementa. 3D mogu takode menjati i z-osu elementa.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #container {
6. padding: 0px;
7. width: 400px;
8. height: 400px;
9. border: 1px dotted black;
10. }
11. #DIV1 {
12. padding: 0px;
13. width: 100px;
14. height: 100px;
15. background-color: gray;
16. -webkit-animation:
rotacijaSaPromenomPozicije 5s infinite;
17. animation: rotacijaSaPromenomPozicije
5s infinite;
18. -webkit-transform-origin: 100% 0%;
19. transform-origin: 100% 0%;
20. }
21. @-webkit-keyframes
rotacijaSaPromenomPozicije {
22. 50% { -webkit-transform:
rotate(360deg); }
23. }
24. @keyframes rotacijaSaPromenomPozicije {
25. 50% { transform: rotate(360deg); }
26. }
27. </style>
28. </head>
29. <body>
30. <p>Promena transform-origin za rotaciju
oko gornjeg desnog temena kvadrata:<p>
31. <div id="container">
32. <div id="DIV1">transform-origin</div>
33. </div>
34. </body>
35. </html>
5/25/2015
12
Background
? background-clip - Definiše oblast iscrtavanja na pozadini
? background-origin – Definiše pozicioniranje. Neke vrednosti su:
?
? background-size – Definiše velicinu
? Primer:
http://www.css3.info/preview/background-origin-and-background-clip/
? background-gradient – Definiše gradijent boje u pozadini
? Primeri:
http://www.stanford.edu/group/ttsclasses/cgi-bin/techietips/?p=485
http://css-tricks.com/5700-css3-gradients/
http://www.standardista.com/sxsw/#slide3
padding-box Podrazumevano. Pocetak je gornja leva ivica padding-a.
border-box Gornja leva ivica je ivice (border-a)
content-box Gornja leva ivica sadržaja (content-a)
Uvod u Internet
tehnologije
Vežba 1
? Krajem sedamdesetih godina prošlog veka, Medunarodna organizacija za
standardizaciju (ISO) predložila je organizaciju racunarskih mreža u
sedam slojeva.
? Ovaj model se naziva OSI (Open System Interconnection) model.
? Sedam slojeva OSI modela su, pocev od najvišeg ka najnižem:
aplikativni sloj, sloj prezentacije, sloj sesije, transportni sloj,
mrežni sloj, sloj veze podataka i fizicki sloj.
Sloj aplikacije
? Sloj aplikacije (engl. Application Layer) je sedmi i najviši sloj OSI
referentnog modela.
? To je i najviši sloj TCP/IP modela, koji je razvijan za potrebe Interneta
i jednostavniji je od OSI modela).
? Ovaj sloj opisuje rad aplikacija u mreži i njihovu interakciju sa
servisima i protokolima nižih slojeva. Protokoli sloja aplikacije
imaju funkciju da razmene podatke izmedu pokrenutih programa na
prijemnoj i predajnoj strani.
Sloj aplikacije
Mrežne aplikacije
? Mrežne aplikacije su razlog postojanja racunarskih mreža. Bez korisnih
aplikacija,
ne bi ni bilo razloga za projektovanje mrežnih protokola koji ih podržavaju.
? Od kada se internet pojavio, kreirane su brojne korisne i zanimljive aplikacije.
U
internet aplikacije spadaju sledece aplikacije:
? za elektronsku poštu,
? prenos datoteka,
? aplikacije za surfovanje vebom i pretraživanje podataka sa interneta,
? za elektronsku prodaju,
? za video konferencije (Skype),
? za distribuciju video zapisa (YouTube),
? onlajn igrice za više igraca (World of Warcraft),
? aplikacije za društvene mreže (Facebook, Twitter).
Sloj aplikacije
Principi mrežnih aplikacija
? Najvažniji deo razvoja neke mrežne aplikacije jeste pisanje programa
koji ce se izvršavati na razlicitim krajnjim sistemima.
? Na primer, veb aplikacija ima dva nezavisna udaljena programa koji
komuniciraju jedan sa drugim:
? program pretraživaca veba (browser), koji se izvršava na racunaru korisnika –
stonom racunaru, laptopu, tabletu, mobilnom telefonu, i
? program za veb server koji se izvršava na racunaru koji ima ulogu veb servera.
Sloj aplikacije
Arhitektura mrežnih aplikacija
? Pre nego što se pocne sa pisanjem programa, potrebno je odluciti kakva
ce biti arhitektura aplikacije. Postoje dve arhitekture savremenih
mrežnih aplikacija koje preovladuju. To su:
? klijentsko-serverska arhitektura, i
? P2P arhitektura.
Sloj aplikacije
Klijentsko-serverska arhitektura
? Kod klijentsko-serverske arhitekture, uvek postoji dostupan racunar, nazvan
server, cije usluge traži mnogo drugih racunara, koji se nazivaju klijenti.
? Klijenti ne komuniciraju neposredno jedan sa drugim.
? Server ima stalnu, dobro poznatu adresu i uvek je dostupan. Klijent može
uvek da ga kontaktira, šaljuci odgovarajuci paket na IP adresu servera.
? Cesto se dešava da jedan server ne može da se izbori sa svim zahtevima
svojih klijenata. Upravo zato se koristi centar podataka u kome se nalazi
veliki broj racunara da bi se dobio mocan virtuelni server.
? Google ima 30 do 50 centara podataka rasporedenih svuda po svetu, koji
zajedno upravljaju pretragom. Centar podataka može da ima stotine hiljada
servera, koji moraju biti prikljuceni i održavani.
Sloj aplikacije
P2P arhitektura
? Kod P2P arhitekture, aplikacije koriste direktnu komunikaciju izmedu
parova ravnopravnih racunara (engl. peers). Ovi racunari komuniciraju
bez posredovanja posebnog servera, pa se ova arhitektura naziva
arhitekturom ravnopravnih korisnika (engl. peer-to-peer, P2P).
? U ove aplikacije spadaju one za razmenu datoteka (Bit Torrent), internet
telefonija (Skype) i druge.
? Neke aplikacije mogu imati i hibridnu arhitekturu.
Sloj aplikacije
Klijentsko-serverska arhitektura i P2P arhitektura
Sloj aplikacije
Klijentski i serverski procesi
? Program koji se nalazi i izvršava na krajnjem sistemu naziva se proces.
Ukoliko se procesi završavaju na dva razlicita krajnja sistema, medusobno
ce komunicirati razmenom poruka kroz racunarsku mrežu. Predajni proces
pravi poruke i šalje ih u mrežu, dok prijemni proces prima te poruke i po
potrebi odgovara šaljuci poruke nazad.
? Na primer, u slucaju veb aplikacije, proces veb pretraživaca klijenta
razmenjuje poruke sa procesom veb servera. U sistemu P2P razmene datoteka,
datoteke se prenose od procesa na jednom ravnopravnom racunaru do procesa
na drugom ravnopravnom racunaru.
? Za svaki par procesa koji medusobno komunicira, jedan od ova dva procesa
nazivamo klijent, a drugi server.
Sloj aplikacije
Interfejs izmedu procesa i racunarske mreže
? Navedeni procesi medusobno komuniciraju, tj. šalju poruke jedan drugom.
Sve poruke poslate od jednog procesa do drugog moraju da produ kroz mrežu
izmedu njih. Procesi šalju poruke u mrežu i primaju poruke iz mreže preko
softverskog interfejsa koji se naziva soket.
? Poredenje sa kucama i vratima.
? Soket je zapravo posrednik izmedu aplikativnog i transportnog sloja.
Naziva se još i programski interfejs aplikacije izmedu odredene
aplikacije i mreže.
? Programer aplikacije može da utice na sve ono što se dogada na strani
aplikativnog sloja soketa, ali veoma malo na ono što se dogada na strani
transportnog sloja sokete. Recimo, može da izabere transportni protokol
(ukoliko uopšte postoji mogucnost izbora).
Sloj aplikacije
Adresiranje procesa
? Da bi proces koji se izvršava na jednom racunaru slao pakete procesu koji se
izvršava na drugom racunaru, neophodno je da prijemni proces ima sdresu.
Da bi se identifikovao prijemni proces, potrebno je odrediti dva podatka:
adresu racunara i identifikator koji odreduje prijemni proces na
odredišnom racunaru.
? Racunar se identifikuje svojom IP adresom. To je 32-bitna velicina koja
jedinstveno identifikuje racunar.
? Racunar može da izvršava brojne aplikacije, i za svaku od tih aplikacija
mora imati poseban soket. Za ovu identifikaciju, koristi se broj porta.
? Kombinacija IP adrese i broja porta se zapravo naziva soket.
? Na primer: 192.168.1.1:80.
Sloj aplikacije
Transportne usluge koje su dostupne aplikacijama
? Za prenos poruka od soketa predajnog procesa do soketa prijemnog procesa
odgovoran je protokol transportnog sloja.
? Prilikom programiranja aplikacije, treba se odluciti za jedan od
raspoloživih protokola transportnog sloja.
? Kako se odluciti? Treba prouciti usluge koje nude raspoloživi protokoli
transportnog sloja. Usluge se razvrstavaju na osnovu cetiri parametra:
? pouzdan prenos podataka,
? propusna moc,
? vremenska ogranicenja, i
? bezbednost.
? Internet aplikacijama ponudena su dva transportna protokola: UDP i TCP.
Sloj aplikacije
Protokoli aplikativnog sloja
? Kako su poruke koje šalju procesi struktuirane? Šta znace pojedina polja u
tim porukama? Kada procesi šalju poruke?
? Ova pitanja nas dovode do protokola aplikativnog sloja. On definiše:
? tipove poruka koje se razmenjuju, npr. poruke zahteva i poruke odgovora,
? sintaksu za razlicite vrste poruka, kao što su polja u poruci i kako se ta polja
razlikuju,
? znacenje tih polja tj, znacenje informacija u poljima, i
? pravila po kojima se odreduje kada i kako neki proces šalje podatke i odgovara na
njih.
? Aplikativni protokol veba jeste HTTP (HyperText Transfer Protocol). Protokol
FTP (File Transfer Protocol), koji je suprotnost protokolu HTTP, ce takode biti
pomenut u nastavku.
Sloj aplikacije
Veb i HTTP
? Srce veba je HTTP, tj. protokol za prenos hiperteksta. On se implementira
kroz dva programa: klijentski i serverski program. Ova dva programa, koji
se izvršavaju na dva razlicita krajnja sistema, komuniciraju jedan sa drugim
razmenom HTTP poruka. Protokol HTTP definiše strukturu tih poruka i
nacin na koji ih klijent i server razmenjuju.
? Veb stranice se sastoje od objekata. Objekat je u suštini datoteka – kao što
je HTML datoteka, JPEG slika, Java aplet ili video zapis – koju je moguce
adresirati uniformnim lokatorom resursa (Uniform Resource Locator, URL).
Sloj aplikacije
Veb i HTTP
? Vecina veb stranica se sastoji od osnovne HTML datoteke i nekoliko objekata
koji se u njoj linkuju. Osnovna HTML datoteka linkuje ostale objekte na
stranici putem njihovih URL adresa. Svaka URL adresa sastoji se od dva dela:
? naziva servera na kome se odredeni objekat nalazi, i
? putanje do objekta.
? Na primer, URL adresu
http://www.someSchool.edu/someDepartment/picture.gif sacinjava:
? deo www.someSchool.edu za naziv racunara, i
? deo someDepartment/picture.gif za putanju do objekta.
Sloj aplikacije
Veb i HTTP
? HTTP je protokol za komunikaciju izmedu servera i klijenta, koji
funkcioniše po principu zahtev/odgovor.
? Server konstantno osluškuje zahteve na odredenom mrežnom
komunikacijskom portu (tipicno port 80), cekajuci da se klijent poveže i
pošalje svoj zahtev. Zahtev se sastoji od osnovne HTTP komande (cija je
sintaksa propisana standardom i koja se sastoji od naziva komande, imena
traženog dokumenta i verzije podržanog HTTP-a) i zaglavlja koje se sastoji
od odredenog broja redova teksta koji bliže odreduju aspekte zahteva.
? Pošto se na veb pretraživacima realizuje klijentska strana protokola
HTTP, ravnopravno koristimo izraze veb pretraživac ili klijent. Na veb
serverima, na kojima se realizuje serverska strana protokola HTTP, nalaze
se veb objekti do kojih se dolazi navodenjem njihovih URL adresa.
? U popularne veb servere spada npr. Apache.
Sloj aplikacije
Veb i HTTP
Sloj aplikacije
FTP protokol
? FTP (engl. File Transfer Protocol) protokol je protokol za prenos datoteka. To
je najcešce korišcen protokol za prenos podataka izmedu dva racunara na
mreži.
? FTP veza se uspostavlja na zahtev klijentskog racunara
prema serverskom racunaru. Klijentski racunar mora da poseduje program
koji implementira FTP protokol (tzv. FTP klijent), a serverski racunar mora
da poseduje program koji prihvata konekcije na standardnom FTP portu i
takode razume komande protokola FTP (tzv. FTP server). Kada se veza
uspostavi, klijentski program šalje korisnicke komande serverskom
programu, koji ih obavlja i šalje odgovor. Taj odgovor može biti poruka da je
komanda uspešno obavljena, datoteka koja je zahtevana ili poruka o grešci.
Sloj prezentacije
Enkripcija i kodiranje podataka
? Sloj prezentacije (engl. Presentation Layer) je šesti od sedam slojeva OSI
referentnog modela, odgovara na zahteve sloja aplikacije i dalje ih
prosleduje sloju sesije. Ovom sloju se ne mogu kao i inace pridružiti
odgovarajuci protokoli nekog steka. Njegove primarne funkcije su:
? kodiranje i konverzija podataka.
? kompresija/dekompresija podataka pri slanju/prijemu.
? enkripcija/dekripcija podataka.
Sloj sesije
Uspostavljanje sesije krajnjih korisnika
? Sloj sesije (engl. Session Layer) je peti sloj OSI referentnog modela. Kao što
i sam naziv sloja kaže, ovaj sloj je zadužen za uspostavljanje i održavanje
sesije izmedu pokrenutih programa na predajnoj i prijemnoj strani.
? Protokoli sloja sesije imaju funkciju da razmene podatke o uspostavljanju
komunikacije, da održavaju komunikaciju aktivnom, ako je potrebno (u slucaju
prekida) da je ponovo uspostave i na kraju da je završe.
Transportni sloj
? Transportni sloj predstavlja centralni deo slojevite mrežne arhitekture.
Njegova najvažnija uloga je da neposredno obezbedivanje komunikacionih usluga
procesima aplikacija koji se izvršavaju na razlicitim racunarima.
? Na predajnoj strani, transportni sloj pretvara poruku aplikativnog sloja, koju
dobija od procesa aplikacije pošiljaoca, u pakete transportnog sloja, u internet
tehnologiji poznate pod nazivom segmenti transportnog sloja. To se vrši
razbijanjem poruke aplikacije na manje delove i dodavanjem zaglavlja
transportnog sloja u sve te delove. Transportni sloj zatim prenosi te segmente
do mrežnog sloja predajnog krajnjeg sistema, gde se ti segmenti enkapsuliraju u
pakete mrežnog sloja (datagrame) i šalju ka odredištu. Na prijemnoj strani,
mrežni sloj iz datagrama izvlaci segment transportnog sloja i prenosi ga do
transportnog sloja. Transportni sloj zatim obraduje primljeni segment i podatke
iz segmenta dostavlja prijemnoj aplikaciji.
Transportni sloj
? Internet nudi dva transportna protokola. To su UDP (User Datagram
Protocol), koji aplikaciji nudi nepouzdanu uslugu bez uspostavljanja veze,
i TCP (Transmission Control Protocol), koji aplikaciji koja ga koristi nudi
pouzdanu uslugu za uspostavljanje veze. Pri projektovanju mrežne
aplikacije, programer mora da izabere jedan od ova dva transportna
protokola.
? Pakete transportnog sloja nazivamo segmentima. Za pakete mrežnog
sloja koristi se izraz datagram.
Transportni sloj
Usluge TCP protokola
? Model usluga TCP protokola obuhvata uslugu sa uspostavljanjem veze i uslugu
pouzdanog prenosa podataka.
? Uspostavljanje veze: Dakle, pre nego što pocne protok poruka na
aplikativnom nivou, TCP protokol razmenjuje kontrolne informacije
transportnog sloja izmedu klijenta i servera. Po završetku ove razmene
informacija, kaže se da je uspostavljena TCP veza izmedu soketa dva
procesa. Oba procesa mogu istovremeno da šalju svoje poruke. Kada završi sa
slanjem podataka, aplikacija mora da raskine vezu.
? Usluga pouzdanog prenosa podataka: Procesi koji razmenjuju podatke
koristeci TCP protokol mogu da budu sigurni da ce svi podaci biti
isporuceni bez grešaka i pravilnim redosledom.
Transportni sloj
Usluge UDP protokola
? Ovaj protokol je pojednostavljeni transportni protokol koji nudi samo
najosnovnije usluge. Protokol UDP ostvaruje se bez uspostavljanja veze, pa
nema potrebe za rukovanjem izmedu dva procesa pre pocetka komunikacije.
UDP pruža uslugu nepouzdanog prenosa podataka, tj. kada neki proces preda
poruku u soket protokola UDP, nema garancije da ce ta poruka zaista stici do
prijemnog procesa. Takode, poruke koje stignu do odredišta mogu da stignu
po poremecenom redosledu.
? Recimo, aplikacije za elektronsku poštu, veb i prenos datoteka koriste TCP
jer obezbeduje uslugu pouzdanog prenosa podataka. Sa druge strane,
aplikacije internet telefonije (Skype) cesto tolerišu odredeni gubitak
podataka, pa mogu koristiti UDP ili TCP.
Transportni sloj
? Znate da transportni sloj leži neposredno iznad mrežnog sloja. Dok
protokol transportnog sloja obezbeduje logicku komunikaciju izmedu
procesa koji se izvršavaju na razlicitim racunarima, protokol mrežnog
sloja obezbeduje logicku komunikaciju izmedu racunara. Ovo se može
objasniti korišcenjem analogije sa obicnim domacinstvima.
Transportni sloj
? Zamislite dve udaljene kuce, na razlicitim krajevima sveta. U svakoj od njih živi
po desetoro dece.
Deca u jednoj od kuca su rodaci deci u drugoj kuci. Deca vole da se dopisuju i
svako dete, svake
nedelje šalje po jedno pismo svakom svoj rodaku i svako pismo se otprema u zasebnoj
koverti,
obicnom poštom. Dakle, svake nedelje se iz svake kuce šalje po 100 pisama onoj
drugoj kuci. U svakoj
od ovih kuca, po jedno dete zaduženo je za prikupljanje i slanje pisama. Ana svake
nedelje obilazi
svu svoju bracu i sestre, prikuplja poštu i predaje je poštaru, koji svakoga dana
obilazi kucu. Kada
pisma stignu u njenu kucu, Anin zadatak je da podeli poštu svojoj braci i sestrama.
U drugoj kuci,
Petar obavlja te iste poslove.
? U ovom primeru, poštanska služba obezbeduje logicku komunikaciju izmedu dve kuce,
poštanska
služba, dakle, prenosi pisma od kuce do kuce, a ne od osobe do osobe. Logicku
komunikaciju izmedu
rodaka obezbeduju Ana i Petar jer oni preuzimaju i isporucuju pisma svojoj braci i
sestrama. Sa
stanovišta rodaka, Ana i Petar jesu poštanska služba, iako su samo deo isporuke
pisma s kraj na
kraj. Ovaj primer je lepo poredenje kojim objašnjavamo kako se transportni sloj
odnosi prema
mrežnom sloju:
? poruke aplikacija = pisma u kovertama,
? procesi = rodaci,
? racunari (koji su i krajnji sistemi) = kuce,
? protokol transportnog sloja = Ana i Petar,
? protokol mrežnog sloja = poštanska služba (ukljucujuci i poštare).
Transportni sloj
? Protokol mrežnog sloja interneta zove se IP (Internet Protocol). Protokol IP
obezbeduje
logicku komunikaciju izmedu racunara. Model usluga koje nudi protokol IP je usluga
najboljeg pokušaja isporuke. To znaci da protokol IP cini sve što može da isporuci
segmente izmedu racunara, ali ne daje nikakvu garanciju. Tacnije, ne garantuje
isporuku segmenta, ne garantuje redosled isporuke segmenata i ne garantuje
integritet
podataka u segmentima. Svaki racunar ima adresu mrežnog sloja tzv. IP adresu. Više
o
IP adresiranju, uskoro.
? Najvažniji zadatak protokola UDP i TCP je da uslugu isporuke protokola IP izmedu
dva
krajnja sistema prošire na uslugu isporuke izmedu dva procesa koji se izvršavaju na
krajnjim sistemima. Proširivanje isporuke od racunara do racunara na isporuku od
procesa do procesa naziva se multipleksiranje i demultipleksiranje transportnog
sloja. Ovi protokoli takode obezbeduju proveru integriteta, tako što u zaglavljima
segmenata postoje polja za otkrivanje grešaka. Ove dve osnovne usluge transportnog
sloja - isporuka podataka od procesa do procesa i proveravanje grešaka - jedine su
dve
usluge koje pruža protokol UDP! Slicno protokolu IP, i protokol UDP je nepouzdana
usluga, ne garantuje da ce podaci koje šalje jedan proces stici neošteceni (ili
stici
uopšte!) do odredišnoh procesa.
Transportni sloj
? TCP nudi aplikacijama još nekoliko dodatnih usluga. Prvo i najvažnije, nudi
pouzdan
prenos podataka. Koristeci kontrolu toka, redne brojeve, potvrdu prijema i tajmere,
protokol TCP obezbeduje da se podaci od predajnog procesa do prijemnog procesa
isporuce tacno i u ispravnom redosledu. Na ovaj nacin, TCP pretvara nepouzdanu
uslugu protokola IP izmedu krajnjih sistema, u pouzdanu uslugu za prenos podataka
izmedu procesa. Protokol TCP takode obezbeduje kontrolu zagušenja. Ovo sprecava da
neka TCP veza pretrpa podacima linkove i rutere, koji se nalaze izmedu racunara
koji
komuniciraju. Protokol TCP nastoji da svim TCP vezama, koje prolaze preko zagušenog
mrežnog linka, dodeli jednak deo propusnog opsega. Ovo se postiže regulisanjem
brzine kojom TCP veza na strani pošiljaoca šalje podatke u mrežu. Nasuprot tome,
UDP
ne reguliše brzinu slanja podataka - aplikacija koja koristi UDP može da šalje
podatke proizvoljnom brzinom, dokle god hoce.
Transportni sloj
Portovi
? Svrha porta je da jedinstveno identifikuje razlicite aplikacije ili procese
pokrenute na istom racunaru i na taj nacin im obezbedi da zajedno koriste jednu
fizicku mrežnu konekciju racunara.
? Port je pridružen IP adresi, odvojen karakterom ’:’ i predstavlja jedinstvenu
krajnju tacku na nivou operativnog sistema racunara dodeljenu odredenoj
aplikaciji ili procesu.
? Na primer: 192.168.1.1:80
? Broj porta je 16-bitni broj, u rasponu od 0 do 65535. Brojevi portova od 0 do
1023
nazivaju se dobro poznatim brojevima portova i njihova upotreba je ogranicena,
što znaci da su rezervisani za protokole opšte poznatih aplikacija. U nastavku
su dati neki od dobro poznatih portovi. Na primer, veb server se identifikuje
brojem porta 80.
Transportni sloj
Dobro poznati portovi
? 20 & 21: File Transfer Protocol (FTP)
? 22: Secure Shell (SSH)
? 23: Telnet remote login service
? 25: Simple Mail Transfer Protocol (SMTP)
? 53: Domain Name System (DNS) service
? 80: Hypertext Transfer Protocol (HTTP) used in the World Wide Web
? 110: Post Office Protocol (POP3)
? 119: Network News Transfer Protocol (NNTP)
? 143: Internet Message Access Protocol (IMAP)
? 161: Simple Network Management Protocol (SNMP)
? 194: Internet Relay Chat (IRC)
? 443: HTTP Secure (HTTPS)
? 465: SMTP Secure (SMTPS)
Transportni sloj
Aktivnost
? Upotrebom naredbe netstat, uociti uspostavljene konekcije na vašem
racunaru. Protokoli? Adrese? Portovi?
Transportni sloj
Aktivnost
Mrežni sloj
? Neka su u mreži neka dva racunara. Mrežni sloj racunara koji šalje informacije
ka drugom racunaru preuzima segmente od transportnog sloja, enkapsulira svaki
segment u datagram i zatim šalje te datagrame na najbliži ruter. U prijemnom
racunaru, mrežni sloj prima datagrame od najbližeg rutera, izdvaja segmente
transportnog sloja i isporucuje ih naviše - transportnom sloju prijemnog
racunara. Dakle, uloga mrežnog sloja je prenošenje paketa od predajnog do
prijemnog racunara. Da bi to obavio, mrežni sloj mora da obavi dva važna
zadatka:
? Prosledivanje: Kada paket stigne na ulazni link rutera, on mora da ga premesti
na odgovarajuci izlazni link.
? Rutiranje: Mrežni sloj mora da utvrdi rutu ili putanju kojom paketi proticu od
pošiljaoca do primaoca. Algoritme koji izracunavaju te putanje nazivamo
algoritmima rutiranja.
Mrežni sloj
? Mrežni sloj interneta se sastoji od:
? protokola IP (Internet Protocol),
? komponente za rutiranje koja utvrduje putanju kojom datagram putuje od izvora do
odredišta, i
? komponente koja omogucava slanje obaveštenja o greškama u datagramima i pružanje
izvesnih informacija o mrežnom sloju.
Mrežni sloj
Internet protokol
? IP protokol ne zahteva prethodno upostavljanje veze u trenutku slanja podatka,
vec
racunar koji šalje podatke pokušava sve dok ne prosledi poruku, prenos podataka
je relativno nepouzdan, što znaci da nema gotovo nikave garancije da ce poslati
paket zaista i doci do odredišta nakon što je poslat. Sam paket u procesu
prenosa se može promeniti, zbog razlicitih osnovnih prenosnih pravaca, može
se dogoditi da segmenti ne stižu po redosledu, mogu se duplicirati ili potpuno
izgubiti tokom prenosa. Ukoliko aplikacija zahteva pouzdanost, koriste se
mehanizmi TCP protokla u sloju iznad samog IP protokola. TCP protokol je isto
zadužen za definisanje redosleda paketa koji stižu (sekvence).
? Trenutno se koriste dve verzije IP protokola. Verzija 4 internet protokola (IPv4)
je opšteprihvacena. Verzija 6 internet protokola (IPv6) je predložena da zameni
IPv4.
Mrežni sloj
IPv4
? Adresa verzije 4 dugacka je 32 bita. Piše se kao niz cetiri trocifrena broja
(od 0 do 255) razdvojenih tackama.
? Primer: 193.32.216.9.
Mrežni sloj
IPv6
? IPv6 povecava velicinu IP adrese sa 32 bita na 128 bitova. Time je
obezbedeno da se nikad ne potroše sve IP adrese. U ovom slucaju, svako
zrnce peska na svetu bi moglo da dobije svoju IP adresu. IP adresa se piše kao
osam cetvorocifrenih heksadecimalnih brojeva (osam puta po 16 bitova)
odvojenih dvotackama.
? Jedan niz nula po adresi može da se izostavi, pa je 1080::800:0:417A isto što
i 1080:0:0:0:0:800:0:417A.
Mrežni sloj
Aktivnost
? Korišcenjem naredbe ipconfig proveriti formate IPv4 i IPv6 adresa.
Mrežni sloj
Aktivnost
Sloj veze
Fizicko adresiranje, pristup medijumu
? Sloj veze (engl. Data Link Layer) je drugi nivo OSI referentnog modela, zadužen
za
postavljanje, prijem i prenos paketa putem lokalnog medijuma (veze dvaju cvorova).
? Tehnika postavljanja paketa na medijum se zove „kontrola pristupa medijumu“.
Tokom
samo jedne komunikacije paket može da se prenosi putem više razlicitih medijuma, pa
shodno tome ovom sloju pripada niz razlicitih protokola koji koriste razlicite
metode enkapsulacije paketa u frejmove i pristupa medijumu. Ovi protokoli odreduju
kako formatirati pakete, za prenos putem razlicitih medija.
? Na ovom sloju može najbolje da se uvidi smisao slojevite strukture mreže. Svaki
sloj
treba da funkcioniše tako da ima minimalan uticaj i uvid u rad drugih slojeva. Bez
ovog sloja protokoli sloja mreže, kao što je IP morali bi da definišu kako
pristupati
svakom tipu medijuma, pa s obzirom na to IP bi morao da se prilagodava svaki put
kad se
razvije neka od novih tehnologija ili medijuma.
Sloj veze
MAC adresa
? Sloj veze u slucaju deljenih medijuma (zajednicke logicke mreže) razlikuje
uredaje na
osnovu njihovih fizickih adresa (MAC adresa). Ove adrese, izvorišna i odredišna,
navode se u ramu (frejmu), tj. zaglavlju ovog sloja i odnose se samo na cvorove
unutar
jedne mreže.
? MAC adresa (engl. Media Access Control Address) je jedinstven broj, kojim se vrši
identifikacija uredaja/interfejsa na lokalnoj LAN mreži. Ovo je adresa sloja
veze OSI referentnog modela, predstavljena sa 6 bajtova najcešce
u heksadecimalnoj notaciji.
? Za razliku od IP adresa, MAC adrese uredajima proizvadaci zadaju za stalno, tj.
pri
proizvodnji adaptera ona se upisuje u njegovu ROM memoriju.
? FF-FF-FF-FF-FF-FF
? FF:FF:FF:FF:FF:FF
Sloj veze
Aktivnost
? Korišcenjem naredbe ipconfig /all procitati MAC adrese mrežnih adaptera na
vašem racunaru.
Sloj veze
Aktivnost
Fizicki sloj
Prenos signala
? Fizicki sloj (engl. Physical Layer) je prvi i najniži od sedam slojeva OSI
modela racunarske mreže. Prevodi komunikacijske zahteve od sloja veze u specificne
operacije u tehnickim uredajima, tj. prevodi bitove frejma u odgovarajuci kodiran
elektricni, opticki ili radio signal, a potom vrši predaju, kontrolu prenosa i
prijem. Ovaj sloj se za razliku slojeva viših nivoa u potpunosti odnosi na hardver
i u
skladu sa tim, zadužen je za tri primarne funkcije:
? Standardizacija komponenti (adapteri, interfejsi mržnih uredaja, kablovi i
konektori).
? Nacin predstavljanja podataka (modulacija i kodiranje) i kontrolne standarde.
? Signalizacija, sinhronizacija signala, predaja, prijem i prenos medujumom.
? Fizicki sloj je osnovni sloj na kojem se temelje funkcije ostalih slojeva u
mreži.
Medutim, sa obzirom na veliku raznovrsnost dostupnih tehnickih uredaja sa veoma
razlicitim karakteristikama, to je možda najsloženiji sloj u OSI arhitekturi.
Fizicki sloj
UTP kablovi
? Kablovi sa upredenim paricama u svom najjednostavnijem obliku sastoji se iz dva
izolovana bakarna provodnika (žice), koji su upredeni jedan oko drugog. U obliku u
kojem
se danas najcešce koristi za umrežavanje, žica ima osam (4 para) i oznacene su
razlicitim bojama.
? Upredanje žica smanjuje preslušavanje izmedu razlicitih parica i pruža dobru
zaštitu od slabijih elektromagnetnih smetnji. Da bi se još više smanjilo
preslušavanje, svaka parica ima razlicit korak upredanja, odnosno razlicit stepen
upredanja po jedinici dužine. Radi fizicke zaštite od okoline, cetiri parice
obuhvacene su spoljnim omotacem od PVC-a ili teflonom (ako kabl treba da bude
vatrostalan).
? Postoje dva tipa ovih kablova: sa neoklopljenim paricama (Unshielded Twisted-
Pair,
UTP) i okopljenim paricama (Shielded Twisted-Pair, STP).
? Maksimalna dužina jednog segmenta ovog kabla na kojoj racunari mogu biti povezani
bez
dodatnih pojacanja je 100 metara.
Fizicki sloj
UTP kablovi
? Ako je rapored žica na oba kabla isti, u pitanju je ravan (engl. Straight-
Through) kabl.
Promenom rasporeda na drugom kraju kabla, dobijamo ukršten (engl. Cross-Over) kabl.
? Ravan kabl se koristi za povezivanje dva uredaja razlicitog tipa u mreži, na
primer
racunara i rutera.
? Ukršten kabl se koristi za direktno povezivanje dva uredaja istog tipa, na primer
dva
racunara ili dva rutera.
Fizicki sloj
UTP kablovi
? RJ-45 konektor.
? Pribor za povezivanje koji se koristi za UTP kablove dosta je raznovrstan. Pored
konektora RJ-45, tu su i zidne maske, paneli za prespajanje (engl. Patch Panell),
razvodne stalaže (engl. Distribution Rack)...
Uvod u Internet
tehnologije
Vežba 2
Šta je HTML?
? HTML je jezik za opis veb stranica.
? Skracenica je od Hyper Text Markup Language.
? HTML dokumenti su tekstualni fajlovi.
? Kreiraju se pomocu nekog tekstualnog editora, npr. Notepad.
? Imaju ekstenziju .html ili .htm.
? Sastavljeni su od elemenata koji se nazivaju tagovi.
? Online HTML editor:
? https://thimble.webmaker.org
Tagovi
? Tagovi su kljucne reci koje se smeštaju izmedu znakova < i >.
? Tagovi su obicno složeni tj. sastoje se od pocetnog i završnog taga.
Završni tag je isti kao pocetni sa dodatom kosom crtom / ispred imena
taga.
<imetaga>sadržaj</imetaga>
? Tagovi mogu biti i prosti, odnosno bez završnog taga.
? U okviru pocetnog taga mogu se pisati i odredeni atributi koji imaju
svoje ime i vrednost.
<imetaga imeatributa= "vrednostatributa">sadržaj</imetaga>
Struktura HTML stranice
<html>
<head>
Ovo je zaglavlje sa osnovnim podacima o stranici.
</head>
<body>
Ovo je sadržaj stranice.
</body>
</html>
Opis tagova
? <html> i </html>
? Oznacava pocetak i kraj HTML dokumenta.
? <head> i </head>
? Oznacava pocetak i kraj zaglavlja dokumenta koje sadrži informacije o
stranici: naslov (<title>, </title>) koji se vidi u naslovnoj liniji, meta
podaci (kodni raspored, kljucne reci, opis strane, autor, osvežavanje
stranice...)
? Podaci iz zaglavlja se ne prikazuju.
? <body> i </body>
? Oznacava pocetak i kraj tela dokumenta. Ono definiše sam izgled stranice.
<title>
<title> Ovo je naslov stranice</title>
? Ovaj tag se navodi unutar zaglavlja dokumenta.
? Pomocu ovog taga zadaje se naslov stranice koji se može videti u
naslovnoj liniji pretraživaca.
? Ukoliko se ne navede, naslov stranice ce biti isti kao i naziv
odgovarajuceg .html fajla.
Atributi <body> taga
? Pozadina stranice:
? slika (npr. <body background="URL slike">)
? boja (npr. <body bgcolor="#rrggbb">, gde #rrggbb predstavlja heksadecimalni
kod boje)
? Boja teksta (npr. <body text="#rrggbb">)
? Boja linkova (npr. <body link="#rrggbb" alink="#rrggbb" vlink="#rrggbb">)
? alink – aktivni linkovi
? vlink – poseceni linkovi
? link – ostali linkovi
Primer 1
Naslovi (headers)
<hi>Naslov nivoa i</hi>
gde i uzima vrednosti od 1 do 6.
? Ovaj tag se navodi unutar tela dokumenta.
? Koristi za formiranje naslova. Najveci naslov je oznacen brojem 1.
? Ne treba koristiti ovu notaciju u cilju dobijanja podebljanog ili
velikog teksta.
Primer 1
nastavak
Paragrafi
<p>Ovo je tekst paragrafa.</p>
? Ovaj tag pravi pasus tj. tekst sa odgovarajucim proredom.
? Može imati atribut align koji može imati neku od vrednosti:
? left
? center
? right
Komentari
<!–- Ovo je komentar koji nece biti prikazan! -->
? Komentari se nece videti prilikom pregleda stranice uz pomoc nekog
veb pregledaca.
Formatiranje
? <b>Ovaj tekst je podebljan.</b>
? <i>Ovaj tekst je ukošen.</i>
? <u>Ovaj tekst je podvucen.</u>
? <strike>Ovaj tekst je prectan.</strike>
? <em>Ovaj tekst je naglašen.</em>
? H<sub>2</sub>O
? 2<sup>4</sup>=8
? <br> (eventualno <br/>) tag se koristi za prelazak u novi red.
? <hr> tag se koristi za prikazivanje horizontalne linije.
? se koristi za umetanje razmaka.
Primer 1
nastavak
? Dodati po jedan paragraf sa levim, centralnim i desnim poravnanjem.
Neka se svaki sastoji od po tri reda. Formatirati tekstove. Dodati neki
komentar.
<nobr>
? <nobr>Ovo je tekst koji ne treba da bude prelomljen.</nobr>
<pre>
<pre>
Ovaj tekst ce biti prikazan sa svim r a z m a c i m a ,
tabulacijom
i prelascima
u novi red.
</pre>
? Inace, višestruki razmaci bi se sveli na jedan, a tabulacija i novi red
bi bili zanemareni.
Primer 1
nastavak
Neka se svaki sastoji od po tri reda. Formatirati tekstove. Dodati
komentar.
<blockquote>
? <blockquote>Ovo je neki citirani tekst koji ce najverovatnije biti prikazan
uvuceno u odnosu na ostatak teksta.</blockquote>
Primer 1
nastavak
komentar.
<font>
? <font face="Comic Sans MS">Ovom tekstu je odreden font.</font>
? <font color="red">Ovaj tekst ce biti crvene boje.</font>
? <font size="5">Ovom tekstu je odredena velicina.</font>
? HTML5 ne podržava ovaj tag! Umesto njega treba koristiti CSS.
Nenumerisane liste
<ul>Liste mogu biti:
<li> nenumerisane
<li> numerisane
<li> definicione
</ul>
? Ove liste služe za nabrajanje stavki bez navodenja rednog broja.
? Tag <li> ne zahteva završni tag.
Numerisane liste
<ol>Liste mogu biti:
<li> nenumerisane
<li> numerisane
<li> definicione
</ol>
? Stavke ove liste imaju redne brojeve.
Definicione (opisne) liste
<dl>Liste mogu biti:
<dt> nenumerisane <dd> stavke nemaju redni broj
<dt> numerisane <dd> stavke imaju redni broj
<dt> definicione <dd> stavke se sastoje od termina i njegove definicije
</dl>
? Stavka ove liste se sastoji od:
? termina koji se definiše i
? njegove definicije.
? Termini zapocinju <dt> tagom, a njihove definicije <dd> tagom.
Primer 1
nastavak
komentar.
? Dodati po jednu nenumerisanu, numerisanu i definicionu listu.
Primer 2
? Napraviti stranicu po uzoru na stranicu datu na sledecem slajdu.
Uvod u Internet
tehnologije
Vežba 4
Slike
? Slike se u HTML stranicu uvode tagom <img>:
<img src="URLslike">
? Atribut src je obavezan i njegova vrednost predstavlja URL slike.
Slike
atributi
? Poravnanje slike u odnosu na tekst – align:
? top, middle, bottom, left, right
? Definicija teksta koji menja sliku ukoliko ona ne može biti prikazana – alt.
? Velicina okvira oko slike u pikselima – border.
? Iskljucuje se vrednošcu 0.
? Dimenzije slike - height i width.
? Zadaju se u pikselima ili procentima.
? Ukoliko se stvarne dimenzije razlikuju od zadatih, slika ce se izobliciti.
? Dodatni prostor izmedu slike i teksta u pikselima – vspace i hspace.
? vspace - margina ispod i iznad.
? hspace - margina levo i desno.
Primer 1
slike
? Ubaciti sliku na stranicu i iskoristiti neke od navedenih argumenata.
Linkovi
atributi
? Uvode se u HTML stranicu pomocu taga <a>:
<a> tekst koji je ujedno i link </a>
? Osnovni atributi:
? href – URL adresa stranice na koju se prelazi
? id – identifikator sidra za referenciranje
? name – isto kao id, id je globalni identifikator
? target – oznacave gde ce se otvoriti referencirani dokument
URL adresa
? Link na stranicu van servera:
<a href="protokol://host.domen[:port]/putanja/fajl"> tekst linka </a>
? Link na stranicu u okviru istog servera:
? upotreba relativnih putanja
? simbol .. oznacava direktorijum iznad
? Link do odredenog mesta u dokumentu :
? to mesto se obicno naziva sidro
<a href="stranica.html#sidro"> veza do sidra </a>
Linkovi
target
? Specificira gde ce se otvoriti referencirani dokument. Vrednosti:
? _parent – u roditeljskom okviru (frejmu)
? _self – u istom okviru (podrazumevano)
? _top – u istom prozoru ali u kompletnom, ne u okviru
? framename – u imenovanom prozoru
Slika kao hiperveza ?
Slika kao hiperveza
? Potrebno je sliku postaviti kao sadržaj hiperveze:
<a href="URL cilja"> <img src= "URL slike"> </a>
? Okvir oko slike ce biti u bojama linkova.
Primer 2
linkovi
? Napraviti link koji vodi do stranice VISER-a.
? Napraviti sliku koja predstavlja hipervezu.
? Neka postoji folder www i u njemu fajl prvi.html, dok se u folderu
www/detalji nalaze fajlovi drugi.html i prvi.html. Napraviti veze izmedu
ovih stranica korišcenjem relativnih putanja.
? Napraviti stranicu koja sadrži tekst podeljen u naslove i podnaslove.
Na pocetku stranice dodati linkovani sadržaj.
Mapiranje slike
? Slika može biti podeljena na delove tako da svaki deo predstavlja jedan
link do nekog odredišta.
? Gornji levi ugao predstavlja koordinatni pocetak mape.
? Za mapiranje se koristi atribut usemap.
Mapiranje slike
? Vrednost atributa usemap taga img odreduje koja ce se mapa koristiti za
mapiranje slike.
? Ako pocinje sa #, podrazumeva se da se mapa nalazi u istom dokumentu kao
i slika.
<img src="URLslike" usemap="#imemape" >
Mapa
? Mapa se opisuje tagom <map>.
? Naziv mape mora da odgovara nazivu iz usemap atributa slike.
? <map name="imemape">
? Mapa se sastoji iz podrucja , tako da u elementu map postoje podelementi
<area> ciji su atributi:
? shape – oblik oblasti:
? rect, circle, poly, default
? href
? coords
? Ako se oblasti preklapaju, prednost ima ona koja je ranije definisana.
? Atribut nohref znaci da izbor te oblasti ne prouzrokuje nikakvu akciju.
Mapa
shape
? rect – pravougaona oblast:
? coords – gornji levi i donji desni ugao pravougaonika u pikselima
? circle – kružna oblast:
? coords – koordinate centra kruga i njegov poluprecnik u pikselima
? poly – mnogougaonik:
? coords – koordinate tacaka zatvorene izlomljene linije u pikselima
? default – podrazumevano:
? nema koordinate, koristi se samo jednom i to za preostalu oblast
Primer 3
mapiranje slike
? Mapirati datu sliku Suncevog sistema:
? pri kliku na Sunce i na svaku od planeta treba obezbediti otvaranje
odgovarajuceg Wikipedia clanka u novom tabu,
? pri kliku na naslov u novom tabu se otvara clanak o Suncevom sistemu.
Tabele
? Tabela se definiše uz pomoc taga <table>.
? Novi red se definiše sa <tr></tr>.
? Zaglavlje celija se definiše u okviru <th></th>.
? Pojedinacna celija se definiše u okviru <td></td>.
Tabele
atributi
? align - za poravnanje
? vrednosti su left, center, right
? border – za podešavanje debljine ivice
? cellspacing – prostor izmedu celija, ukljucujuci ivice
? cellpadding – prostor izmedu ivice celije i njenog elementa
? width – širina tabele
? vrednost je broj u pikselima ili procenat u odnosu na velicinu stranicu
Atributi <tr> taga
? align – horizontalno poravnanje
? vrednosti mogu biti left, center, right
? valign – vertikalno poravnanje
? vrednosti mogu biti top, middle, bottom
? bgcolor
? vrednost je željena boja
Atributi <td> taga
? colspan – omogucava da se jedna celija proteže duž više kolona
? rowspan – omogucava da se jedna celija proteže duž više redova
? Vrednosti atributa se zadaje brojem kolona ili redova tabele duž kojih
treba da se prostire data celija.
Primer 4
tabele
? Napraviti HTML kod za prikaz tabele:
Uvod u Internet
tehnologije
Vežba 4
Frejmovi
? Frejmovi omogucavaju da se složeni dokument formatira deljenjem
prozora na više nezavisnih celina.
? Osnovni tag je složeni tag <frameset> koji zamenjuje tag <body> u HTML
dokumentu.
Atributi taga <frameset>
? cols – za vertikalnu podelu prozora
? rows – za horizontalnu podelu prozora
? vrednosti ovih atributa mogu biti u pikselima, procentima ili *
? border – vrednost atributa je debljina granice izmedu frejmova izražena
u pikselima
? bordercolor – definiše boju granice izmedu frejmova
? frameborder – vrednosti "1" ili "yes" prikazuje granicu izmedu dva
frejma, dok vrednosti "0" ili "no" ne prikazuje
? framespacing – definiše razmak izmedu granica frejma i njegovog
sadržaja izraženog u pikselima
Tag <frame>
? Poddokumenti složenog dokumenta se navode u okviru taga <frame>.
? Atributi ovog taga su:
? src – adresa poddokumenta
? marginwidth i marginheight – margine cije se vrednosti navode u pikselima
? noframes – poruka ukoliko nije moguce interpretirati frejmove
? bordercolor – definiše boju za ivicu frejma
? frameborder – prikazivanje granica ili ne
? name – specificira ime frejma koje se može koristiti unutar drugih
programski modula
Primer 1
Forme
? Forme se koriste da bi se podaci od citaca prosledili do servera.
? Forme mogu sadržati razne elemente za unos podataka: tekstualno polje,
radio dugme, polje za potvrdu, dugme za slanje i poništavanje, opadajucu
listu, tekstualne oblasti...
? Definiše se uz pomoc taga <form>.
? Dva najvažnija atributa su:
? action
? method - može imati vrednost GET ili POST
Tekstualno polje
? Definiše se korišcenjem taga <input> i njegovog atributa type koji ce u
ovom slucaju imati vrednost text:
<input type="text" >
? Atributi:
? name – pomocu imena elementa drugi delovi aplikacije mogu citati ili
menjati njegovu vrednost
? value – definiše pocetni tekst pre unosa korisnika
? size – velicina tekstualnog polja
? maxlength - maksimalan broj karaktera koji se mogu uneti
? Ukoliko se želi zamaskirani tekst koji korisnik unosi, za vrednost
atributa type treba koristiti password.
Tekstualno polje
Primer
<html>
<head>
<title>Tekstualno polje</title>
</head>
<form>
Korisnicko ime: <input type="text" name="korisnicno_ime" size="30" maxlength="30">
<br>
Sifra: <input type="password" name="sifra" size="10" maxlength="10">
</form>
</html>
Radio dugme
ovom slucaju imati vrednost radio:
<input type="radio" >
? Ukoliko želimo da bude oznacena neka opcija, potrebno je dodati
checked unutar input taga.
Radio dugme
Primer
<html>
<head>
<title>Radio dugme</title>
</head>
<form>
Pol:
<input type="radio" name="pol" checked> muski
<input type="radio" name="pol"> zenski
</form>
</html>
Polje za potvrdu
ovom slucaju imati vrednost checkbox:
<input type="checkbox" >
Polje za potvrdu
Primer
<html>
<head>
<title>Polje za potvrdu</title>
</head>
<form>
Koje jezike tecno govorite?<br>
<input type="checkbox" name="jezik" checked>srpski<br>
<input type="checkbox" name="jezik">engleski<br>
<input type="checkbox" name="jezik">fransucki<br>
<input type="checkbox" name="jezik">nemacki<br>
</form>
</html>
Dugme
? submit
? definiše dugme pomocu koga se podaci šalju na server
? <input type="submit" name="posalji" value="Potvrdi">
? reset
? definiše dugme koje postavlja sve vrednosti elemenata forme na
predefinisane vrednosti
? <input type="reset" name="ponisti“ value="Ponisti">
Opadajuca lista
? Definiše se pomocu taga <select> i opcija <option>.
? Atributi taga <select> su:
? size – broj opcija koje ce biti prikazane
? multiple – omogucava se izbor više opcija u jednom trenutku
? selected – selektuje odredenu opciju
Opadajuca lista
Primer
<html>
<head>
<title>Opadajuca lista</title>
</head>
<form>
Izabrati omiljenu boju:<br>
<select name="boja">
<option>crvena</option>
<option>plava</option>
<option selected>zelena</option>
<option>zuta</option>
</select>
</form>
</html>
Tekstualne oblasti
? Tag <textarea> prikazuje tekst u odvojenom tekst prozoru.
? Dimenzije prozora se zadaju atributima rows (broj redova teksta) i cols
(broj kolona teksta).
Tekstualne oblasti
Primer
<html>
<head>
<title>Tekstualna oblast</title>
</head>
<form>
Komentar:<br>
<textarea name="tekst" rows="8" cols="40">Ovde uneti komentar...</textarea>
</form>
</html>
Primer 2
? Potrebno je napraviti stranicu po ugledu na sliku sa sledeceg slajda.
? U listi avio kompanija moguce je odabrati više kompanija (koristiti
opciju multiple): Easy Jet, Ryan Air, Fly Niki, Malev.
? Sve HTML elemente prikazati kao na slici sa postavljenim pocetnim
vrednostima na zadate.
? Kod datuma rodenja ograniciti unos na 2+2+4 karaktera, a kod telefona
na 3+7 karaktera.
? U padajucoj listi za odlazne aerodrome navesti Aerodrom Nikola Tesla –
Beograd i Aerodrom Car Konstantin Veliki – Niš, a kod dolaznih Madrid
Airport (MAD), Lisbon Airport (LIS), London Heathow Airport (LHR), u
navedenim redosledima i prikazivanjem kao na slici.
Primer 2
nastavak
Uvod u Internet
tehnologije
Vežba 5
CSS
? Selektori, svojstva, vrednosti
h1 {color:red;}
p {color:blue;}
</style>
CSS
? id i class selektori
#id_primer
{
text-align: center;
color: blue;
}
.class_primer
{
text-align: center;
color: red;
}
<div id="id_primer">Jedinstveni element sa plavim tekstom</div>
<div class="class_primer">Prvi element sa crvenim tekstom</div>
<div class="class_primer">Drugi element sa crvenim tekstom</div>
CSS
? Stanja:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
CSS
? Povezivanje HTML stranice sa CSS fajlom:
<head>
<title>Titles are required.</title>
<link rel="stylesheet" href="/path/stylesheet.css">
</head>
<head>
<style>
@import url("/path/stylesheet.css");
</style>
<title>Naslov dokumenta</title>
</head>
Primer 1
? Koristeci CSS napraviti cetiri dugmeta
sa odredenim svojstvima, po uzoru na
stranicu Primer1.html koja je data.
Primer 1
Nastavak
? Prvo cemo napraviti jedno dugme. U okviru <body> taga treba dodati
jedan <div> tag.
<div>Dugme 1</div>
? Na ovaj nacin smo dobili element koji ima podrazumevanu širinu i
visinu, i njegove dimenzije možemo videti ukoliko selektujemo
ispisani tekst Dugme 1.
Primer 1
Nastavak
? Pošto za rešavanje primera koristimo CSS, u <head> tagu je potrebno
dodati:
</style>
Primer 1
Nastavak
? Hocemo da promenimo boju pozadine našeg elementa u crvenu, zato u
okviru <style> taga pišemo:
#dugme
{
}
</style>
? Nadostaje još da u okviru <div> taga dodamo id selektor:
<div id="dugme">Dugme<br>1</div>
Primer 1
Nastavak
? U crveno se obojila cela linija. Hocemo da definišemo dimenzije
elementa tj. da dobijemo kvadrat fiksne širine i visine. Koriste se
svojstva width i height.
#dugme
{
width: 100px;
height: 100px;
}
? Dimenzije možemo pisati i u procentima, i tada se ti procenti gledaju u
odnosu na dimenzije stranice.
Primer 1
Nastavak
? Hajde da sentriramo tekst, da podesimo da boja teksta bude bela, da
tekst bude Calibri i malo veci. Horizontalno centriranje dobijamo uz
pomoc svojstva text-align. Postoji i vertical-align, ali se on odnosi na
druge elemente unutar <div> taga, ne bi delovao samo na tekst. Tako da
cemo koristiti line-height i tako podesiti visinu tekstualne linije
(visina elementa je 100px, a imamo dve linije, tako da je visina jedne
50px). Kod familije slova (svojstvo font-family), potrebno je znati tacan
naziv, inace ce tekst biti prikazan u podrazumevanom fontu.
Primer 1
Nastavak
#dugme
{
width: 100px;
height: 100px;
text-align: center;
line-height: 50px;
color: white;
font-family: Calibri;
font-size: 22px;
}
Primer 1
Nastavak
? Treba podesiti okvir: njegovu širinu, boju i stil. Ovo možemo napisati
na duži nacin upotrebom svojstava border-style, border-color i borderwidth
(komentarisana tri reda uz pomoc /* i */) ili kraci upotrebom
samo jednog svojstva border.
? Da bismo dobili krug od našeg kvadrat, koristi se svojstvo
border-radius. On zaobljava ivice kvadrata. U našem slucaju, ukoliko je
broj px koje navedemo veci od 50px, dobicemo krug. Isprobati ovo i za
druge vrednosti.
? Vrednost koju navedemo je zapravo poluprecnik imaginarnog kruga.
? Ukoliko navedemo broj veci od maksimalnog poluprecnika kruga koji je moguce
upisati u kvadrat, iscrtace se upravo taj maksimalni krug.
Primer 1
Nastavak
#dugme
{
width: 100px;
height: 100px;
text-align: center;
line-height: 50px;
color: white;
font-size: 22px;
/*border-style: solid;
border-color: black;
border-width: 3px;*/
border: 3px solid black;
border-radius: 90px;
}
Primer 1
Nastavak
? Da bismo postavili senku, koristi se svojstvo box-shadow:
? box-shadow: 5px 5px 20px #888888;
? Uz pomoc prve dve vrednosti se podešava pozicija senke.
? Treca vrednosti odreduje koliko ce biti rasipanje senke.
? Poslednja vrednost predstavlja boju senke. Boja se može zadavati i uz
pomoc heksadecimalnih vrednosti, ali se tada dodaje # ispred
vrednosti.
Primer 1
Nastavak
? Hocemo da podesimo da kada kliknemo na krug, on promeni boju u žutu.
Koristi se stanje active. Ukoliko ne želimo da se ova promena desi
trenutno, možemo koristiti svojstvo transition-duration. Ukoliko ovo
podesimo na, recimo 5s, i držimo pritisnut taster miša, možemo
videti kako boja polako iz crvene prelazi u žutu, menjajuci nijanse.
? Napomena: #dugme:active pisati bez razmaka. Takode, vrednosti kao npr.
5s, 200ms, 100px pisati bez razmaka.
#dugme:active
{
transition-duration: 200ms;
}
Primer 1
Nastavak
? Primecujemo da ukoliko dodemo do teksta Dugme 1, kursor postaje
selektor teksta i moguce je selektovati tekst.
? Možemo menjati boju pozadine oko selektovanog teksta, a ukoliko želimo
da se ovo ne vidi, samo umesto neke boje pišemo transparent. Ukoliko se
napiše ::selection, ovo stanje ce se primeniti na sve elemente unutar
HTML dokumenta.
::selection
{
background-color: transparent;
}
? Da se ne bi pojavljivao selektor teksta, potrebno je postaviti svojstvo
cursor na default (to je strelica).
Primer 1
Nastavak
? Kada dodemo strelicom do površine kruga, potrebno je da se on zarotira
i da tekst dobije senku. Ovo podešavamo u okviru stanja hover.
? transform: rotateZ(30deg)
? vršice se rotacija od 30 stepeni u odnosu na Z osu (Z osa je normalna na površ)
? transform-origin: 50% 50%
? podešavamo da osa prolazi kroz centar kruga
? transition-duration: 500ms
? rotacija nece biti trenutna, vec ce trajati 500 ms
? text-shadow: 2px 2px 15px #888888
? podešavanje senke teksta
Primer 1
Nastavak
? Ukoliko svojstvo ne radi u nekom browser-u, potrebno je dodati odredene
prefikse:
? -webkit- za Google Chrome
? -moz- za Mozilla Firefox
? Ovo je neophodno uraditi za npr. transform. Ukoliko želimo da stranica
podržava više browser-a napisati više puta ista svojstva, samo sa
razlicitim prefiksima za željene browser-e.
Primer 1
Nastavak
#dugme:hover
{
text-shadow: 2px 2px 15px #888888;
-webkit-transform: rotateZ(30deg);
-webkit-transform-origin: 50% 50%;
transition-duration: 500ms;
}
Primer 1
Nastavak
? Da ne bi i pri napuštanju površine kruga, povratak u pocetni položaj
bio trenutan, potrebno je dodati liniju koda u #dugme sekciju:
? transition-duration: 500ms;
Primer 1
Nastavak
? Da bismo napravili cetiri ovakva dugmeta, treba dodati još tri <div>
taga.
? id treba promeniti u class jer id koristimo kada imamo jedinstveni
element.
? Umesto # treba koristiti tacku.
Uvod u Internet
tehnologije
Vežba 6
CSS
Pseudoklase za stanja linkova
a: naziv {color: purple;}
? naziv može imati vrednosti:
? link – odnosi se na linkove na koje nije kliknuto niti je miš iznad njih
? visited – odnosi se na linkove koji su poseceni
? focus – kada je link u fokusu
? hover – kada je miš iznad linkova
? active – link je aktivan kada se pritisne
CSS
Dekoracije
? Ukoliko želimo da kod linkova uklonimo podvlacenje:
a {text-decoration: none;}
? Preostale vrednosti ovog svojstva su:
? underline, overline, line-through
CSS
Pozicioniranje
? Svojstvo position može imati vrednosti:
? static – elementi su pozicionirani kao u normalnom toku dokumenta
? relative – vrši se pozicioniranje elementa relativno u odnosu na njegovu
originalnu poziciju
? absolute – vrši se pozicioniranje elementa u odnosu na prozor tj. element koji ih
sadrži,
ovako pozicionirani elementi su zasebni u odnosu na druge
? fixed – elementi ostaju na istoj poziciji tokom skrolovanja
? Podrazumevana vrednost je static.
CSS
Specificiranje pozicije
? Nakon što se definiše nacin pozicioniranja, postavljaju se vrednosti sledecih
svojstava:
? top
? right
? bottom
? left
? Vrednosti mogu biti broj piksela, procenat ili auto.
Primer 1
? Koristeci CSS napraviti stranicu po uzoru na stranicu datu na slici.
Primer 1
Nastavak
Primer 1
nastavak
? Kako napraviti da se klikom na Pocetna obezbedi otvaranje pocetne
stranice VISER-a, ali unutar sadržaja naše stranice (u centralnom
delu)?
Uvod u Internet
tehnologije
Vežba 7
Primer 1
? Koristeci CSS napraviti stranicu po uzoru na stranicu datu na slici na
sledecem slajdu. Dakle, pravi se forma za kontakt sa par efekata koji
su realizovani upotrebom CSS-a.
? Videti priloženu krajnju stranicu Primer 1_b.
Primer 1
Primer 1
nastavak
Prvo pravimo strukturu bez CSS-a. Pravimo tabelu sa 9 redova i 2 kolone.
U kolone sa leve strane unosimo tekst koji želimo da se prikaže, a u
?
kolone sa desne strane ubacujemo elemente forme. Tag za formu <form>
ovom slucaju nije neophodan jer nije potrebno obezbediti da se klikom
na dugmad izvršavaju bilo kakve akcije (to bi prevazilazilo gradivo
predvideno za ovaj kurs).
Primetiti da se tekstualna oblast može razvuci putem njenog donjeg
desnog ugla. Mogu se podesiti njena maksimalna visina i širina, može
se onemoguciti ovo njeno povecanje. Mi cemo ostaviti ovako, kako je po
default-u.
u
?
Primer
nastavak
1
? Napravljena je osnovna forma.
? Videti Primer 1_a.
Primer 1
nastavak
? Sada pišemo CSS.
? Ukoliko želimo da
koristimo sledeci
se neki stil primeni na sve elemente tipa input,
selektor (mogli smo da koristimo i id ili class, ali
je izabran ovaj nacin):
input
{
border-radius: 5px;
font-size: 16px;
box-shadow: inset 3px 3px 5px #EBEBEB;
width: 180px;
}
Primer 1
nastavak
? Svojstvo box-shadow koristimo za dodavanje senke unutar input
elemenata. Isprobati ovo sa razlicitim vrednostima, cak i negativnim.
Atribut inset smo dodali da bismo napravili senku sa unutrašnje strane,
a ne senku oko našeg elementa.
Primer 1
nastavak
? Ukoliko želimo da se isti stil primeni i na elemente drugog tipa,
možemo navesti više selektora odvojenih zarezom:
input, select, textarea
{
...
}
? Dakle, dodali smo još dva selektora jer želimo da i na elemente ovog
tipa primenimo isti stil.
Primer 1
nastavak
? Za podešavanje stila tabele pišemo:
table
{
margin: auto;
position: relative;
top: 50px;
background-color: #F2F2F2;
opacity: 0.95;
border-radius: 20px;
padding: 20px;
}
Primer 1
nastavak
? Postavljanjem svojstva margin na auto, margine sa leve i desne strane ce
se izjednaciti tj. na ovaj nacin smo centrirali našu tabelu.
? Napomena: da bi se svojstvo top primenilo, moramo da postavimo
vrednost svojstva position.
Primer 1
nastavak
? Ukoliko treba da selektujemo samo prvu kolonu tabele, npr. želimo da
izvršimo desno poravnanje
koristimo selektor:
teksta, ali unutar prve kolone naše tabele,
table tr td:first child
{
text-align: right;
text-shadow: 1px 1px black,
-1px 1px black,
1px -1px black,
-1px -1px black;
}
Primer 1
nastavak
? Dakle, ovaj selektor nade tabelu, onda tr, i onda prvo pojavljivanje td
(prvo jer je navedeno first-child).
? Da bismo dobili outline teksta, koristimo svojstvo text-shadow i
pravimo senku oko teksta sa sve cetiri strane.
Primer 1
nastavak
? Možemo definisati šta se dešava sa odredenim elementima kada su
fokusirani. I u ovom slucaju možemo koristiti višestruke selektore:
input:focus, select:focus, textarea:focus
{
border-radius: 5px;
border-color: #C4A445;
box-shadow: 0px 0px 10px #C4A445;
outline: 0;
}
Primer 1
nastavak
? Ukoliko je fokusiran neki od elemenata, videce se pravougaoni okvir
oko našeg zaobljenog okvira. Da bismo to onemogucili, outline postavimo
na vrednost 0.
Primer 1
nastavak
? Slicno, ukoliko želimo da se
preko odredenih elemenata:
nešto desi pri prelasku mišem
input:hover, select:hover, textarea:hover
{
border-color: #07C3E8;
box-shadow: 0px 0px 10px #07C3E8;
-webkit-animation: move_lr 500ms;
}
@-webkit-keyframes move_lr
{
0% {-webkit-transform: translateX(0px)}
}
Primer 1
nastavak
? U našem primeru, napravili smo animaciju, prelaskom miša preko
odredenih elemenata, oni se pomeraju desno-levo. Ovo nije podržano u svim
browser-ima, da bi radilo u Google Chrome, dodajemo prefiks –webkit-.
? move_lr je naziv koji smo proizvoljno izabrali.
? Navedeni procenti se odnose na trajanje animacije, na pocetku, element je u
pocetnom položaju, na polovini animacije se element pomera za 20px u
desno, dok se na kraju animacije vraca u pocetni položaj.
Primer 1
nastavak
? Za postavljanje pozadinske slike, treba napisati:
body
{
background-image: url("skulls-background-pattern-0815.gif");
}
Primer 1
nastavak
? Da bismo promenili pozadinsku boju padajuce liste:
select option
{
background-color: #C4A445;
color: white;
}
1. Na slici je dat primer koje vrste prikaza (dizajna) stranica? (960px slika!)
- fiksni
2. Podrazumevano, vrednost svojstava height i width nekog bloka su
- auto
3. Kod XML-a pri zadavanju vrednosti atributa moguce je koristiti
- i jednostruke i dvostruke
4. Kod XML-a vrednosti atributa moraju uvek biti unutar znaka navoda
- tacno
5. Kako se postize da linkovi ne budu podvuceni?
- text-decoration: none;
6. Podrazumevana vrednost svojstva background-color je
- transparent
7. Padding: 1px 2px 3px; Koliki je razmak do desne ivice?
- 2px
8. Kako se podesava da se uklone markeri uz stavke listi?
- list-style-type: none
9. Pozadinska slika se dodaje na sledeci nacin: background-image:"url zeljene

slike"
- Netacno
10. U koliko boju definisemo na sledeci nacin: color: rgb (red, green, blue)
svaka od komponenti rgb predstavlja intenzitet cija vrednost moze biti od 0 do koje
vrednosti? (broj napisati u dekadnom zapisu)
- 255
11. Sta se od navedenog moze koristiti za horizontalno centriranje stranice u

odnosu na sirinu prozora?
- margin: 0 auto;
12. Podrazumevana vrednost fonta je 16px. Definisati da vrednost fonta bude 32px
koristeci relativne mere
- font-size: 2em;
13. Podrazumevana vrednost svojstva position je apsolute.
- Netacno
14. Kako bi se vec postojeci stilovi ponistili koristi se
- css reset
15. Prilikom skracenog definisanja fontova, upotrebom svojstva font, potrebno je

voditi racuna o redosledu zadavanja vrednosti. Kojim redosled
om se pisu ove vrednosti?
- font-style , font-weight, font-variant, font-size/line-height, font-family
16. Na slici je dat primer koje vrste prikaza (dizajna) stranica ? Desna strana je
odredjene velicine, dok se leva strana podesava na osnovu preostalog prostora.
( dva prozora pise layout ;----D )
- fluidni
17. Date su dve tabele cije su ivice izmedju celija razlicito definisane tako sto
su u svojstvu border-collapse date razlicite vrednosti. Koja je to vrednost u
prvom, a koja u drugom slucaju? (slika "ime, prezime")
- collapse(ivica je jedna linija | ) - separate (ivica je od 2 linije || )
18. Pomocu kojeg svojstva se menja boja teksta?
- color
19. Koje svojstvo se koristi za podesavanje podebljanosti slova?
-font-weight:bold
20. @font-face
- sluzi za ukljucivanje web fontova u css kod
21. Ukoliko zelimo da umesto nekog teksta postavimo sliku (npr. za neke stilizovane
fontove), ikonu ili logo, izbacivanje teksta i njegova zamena teksta sa tim img
elementima u html izvornom kodu
- nije dobra praksa
22. p {line - height: 2;}

p {line - height: 200%;}
Putem oba navedena nacina dobija se potpuno ista visina reda
-tacno
23. Prednost koju plutajuci (float) elementi imaju u odnosu na elemente koji su
apsolutno pozicionirani je nemogucnost preklapanja
-tacno
24. Koje svojstvo fontova se koristi u koliko zelimo da slova budu ukosena (italic)
-font-style:italic;
25. U XML-u se cuva prazan prostor izmedju karaktera, sto sa html-om nije slucaj
-Tacno
26. h1
{ font: bold 2em calibri; }
Da li je tacno sledece tvrdjenje? Nije bilo neophodno napisati bold da bi h1
elementi bili podebljani, s obzirom da je svaki h1 element vec sam po sebi
boldovan.
-netacno
27. Apsolutne mere se ne mogu skalirati na klijentskom prikazu
-Tacno
28. Brze ce se ucitavati html stranica koja ima

- Jednu veliku zajednicku sliku
29. Vrednost svojstva z-index je veca za koji element? (2 kvadrata - slika)
-za onaj kvadrat koji je ispred drugog
30. XML je skracenica od?
-Extensible Markup Language
31. Vrednost svojstva z-index mogu biti i negativni brojevi
-tacno
32. Kod koje hijerarhije sajta se stranica moze posetiti samo preko "roditeljske"
stranice tj. prethodnika (H na vrhu - slika)
-stroga hijerarhija
33. U koliko je velicina nekog elementa previse mala da bi prihvatila sadrzaj,

moguce je specificirati kako ce se sadrzaj prilagoditi (da li ce biti skrolovan,
vidljiv i van obuhvatajuceg elementa itd.) uz pomoc svojstva: -
- overflow
34. Velicina fonta se moze definisati i pomocu kljucnih reci small, medium
,large...
- Tacno
35. Koja je tacna CSS sintaksa za specificiranje naziva koriscenog fonta? -
- ni jedno od ponudjenog
36. Svojstvo text-align se koristi za horizontalno poravnjanje teksta u web

stranicama ?
- Tacno
37. CSS stil se moze primeniti i na ceo body element, npr: -
-Tacno..
38. Kod koje arhitekture sajta se sve stranice postavljaju u istu ravan ? (h sa
leve strane - slika)
- Jednoslojna arhitektura
39. Uvlacenje teksta prve linije regulise se svojstvom
- text-indent
40. Na slici je prikazan CSS box model. Spojiti oblasti odredjenih boja sa
odgovarajucim svojstvima.(slika - border, content ali zbog isusa je to sve crno
belo ;---D)
- plava oblast (margin) - zuta oblast (padding)

41. Date su dve linije teksta. Na drugu liniju je primenjen stil u kojem je
vrednost svojstva font-variant postavljen na: (gornja recenica izgleda normalno a
donja je kao da su sva velika slova pisana malo pa otuda i small caps ;----D)
-small caps
42. font-size:1em; font-size:100%; Ove dve CSS sintakse su ekvivalentne.
-tacno
43. Oznaciti tacan oblik XML deklaracije.
- <?xml version="1.0" ?>
44. Podrazumevanja vrednost svojstva background-repeat je repeat.
- Tacno
45. DTD je skracenica za
- ni jedno od ponudjenih (Document Type Definition)
46. Ukoliko zleimo da se pozadisnka slika pomera zajedno sa sadrzajem kada se

sadrzaj stranice skroluje, vrednost svojstva background-attachment treba biti
- scroll
47. Povezati date slicice sa odgovarajucim vrednostima svojstva overflow (overflow

slike ima ih 3 komada ;----D)
- 1. visibe(tekst je izvan okvira) 2. hidden(tekst nije prikazan van okvira) 3.

scroll (ima skrol )
48. Boja #ab6 je ista kao i boja #aabb66 Izaberite jedan odgovor:
- Tacno
49. Kako se pravilno postavljaju vrednosti svojstva padding, ukoliko zelimo da

rastojanje od gornje ivice bude 10px, od donje 15px, od desne 5px i od leve 10px?
- padding: 10px 5px 15px 10px
50. Koji je podrazumevani stil za ivice(svojstvo border) ?
- none

Ukiproba 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ukiproba 2

Uploaded by

Copyright:

Available Formats

Repetitori rade na kom sloju?

SLOJEVITOST I REFERENTNI MODEL

Uredaji prenosnog podsistema – Modemi, koncentratori, Multiplekseri, HUB (LAN),

Komutacija poruka – cela poruka se šalje od cvora do cvora dok ne dode do

• Po velicini – LAN (topologija najcešce magistrala, prsten ili zvezda; velika

1. Fizicki – zadužen za ispravan prenos bita duž komunikacionog kanala; Modulacija

4.Transportni – vodi racuna o prenosu podataka sa kraja na kraj mreže. Prima

5.Sloj sesije – zadužen za uspostavljanje, održavanje i prekid logickih sesija

6.Sloj prezentacije – Ne bavi se prenosom. Razliciti racunari razlicito prikazuju

7. Aplikacije – Opisuje rad aplikacija u mreži i njihovu interakciju sa servisima i

Jednostavniji – prva dva sloja su spojena i nema sloj sesije i prezentacije

Redosled isporucenih paketa – nije striktan

Portovi – mehanizam protokola transportnog sloja kojim se omogucava da više

Socket – Krajnja tacka dvosmernog komunikacionog toka preko racunarske mreže

TCP vs UDP – TCP je protokol sa uspostavom veze, a UDP ne zahteva (Skype,

Tipovi MAC adresa – Unikast, Multikast, Brodkast

Mrežno adresiranje – IP protokol...IPv4 i IPv6. IPv4 – 32 bita, adresa mreže i

Opseg privatnih IP adresa – 10.0.0.0 – 10.255.255.255; 172.16.0.0 – 172.31.255.255;

Mostovi – jedan ulaz i jedan izlaz; Ne mogu da interpretiraju informacije visokog

Svicevi – rade na 2.sloju OSI modela. Mogu da interpretiraju adresne informacije,

Ruteri – rade na 3.sloju. Koriste „logicku adresu“ paketa i tabela za rutiranje da

NAT – Tehnika prevodenja adresa, omogucava da se u okviru sajta koriste privatne

HTTP – protokol aplikativnog sloja, zasniva se na modelu klijent-server i zahteva

HTML – fajl tekstualnog formata. Struktura – html, head, title, body...

<body background=“URL slike“>; <bgcolor=“#000000“>; <body text=“#000111“>

<UL> <OL> <LI> <DL> <DT> <DD>

<COLOR> <FACE> <SIZE>

<FRAMESET> umesto body sekcije. Atributi: COLS, ROWS. U <FRAME> se navode

ELEMENTI - <input type=“text“/“password“ name=“ime“>

selektor {property:value;} deklaracija

Povezivanje HTML stranice i CSS fajla – link i @import.

Nasledivanje – konflikti, gde se šta definiše...Prioritet „odozgo na dole“.

Redosled primene stilova:

Margin, Border, Padding, Content...

Kriterijumi za definisanje selektora

• Tip elementa h2 {color:blue;}

Selektor treba da koristi ID elementa na nacin tako da se prvo stavi #, pa vrednost

Izbor na osnovu roditelja - div#zakljucak > p { color:blue; } - Selektor se odnosi

Uvod u Internet tehnologije

OSI referentni model

? Krajem sedamdesetih godina prošlog veka, Medunarodna organizacija za

? Ovaj model se naziva OSI (Open System Interconnection) model.

OSI referentni model

? Sloj aplikacije (engl. Application Layer) je sedmi i najviši sloj OSI

? To je i najviši sloj TCP/IP modela, koji je razvijan za potrebe Interneta i

? Ovaj sloj opisuje rad aplikacija u mreži i njihovu interakciju sa servisima i

? Mrežne aplikacije su razlog postojanja racunarskih mreža. Bez korisnih

? Od kada se internet pojavio, kreirane su brojne korisne i zanimljive

? aplikacije za surfovanje vebom i pretraživanje podataka sa interneta,

? za video konferencije (Skype),

? za distribuciju video zapisa (YouTube),

? onlajn igrice za više igraca (World of Warcraft),

? aplikacije za društvene mreže (Facebook, Twitter).

Principi mrežnih aplikacija

? Na primer, veb aplikacija ima dva nezavisna udaljena programa koji

? program pretraživaca veba (browser), koji se izvršava na racunaru korisnika –

Arhitektura mrežnih aplikacija

? Pre nego što se pocne sa pisanjem programa, potrebno je odluciti kakva ce

? Kod klijentsko-serverske arhitekture, uvek postoji dostupan racunar, nazvan

? Klijenti ne komuniciraju neposredno jedan sa drugim.

? Cesto se dešava da jedan server ne može da se izbori sa svim zahtevima svojih

? Google ima 30 do 50 centara podataka rasporedenih svuda po svetu, koji

? Kod P2P arhitekture, aplikacije koriste direktnu komunikaciju izmedu parova