Internet Programiranje

1
Internet Programiranje
2
Sadržaj predmeta

• Cilj predmeta jeste dizajn dinamickih veb strana
  koje ukljucuju interakciju korisnika.
• Alati koji ce se koristiti
• (X)HTML i CSS
• JavaScript
• PHP i MySQL

3
Raspored predmeta

• Prve dve nedelje predavanja XHTML i CSS
• Druge dve nedelje vežbe na racunarima u
  laboratoriji paviljona II XHTML i CSS
• Naredne tri nedelje predavanja PHP i MySQL
• Naredne tri nedelje vežbi u labu paviljona II
  PHP i MySQL
• Naredne dve nedelje predavanja JavaScript
• Poslednje dve nedelje vežbe u labu paviljona II
  JavaScript

4
Polaganje predmeta

• Iz pojedinih modula, XHTML, JavaScript i PHP, se
  dobija 20, 25 i 15 poena na vežbama, respektivno.
• Za XHTML i JavaScript obavezan je jedan blok od 3
  casa vežbi, a za PHP su obavezna dva bloka od 3
  casa, samo ako su u okviru ovih blokova završeni
  zadati projekti, uz potvrdu asistenta.
• Vežbe se mogu odradivati samo uz lekarsko
  opravdanje.
• Ostalih 40 poena dobija se na ispitu koji se
  polaže uz dozvoljenu literaturu.

5
HTML, XHTML CSS
6
Šta je HTML?

• HTML (HyperText Markup Language) je veoma
  jednostavan jezik koji služi za prikazivanje veb
  strana.
• HTML stranice imaju ekstenziju .html ili .htm, a
  nalaze se u odredenom direktorijumu servera
  vezanog na Internet, što ih cini dostupnim na
  vebu.
• Pomocu HTML jezika se generišu dokumenti tipa
  hipertekst.

7
Hipertekst

• ... je tekst koji sadrži veze ili linkove ka
  drugim dokumentima ili na samog sebe.
• Hipertekst je skup stranica, medusobno povezanih
  linkovima koje su umetnute u stranice. Na ove
  linkove se može kliknuti.
• Za razliku od obicnog teksta, koji se cita
  linearno (sleva na desno, odozgo naniže),
  hipertekst se cita prateci hiper-veze u tekstu,
  dakle, ne nužno na linearan nacin.

8
Jezici za opis hiperteksta

• Najznacajniji jezici koji opisuju vrste
  hipertekst
• SGML (Standard Generalized Markup Language)
• XML (Extensible Markup Language)
• HTML (HyperText Markup Language)
• XHTML (Expandable HTML)
• CSS (Cascading Style Sheets)

9
Standardizacija

• U prvo vreme HTML se razvijao na adhok nacin i
  bio je interpretiran od strane raznih brauzera na
  razlicite nacine.
• Standardizacijom se bavi W3C (WWW Consortium),
  www.w3c.org koga vodi Tim Berners-Lee
• Standardizacija je pocela sa HTML 3.2
• HTML je modifikovan tako da odgovara sintaksi
  XML-a -gt XHTML.
• Prema standardu XHTML se koristi zajedno sa CSS
  cime se formatiranje maksimalno izdvaja iz
  teksta.
• Odnos brauzera i standarda se može naci na
  www.webstandards.org.

10
HTML vs. XHTML

• HTML 4.0 XHTML 1.0 (usvojen 2000-te)
• XHTML je standard koga brauzeri po dogovoru
  moraju da primenjuju.
• XHTML je striktniji u pogledu sintakse što malo
  otežava programiranje.
• XHTML sa CSS jezikom olakšavaju dizajn i
  ažuriranje velikih veb strana.
• XHTML i CSS bolje podržavaju fleksibilni prikaz
  veb strana.
• Stari brauzeri ne podržavaju uvek XHTML.

11
HTML vs. XHTML

• XHTML je osetljiv na velicinu slova. Elementi,
  atributi i njihove vrednosti su pisane malim
  slovima.
• XHTML zahteva završetak komandi.
• XHTML zahteva da atributi uvek budu pod
  navodnicima, a HTML samo kada sadrže specijalne
  znake.
• XHTML zahteva naredbu DOCTYPE u kojoj se
  specificira varijanta standarda.
• Elementi u HTML-a se opisuju atributima (eng.
  attributes), a u XHTML-u (properties) osobinama.
  Neki atributi su potisnuti u XHTML-u.
• ...

12
HTML vs. XHTML

• XHTML 1.1 se razvio od striktne verzije XHTML
  1.0, ali nije zaživeo.
• Slicna je bila i sudbina standarda XHTML 2.0,
  koji je prekinuo kompatibilnost unazad sa HTML
  standardom.
• Softverski vendori su uporedo razvijali HTML5, za
  koga tvrde da je kompatibilan unazad, i posebna
  pažnja je posvecena kompatibilnosti sa
  aplikacijama.
• HTML5 je našao široku primenu na vebu, iako nije
  još uvek prihvacen kao standard.
• W3C je osnovao radnu grupu za HTML5, i ocekuje se
  da ce ovaj standard biti gotov do kraja 2014-te
  http//www.w3.org/html/wg/.

13
Reference

• E. Castro, HTML for the World Wide Web with XHTML
  and CSS, Fifth Edition, Peachpit Press, 2003.
• http//www.w3.org/TR/1999/REC-html401-19991224/
• http//www.w3.org/TR/xhtml1/
• http//www.w3.org/TR/html4/index/elements.html
• http//www.w3.org/TR/REC-html40/index/attributes.h
  tml
• http//www.w3.org/TR/CSS2/propidx.html
• http//www.webstandards.org/learn/reference/charts
  /entities/
• http//www.w3schools.com

14
Alati i (X)HTML

• Za generisanje (X)HTML stranice potreban je
  najobicniji tekst editor, na primer Notepad,
  Notepad. Nalazi se u Start meniju pod Programs
  -gt Accessories.
• U MS Word-u, koristiti Save As Plain Text.
• Ekstenzija mora biti html
• Mogu se koristiti i specijalni alati, na primer
  WYSIWYG editori MS Expression Web, Adobe
  DreamWeaver, WordPress.
• Stranica se može videti u okviru veb brouzera
  Mozilla Firefox, Google Chrome, Netscape
  Navigator ili Internet Explorer.

15
Važan štos

• Lako se može videti (X)HTML fajl bilo koje veb
  strane, i CSS kod, pomocu brauzera.
• Mozilla Firefox Tools -gt Web Developer -gt Page
  Source (ili Style Editor)
• Internet Explorer View -gt Source, ili Tools -gt
  Developer Tools
• Google Chrome Tools -gt View Source (ili
  Developer Tools)

16
DOCTYPE komanda

• DOCTYPE komanda odreduje verziju jezika i njegovu
  varijantu i prva je.
• Varijante su
• Strict
• Transitional
• Frameset
• Primer
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• Pre DOCTYPE komande cesto ide i XML komanda
• lt?xml version"1.0"?gt

17
Pojam taga

• (X)HTML komande se pišu u vidu tzv. tagova.
• Jedan tag je ustvari komanda koja govori brauzeru
  šta i kako da uradi tj. na koji nacin da prikaže
  sadržaj vaše stranice.

18
Tagovi

• Tagovi se pišu unutar oznaka "lt" i "gt" (bez
  znakova navoda) npr lthtmlgt.
• Ovaj tag se nalazi na pocetku svakog HTML
  dokumenta i govori brauzeru da je fajl koji je
  upravo poceo da ucitava HTML dokument i da kao
  takvog treba i da ga prikaže.
• Vecina tagova ima i pocetni i završni tag.
  Završni tag se dobija dodavanjem znaka "/" i
  oznacava mesto na kom prestaje dejstvo pocetnog
  taga, npr lt/htmlgt.
• Ovaj tag govori browseru da je to kraj (X)HTML
  dokumenta.

19
Tagovi

• Prosti tagovi za opisivanje jednostavnih
  elemenata logicke strukture. Oblika su ltxgt. U
  XHTML-u je obavezno da se završe kosom crtom ltx
  /gt.
• Složeni tagovi su zagrade oblika ltxgt y lt/xgt
  kojima je opisan izgled dela teksta y.
• Moguce je koristiti atribute u okviru taga kojima
  se dodeljuju odredene vrednosti
• ltx a1v1 a2v2 ...gt y lt/xgt.
• U XHTML-u elementi (x), atributi (a1,a2), i
  njihove predefinisane vrednosti (v1,v2) su malim
  slovima. Vrednosti atributa su uvek pod
  navodnicima.

20
Struktura (X)HTML stranice

• Minimalna struktura (X)HTML-dokumenta obuhvata
  tagove
• lthtmlgt, lt/htmlgt - zagrade (X)HTML teksta
• ltheadgt, lt/headgt - zagrade zaglavlja, sadrži
  meta-definicije (X)HTML dokumenta
• lttitlegt, lt/titlegt - zagrade za naziv
• (X)HTML dokumenta i
• ltbodygt, lt/bodygt - zagrade teksta (X)HTML
  dokumenta.

21
Jezik veb strane

• U html tagu može da se specificira Namespace i
  jezik
• lthtml xmlns'http//www.w3.org/1999/xhtml'
  xmllang'sr' lang'sr'gt

22
Zaglavlje (X)HTML dokumenta

• Sve ono što se napiše u zaglavlju dokumenta nece
  se prikazati u prozoru brauzera vec obicno služi
  samo da pruži neke informacije o stranici.
• U zaglavlju se specificira azbuka a takode i
  naslov veb strane koji gledaju pretraživaci
• ltheadgtltmeta http-equiv"content-type"
  content"text/html charsetUTF-8/gtlttitlegtGooglelt
  /titlegtlt/headgt
• Pri cuvanju dokumenta treba izabrati Encoding
  UTF-8

23
Telo (X)HTML dokumenta

• Sve ono što je napisano izmedu tagova ltbodygt i
  lt/bodygt predstavlja telo dokumenta
• Telo dokumenta pojavice se kao sadržaj
  prezentacije u prozoru brauzera.

24
Izgled stranice

• DOCTYPE
• lthtmlgt
• ltheadgt
• lttitlegt
• Ovde je naziv prezentacije
• lt/titlegt
• lt/headgt
• ltbodygt
• Ovde se unosi sve ono sto želite da se vidi u
  prezentaciji
• lt/bodygt
• lt/htmlgt

25
Komentar

• Dodatna opcija omogucava da se obeleži komentar u
  (X)HTML obeleženom tekstu koji se nece videti u
  vizuelizaciji dokumenta.
• Na primer
• lt!-- komentar --gt

26
Jedinice velicina

• Jedinice za velicinu slova, ili elemenata su ,
  in, cm, mm, em (odnos prema definisanoj velicini
  fonta), pt (1/72in), pc (12pt), px (tacka na
  ekranu)
• se racuna u odnosu na osnovni font, ako se radi
  o znakovima, i u odnosu na velicinu roditeljskog
  elementa ako se radi o elementima. Pri tome
  velicina roditeljskog elementa mora biti
  definisana, osim za html element.

27
Jedinice velicina

• Da bi body imao velicinu 100, odnosno istu kao
  html element, velicina html elementa mora biti
  definisana, apsolutno, ili kao 100.
• Jedinice vh i vw oznacavaju 1/100 visine i širine
  ekrana, respektivno (CSS3).

28
Naslovi

• Naslovi (engl. headers) se kodiraju prema
  relativnoj dubini ciframa od 1 do 6. Tag za
  naslov ima opšti oblik
• lthngt naslovNivoa_n lt/hngt
• gde n uzima vrednosti od 1 do 6.

29
Naslovi

• lth1gt Naslov H1 lt/h1gt
• lth2gt Naslov H2 lt/h2gt
• lth3gt Naslov H3 lt/h3gt
• Navedeni kod se na (X)HTML stranici prikazuje na
  sledeci nacin
• Naslov H1
• Naslov H2
• Naslov H3

30
Tagovi za formatiranje
Bold ltbgtBoldlt/bgt
Strong ltstronggtStronglt/stronggt
Italic ltigtItaliclt/igt
Underline ltugtUnderlinelt/ugt (potisnut)
Strike ltstrikegtStrikelt/strikegt (potisnut)
H2O Hltsubgt2lt/subgtO
238 2ltsupgt3lt/supgt8
31
Paragraf

• Tag paragrafa je ltpgt. Paragraf pocinje u novom
  redu.
• levo
• centrirano
• desno
• HTML kod koji prikazuje gornji primer je
• ltp align"left"gt levo lt/pgt
• ltp align"center"gt centrirano lt/pgt
• ltp align"right"gt desno lt/pgt
• Inace atribut align je kod XHTML-a potisnut

32
Parcijalizacija teksta

• Tekst se može podeliti na blokove pomocu taga
  ltdivgt.
• Blok pocinje u novom redu, kao i tekst posle
  bloka.
• Korisni atributi ovog taga (kao i drugih) su
  class i id, i oznacavaju klasu odredenog bloka, i
  partikularni blok da bi se na njega mogao
  aplicirati odredeni stil.
• ltdiv classEngleskiParagrafigt
• ltpgt Paragraf 1 lt/pgt
• ltpgt Paragraf 2 lt/pgt
• lt/divgt

33
Izdvajanje teksta

• Izdvajanje teksta koji ne pocinje u novom redu,
  se vrši pomocu taga ltspangt.
• Tab span ima iste atribute kao tag div, tj. class
  i id.
• Tekst na srpskom ltspan classenglgt text in
  English lt/spangt nastavak teksta na srpskom.

34
XHTML Razmak 160

•       xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx
  xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx
  xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x
  xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx
  xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x
  xxxxxxxxxxxx xxxxx.
• Paragraf se može uvuci pomocu sledeceg koda
• ltpgt
• 160160160160 xxxx xxxx xxxx xxxx xxxx
  xxxx xxxx xxxxx
• xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx
  xx xxxxx xx x xxxxx xxxxxx
• xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx
  xxxxxx xxxxxxxxxxxxx xxx
• xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. lt/pgt

35
HTML Razmak nbsp

•       xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx
  xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx
  xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x
  xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx
  xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x
  xxxxxxxxxxxx xxxxx.
• Paragraf se može uvuci pomocu sledeceg koda
• ltpgt
• nbspnbspnbspnbsp xxxx xxxx xxxx xxxx xxxx
  xxxx xxxx xxxxx
• xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx
  xx xxxxx xx x xxxxx xxxxxx
• xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx
  xxxxxx xxxxxxxxxxxxx xxx
• xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. lt/pgt

36
Automatski prelom linije

• lthtmlgt
• ltheadgtlttitlegt Rad sa prelomom linije lt/titlegt
• lt/headgt
• ltbodygt
• lth1gtCome Scroll with me, away to the right, as I
  list out all of the long answers to the meaning
  of life accessible only to those that can
  scroll,scroll, scroll...lt/h1gt
• lt/bodygt
• lt/htmlgt

37
Prelom linije u (X)HTML-u

• lthtmlgt
• ltheadgtlttitlegt Rad sa prelomom linije lt/titlegt
• lt/headgt
• ltbodygt
• lth1gtCome Scroll with me, away to the right, as I
  list out all of the long ltbr /gt answers to the
  meaning of life accessible only to those that can
  scroll,scroll, scroll...lt/h1gt
• lt/bodygt
• lt/htmlgt

38
Nema preloma linije u HTML-u (potisnut)

• lthtmlgt
• ltheadgtlttitlegt Rad sa prelomom linije lt/titlegt
• lt/headgt
• ltbodygt
• ltnobrgtlth1gtCome Scroll with me, away to the right,
  as I list out all of the long answers to the
  meaning of life accessible only to those that can
  scroll,scroll, scroll...lt/h1gtlt/nobrgt
• lt/bodygt
• lt/htmlgt

39
Atribut title

• Atribut title se može dodeliti bilo kom delu veb
  strane, i njegova vrednost se pojavljuje iznad
  kursora kada korisnik prede preko tog dela strane
  mišem.
• Nije potisnut u XHTML-u.
• Primer
• ltdiv idsad titleSadržajgt Uvod ltbr /gt
  Razrada ltbr /gt Zakljucak lt/divgt

40
Ubacivanje slika

• U okviru (X)HTML stranice slika se prikazuje
  pomocu ltimggt taga.
• Ovaj tag mora imati bar jedan atribut - src
  atribut koji definiše naziv, i eventualno
  lokaciju, grafickog fajla.
• Da bi se promenila originalna velicina slike,
  željena velicina se može definisati pomocu dva
  atributa height i width.
• ltimg src"osam.gif" height"50 width"50 /gt

41
Pozicioniranje slike u HTML-u

• Pozicioniranje se vršilo u HTML-u pomocu atributa
  align, koji je potisnut u XHTML-u.
• Vrednosti atributa align mogu biti
• left - postavlja sliku uz levu marginu
• ltimg src"osam.gif" align"left /gt
• right - postavlja sliku uz desnu marginu
• ltimg src"osam.gif" align"right /gt
• top - poravnava vrh slike sa vrhom teksta u
  paragrafu u kome se nalazi
• ltimg src"osam.gif" align"top /gt
• bottom - poravnava donjom ivicom sa donjom ivicom
  teksta
• ltimg src"osam.gif" align"bottom"gt

42
Pozicioniranje slike u HTML-u

• Vrednosti atributa align mogu biti
• middle - postavlja sliku tako je na donjoj ivici
  slova na sredini teksta
• ltimg src"osam.gif" align"middle"gt
• absmiddle - postavlja sliku tako da se sredina
  slike i sredina teksta poklapaju
• ltimg src"osam.gif" align"absmiddle"gt

43
Izgled slike u HTML-u

• Prazan prostor izmedu slike i okolnog teksta, ili
  nekih drugih elemenata stranice, može se
  definisati pomocu dva atributa hspace i vspace.
  Vrednost ova dva atributa se zadaje u pikselima.
  Ovo su potisnuti atributi.
• ltimg src"osam.gif" hspace"50px" vspace"50px"gt
• U okviru stranice može se definisati i debljina
  granice pomocu atributa border cija se vrednost
  zadaje u pikselima. Ovo je potisnut atribut.
• ltimg src"osam.gif" border"5px"gt
• alt atribut ce u slucaju da citac korisnika
  stranice iz bilo kog razloga ne ucita sliku, na
  onom mestu gde bi trebalo da bude slika prikazati
  tekst koji predstavlja vrednost ovog atributa.
  Nije potisnut u XHTML-u.
• ltimg src"osam.gif" alt"Broj osam"gt

44
Linkovi

• Veze izmedu razlicitih stranica se nazivaju
  linkovi ili hiperveze. One omogucavaju
  jednostavan prelazak sa jednog mesta na stranici
  na drugo mesto unutar same stranice ili na sasvim
  novoj stranici.
• Linkovi koji se mogu definisati u okviru jedne
  HTML stranice mogu se podeliti na tri grupe
• krajnja pozicija se nalazi na stranici koja se
  nalazi se na istom serveru gde i stranica sa
  polaznom pozicijom,
• krajnja pozicija se nalazi na stranici se nalazi
  na drugom serveru,
• krajnja pozicija pripada istoj stranici kao i
  polazna pozicija.

45
Linkovi

• Za sve linkove definicija pocetne pozicije se
  dobija korišcenjem taga ltagt. Ovo je složeni tag.
• Sintaksa ovog taga podrazumeva da se u okviru
  polazne pozicije opišu
• fizicka pozicija polazne pozicije i
• fizicka lokacija krajnje pozicije.
• Polazna pozicija oznacava na stranici mesto sa
  koga se prelazi na neki drugi deo te ili druge
  stranice i definiše se pomocu atributa href
• lta hrefimeKrajnjePozicijegt polaznaPozicija
  lt/agt

46
Link na stranicu u okviru istog servera

• Najjednostavniji slucaj rada sa linkovima je
  prelazak na stranicu u okviru istog servera.
• Kod ove vrste linkova koristi se tag ltagt sa
  atributom href i nazivom stranice do koje se želi
  da se napravi veza.
• lta href"Prva.html"gt Veza do stranice Prva.html
  lt/agt

47
Link na stranicu u okviru istog servera

• Stranica sa krajnjom pozicijom osim što pripada
  istoj aplikaciji, odnosno serveru, u opštem
  slucaju ne mora da se i fizicki nalazi u istom
  direktorijumu gde i stranica sa polaznom
  pozicijom.
• Postoje dva rešenja ovog problema, a to je rad sa
  apsolutnim i relativnim putanjama
• Korišcenje apsolutnih putanja podrazumeva u
  okviru href atributa navodenje pune putanje do
  stranice sa krajnjom pozicijom, na primer
  hrefc\Aplikacije\Poslovanje\Klijent\Prva.html
• Korišcenje relativnih putanja je mnogo podesnije,
  jer se zasniva na kretanju u odnosu na
  direktorijum stranice sa polaznom pozicijom.

48
Link na stranicu u okviru istog servera

• Neka direktorijum X sadrži stranice 1 i 2, Y
  stranicu 3, a Z stranicu 4
• Za stranicu 1,
• relativna adresa stranice 2 je 2.html
• relativna adresa stranice 3 je Y/3.html
• relativna adresa stranice 4 je Y/Z/4.html
• Za stranicu 3,
• relativna adresa stranice 2 je ../2.html
  (simbol .. oznacava direktorijum iznad
  direktorijuma gde se nalazi stranica sa polaznom
  pozicijom)
• relativna adresa stranice 4 je Z/4.html
• Za stranicu 4,
• relativna adresa stranice 2 je ../../2.html
• relativna adresa stranice 3 je ../3.html.

49
Link na stranicu izvan servera

• Da bi se pristupilo stranici izvan servera
  potrebno je navesti celu veb adresu te stranice.
  Opšti oblik adrese koja se pojavljuje kao
  vrednost href atributa je
• sema//domenServera port/putanja/
  imeDokumenta
• Primer
• lta href"http//www.etf.rs/"gt Link ka
  Elektrotehnickom fakultetu lt/agt

50
Link na istu stranicu

• Za ovu vrstu linkova prvo se napravi oznaka na
  mestu na stranici gde se nalazi krajnja
  pozicijia. Oznaka se dobija pomocu atributa id u
  ltagt tagu.
• Na polaznoj poziciji navodi se tag sa imenom
  krajnje pozicije
• lta hrefidKrajnjePozicije"gt polaznaPozicija
  lt/agt
• Na krajnjoj poziciji se navodi tag koji definiše
  ime krajnje pozicije
• lta ididKrajnjePozicijegt krajnjaPozicija
  lt/agt

51
Link na istu (X)HTML stranicu

• lthtmlgt
• ltheadgtlttitlegt Link u okviru iste
  stranicelt/titlegtlt/headgt
• lth2gtProgramiranja lt/h2gt
• ltpgt lta href"html"gt Web i jezik HTML lt/agt
  lt/pgt
• ltpgt lta href"java"gt Programski jezik Java
  lt/agtlt/pgt
• ltpgt lta href"uvodc"gt Uvod u Clt/agtlt/pgt
• lth3gt lta id"html"gt Web i jezik HTMLlt/agt lt/h3gt
• ltpgt................lt/pgt
• ltpgt................lt/pgt
• lth3gt ltA id"java"gt Programski jezik Java lt/Agt
  lt/h3gt
• ltpgt................lt/pgt
• lth3gt lta id"uvodc"gt Uvod u C lt/agt lt/h3gt
• ltpgt................lt/pgt
• lt/bodygt
• lt/htmlgt

52
Link na odredenu poziciju

• Ako se želi da se uspostavi veza sa nekom dugom
  stranicom, ali ne sa pocetkom te stranice, vec
  nekim drugim delom, potrebno je koristiti i prvu
  i drugu vrstu linkova.
• Opet se definiše mesto odakle se želi nastaviti
  sa pregledom pomocu atributa href u ltagt tagu sa
  navodenjem imena stranice, ali se dodaje deo
  imeKrajnjePozicije, da bi se pozicioniralo na
  krajnju poziciju.
• lta hrefimeStraniceimeKrajnjePozicije"gt
  polaznaPozicija lt/agt
• lta href"http//www.etf.rs/aleksandra/
  IP.htmldomaci"gt Domaci iz IP programiranja lt/agt

53
Slika kao link

• Slika u (X)HTML dokumentu može predstavljati i
  polazni cvor u hipervezi. Krajnja adresa se tada
  navodi kao kod obicnog linka, a umesto teksta
  koji se može aktivirati navodi se tag img.
• lta hrefimeKrajnjePozicije"gt tagSaSlikom lt/agt
• Primer
• lta href"Primer.html"gtltimg srcslike/osam.gif"gtlt/
  agt

54
Link za elektronsku poštu

• Linkovi se mogu iskoristiti i za pisanje nove
  mail poruke pomocu default programa za
  elektronsku poštu
• lta href"mailtoaleksandra_at_etf.rs"gt Pošaljite
  e-mail poruku! lt/agt
• Pored adrese na koju se želi poslati poruka mogu
  se podesiti još neki parametri, kao što su naslov
  ili tekst poruke.
• lta href"mailtoaleksandra_at_etf.rs?subjectPrimer
  porukebodyNapišite vaš komentar"gt Pošaljite
  e-mail poruku! lt/agt

55
Povezivanje CSS stilova i delova XHTML dokumenta

• XHTML tekst ima hijerarhijsku strukturu.
• Pomocu imena elemenata, klasa elemenata ili
  ID-ova elemenata se mogu definisati grupe
  elemenata ili pojedinacni elementi.
• Pomocu klasa se mogu definisati grupe elemenata.
• Grupama elemenata se može pridružiti odredeni
  stil.
• Neke osobine stilova se nasleduju sa elementa
  roditelja na element dete.

56
Pridruživanje stila

• Opšta sintaksa
• imeGrupe a1v1a2v2
• imeGrupe je CSS selektor koji odreduje grupu ili
  pojedinacni element, koji se gradi na razlicite
  nacine
• imeElementa imeElementaDeteta
• imeElementaIDElementa
• imeElementa.klasaElementa
• imeElemenataimeAtributavrednostAtributa
• Ovi nacini se mogu na razlicite nacine
  kombinovati.
• Kao i ranije a1,a2,... su atributi ili osobine, a
  v1,v2,... Njihove vrednosti.

57
Pridruživanje stila Primeri

• Primeri
• h2 colorred
• p.citati colorred font-sizesmall
• .citati colorred
• Primer stila svih potomaka
• divgaudi p colorred
• Primer stila dece
• divgaudi gt p colorred

58
Pseudoklase (pseudo-classes)

• Pseudo klasa zavisi od korisnickih aktivnosti
• imeGrupe pseudoKlasa a1b1 a2b2
• Stanje linka koje zavisi od aktivnosti korisnika
  se može opisati pomocu pseudo-klase
• alinkcolorred
• avisitedcoloryellow
• ahovercolorgreen prešli mišem
• aactivecolorblue

59
Pseudoelementi (pseudo-elements)

• Pseudo klasa zavisi od korisnickih aktivnosti
• imeGrupe pseudoElement a1b1 a2b2
• Stanje linka koje zavisi od aktivnosti korisnika
  se može opisati pomocu pseudo-elemenata
• h1before contenturl(smiley.gif)
• pfirst-lettercolorff0000font-sizexx-large
  

60
Apliciranje stilova

• Stilovi mogu biti definisani u eksternim
  fajlovima koji se pozivaju u okviru zaglavlja
  pomocu taga ltlinkgt, ili interno u okviru
  zaglavlja pomocu taga ltstylegt.
• Atributi taga ltlinkgt su rel koji odreduje da li
  je u pitanju glavni ili alternativni stil, type
  koji ima vrednost text/css, i href koji ima
  vrednost fajla sa stilom ukljucujuci i njegovu
  lokaciju.
• Atribut taga ltstylegt je type. Fajl sa stilom se
  može u okviru ovog taga ubaciti pomocu naredbe
  _at_import koju ne prepoznaju stariji brauzeri.
• Stilovi se mogu aplicirati i u okviru tagova.

61
Apliciranje stilova primeri

• Primer apliciranja eksternog fajla sa stilom
• ltheadgt
• ltmeta http-equivcontent-type
  contenttext/htmlcharsetutf-8/gt
• lttitlegt Primer stranice sa eksternim stilom
  lt/titlegt
• ltlink relstylesheet typetext/css
  hrefhttp//www.etf.rs/templates/etf2/css/size1.c
  ssgt
• lt/headgt

62
Apliciranje stilova primeri

• Naredbu _at_import ne razumeju stariji brauzeri, i
  može se koristiti da se koriste dva fajla sa
  stilom. Mogu se koristiti i u okviru fajlova sa
  stilom
• ltheadgt
• ltmeta http-equivcontent-type
  contenttext/htmlcharsetutf-8/gt
• lttitlegt Primer stranice sa internim stilom
  lt/titlegt
• ltstyle typetext/cssgt
• _at_import url("../stil.css")
• lt/stylegt
• lt/headgt

63
Apliciranje stilova primeri

• Primer internog apliciranja stila
• ltheadgt
• ltmeta http-equivcontent-type
  contenttext/htmlcharsetutf-8/gt
• lttitlegt Primer stranice sa internim stilom
  lt/titlegt
• ltstyle typetext/cssgt
• img border solid
• lt/stylegt
• lt/headgt

64
Apliciranje stilova primeri

• Primer internog apliciranja stila u mešanoj
  HTMLXHTML varijanti
• ltimg src"http//www.etf.rs/images/
  ETF_Images/naslovna.jpg" altETF Beograd
  width250px height160px styleborder
  solid alignleft /gt

65
Prioriteti stilova

• Prioriteti stilova, od najvišeg ka najnižem
• stavka korisnickog stila koja se završava sa
  !important
• stavka autorovog stila koja se završava sa
  !important
• stavka autorovog stila
• stavka korisnickog stila
• stavka defolt stila

66
Odredivanje stila kada dve stavke imaju isti
prioritet

• Bira se stavka prema nivou specificnosti koji je
  predstavljen kao abcd. Bira se stil sa vecim
  nivoom.
• a1 ako stavka potice iz atributa style u okviru
  taga, inace je 0.
• b je broj id-ova u specifikaciji.
• c je broj atributa u specifikaciji.
• d je broj elemenata u specifikaciji.
• Ako dve stavke imaju isti prioritet i nivo
  specificnosti bira se ona koja se kasnije
  pojavljuje.
• Izuzetaka ima kod brauzera, pri prikazivanju
  hiperveza kada su setovane korisnicke preference,
  lista itd.

67
Formatiranje teksta

• Sintaksa za formatiranje teksta se razlikuje u
  HTML-u i XHTML-u.
• Brauzeri podržavaju oba formata, ali je
  preporucivo da se prede na XHTML jer je on
  standard.
• Tag ltfontgt iz HTML-a je potisnut

68
Fontovi u HTML-u

• Primeri
• ltfont face"Comic Sans MS"gt Ovde dodje vaš tekst.
  lt/fontgt
• ltfont size5 color"ff0000 face Arialgt
  Ovde ide vaš tekst. lt/fontgt

69
Fontovi u HTML-u
70
Fontovi u XHTML-u

• Podsobine osobine font su font-style,
  font-weight, font-variant, font-size,
  line-height, font-family.
• Ako se koristi osobina font, sve vrednosti mogu
  da se nabroje bez partikalrnih atributa, pri cemu
  su velicina fonta i visina linije razdvojeni /.
• Vrednosti font-style podosobina su italic,
  oblique, normal vrednosti font-weight su bold,
  bolder, lighter ili broj 100-900 vrednosti
  font-variant su smallcaps, normal vrednosti
  font-size su u pikselima, relativne, ili opisne
  small, medium, large vrednosti line-height su
  relativne u odnosu na tekst ili apsolutne
  font-family može imati više vrednosti

71
Fontovi u XHTML-u Primeri

• Primeri
• h1, h2 font-size 20px
• p font 12px/150 Verdana Helvetica
• .citati font-style italicfont-weightbold

72
Ugradivanje fontova u XHTML

• Mogu se koristiti novi fontovi pomocu komande
  _at_font-face cija ce specifikacija, ukljucujuci i
  njenu lokaciju, biti ukljucena u definiciju
  fonta.
• Primer (radi na Mozili)
• ltstyle typetext/css mediascreen, printgt
• _at_font-face font-family "Vera Serif Bold" src
  url(http//developer.mozilla.org/_at_api/deki/files/
  2934/VeraSeBd.ttf)
• body font-family Vera Serif Bold, serif
• lt/stylegt

73
Boje u (X)HTML-u

• Svi elementi stranice rad sa bojama organizuju
  identicno
• Preko predefinisanog engleskog naziva boje (npr.
  "yellow" za žutu boju)
• Ili preko heksadecimalne RGB vrednosti ispred
  koje obavezno treba staviti simbol (npr.
  ffff00)

74
Boja elementa u HTML-u

• Boja npr. pozadine se odreduje atributom bgcolor
  u okviru ltbodygt taga.
• U slucaju da se prilikom navodenja taga body
  izostave opisani atributi, citac im dodeljuje
  predefinisane vrednosti.
• Primeri
• ltbody bgcolor"ffff00 gt
• ltbody bgcolor"yellow gt

75
Boja teksta u HTML-u

• Pored pozadine, može se menjati i boja teksta,
  pomocu atributa text. Primeri
• ltbody bgcolor"ffff00" text"008000"gt
• ili
• ltbody bgcolor"ffff00" text"green"gt
• ili
• ltbody bgcolor"yellow" text"008000"gt
• ili
• ltbody bgcolor"yellow" text"green"gt

76
Slika pozadine u HTML-u

• Kao i promena boje, pozadina u obliku slike se
  definiše pomocu odgovarajuceg atributa u body
  tagu. Atribut je u ovom slucaju background.
• Na primer, ako se želi da se kao pozadina stavi
  slika "pozadina1.jpg" tada ce odgovarajuci tag
  izgledati
• ltbody background"pozadina1.jpg"gt
• Pri definisanju pozadine u obliku slike, dobra
  praksa je da se definiše i bgcolor atribut.
• ltbody background"pozadina1.jpg"
  bgcolor"0000ff"gt

77
Boja i slika pozadine u XHTML-u

• Boja i slika pozadine u XHTML-u se postižu pomocu
  osobine background u okviru body taga. Ista
  osobina se može koristiti za bilo koji deo
  teksta.
• On ima sledece podosobine background-color sa
  vrednostima transparent, ili ime boje
  background-image je ime slike ukljucujuci i URL
  slike i njen folder background-repeat može biti
  repeat, repeat-x, repeat-y, no-repeat
  background-attachment može biti scroll i fixed
  background-position je apsolutna ili relativna
  vrednost pocetne pozicije slike.
• Podosobine se mogu izostaviti i njihove vrednosti
  dodeliti osobine background prema gornjem
  redosledu, a podosobine cijih vrednosti nema ce
  dobiti defolt vrednost.

78
Druge osobine teksta u XHTML-u

• Drugi osobine teksta su color za njegovu boju
  word-spacing za razmak izmedu reci
  letter-spacing za razmak izmedu slova text-ident
  za uvlacenje teksta
• Osobina white-space odreduje da li se razmaci
  prelamaju ili ne, može biti normal, pre...
• Osobina text-align služi za pozicioniranje teksta
  ili dela teksta i može biti left, center,
  justify, right.

79
Druge osobine teksta u XHTML-u

• Transformisanje teksta se vrši pomocu osobina
  text-transform, a text-decoration služi za
  ukrašavanje teksta.
• Text-transform ima vrednosti capitalize,
  uppercase, lowercase, none, a text-decoration
  vrednosti underline, overline, line-through,
  blink.

80
Poravnjavanje inline objekata

• Poravnjavanje slike ili drugog inline objekta se
  može vršiti pomocu osobine text-align, kao u
  primeru
• ltstyle type"text/css"gt
• .centeredImage text-aligncenter lt/stylegt
• ltdiv class"centeredImage" gt ltimg
  src"imgName.gif" alt"image description"
  height"100" width"100"gt lt/divgt

81
Organizacija veb strane

• Organizacija i izgled veb strane se na razlicite
  nacine postižu u HTML-u i XHTML-u.
• XHTML pruža mogucnosti za fleksibilan raspored
  delova stranice na ekranu, dok se u HTML za tu
  svrhu najcešce koriste tabele.
• I druge komande se razlikuju. Brauzeri obicno
  imaju podršku i za stari HTML, ali jeste
  preporucivo da se XHTML koristi što je više
  moguce.

82
Atributi HTML elemenata

• Postoje zajednicki atributi HTML elemenata koji
  su bili pominjani u primerima, ali se cesto
  definišu za svaki element posebno. Najvažniji su
• align, valign (vertikalno poravnanje u okviru
  tabele npr.)
• width, height
• border, bordercolor
• bgcolor, background

83
Pozicioniranje XHTML elemenata

• Pozicioniranje elemenata se može vršiti na više
  nacina, ili kombinacijom ovih nacina
• Pomocu osobine elemenata display
• Pomocu osobine koja definiše lebdenje elementa
  float, i njegovu zabranu clear
• Pomocu osobine position

84
Pozicioniranje pomocu display osobine

• Celine se prikazuju pomocu osobine display koji
  može biti block, inline, inline-block,
  list-item...
• Inline element se nastavlja u istom redu kao i
  prethodni
• Block pocinje u narednom redu, gura naredni
  element u naredni red, i ima definisane dimenzije
• Inline-block se nastavlja u istom redu i ima
  dimenzije

85
Pozicioniranje pomocu display osobine

• Primeri inline elemenata po difoltu a, img, b,
  i, object, span, sub, sup, input, button, label,
  select, textarea, ...
• Primeri block elemenata po difoltu p, ol, ul,
  pre, div, form, table, h1, h2, ...
• Lista svih block i inline elemenata
• http//www.w3.org/TR/1999/xhtml-modularization-
  19990406/module_defs.htmla_dtdblock

86
Primeri pozicioniranja pomocu display osobine
lthtmlgt ltheadgtltlink rel"stylesheet"
type"text/css" href"stil.css"gt
lt/headgt ltbodygt ltdiv id"div_levi"gt Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba lt/divgt ltdiv id"div_desni"gt Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba ltimg srcslika.jpg width200pxgt
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba
lt/divgt lt/bodygt lt/htmlgt
87
Primeri pozicioniranja pomocu display osobine

• Stil.css
• div_levi
• displayinline
• width200px
• min-height100
• div_desni
• displayinline
• vertical-aligntop
• width300px
• min-height100

88
Primeri pozicioniranja pomocu display osobine
89
Primeri pozicioniranja pomocu display osobine

• Stil.css
• div_levi
• displayinline-block
• width200px
• min-height100
• div_desni
• displayinline-block
• vertical-aligntop
• width300px
• min-height100

90
Primeri pozicioniranja pomocu display osobine
91
XHMTL elementi koji lebde

• Elementi se omogucavaju da lebde, tj. prolaze
  kroz tekst i druge elemente pomocu osobine float
  koji ima vrednosti left i right, u zavisnosti od
  strane na kojoj element lebdi.
• kalendar background339 color white width
  150px float right
• Pomocu osobine clear koji ima vrednosti left,
  right, both, i none, može se zabraniti prolaz
  kroz dati element sa njegove odgovarajuce strane.
  
• tekst color white width 150px clear left

92
XHMTL elementi koji lebde

• Elementi koji lebde narušavaju normalan tok
  teksta, odnosno block i inline elemenata.
• Dva ili više elemenata sa istom vrednošcu
  atributa float se naslanjaju jedan na drugi prema
  redosledu pojavljivanja na odgovarajucoj strani.
• Da bi se povratio normalan tok dokumenta posle
  elemenata koji lebde potrebno je uvesti element,
  makar i fiktivni, koji ce da zabrani prolaz
  prethodnih elemenata kroz njega koristeci osobinu
  clear, npr
• .clearfixafter content "." display block
  height 0 clear both visibility hidden
• ltdiv style"float left" class"clearfix"gtTekstlt/
  divgt

93
Primeri pozicioniranja pomocu float osobine
lthtmlgt ltheadgtltlink rel"stylesheet"
type"text/css" href"stil.css"gt
lt/headgt ltbodygt ltdiv id"div_levi"gt Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba lt/divgt ltdiv id"div_desni"gt Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba ltimg srcslika.jpg width200pxgt
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba Proba Proba
Proba Proba Proba Proba Proba Proba
lt/divgt lt/bodygt lt/htmlgt
94
Primeri pozicioniranja pomocu float osobine

• stil.css
• div_levi
• floatleft
• width35
• img
• floatright
• div_desni
• floatright
• width45

95
Primeri pozicioniranja pomocu float osobine
96
Pozicioniranje pomocu position osobine

• Poziciju odreduju zatim osobine top, bottom,
  left, right koji odreduju rastojanje pocetka
  bloka od odgovarajuce ivice prvog pretka elementa
  koji koristi osobinu position, ekrana ili svoje
  prirodne pozicije, kada je osobina position
  absolute, fixed i relative, respektivno.
• Kada se koristi position osobina za
  pozicioniranje, onda se naruši normalan tok
  elemenata.

97
Pozicioniranje XHTML elemenata

• Primer
• pozadina position absolute top 250px left
  2
• sadržaj position absolute top 0px left
  25
• navigacija position absolute top 10px left
  2
• h2, h3 position relative left-25px

98
Primer pozicioniranja u XHTML fajlu

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transi
  tional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"content-type"
  content"text/html charsetutf-8" /gt
• lttitlegtCatalonia Castle Makers
  Castellerslt/titlegt
• ltlink rel"stylesheet" type"text/css"
  href"text.css" /gt
• ltstyle type"text/css"gt
• / stuff to hide from Netscape 4 /
• _at_import "absolute.css"
• lt/stylegt
• lt/headgt
• ltbodygt

99
Primer pozicioniranja u XHTML fajlu

• ltdiv id"navigation"gt
• lth1gtCatalonialt/h1gt
• lta href"index.html"gtHomelt/agt
• lta href"barcelona.html"gtBarcelonalt/agt
• lta href"buildings.html"gtFamous Buildingslt/agt
• lta href"festivals.html"gtFestivalslt/agt
• lt/divgt
• ltdiv id"bg"gt
• ltimg alt"" src"img/nearthetop_b.jpg"
  width"100" /gt
• lt/divgt
• ltdiv id"content"gt
• lth2gtCastle Makerslt/h2gt
• ltpgtIf you've ever marveled at the amazing
  community effort of the Amish lta
  href"http//www.discovery.com/area/exploration/am
  ish/barnraising/day1.html" target"_blank"gtbarn
  raisinglt/agt parties, where young and old, male
  and female, strong and weak all come together
  with a common purpose, Catalonia's Castle Makers
  ltemgt(Castellers)lt/emgt will also attract your
  attention.
• lt/pgt

100
Primer pozicioniranja u XHTML fajlu

• lth3gtCummerbunds and Bare Feetlt/h3gt
• ltpgtBrightly colored clothes (unique to each club
  or ltemgtcollalt/emgt), bare feet, and wide
  cummerbunds distinguish climbers from the public
  that surrounds them on castle-building day. lt/pgt
• lth3gtFent Pinya (Making the Foundation)lt/h3gt
• ltpgtAs a tower begins to form, supporters surround
  the foundation, placing hands one on top of the
  next to make a solid base (the ltemgtpinyalt/emgt or
  pineapple, so called because the rows of hands
  spiraling out from the center resemble that
  fruit). lt/pgt
• lth3gtCastles in the Airlt/h3gt
• ltpgtWatching this diverse group of people join
  together fills me with envy and anxiety. lt/pgt
• ltpgtltimg alt"Waiting" class"line"
  src"img/waiting_s.jpg" width"154" height"106"
  /gt ltimg alt"Tall Tower" class"line"
  src"img/tall-tower_s.jpg" width"100"
  height"153" /gt lt/pgt

101
Primer pozicioniranja u XHTML fajlu

• ltdiv id"calendar"gt
• lth3gtCalendarlt/h3gt
• ltp class"calendar"gt
• July 1 - Roses ltbr /gt
• June 30 - Girona ltbr /gt
• June 26 - Tarragona
• lt/pgtlt/divgtlt/divgtlt/bodygtlt/htmlgt

102
Stil za tekst text.css

• body
• font-family "Trebuchet MS", Verdana,
  Sans-serif
• h2, h3 color339
• a, alink
• color 339
• font-weight bold
• text-decoration none
• avisited
• color 669
• ahover
• background-color fff
• color 339

103
Stil za apsolutno pozicioniranje absolute.css

• bg
• position absolute
• top 250px
• left 2
• content
• positionabsolute
• top 0px
• left 30
• navigation
• position absolute
• top 10px
• left 2
• navigation a displayblock

104
Primer apsolutnog pozicioniranja
105
Primer apsolutnog pozicioniranja - skrolovanje
106
Primena osobine display

• bg
• position absolute
• top 250px
• left 2
• content
• positionabsolute
• top 0px
• left 30
• navigation
• position absolute
• top 10px
• left 2
• / navigation a displayblock /

107
Primena osobine display
108
Primer nasledivanja Autor nije definisao stil
linkova

• body
• font-family "Trebuchet MS", Verdana,
  Sans-serif
• colorblack text-decoration none
• h2, h3 color339
• / a , alink
• color red
• font-family Arial
• font-weight bold
• text-decoration none /
• avisited
• color 669
• ahover
• background-color fff
• color 339

109
Primer nasledivanja Autor nije definisao stil
linkova
110
Primer nasledivanja Linkovi isti i predefinisani

• body
• font-family "Trebuchet MS", Verdana,
  Sans-serif
• colorblack text-decoration none
• h2, h3 color339
• alink
• color red
• font-family Arial
• font-weight bold
• text-decoration none
• avisited
• color 669
• ahover
• background-color fff
• color 339

111
Primer nasledivanja Linkovi isti i nedefinisani
112
Primer nasledivanja Neki linkovi definisani,
neki ne

• body
• font-family "Trebuchet MS", Verdana,
  Sans-serif
• colorblack text-decoration none
• h2, h3 color339
• navigation alink
• color red
• font-family Arial
• font-weight bold
• text-decoration none
• avisited
• color 669
• ahover
• background-color fff
• color 339

113
Primer nasledivanja Neki linkovi definisani,
neki ne
114
Stil za fiksno pozicioniranje fixed.css

• bg
• position fixed
• top 250px
• left 2
• content
• positionabsolute
• top 0px
• left 30
• navigation
• position fixed
• top 10px
• left 2
• navigation a displayblock

115
Stil za fiksno pozicioniranje
116
Stil za relativno pozicioniranje relative.css

• bg
• position absolute
• top 250px
• left 2
• content
• positionabsolute
• top 0px
• left 30
• navigation
• position absolute
• top 10px
• left 2
• navigation a displayblock
• h2, h3 positionrelative left-25px

117
Stil za relativno pozicioniranje
118
XHTML vertikalno pozicioniranje

• Vertikalno pozicioniranje se vrši pomocu osobine
  vertical-align koji može imati vrednosti middle,
  sub, super, text-top, text-bottom, top, bottom,
  itd.
• Osobina vertical-align se aplicira se na inline
  objekte.

119
XTML pozicioniranje u 3D

• Koji ce element biti iznad koga odreduje osobina
  z-index, koji uzima vrednosti celih brojeva.
• Element sa vecim indeksom z-index ce biti iznad
  elementa sa manjim indeksom.

120
Velicina XHTML elemenata

• Se odreduje pomocu osobine width, height,
  padding, border, i margin. Padding je rastojanje
  izmedu sadržaja i granice, border je granica, a
  margin rastojanje izmedu dva susedna elementa.
  Osobina border ima podosobine border-style
  (dotted, dashed, solid,), border-width, i
  border-color.
• Sve ove osobine mogu imati apsolutnu ili
  relativnu vrednost. Relativna vrednost je uvek u
  procentima i racuna se u odnosu na roditeljski
  element.
• Sve ove osobine imaju podosobine koji
  specificiraju stranu elementa, npr. border-left,
  margin-bottom, padding-right ..., pa se tako
  formiraju i podosobine kao border-left-color itd.

121
Velicina XHTML elemenata
Primer dimenzija XHTML elemenata
i odnosa sa susednim elementima
padding-top
margin-right
padding-left
margin-bottom
border-bottom-width
122
Osobina margin i centriranje

• Osobina margin, je jednaka maksimumu osobina
  margin dva susedna elementa. Osobina margin se
  dodaje na udaljenost definisanu osobinama top,
  left, bottom, right
• Centriranje kad je position relative
• elementpositionrelative margin0 auto

123
Centriranje pomocu atributa display

• U roditeljskom elementu elementa koji centriramo
  koristimo
• text-align center
• Element koji centriramo treba da bude inline,
  odnosno najcešce za taj blok
• display inline-block

124
Gde XHTML elementi preticu

• Osobina overflow odreduje šta se dešava kada je
  tekst, i drugi materijal, veci od mesta koji mu
  je na raspolaganju.
• Vrednosti su visible - za koju se prostor širi
  da primi tekst hidden - za koju se tekst koji ne
  staje skriva scroll - za koji se dodaju
  skrol-barovi i auto - za koji se automatski
  dodaju skrol-barovi.

125
html i body elementi

• html element ima velicinu ekrana, a body element
  ima velicinu dokumenta
• Ukoliko je tekst manji od ekrana, boja body
  elementa ce biti samo oko teksta, a boja html
  elementa po celom ekranu.

126
Primeri centriranja dokumenta pomocu body taga

• Centriranje dokumenta fiksne širine
• body
• width 800px
• margin 0 auto
• Centriranje dokumenta fleksibilne širine
• body
• width 80
• margin 0 auto

127
Pojam listi

• Liste u jeziku (X)HTML se koriste za navodenje,
  popisivanje odredenih delova teksta.
• Postoje
• nenumerisane,
• numerisane,
• neuredene liste.

128
Numerisane i nenumerisane liste u (X)HTML-u

• Numerisane liste koriste ltolgt tag (engl. ordered
  list), a nenumerisane liste ltulgt tag (engl.
  unordered list).
• Pojedine stavke liste se definišu pomocu ltligt
  taga.

129
Nenumerisane liste

• To su liste sa kojima se nabrajaju stavke, bez
  navodenja rednog broja.
• Na primer
• Fruits
• apples
• bananas
• grapefruit

130
Nenumerisane liste

• Opšta struktura je (ul - unordered list)
• ltulgt
• ltligt element1Liste lt/ligt
• ltligt element2Liste lt/ligt
• . . . . .
• lt/ulgt

131
Nenumerisane liste u HTML-u

• Oznaka stavke može se regulisati atributom type
  (potisnut u XHTML-u) koji može uzimati vrednosti
• circle - okruglo dugme
• disc - ispunjeno okruglo dugme
• square - kvadratno dugme

132
Nenumerisane liste

• Za primer sa kružnim dugmicima
• prolece
• leto
• jesen
• zima
• odgovarajuci HTML kod je
• ltul typedisc"gt
• ltligtprolece lt/ligt
• ltligtleto lt/ligt
• ltligtjesen lt/ligt
• ltligtzima lt/ligt
• lt/ulgt

133
Numerisane liste

• To su liste sa rednim brojevima stavki.
• Primer
• Godišnja doba su
• 1. prolece
• 2. leto
• 3. jesen
• 4. zima

134
Numerisane liste

• Opšta struktura je (ol - ordered list)
• ltolgt
• ltligt element1Liste lt/ligt
• ltligt element2Liste lt/ligt
• . . . . .
• lt/olgt

135
Numerisane liste u HTML-u

• Atribut type
• A - velika slovaa - mala slovaI - rimski
  brojevii - mali rimski brojevi

136
Numerisane liste

• I. prolece
• II. leto
• III. jesen
• IV. zima
• Odgovarajuci HTML kod
• ltol type"I"gt
• ltligtprolece lt/ligt
• ltligtleto lt/ligt
• ltligtjesen lt/ligt
• ltligtzima lt/ligt
• lt/olgt

137
Definicione liste

• Ovaj oblik liste se dobija sa ltdlgt tagom. Svaka
  stavka ovakve liste se sastoji iz dva dela
• termina koji se definiše,
• i njegove definicije.
• Termini zapocinju ltdtgt tagom, a njihove
  definicije ltddgt tagom.
• Termini se poravnavaju uz levu marginu a njihove
  definicije se pojavljuju u novom redu i pomerene
  su za odreden broj mesta.

138
Definicione liste

• Opšta stuktura je
• ltdlgt
• ltdtgt odrednica1 ltdtgt
• ltddgt opisOdrednice1 lt/ddgt
• ltdtgt odrednica2 lt/dtgt
• ltddgt opisOdrednice2 lt/ddgt
• . . . . .
• lt/dlgt

139
Definicione liste

• Primer za ovu vrstu listi je
• Prolece
• traje od 21. marta do 21. juna.
• Leto
• traje od 21. juna do 21. septembra.
• Jesen
• traje od 21. septembra do 21. decembra.
• Zima
• traje od 21. decembra do 21. marta.

140
Definicione liste

• (X)HTML kod za prethodni primer je
• ltdlgt
• ltdtgtProlece lt/dtgt
• ltddgttraje od 21. marta do 21. juna. lt/ddgt
• ltdtgtLetolt/dtgt
• ltddgttraje od 21. juna do 21. septembra. lt/ddgt
• ltdtgtJesenlt/dtgt
• ltddgttraje od 21. septembra do 21. decembra. lt/ddgt
• ltdtgtZimalt/dtgt
• ltddgttraje od 21. decembra do 21. marta. lt/ddgt
• lt/dlgt

141
Definicione liste

• Još jedan primer, (X)HTML kod
• ltdlgt
• ltdtgt -i lt/dtgt
• ltddgt invokes NCSA Mosaic for Microsoft Windows
  using the initialization file defined in the
  path lt/ddgt
• ltdtgt -k lt/dtgt
• ltddgtinvokes NCSA Mosaic for Microsoft Windows
  in kiosk mode lt/ddgt
• lt/dlgt

142
Definicione liste

• Rezultat
• -i
• invokes NCSA Mosaic for Microsoft Windows using
  the initialization file defined in the path.
• -k
• invokes NCSA Mosaic for Microsoft Windows in
  kiosk mode.

143
Lista unutar liste

• ltulgt
• ltligt Opštine u Vojvodini koje su podnele
  prijave
• ltulgt
• ltligt Severnobacki okrug
• ltolgt ltligt Backa Topola lt/ligt
• ltligt Subotica lt/ligt lt/olgtlt/ligt
• ltligt Južnobanatski okrug
• ltolgt ltligt Alibunar lt/ligt
• ltligt Bela Crkva lt/ligt lt/olgtlt/ligt
• lt/ulgt lt/ligt
• ltligt Opštine u užoj Srbiji koje su podnele
  prijave
• ltulgt
• ltligt Šumadijski okrug
• ltolgt ltligt Arandelovac lt/ligtlt/olgtlt/ligt
• ltligt Borski okrug
• ltolgt ltligt Bor lt/ligt lt/olgtlt/ligt

144
Lista unutar liste

• Rezultat prethodnog primera
• Opštine u Vojvodini koje su podnele prijave
• Severnobacki okrug
• Backa Topola
• Subotica
• Južnobanatski okrug
• Alibunar
• Bela Crkva
• Opštine u užoj Srbiji koje su podnele prijave
• Šumadijski okrug
• Arandelovac
• Borski okrug
• Bor

145
Stilovi lista u XHTML-u

• Za stilove listi ili njihovih delova se koristi
  osobina list-style i njene podosobine
  list-style-image, list-style-position
  (inside,outside), i list-style-type
  (circle,disc,decimal, ...). Slika ima prednost
  nad tipom. Podosobine se mogu izostaviti.
• Stilovi se mogu pridružiti elementima listi, ili
  elementima odredene klase
• li list-style-type upper-roman
• ol.new list-style-image url(http//www.cookwood.
  com/html5ed/examples/lists/rightarrow.gif)
• ol li list-style-type circle font-size 75

146
Primer liste sa stilom

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transi
  tional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"content-type"
  content"text/html
• 
  charset iso-8859-1 " /gt
• lttitlegtPrijave po opštinama lt/titlegt
• ltlink rel"stylesheet" type"text/css"
  href"lista.css" /gt
• lt/headgt
• ltbodygt
• ltdivgt
• Formulari za popis osnovnih škola je poslat svim
  opštinama. Opštine koje su
• odgovorile

147
Primer liste sa stilom

• ltulgt
• ltligt Opštine u Vojvodini koje su podnele
  prijave
• ltulgt
• ltligt Severnobacki okrug
• ltolgt ltligt Backa Topola lt/ligt
• ltligt Subotica lt/ligt lt/olgtlt/ligt
• ltligt Južnobanatski okrug
• ltolgt ltligt Backa Topola lt/ligt
• ltligt Subotica lt/ligt lt/olgt lt/ ligt
• lt/ulgt lt/ligt
• ltligt Opštine u užoj Srbiji koje su
  podnele prijave
• ltulgt
• ltligt Šumadijski okrug
• ltolgt ltligt Arandelovac lt/ligtlt/olgtlt/ligt
• ltligt Borski okrug
• ltolgt ltligt Bor lt/ligt lt/olgtlt/ ligt
• lt/ulgt lt/ligt
• lt/ulgt lt/divgt

148
Primer liste sa stilom

• Okruzi koji nisu odgovorili
• ltulgt
• ltligt Severnobacki okrug