HTML

1
HTML

• Dejan Sredojevic

2
HTML Osnove1/2

• HTML (HyperText Markup Language).
• HTML dokument je datoteka sa tekstom i tagovima.
• Tagovi
• definišu strukturu i izgled dokumenta
• otvarajuci tag ltime_elementagt
• zatvarajuci tag lt/ime_elementagt
• postoje i prazni tagovi ltime_elementagt
  (pravilnije ltime_elementa /gt)

3
HTML Osnove2/2

• Osim imena HTML elementa, tag cini i odredeni
  broj atributa, cije su vrednosti uokvirene
  navodnicima
• ltimg srcslika.gifgt
• Tag govori browser-u šta da uradi, a atribut kako
  da to uradi.
• Razlika izmedu malih i velikih slova ne postoji
  (title Title tiTLe).
• Pri prikazivanju stranica browser-i se oslanjaju
  na informacije date u tagovima.
• Više whitespace-ova se svodi na jedan (enteri,
  razmaci,tabovi).

4
Struktura HTML dokumenta1/2

• Tagovi koji opisuju osnovnu strukturu HTML
  dokumenta
• html,
• head i
• body.

5
Struktura HTML dokumenta2/2

• Tag lthtmlgt je okvir u kom se nalaze svi ostali
  tagovi
• HTML dokument uvek pocinje tagom lthtmlgt, a
  završava se tagom lt/htmlgt.
• Tag ltheadgt uokviruje zaglavlje u kom se nalaze
  informacije o samom dokumentu (naslov, opis,
  kljucne reci, ime autora, itd.) opcion je.
• Sve ono što vidimo u prozoru browser-a, tj.
  sadržaj stranice, nalazi se u telu dokumenta koje
  uokviruje element ltbodygt
• u dokumentu sme da postoji samo jedan par tagova
  ltbodygtlt/bodygt.

6
HEAD

• Browser ne prikazuje informacije koje se nalaze
  izmedu tagova ltheadgt i lt/headgt, osim sadržaja
  taga lttitlegt.
• Sadržaj taga lttitlegt je naslov HTML dokumenta
  koji ce se pojaviti u naslovnoj liniji web citaca.

7
BODY

• Ovaj element specificira glavni sadržaj dokumenta
  
• Pocetni tag ltbodygt ima atribute koji omogucavaju
  da se specificiraju karakteristike dokumenta
  (boja pozadine ili slika, boja teksta, boja
  posecenih i neposecenih linkova, akcije koje se
  izvršavaju kada se dokument ucita, ili ako se ne
  ucita iz nekog razloga, itd.)

8
Primer

• lthtmlgt
• ltheadgt
• lttitlegtNaslovlt/titlegt
• lt/headgt
• ltbodygt
• Tekst dokumenta.
• lt/bodygt
• lt/htmlgt

9
Primer
10
Komentar

• Oblik
• lt!-- Ovo je komentar --gt
• Komentar pocinje sekvencom znakova lt!- (izmedu
  ovih znakova ne sme da postoji ni jedan razmak),
  a završava se sekvencom znakova --gt.

11
Obrada teksta1/7

• Pasusi teksta se navode izmedu ltpgt tagova.
• Svi ltpgt tagovi pocinju u novom redu.
• Iza završnog lt/pgt taga, prelazi se u novi red, sa
  dodatnim praznim prostorom izmedu.
• Ukoliko treba ubaciti praznu liniju bez dodavanja
  praznog prostora, koristi se tag ltbrgt.

12
Obrada teksta 2/7

• U okviru pocetnog taga ltpgt može se navesti
  atribut align, koji odreduje horizontalno
  poravnanje paragrafa vrednost ovog atributa može
  biti jedna od sledecih left, center, right i
  justify.
• Ukoliko se navede samo pocetni tag ltpgt,
  podrazumeva se da je sledeci element u novom
  redu.

13
Primer

• lthtmlgt
• ltheadgt
• lttitlegtPasusilt/titlegt
• lt/headgt
• ltbodygt
• ltpgtOvo je prvi pasus.lt/pgt
• ltpgtOvo je drugi pasus.lt/pgt
• ltpgtOvo je treci pasus sa praznim redom.ltbrgtlt/pgt
• ltp align"right"gtOvo je pasus koji je desno
  poravnat.lt/pgt
• ltp align"center"gtOvo je pasus koji je
  centriran.lt/pgt
• lt/bodygt
• lt/htmlgt

14
Primer
15
Obrada teksta 3/7

• Naslovi se mogu istaci korišcenjem elemenata h1,
  h2, h3, h4, h5 i h6.
• Tag h1 daje najvecu velicinu slova, a h6
  najmanju.
• Svaki od ovih elemenata pocinje u novom redu, a
  browser-i dodaju još malo praznog mesta pre
  zaglavlja.
• U okviru zaglavlja se može navesti atribut align,
  koji odreduje horizontalno poravnanje zaglavlja
  vrednost ovog atributa može biti jedna od
  sledecih left, center, right.

16
Primer

• lthtmlgt
• ltheadgt
• lttitlegtVelicina slovalt/titlegt
• lt/headgt
• ltbodygt
• lth1gtOvo je velicina slova u zaglavlju H1lt/h1gt
• lth2gtOvo je velicina slova u zaglavlju H2lt/h2gt
• lth3gtOvo je velicina slova u zaglavlju H3lt/h3gt
• lth4gtOvo je velicina slova u zaglavlju H4lt/h4gt
• lth5gtOvo je velicina slova u zaglavlju H5lt/h5gt
• lth6gtOvo je velicina slova u zaglavlju H6lt/h6gt
• lt/bodygt
• lt/htmlgt

17
Primer
18
Obrada teksta 4/7

• Za grubo razdvajanje teksta koristi se prazan tag
  lthrgt.
• On dodaje jednu horizontalnu liniju ispred i iza
  koje postoji prazan red.
• Moguce je podesiti visinu korišcenjem atributa
  sizen (n je broj piksela), širinu pomocu
  atributa widthn i poravnanje pomocu atributa
  align (moguce vrednosti su left, right i center).

19
Obrada teksta 5/7

• Tag blockquote služi za vece blokove citata
• obicno se predstavlja kao blok teksta uvucen u
  odnosu na ostatak.
• Tag cite se koristi za krace citate i uglavnom
  ispisuje tekst italikom
• koristi se za citate unutar teksta.
• Tag code služi za kratke (manje od jednog reda)
  listinge (unutar teksta).
• Tag pre (preformatted) obezbeduje prikaz teksta
  onako kako je unet (svi enteri, tab-ovi i
  razmaci se prikazuju kako su uneti)
• služi za prikaz listinga programa.

20
Primer

• lthtmlgt
• ltheadgt
• lttitlegtEnter the title of your HTML
  document herelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtOvo je tekst koji je levo poravnat.lt/pgt
• ltblockquotegtOvo je veliki blok
  citata.lt/blockquotegt
• ltpgtOvo je treci pasus, unutar kojeg ce biti
  naveden citat.
• ltcitegtOvo cemo posmatrati kao
  citat.lt/citegt
• lt/pgt
• lt/bodygt
• lt/htmlgt

21
Primer
22
Obrada teksta 6/7

• Ukoliko treba promeniti sam izgled teksta,
  koriste se sledeci elementi
• b - za podebljan tekst,
• i - za iskošen (italik) tekst,
• u - za podvucen tekst,
• big - daje veci font za 1 od zadatog,
• small - daje manji font za 1 od zadatog,
• blink - daje tekst koji treperi.

23
Obrada teksta 7/7

• Tag ltfontgt omogucava da se menja boja, velicina i
  vrsta fonta sav tekst izmedu pocetnog i završnog
  taga bice prikazan sa specificiranim
  karakteristikama .
• Atributi u okviru pocetnog taga ltfontgt su
• face naziv fonta,
• color - menjanje boje (navodi se ime boje ili
  heksadecimalni broj koji predstavlja tu boju na
  RGB skali),
• size - menjanje velicine,
• weight - debljina slova.

24
Primer

• lthtmlgt
• ltheadgt
• lttitlegtKarakteristike tekstalt/titlegt
• lt/headgt
• ltbodygt
• ltpgtSledeci tekst ce prikazati upotrebu
  atributa za menjanje karakteristika tekstalt/pgt
• ltpgtltbgtOvo je podebljan tekst.lt/bgtlt/pgt
• ltpgtltigtOvo je iskosen tekst.lt/igtlt/pgt
• ltpgtltugtOvo je podvucen tekst.lt/ugtlt/pgt
• ltpgtOvo su slova uobicajene velicine, ltbiggta ovo
  su slova za jedan veca od uobicajenih.lt/biggtlt/pgt
• ltpgtOvo su slova uobicajene velicine, ltsmallgta
  ovo su slova za jedan manja od uobicajenih.lt/small
  gtlt/pgt
• ltpgtltfont color"red" size"10"gtOvo je tekst
  crvene boje, slova su velicine 10.lt/fontgtlt/pgt
• lt/bodygt
• lt/htmlgt

25
Primer
26
Liste1/3

• Postoje tri vrste lista
• unordered (neoznacena) lista,
• ordered (brojna) lista i
• definiciona lista.
• Neoznacena lista predstavlja spisak elemenata
  ispred kojih se nalazi bullet.
• Neoznacena lista pocinje tagom ltulgt (Unordered
  List)
• Elementi liste se oznacavaju tagom ltligt (List
  Item).

27
Liste2/3

• Ako se umesto taga ltulgt koristi element ltolgt,
  dobija se brojna lista (Ordered List), odnosno
  spisak elemenata sa rednim brojevima.
• Pocetni broj liste se može zadati atributom
  start.
• Svakom elementu se može dodeliti poseban broj,
  pomocu atributa value u tagu ltligt.

28
Primer

• lthtmlgt
• ltheadgt
• lttitlegtUredjena listalt/titlegt
• lt/headgt
• ltbodygt
• ltpgtOvo je primer uredjene listelt/pgt
• ltol start3"gt
• ltligtVoce
• ltulgt
• ltligtjabukalt/ligt
• ltligtkruskalt/ligt
• ltligtjagodalt/ligt
• lt/ulgt
• lt/ligt

• ltligtPovrce
• ltulgt
• ltligtpaprikalt/ligt
• ltligtkupuslt/ligt
• ltligtparadajzlt/ligt
• lt/ulgt
• lt/ligt
• lt/olgt
• lt/bodygt
• lt/htmlgt

29
Primer
30
Liste3/3

• Unutar taga ltdlgt i lt/dlgt nalazi se definiciona
  lista.
• Svaka stavka liste pocinje tagom ltdtgt i lt/dtgt.
• Ispod stavke se nalazi definicija, unutar tagova
  ltddgt i lt/ddgt.
• Primer
• ltdlgt
• ltdtgtHTMLlt/dtgt
• ltddgtHyper Text Markup Languagelt/ddgt
• lt/dlgt

31
Slike1/2

• Tag img definiše sliku koja ce se javiti u HTML
  dokumentu.
• Atribut src sadrži ime slike koja treba da se
  nade u dokumentu, ili putanju do te slike.
• Atribut alt sadrži tekst koji je ispisan na mestu
  slike, ukoliko ona nije ucitana iz nekog razloga.

32
Slike2/2

• Dimenzije slike se zadaju preko atributa height i
  width.
• Slika može biti poravnata u odnosu na ostatak
  dokumenta, a željena vrednost se daje u artibutu
  align.
• Debljina ivice slike se zadaje u atributu border.

33
Primer

• lthtmlgt
• ltheadgt
• lttitlegtSlikelt/titlegt
• lt/headgt
• ltbodygt
• ltimg src "//D/My pictures/slika.jpg"
  border"3" alt"snoopy"gt
• ltbrgt
• ltimg src "slika.jpg" height"180" width"120"
  alt"snoopy" align"bottom"gt
• ltbr/gt
• lt/bodygt
• lt/htmlgt

34
Primer
35
Linkovi

• Linkovi predstavljaju mogucnost da se klikom
  mišem prede sa jednog dokumenta na drugi.
• Linkovi mogu da ukazuju na
• drugi dokument,
• drugi deo unutar dokumenta,
• bilo koji resurs (ne obavezno HTML datoteka).

36
URI, URL

• Odredišni objekat se identifikuje uz pomoc
  mehanizma URI.
• URI (Uniform Resource Identifiers) služi za
  identifikaciju nekog resursa.
• URL (Uniform Resource Locator)
• podskup URI,
• služi za lociranje nekog resursa na Internetu,
• oblik
• protokol//racunarport/putanja/datoteka

37
Apsolutni i relativni linkovi

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbodygt
• lth1gtLinkovilt/h1gt
• ltpgt
• Ovaj primer sadrži lta href"primer09.html"gtl
  inklt/agt sa relativnom
• putanjom na prethodni primer.
• lt/pgt
• ltpgt
• Ovaj primer sadrži lta href"http//www.googl
  e.com"gtlinklt/agt sa apsolutnom
• putanjom na Google.
• lt/pgt
• lt/bodygt
• lt/htmlgt

38
Relativni link na deo dokumenta

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbody gt
• lth1gtOznacavanje delova dokumenatalt/h1gt
• ltpgt
• lta name"prvi"gtOvaj pasus obeležen je
  imenom ltbgtprvilt/bgt.lt/agt
• Ovo je lta href"drugi"gtlinklt/agt na drugi
  deo.
• lt/pgt
• ltpgt
• lta name"drugi"gtOvaj pasus obeležen je
  imenom ltbgtdrugi.lt/agt
• Ovo je lta href"prvi"gtlinklt/agt na prvi
  deo.
• lt/pgt
• lt/bodygt
• lt/htmlgt

39
Mapa sa slikama

• Tag ltmapgt definiše geometrijske zone na slici
  koje ce predstavljati linkove.
• Atribut usemap u img tagu odreduje putanju do
  opisa zona (do ltmapgt taga).
• Definicija oblasti
• ltarea shape"poly" alt"poligon" coords"395,145,
  322,91, 393,32" href"primer01.html"gt
• ltarea shape"rect" alt"pravougaonik"
  coords"51,119, 135,191" href"primer02.html"gt
• ltarea shape"circle" alt"krug"
  coords"277,165,76" href"primer03.html"gt

40
Primer

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbodygt
• ltpgt
• Delovi slike predstavljaju linkove.
  Pronadite ih.
• lt/pgt
• ltpgt
• ltimg src"pic.gif" height"300" width"400"
  border"0" usemap"mapa"gt
• lt/pgt
• ltmap name"mapa"gt
• ltarea shape"poly" alt"poligon"
  coords"395,145, 322,91, 393,32
  href"primer01.html"gt
• ltarea shape"rect" alt"pravougaonik"
  coords"51,119, 135,191 href"primer02.html"gt
• ltarea shape"circle" alt"krug"
  coords"277,165,76" href"primer03.html"gt
• lt/mapgt
• lt/bodygt
• lt/htmlgt

41
Dodatni atributi body taga

• Atribut bgcolor boji pozadinu stranice.
• Atribut link definiše boju linka.
• Atrigut vlink definiše boju posecenog linka.
• Atribut alink definiše boju aktivnog
  (selektovanog) linka.
• Atribut background definiše putanju do pozadinske
  slike.

42
Primer

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbody bgcolor"gray" alink"yellow" vlink"red"
  link"green"gt
• lth1gtOznacavanje delova dokumenatalt/h1gt
• ltpgt
• Ovaj pasus obeležen je imenom prvi.
• Ovo je lta href"drugi"gtlinklt/agt na
  ltcodegtdrugilt/codegt deo.
• lt/pgt
• lt/bodygt
• lt/htmlgt

43
Primer

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbody background"bgpic.gif"gt
• lth1gtPozadinska slikalt/h1gt
• ltpgt
• All of the base tables and views for the
  database's data
• dictionary are stored in the schema SYS.
  These base tables and views
• are critical for the operation of
  Oracle...
• lt/pgt
• lt/bodygt
• lt/htmlgt

44
Primer