Programiranje 1 uvod u html

1
Programiranje 1uvod u html

• Staša Vujicic
• verzija 1.2

2
Tekst

• Tekst ili dokument je "informacija namenjena
  ljudskom sporazumevanju koja može biti prikazana
  u dvodimenzionalnom obliku... Tekst se sastoji od
  grafickih elemenata kao što su karakteri,
  geometrijski ili fotografski elementi ili njihove
  kombinacije, koji cine sadržaj dokumenta."
  (ISO-definicija)

3

• U svakom tekstu se razlikuju dve osnovne formalne
  strukture
• logicka struktura ili logicki izgled (engl.
  logical layout) opisuje organizaciju sadržaja
  teksta. Tipicni elementi logicke strukture su
  jedinice kao što su naslovi ili pasusi.
• graficka struktura ili graficka izgled (engl.
  graphical layout) opisuje organizaciju teksta u
  "štampanom" obliku. Tipicni elementi graficke
  strukture su jedinice kao što su strana ili red.
• Logicka struktura ne zavisi od graficke strukture
  dokumenta.

4
Hipertekst

• Hipertekst ili web-dokument je, pojednostavljeno,
  tekst koji sadrže veze ili uputnice (engl. link)
  ka drugim dokumentima ili na samog sebe.
• Hipertekst je, preciznije, skup stranica (engl.
  page), u obliku datoteka, medusobno povezanih
  uputnicama koje su umetnute u stranice. Ove
  uputnice se obicno vide kao veze (hiperveze) na
  koje se može kliknuti (od engl. to click). 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.

5
Jezici za opisivanje TEKSTA

• Jezici za opisivanje teksta su jezici koji
  omogucavaju da se precizno opiše izgled i sadržaj
  jednog teksta. Od posebnog su znacaja
• SGML (skr. od Standard General Markup Language),
• TeX i LaTeX (za matematicke tekstove),
• PostScript (jezik laserskih štampaca),
• RTF (skr. od Rich Text Format), ...

6
Jezici za opisivanje hiperteksta

• Jezici za opisivanje hiperteksta su jezici koji
  omogucavaju da se precizno opiše hipertekstuelna
  struktura jednog teksta (uputnice na druge
  tekstove, itd). Najznacajniji jezici ove vrste
  su
• SGML,
• HTML (skr. od HyperText Markup Language),
  pojednostavljena verzija SGML-a,
• XHTML (skr. od Expandable HTML) i
• XML (skr. od Extensible Markup Language,
  "kompromis" izmedu preterane složenosti SGML-a i
  jednostavnosti HTML-a).

7
HTML

• HTML je skracenica od Hyper Text Mark-up
  Language.
• Izvorne datoteke sa dokumentom opisanim u HTML-u
  imaju obicno ekstenziju .html ili .htm, a nalaze
  se u odredenom direktorijumu servera vezanog na
  Internet, što ih cini dostupnim (vidljivim) na
  web-u.
• Jezik HTML se zasniva na eksplicitnom
  obeležavanju logicke strukture dokumenta.

8

• Tekst editor MS Notepad, WordPad, UltraEdit,
• Pregledac (engl. browser) je interpretator jezika
  za prikazivanje hipertekstualnih dokumenata on
  omogucava njihov vizuelni prikaz na ekranu. Na
  primer, Mozilla Firefox, Internet Explorer,
  Opera, Google Chrome...

9
Etikete u HTML-u

• ltHTMLgt pocetni tag lt/HTMLgt krajnji tag
• Ovo su HTML tagovi. Obeležavanje se vrši pomocu
  etiketa (engl. tag) koje opisuju elemente logicke
  strukture teksta.
• Da bi ste napravili krajnji tag, samo dodajte / u
  pocetni tag.
• Veliki broj tagova ima i krajnji tag (ali ne
  svi!).
• Tagovi su nacin izdavanja instrukcija browser-u.
  Browser gore napisani tekst "shvata" kao 'Ovo je
  pocetak HTML dokumenta' (ltHTMLgt) i 'Ovo je kraj
  HTML dokumenta' (lt/HTMLgt).

10
Etikete u HTML-u

• Etikete(tagovi) se navode izmedu uglastih zagrada
  lt i gt.
• Etikete se u HTML-u mogu razvrstati na
• proste etikete za opisivanje jednostavnih
  elemenata logicke strukture. Oblika su ltXgt .
• složene etikete su zagrade oblika ltXgt y lt/Xgt
  kojima je opisan izgled dela teksta y.
• atribute složenih obeležja oblika
• ltX A1a A2b ...gt y lt/Xgt koji pružaju dodatne
  informacije, obicno o grafickom izgledu, dela
  teksta y.

11
HTML i CSS

• HTML je jezik za obeležavanje hiperteksta -
  koristi se pri kreiranju web strana. Glavne
  gradivne jedinice HTML jezika su elementi
  (pasusi, slike, hiperveze, tabele, liste.. ), a
  dodatna svojstva im se mogu pridružiti preko
  atributa ( jezik na kojem je pasus napisan,
  alternativni tekst koji ce biti prikazan u
  slucaju da pregledac ne može da prikaže sliku,
  odredište hiperveze... ) 
• CSS je skup obeležja koji omogucava fino
  doterivanje sadržaja strana. Uveden je sa namerom
  da se razdvoji deo koji se odnosi na strukturu i
  sadržaj dokumenta od dela koji se odnosi na
  njegov vizuelni prikaz.

12
Osnovna struktura html dokumenta

• U svakom HTML dokumentu mora se naci i par HEAD
  tagova koji oznacava zagrade zaglavlja, i sadrži
  meta-definicije HTML-dokumenta.
• ltHTMLgt ltHEADgt lt/HEADgtlt/HTMLgt

13
Osnovna struktura html dokumenta

• Sledeca stvar koja bi trebala da se doda u HEAD
  je naslov HTML dokumenta (TITLE).
• ltHTMLgt ltHEADgt ltTITLEgt Moja prva strana
  lt/TITLEgt lt/HEADgtlt/HTMLgt

14
Osnovna struktura html dokumenta

• Glavni deo HTML dokumenta nalazice se izmedu BODY
  tagova.
• ltHTMLgt ltHEADgt ltTITLEgt Moja prva strana
  lt/TITLEgt lt/HEADgt
• ltBODYgt
• Sadržaj moje strane. lt/BODYgtlt/HTMLgt

15
NASLOVI

• Naslovi (engl. headers) se kodiraju prema
  relativnoj dubini ciframa od 1 do 6.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtNaslovilt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gt Naslov H1 lt/H1gt
• ltH2gt Naslov H2 lt/H2gt
• ltH3gt Naslov H3 lt/H3gt
• ltH4gt Naslov H4 lt/H4gt
• ltH5gt Naslov H5 lt/H5gt
• ltH6gt Naslov H6 lt/H6gt
• lt/BODYgt
• lt/HTMLgt

16
NASLOVI
17
Obeležavanje logicke strukture teksta

• Pasus (engl. paragraph) se obeležava zagradama
  ltPgt ... lt/Pgt. Ukoliko u ravnom tekstu sledi pasus
  za pasusom, etiketa lt/Pgt se može izostaviti.
  Pozicioniranje odeljka se vrši kroz style
  atribut, preko svojstva align koje može imati
  vrednosti left, right, center, justify, inherit
• ltp styletext-align rightgt
• Odeljak (engl. division) se opisuje zagradama
  ltDIVgt ... lt/DIVgt. I odeljci se mogu pozicionirati
  na isti nacin kao pasusi.
• Novi red (engl. break) se obeležava etiketom
  ltBRgt. Ovo je prosto obeležje ne postoji etiketa
  lt/BRgt.
• Podvlaka (engl. rule) se obeležava etiketom ltHRgt.

18

• ltHTMLgt
• ltHEADgtltTITLEgtOsnovne etiketelt/TITLEgtlt/HEADgt
• ltBODYgt
• ltH2 STYLETEXT-ALIGNRIGHTgt Naslov poravnat
  udesno lt/H2gt
• ltP STYLETEXT-ALIGNCENTERgt Paragraf poravnat
  centralnolt/Pgt
• ltHRgt
• ltP STYLETEXT-ALIGNLEFTgt Paragraf poravnat
  ulevolt/Pgt
• ltHRgt
• ltP STYLETEXT-ALIGNRIGHTgt Paragraf poravnat
  udesnolt/Pgt
• ltHRgt
• ltP STYLETEXT-ALIGNCENTERgtParagraf poravnat
  centralnoltBRgt
• koji se sastoji iz vise redova. ltBRgt
• U naredni red prelazi se tagom br ltBRgt ...
• ltP STYLETEXT-ALIGNCENTERgtOvaj red je
  struktuiran tagom p, a naredni tagom div
• ltDIV STYLETEXT-ALIGNLEFTgtodeljak div
  poravnat ulevolt/DIVgt
• ltDIV STYLETEXT-ALIGNCENTERgtodeljak div
  poravnat centralnolt/DIVgt
• ltDIV STYLETEXT-ALIGNRIGHTgtodeljak div
  poravnat udesno.lt/DIVgt
• lt/Pgt
• lt/BODYgt

19
Promena boje pozadine

• ltHTMLgt ltHEADgt ltTITLEgt Moja prva strana
  lt/TITLEgt lt/HEADgt ltBODY STYLEbackground-color
  FFFFFF"gt
• Sadržaj moje strane. lt/BODYgtlt/HTMLgt

20
Promena boje pozadine

• Osnovni nacini zadavanja boje
• RRGGBB heksadekadni triplet
• RR kolicina crvene (00-FF)
• GG kolicina zelene (00-FF)
• BB kolicina plave (00-FF)
• rgb(R,G,B) dekadni triplet
• R kolicina crvene (0-255 ili 0-100)
• G kolicina zelene (0-255 ili 0-100)
• B kolicina plave (0-255 ili 0-100)
• 3. naziv boje postoje nazivi za 147 boja
  (azure,deeppink,lavender,orange,plum,...)
  kompletnu listu naziva pogledajte ovde

21
(No Transcript)
22
Slika kao pozadina

• ltHTMLgt ltHEADgt ltTITLEgt Moja prva strana
  lt/TITLEgt lt/HEADgt
• ltBODY STYLEbackground-imageurl(slika.gif)"
  gt
• Sadržaj moje strane. lt/BODYgtlt/HTMLgt

23

• Podrazumevano, slika koju postavimo kao pozadinu
  html stranice se ponavlja horizontalno i
  vertikalno
• Ako želimo samo horizontalno ponavljanje
• ltBODY STYLEbackground-imageurl(slika.gif)
  background-repeatrepeat-x "gt
• Ako ne želimo ponavljanje
• ltBODY STYLEbackground-imageurl(slika.gif)
  background-repeatno-repeat "gt

24
Fizicki stil karaktera

• Karakteri mogu dobiti i atribute "vida pisma
  ili, popularnije, biti prikazani u razlicitim
  fontovima
• Crni slog (engl. boldface) se navodi medu
  zagradama ltBgt i lt/Bgt . Na primer crni slog.
• Kurziv (engl. italics) se navodi medu zagradama
  ltIgt i lt/Igt kurziv .
• Podvucena slova (engl. underline) se dobijaju
  ogradivanjem teksta zagradama ltUgt i lt/Ugt
  podcrtano .

25
Fizicki stil karaktera

• ltHTMLgt ltHEADgt ltTITLEgt Razni oblici slova
  (fizicki stilovi)lt/TITLEgt lt/HEADgt
• ltBODYgt
• ltBgt boldovano lt/Bgt ltBRgt
• ltIgt iskoseno lt/Igt ltBRgt
• ltUgt podvuceno lt/UgtltBRgt
• lt/BODYgtlt/HTMLgt

26
Logicki stilovi karaktera

• Isticanje dela teksta, na primer, tekst na drugom
  jeziku, se može obeležiti etiketom ltEMgt ... lt/EMgt
  (engl. emphasis). Na primer
• ltEMgt To be or not to be, ... lt/EMgt daje To be
  or not to be, ...
• Važni deo teksta se obeležava njegovim navodenjem
  izmedu zagrada ltSTRONGgt ... lt/STRONGgt (engl.
  strong emphasis). Ova etiketa se interpretira
  crnim slogom (bold). Na primer Razlikovati VAŽNO
  od nevažnog.

27
Logicki stilovi karaktera

• Naziv dela unutar pasusa se navodi u zagradama
  ltCITEgt ... lt/CITEgt. Ova etiketa se obicno
  interpretira kurzivom. Na primer ltCITEgt
  Programski jezik C lt/CITEgt daje Programski jezik
  C
• Citirani pasus se navodi u zagradama ltBLOCKQUOTEgt
  ... lt/BLOCKQUOTEgt. Ove etikete se interpretiraju
  uvlacenjem pasusa u odnosu na levu marginu
  teksta.
• Delovi programskog koda (npr. HTML-direktive),
  tastature i primeri se redom mogu obeležiti
  donjim etiketama, koje se obicno interpretiraju
  teleprinterskim slogom
• ltCODEgt segment koda lt/CODEgtltKBDgt dirka
  tastature lt/KBDgtltSAMPgt uzorak izlaza lt/SAMPgt

28
Logicki stilovi karaktera

• Definicije se mogu navesti izmedu zagrada ltDFNgt
  ... lt/DFNgt. Promenljive se mogu obeležiti
  zagradama ltVARgt ... lt/VARgt. Tekst izmedu ovih
  etiketa se obicno iterpretira kurzivnim slogom.

29
Logicki stilovi karaktera

• ltHTMLgt ltHEADgt ltTITLEgt Logicki stilovi
  karaktera lt/TITLEgt lt/HEADgt
• ltBODYgt
• ltEMgt naglaseno lt/EMgtltBRgt
• ltSTRONGgt vazno lt/STRONGgtltBRgt ltCITEgt naslov dela
  lt/CITEgtltBRgt
• ltCODEgt deo programskog koda lt/CODEgtltBRgt ltDFNgt
  definicija lt/DFNgtltBRgt
• lt/BODYgt lt/HTMLgt

30
Logicki stilovi karaktera
31
UGNEždeni tagovi

• Tagovi se cesto mogu koristiti u raznim
  kombinacijama.
• Na primer,
• ltIgtltBgtkombinovanolt/Bgtlt/Igt
• proizvodi efekat
• kombinovano
• Treba obratiti pažnju da se tagovi pravilno
  ugnezde, to jest da se ne preklapaju.

32
UGNEždeni tagovi

• ltPRVIgtltDRUGIgtlt/PRVIgtlt/DRUGIgt   
•  Preklopljeni tagovi. Loše!
•  ltPRVIgtltDRUGIgtlt/DRUGIgtlt/PRVIgt
• Ugneždeni tagovi. Dobro!

33
Liste

• Razlikuju se tri vrste lista
• Opisne
• Numerisane i
• Neuredene.

34
Opisne liste

• Opisne liste opisuju logicku strukturu koja
  odgovara listi pojmova koji se definišu. Otuda se
  opisne liste nazivaju i definicione liste. Ovakva
  lista se opisuje sledecim etiketama
• ltDLgt  
• ltDTgt odrednica 1 ltDDgt opis odrednice1  
• ltDTgt odrednica 2 ltDDgt opis odrednice 2 . . .
  lt/DLgt

35
Opisne liste

• ltHTMLgt
• ltHEADgt
• ltTITLEgtOpisne listelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltDLgt
• ltDTgtpiko- ltDDgt prefiks nekoj jedinici koji
  pokazuje milioniti deo milionitog dela te
  jedinice
• ltDTgtnano- ltDDgt prefiks nekoj jedinici koji
  pokazuje milijarditi deo te jedinice
• lt/DLgt
• lt/BODYgt
• lt/HTMLgt

36
OPISNE LISTE
37
Numerisane liste

• Koriste se za predstavljanje listi (spiskova)
  ciji clanovi su numerisani (ordered).
• Lista pocinje obeležjem ltOLgt, a završava se
  obeležjem lt/OLgt. Svaki clan liste pocinje
  obeležjem ltLIgt koje ne mora da ima zatvarajuci
  komplement oblika lt/LIgt.
• ltOLgt  
• ltLIgt Element 1 liste  
• ltLIgt Element 2 liste . . . . .
• lt/OLgt

38

• Razlicite vrste numeracija
• ltOL stylelist-style-typeupper-roman gt
• ltOL stylelist-style-typelower-alpha gt
• ltOL stylelist-style-typelower-greek gt
• Više o numeracijama pogledajte ovde
• Atribut START za zadavanje pocetne vrednosti
  numeracije
• ltOL START3gt
• ltOL stylelist-style-typelower-greek
  START3gt

39

• Atribut VALUE za stavke numerisane liste za
  pridruživanje odredene vrednosti datoj stavki
• ltolgt
• ltligt ponedeljak
• ltli value4gt cetvrtak
• ltligt petak
• lt/olgt
• Lista ce izgledati ovako
• 1. ponedeljak
• 4. cetvrtak
• 5. petak

40
Numerisane liste

• ltHTMLgt
• ltHEADgt
• ltTITLEgtNumerisane listelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltOLgt Predmeti na 1. godini Matematike
  ltLIgt Analiza 1
• ltLIgt Linearna algebra
• ltLIgt Osnovi programiranja ltLIgt
  Analiticka geometrija
• lt/OLgt
• lt/BODYgt
• lt/HTMLgt

41
Numerisane liste
42
Nenumerisane liste

• Koriste se za predstavljanje nenumerisane
  (unorderd) liste clanova odvojenih praznim redom
  i oznacenih specijalnim vodecim znakom (bullet
  kružic, disk, kvadrat).
• Zapis nenumerisane liste je je sledeci
• ltULgt  
• ltLIgt Element 1 liste  
• ltLIgt Element 2 liste . . .
• lt/ULgt

43

• Definisanje simbola disc (podrazumevano),
  circle, square
• ltul stylelist-style-type circlegt
• ltligt ponedeljak
• ltligt utorak
• ltligt sreda
• lt/ulgt

44

• Primer sa mešanim simbolima
• ltul style"list-style-typecircle"gt
• ltligt ponedeljak
• ltli style"list-style-typesquare"gt utorak
• ltligt sreda
• ltli style"list-style-typedisc"gt cetvrtak
  lt/ligt
• lt/ulgt

45

• Slika kao simbol
• ltul style"list-style-imageurl(slika.png')"gt
• ltligt ponedeljak
• ltligt utorak
• ltligt sreda
• lt/ulgt

46
Nenumerisane liste

• ltHTMLgt
• ltHEADgt
• ltTITLEgtNenumerisane listelt/TITLEgt lt/HEADgt
• ltBODYgt
• ltULgt Tokom zime ima
• ltLIgt jabuka
• ltLIgt limuna
• ltLIgt grejpa i
• ltLIgt banana.
• lt/ULgt
• lt/BODYgt
• lt/HTMLgt

47
Nenumerisane liste
48

• Liste mogu biti i ugnježdene
• ltul style"list-style-typecircle"gt
• ltligt Predmeti jesenjeg semestra
• ltol style"list-style-typelower-roman"gt
• ltligt programiranje 1
• ltligt uvod u organizaciju racunara lt/olgt
• ltligt Predmeti prolecnog semestra
• ltol style"list-style-typelower-greek"gt
• ltligt programiranje 2
• ltligt uvod u web i internet tehnologije
• lt/olgt
• lt/ulgt