Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika. Alati koji će se koristiti: (X)HTML i CSS JavaScript PHP i MySQL
Raspored predmeta
Prve dve nedelje predavanja – XHTML i CSS Druge dve nedelje vežbe na računarima 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
Polaganje predmeta
Iz pojedinih modula, XHTML, JavaScript i PHP, se dobija 15, 30 i 15 poena. Na samim vežbama se dobija 6, 12 i 6 poena.
Lab vežbe se mogu odrađivati samo uz lekarsko opravdanje. Ostalih 40 poena dobija se na ispitu koji se polaže uz dozvoljenu literaturu.
HTML, XHTML & CSS
Š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 određenom direktorijumu servera vezanog na Internet, što ih čini dostupnim na vebu. Pomoću HTML jezika se generišu dokumenti tipa hipertekst.
Hipertekst
... je tekst koji sadrži veze ili linkove ka drugim dokumentima ili na samog sebe.
Hipertekst je skup stranica, međusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se može kliknuti. Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način.
Jezici za opis hiperteksta
Najznačajniji 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)
Standardizacija
U prvo vreme HTML se razvijao na adhok način i bio je interpretiran od strane raznih brauzera na različite načine.
Standardizacijom se bavi W3C (WWW Consortium), www.w3c.org
koga vodi Tim Berners-Lee Standardizacija je počela sa HTML 3.2
HTML je modifikovan tako da odgovara sintaksi XML-a -> XHTML.
Prema standardu XHTML se koristi zajedno sa CSS čime se formatiranje maksimalno izdvaja iz teksta.
Odnos brauzera i standarda se može naći na www.webstandards.org
.
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.
HTML vs. XHTML
XHTML je osetljiv na veličinu slova. Elementi, atributi i njihove vrednosti su pisane malim 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 ...
HTML vs. XHTML
XHTML 1.1 se razvio od striktne verzije XHTML 1.0, ali nije zaživeo.
Slična 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 posvećena kompatibilnosti sa aplikacijama. HTML5 je usvojen oktobra 2014. godine, i već ima široku primenu na Internetu
CSS
CSS 1 je usvojen davne 1996-te godine.
Danas je aktuelan CSS 2.1 koji je usvojen 2011.
Pojedini moduli standarda CSS 3 su usvojeni, i oni uvode dodatne mogućnosti u odnosu na važeći CSS 2.1 standard. Takođe se radi na CSS 4 modulima.
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
Za generisanje (X)HTML stranice potreban je najobičniji tekst editor, na primer Notepad, Notepad++. Nalazi se u Start meniju pod Programs -> Accessories. U MS Word-u, koristiti Save As Plain Text, a potom se bira UTF-8 kodovanje.
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 Netscape Navigator, Internet Explorer...
Važan štos
Lako se može videti (X)HTML fajl bilo koje veb strane, i CSS kod, pomoću brauzera.
Mozilla Firefox: Developer -> Page Source (ili Style Editor) Internet Explorer: View -> Source, ili Tools -> Developer Tools Google Chrome: Tools -> View Source (ili Developer Tools)
XHTML DOCTYPE komanda
DOCTYPE komanda određuje verziju jezika i njegovu varijantu i prva je.
Varijante su:
Strict Transitional Frameset
Primer: Pre DOCTYPE komande često ide i XML komanda:
HTML5 DOCTYPE komanda
DOCTYPE komanda je kod HTML5 jezika uprošćena
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 način da prikaže sadržaj vaše stranice.
Tagovi
Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr: .
Ovaj tag se nalazi na početku svakog HTML dokumenta i govori brauzeru da je fajl koji je upravo počeo da učitava HTML dokument i da kao takvog treba i da ga prikaže.
Većina tagova ima i početni i završni tag. Završni tag se dobija dodavanjem znaka "/" i označava mesto na kom prestaje dejstvo početnog taga, npr: .
Ovaj tag govori browseru da je to kraj (X)HTML dokumenta.
Tagovi
Prosti tagovi za opisivanje jednostavnih elemenata logičke strukture. Oblika su: . U XHTML-u je obavezno da se završe kosom crtom: . Moguće je koristiti atribute u okviru taga kojima se dodeljuju određene vrednosti: y </x>.
Složeni tagovi su zagrade oblika y kojima je opisan izgled dela teksta y. U XHTML-u elementi (x), atributi (a1,a2), i njihove predefinisane vrednosti (v1,v2) su malim slovima. Vrednosti atributa su uvek pod navodnicima.
Struktura (X)HTML stranice
Minimalna struktura (X)HTML-dokumenta obuhvata tagove: , - zagrade (X)HTML teksta; , - zagrade zaglavlja, sadrži meta-definicije (X)HTML dokumenta; </b>, <b>- zagrade za naziv (X)HTML dokumenta i , - zagrade teksta (X)HTML dokumenta.
Jezik veb strane
U html tagu može da se specificira Namespace i jezik:
Zaglavlje (X)HTML dokumenta
Sve ono što se napiše u zaglavlju dokumenta neće se prikazati u prozoru brauzera već obično služi samo da pruži neke informacije o stranici.
U zaglavlju se specificira azbuka a takođe i naslov veb strane koji gledaju pretraživači:
Telo (X)HTML dokumenta
Sve ono što je napisano između tagova i predstavlja telo dokumenta Telo dokumenta pojaviće se kao sadržaj prezentacije u prozoru brauzera.
Izgled stranice
DOCTYPE…
Ovde je naziv prezentacije Ovde se unosi sve ono sto želite da se vidi u prezentaciji
Komentar
Dodatna opcija omogućava da se obeleži komentar u (X)HTML obeleženom tekstu koji se neće videti u vizuelizaciji dokumenta. Na primer:
Jedinice veličina
Jedinice za veličinu slova, ili elemenata su: %, in, cm, mm, em (odnos prema osnovnom fontu), pt (=1/72in), pc (=12pt), px (tačka na ekranu) % se računa u odnosu na osnovni font, ako se radi o znakovima, i u odnosu na veličinu roditeljskog elementa ako se radi o elementima. Pri tome veličina roditeljskog elementa mora biti definisana, osim za html element.
Jedinice veličina
Da bi body imao veličinu 100%, odnosno istu kao html element, veličina html elementa mora biti definisana, apsolutno, ili kao 100%. Jedinice vh i vw označavaju 1/100 visine i širine ekrana, respektivno (CSS3).
Naslovi
Naslovi (engl. headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za naslov ima opšti oblik: n> naslovNivoa_n n> gde n uzima vrednosti od 1 do 6.
Naslovi
Naslov H1
Naslov H2
Naslov H3
Navedeni kod se na (X)HTML stranici prikazuje na sledeći način:
Naslov H1 Naslov H2 Naslov H3
Tagovi za formatiranje
Bold Strong
Italic
Underline Strike H 2 O 2 3 =8 BoldStrongItalicUnderline (potisnut) Strike (potisnut) H2O 23=8
Paragraf
Tag paragrafa je
. Paragraf počinje u novom redu.
levo centrirano desno HTML kod koji prikazuje gornji primer je:
levo
centrirano
desno
Inače atribut align je kod XHTML-a potisnut
Parcijalizacija teksta
Tekst se može podeliti na blokove pomoću taga
.
Blok počinje u novom redu, kao i tekst posle bloka.
Korisni atributi ovog taga (kao i drugih) su class i id, i označavaju klasu određenog bloka, i partikularni blok da bi se na njega mogao aplicirati određeni stil.
Paragraf 1
Paragraf 2
Izdvajanje teksta
Izdvajanje teksta koji ne počinje u novom redu, se vrši pomoću taga . Tab span ima iste atribute kao tag div, tj. class i id.
Tekst na srpskom text in English nastavak teksta na srpskom.
XHTML Razmak:
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 uvući pomoću sledećeg koda:
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.
HTML4 Razmak:
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 uvući pomoću sledećeg koda:
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.
Automatski prelom linije
Rad sa prelomom linije
Come 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...
Prelom linije u (X)HTML-u
Rad sa prelomom linije
Come 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...
Nema preloma linije u HTML4 (potisnut)
Rad sa prelomom linije
Come 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...
Atribut title
Atribut title se može dodeliti bilo kom delu veb strane, i njegova vrednost se pojavljuje iznad kursora kada korisnik pređe preko tog dela strane mišem.
Nije potisnut u XHTML-u.
Primer:
Uvod Razrada Zaključak
Ubacivanje slika
U okviru (X)HTML stranice slika se prikazuje pomoću taga. Ovaj tag mora imati bar jedan atribut src atribut koji definiše naziv, i eventualno lokaciju, grafičkog fajla.
Da bi se promenila originalna veličina slike, željena veličina se može definisati pomoću dva atributa: height i width.
Pozicioniranje slike u HTML4
Pozicioniranje se vršilo u HTML-u pomoću atributa align, koji je potisnut u XHTML-u. Vrednosti atributa align mogu biti: left - postavlja sliku uz levu marginu:
Pozicioniranje slike u HTML4
Vrednosti atributa align mogu biti: middle - postavlja sliku tako je na donjoj ivici slova na sredini teksta: absmiddle - postavlja sliku tako da se sredina slike i sredina teksta poklapaju:
Izgled slike u HTML4
Prazan prostor između slike i okolnog teksta, ili nekih drugih elemenata stranice, može se definisati pomoću dva atributa: hspace i vspace. Vrednost ova dva atributa se zadaje u pikselima. Ovo su potisnuti atributi.
U okviru stranice može se definisati i debljina granice pomoću atributa border čija se vrednost zadaje u pikselima. Ovo je potisnut atribut.
alt atribut će u slučaju da čitač korisnika stranice iz bilo kog razloga ne učita sliku, na onom mestu gde bi trebalo da bude slika prikazati tekst koji predstavlja vrednost ovog atributa. Nije potisnut u XHTML-u.
Linkovi
Veze između različitih stranica se nazivaju linkovi ili hiperveze. One omogućavaju 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.
Linkovi
Za sve linkove definicija početne pozicije se dobija korišćenjem taga . Ovo je složeni tag. Sintaksa ovog taga podrazumeva da se u okviru polazne pozicije opišu: fizička pozicija polazne pozicije i fizička lokacija krajnje pozicije. Polazna pozicija označava na stranici mesto sa koga se prelazi na neki drugi deo te ili druge stranice i definiše se pomoću atributa href: imeKrajnjePozicije”> polaznaPozicija
Link na stranicu u okviru istog servera
Najjednostavniji slučaj rada sa linkovima je prelazak na stranicu u okviru istog servera.
Kod ove vrste linkova koristi se tag sa atributom href i nazivom stranice do koje se želi da se napravi veza.
Stranica sa krajnjom pozicijom osim što pripada istoj aplikaciji, odnosno serveru, u opštem slučaju ne mora da se i fizički nalazi u istom direktorijumu gde i stranica sa polaznom pozicijom.
Postoje dva rešenja ovog problema, sa apsolutnim i relativnim putanjama.
Korišćenje apsolutnih putanja podrazumeva u okviru href atributa navođenje pune putanje do stranice sa krajnjom pozicijom, na primer href=”c:\Aplikacije\Poslovanje\Klijent\Prva.html” Korišćenje relativnih putanja je mnogo podesnije, jer se zasniva na kretanju u odnosu na direktorijum stranice sa polaznom pozicijom.
Link na stranicu u okviru istog servera
Neka direktorijum X sadrži stranice 1.html i 2.html, Y stranicu 3.html, a Z stranicu 4.html Za stranicu 1.html, relativna adresa stranice 2.html je “2.html”; relativna adresa stranice 3.html je “Y/3.html”; relativna adresa stranice 4.html je “Y/Z/4.html”; Za stranicu 3.html, relativna adresa stranice 2.html je “../2.html” (simbol .. označava direktorijum iznad direktorijuma gde se nalazi stranica sa polaznom pozicijom); relativna adresa stranice 4.html je “Z/4.html”; Za stranicu 4.html, relativna adresa stranice 2.html je “../../2.html”; relativna adresa stranice 3.html je “../3.html”.
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/
Ako se želi da se uspostavi veza sa nekom dugom stranicom, ali ne sa početkom te stranice, već nekim drugim delom, potrebno je koristiti i prvu i drugu vrstu linkova. Opet se definiše mesto odakle se želi nastaviti sa pregledom pomoću atributa href u tagu sa navođenjem imena stranice, ali se dodaje deo #imeKrajnjePozicije, da bi se pozicioniralo na krajnju poziciju.
Slika u (X)HTML dokumentu može predstavljati i polazni čvor u hipervezi. Krajnja adresa se tada navodi kao kod običnog linka, a umesto teksta koji se može aktivirati navodi se tag img.
Linkovi se mogu iskoristiti i za pisanje nove mail poruke pomoću default programa za elektronsku poštu Pošaljite e mail poruku! Pored adrese na koju se želi poslati poruka mogu se podesiti još neki parametri, kao što su naslov ili tekst poruke.
XHTML tekst ima hijerarhijsku strukturu. Pomoću imena elemenata, klasa elemenata ili ID-ova elemenata se mogu definisati grupe elemenata ili pojedinačni elementi.
Pomoću klasa se mogu definisati grupe elemenata.
Grupama elemenata se može pridružiti određeni stil.
Neke osobine stilova se nasleđuju sa elementa roditelja na element dete.
Pridruživanje stila
Opšta sintaksa: imeGrupe {a1:v1;a2:v2;…} imeGrupe je CSS selektor koji određuje grupu ili pojedinačni element, koji se gradi na različite načine:
imeElementa imeElementaDeteta
imeElementa#IDElementaimeElementa.klasaElementaimeElemenata[imeAtributa=“vrednostAtributa”] Ovi načini se mogu na različite načine kombinovati.
Kao i ranije a1,a2,... su atributi ili osobine, a v1,v2,... Njihove vrednosti.
Pridruživanje stila: Primeri
Primeri: h2 {color:red;} p.citati {color:red; font-size:small;} div.engleski p.citati {color:blue;} .citati {color:red;} Primer stila svih potomaka: div#gaudi p {color:red;} Primer stila dece: div#gaudi > p {color:red;}
Pseudoklase (pseudo-classes)
Pseudo klasa zavisi od korisničkih aktivnosti: imeGrupe: pseudoKlasa {a1:b1; a2:b2;…} Stanje linka koje zavisi od aktivnosti korisnika se može opisati pomoću pseudo-klase: a:link{color:red;} a:visited{color:yellow;} a:hover{color:green;} – prešli mišem a:active{color:blue;} – link u momentu kad je kliknut
Pseudoelementi (pseudo-elements)
Pseudo element opisuje delove elementa: imeGrupe: pseudoElement {a1:b1; a2:b2;…} Primeri pseudo-elemenata: h1::before { content:url(smiley.gif);} p::first-letter{ color:#ff0000; font-size:xx-large;}
Apliciranje stilova
Stilovi mogu biti definisani u eksternim fajlovima koji se pozivaju u okviru zaglavlja pomoću taga , ili interno u okviru zaglavlja pomoću taga
Apliciranje stilova: primeri
Primer internog apliciranja stila:
Primer stranice sa internim stilom
Apliciranje stilova: primeri
Primer internog apliciranja stila u mešanoj HTML&XHTML varijanti:
Prioriteti stilova
Prioriteti stilova, od najvišeg ka najnižem: stavka korisničkog stila koja se završava sa !important
stavka autorovog stila koja se završava sa !important stavka autorovog stila stavka korisničkog stila stavka defolt stila
Određivanje stila kada dve stavke imaju isti prioritet
Bira se stavka prema nivou specifičnosti koji je predstavljen kao abcd. Bira se stil sa većim nivoom.
a=1 ako stavka potiče iz atributa style u okviru taga, inače 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 specifičnosti bira se ona koja se kasnije pojavljuje.
Izuzetaka ima kod brauzera, pri prikazivanju: hiperveza kada su setovane korisničke preference, lista itd.
Sintaksa za formatiranje teksta se razlikuje u HTML4 i XHTML jezicima.
Brauzeri podržavaju oba formata, ali je preporučivo da se pređe na XHTML jer je on standard.
Tag iz HTML4 je potisnut
Fontovi u HTML4
Primeri: Ovde dodje vaš tekst. Ovde dodje vaš tekst.
Fontovi u HTML4
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 čemu su veličina 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 …
Mogu se koristiti novi fontovi pomoću komande @font-face čija će specifikacija, uključujući i njenu lokaciju, biti uključena u definiciju fonta.
Primer (radi na Mozili):
Boje u (X)HTML-u
Svi elementi stranice rad sa bojama organizuju identično Preko predefinisanog engleskog naziva boje (npr. "yellow" za žutu boju) Ili preko heksadecimalne RGB vrednosti ispred koje obavezno treba staviti simbol # (npr. #ffff00)
Boja elementa u HTML4
Boja pozadine se određuje atributom bgcolor u okviru taga, ili tagova za tabele. U slučaju da se prilikom navođenja taga body izostave opisani atributi, čitač im dodeljuje predefinisane vrednosti. Primeri:
Boja teksta u HTML4
Pored pozadine, može se menjati i boja teksta, pomoću atributa text. Primeri:
ili ili ili
Slika pozadine u HTML4
Kao i promena boje, pozadina u obliku slike se definiše pomoću odgovarajućeg atributa u body tagu. Atribut je u ovom slučaju background.
Na primer, ako se želi da se kao pozadina stavi slika "pozadina1.jpg" tada će odgovarajući tag izgledati:
Pri definisanju pozadine u obliku slike, dobra praksa je da se definiše i bgcolor atribut.
Boja i slika pozadine u XHTML-u
pomoću osobine background u okviru body deo teksta.
background-image je ime slike uključujući i URL repeat, repeat-x, repeat-y, no-repeat; vrednost početne pozicije slike. Podosobine se mogu izostaviti i njihove gornjem redosledu, a podosobine čijih vrednosti
Druge osobine teksta u XHTML-u
Drugi osobine teksta su color za njegovu boju; word-spacing za razmak između reči; letter-spacing za razmak između slova; text-ident za uvlačenje teksta; Osobina white-space određuje 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.
Druge osobine teksta u XHTML-u
Transformisanje teksta se vrši pomoću 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.
Poravnjavanje inline objekata
Poravnjavanje slike ili drugog inline objekta se može vršiti pomoću osobine text-align, kao u primeru: …
Organizacija veb strane
Organizacija i izgled veb strane se na različite načine postižu u HTML-u i XHTML-u.
XHTML pruža mogućnosti za fleksibilan raspored delova stranice na ekranu, dok se u HTML za tu svrhu najčešće koriste tabele.
I druge komande se razlikuju. Brauzeri obično imaju podršku i za stari HTML, ali jeste preporučivo da se XHTML koristi što je više moguće.
Pozicioniranje XHTML elemenata
Pozicioniranje elemenata se može vršiti na više načina, ili kombinacijom ovih načina: Pomoću osobine elemenata display Pomoću osobine koja definiše lebdenje elementa float, i njegovu zabranu clear Pomoću osobine position
Pozicioniranje pomoću display osobine
Celine se prikazuju pomoću osobine display koji može biti block, inline, inline block, list-item...
Inline element se nastavlja u istom redu kao i prethodni Block počinje u narednom redu, gura naredni element u naredni red, i ima definisane dimenzije Inline-block se nastavlja u istom redu i ima dimenzije
Pozicioniranje pomoću 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.html#a_dtdblock
Elementi se omogućavaju da lebde, tj. prolaze kroz tekst i druge elemente pomoću osobine float koji ima vrednosti left i right, u zavisnosti od strane na kojoj element lebdi.
#kalendar {background:#339; color: white; width: 150px; float: right;} Pomoću osobine clear koji ima vrednosti left, right, both, i none, može se zabraniti prolaz kroz dati element sa njegove odgovarajuće strane. #tekst {color: white; width: 150px; clear: left;}
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šću atributa float se naslanjaju jedan na drugi prema redosledu pojavljivanja na odgovarajućoj strani.
Da bi se povratio normalan tok dokumenta posle elemenata koji lebde potrebno je uvesti element, makar i fiktivni, koji će da zabrani prolaz prethodnih elemenata kroz njega koristeći osobinu clear, npr: .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
Poziciju određuju zatim osobine top, bottom, left, right koji određuju rastojanje početka bloka od odgovarajuće 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.
If you've ever marveled at the amazing community effort of the Amish href="http://www.discovery.com/area/exploration/amish/barnraising/da y1.html" target="_blank">barn raising parties, where young and purpose, Catalonia's Castle Makers (Castellers) will also
Primer pozicioniranja u XHTML fajlu
Cummerbunds and Bare Feet
Brightly colored clothes (unique to each club or colla), bare feet, and wide cummerbunds distinguish climbers from the public that surrounds them on castle-building day.
Fent Pinya (Making the Foundation)
As a tower begins to form, supporters surround the foundation, placing hands one on top of the next to make a solid base (the pinya or pineapple, so called because the rows of hands spiraling out from the center resemble that fruit).
Castles in the Air
Watching this diverse group of people join together fills me with envy and anxiety.
Primer pozicioniranja u XHTML fajlu
Calendar
July 1 - Roses June 30 - Girona June 26 - Tarragona
Vertikalno pozicioniranje se vrši pomoću 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.
XTML pozicioniranje u 3D
Koji će element biti iznad koga određuje osobina z-index, koji uzima vrednosti celih brojeva. Element sa većim indeksom z-index će biti iznad elementa sa manjim indeksom.
Veličina XHTML elemenata
Se određuje pomoću osobine width, height, padding, border, i margin. Padding je rastojanje između sadržaja i granice, border je granica, a margin rastojanje između 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 računa 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.
Veličina XHTML elemenata
padding-top padding-left Primer dimenzija XHTML elemenata i odnosa sa susednim elementima margin-right margin-bottom border-bottom-width
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 #element{position:relative; margin:0 auto;}
Centriranje pomoću atributa
display
U roditeljskom elementu elementa koji centriramo koristimo text-align: center; Element koji centriramo treba da bude inline, odnosno najčešće display: inline-block;
Gde XHTML elementi pretiču
Osobina overflow određuje šta se dešava kada je tekst, i drugi materijal, veći 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.
html i body elementi
html element ima veličinu ekrana, a body element ima veličinu dokumenta Ukoliko je tekst manji od ekrana, boja body elementa će biti samo oko teksta, a boja html elementa po celom ekranu.
Primeri centriranja dokumenta pomoću body taga
Centriranje dokumenta fiksne širine body { width: 800px; margin: 0 auto;} Centriranje dokumenta fleksibilne širine body { width: 80%; margin: 0 auto;}
Pojam listi
Liste u jeziku (X)HTML se koriste za navođenje, popisivanje određenih delova teksta.
Numerisane liste koriste tag (engl. ordered list), a nenumerisane liste
tag (engl. unordered list). Pojedine stavke liste se definišu pomoću
taga.
Nenumerisane liste
To su liste sa kojima se nabrajaju stavke, bez navođenja rednog broja.
Na primer: Fruits: • • • apples bananas grapefruit
Nenumerisane liste
Opšta struktura je (ul - unordered list):
element1Liste
element2Liste
. . . . .
Nenumerisane liste u HTML4
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
Nenumerisane liste, HTML4
• • • • Za primer sa kružnim dugmićima: proleće leto jesen zima odgovarajući HTML4 kod je:
proleće
leto
jesen
zima
Numerisane liste
To su liste sa rednim brojevima stavki. Primer: Godišnja doba su: 1. proleće 2. leto 3. jesen 4. zima
Numerisane liste
Opšta struktura je (ol - ordered list):
element1Liste
element2Liste
. . . . .
Numerisane liste u HTML-u
Atribut type: A - velika slova a - mala slova I - rimski brojevi i - mali rimski brojevi
Numerisane liste
I. proleće II. leto III. jesen IV. zima Odgovarajući HTML kod:
proleće
leto
jesen
zima
Definicione liste
Ovaj oblik liste se dobija sa
tagom. Svaka stavka ovakve liste se sastoji iz dva dela: termina koji se definiše, i njegove definicije. Termini zapocinju
tagom, a njihove definicije
tagom. Termini se poravnavaju uz levu marginu a njihove definicije se pojavljuju u novom redu i pomerene su za određen broj mesta.
Definicione liste
Opšta stuktura je:
odrednica1
opisOdrednice1
odrednica2
opisOdrednice2
. . . . .
Definicione liste
Primer za ovu vrstu listi je: Proleće: 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.
Definicione liste
(X)HTML kod za prethodni primer je:
Proleće:
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.
Definicione liste
Još jedan primer, (X)HTML kod:
-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
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.
Lista unutar liste
Opštine u Vojvodini koje su podnele prijave:
Severnobački okrug
Bačka Topola
Subotica
Južnobanatski okrug
Alibunar
Bela Crkva
Opštine u užoj Srbiji koje su podnele prijave:
Šumadijski okrug
Aranđelovac
Borski okrug
Bor
Lista unutar liste
Rezultat prethodnog primera: • Opštine u Vojvodini koje su podnele prijave: o Severnobački okrug 1. Bačka Topola 2. Subotica o Južnobanatski okrug 1. Alibunar 2. Bela Crkva • Opštine u užoj Srbiji koje su podnele prijave: o Šumadijski okrug 1. Aranđelovac o Borski okrug 1. Bor
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 određene klase: li {list-style-type: upper-roman} ol.new {list-style-image: url( http://www.cookwood.com/html5ed/example s/lists/rightarrow.gif) } ol li {list-style-type: circle; font-size: 75%}
Primer liste sa stilom
Prijave po opštinama
Formulari za popis osnovnih škola je poslat svim opštinama. Opštine koje su odgovorile:
Primer liste sa stilom
Opštine u Vojvodini koje su podnele prijave:
Severnobački okrug
Bačka Topola
Subotica
Južnobanatski okrug
Bačka Topola
Subotica
Opštine u užoj Srbiji koje su podnele prijave:
Šumadijski okrug
Aranđelovac
Borski okrug
Bor
Primer liste sa stilom
Okruzi koji nisu odgovorili:
Severnobački okrug
Bačka Topola
Subotica
Stil liste
body {font-size: 14px; color: blue;} ul {list-style-type: disc; font-size: 90%; font-style: italic;} ul ul {font-style: normal; color:red;}
Rezultat stila liste
Formulari za popis osnovnih škola je poslat svim opštinama. Opštine koje su podnele prijave: • •
Opštine u Vojvodini koje su podnele prijave:
• Severnobački okrug 1. Bačka Topola 2. Subotica •
Opštine u užoj Srbiji koje su podnele prijave:
• Šumadijski okrug 1. Aranđelovac • Južnobanatski okrug 1. Alibunar 2. Bela Crkva Borski okrug 1. Bor Opštine koje nisu odgovorile: • •
Bačka Topola Lapovo
Stil liste
body {font-size: 14px; color: blue;} div ul {list-style-type: disc; font-size: 90%; font-style: italic;} div ul ul {font-style: normal; color:red;}
Rezultat stila liste
Formulari za popis osnovnih škola je poslat svim opštinama. Opštine koje su podnele prijave: • •
Opštine u Vojvodini koje su podnele prijave:
• Severnobački okrug 1. Bačka Topola 2. Subotica •
Opštine u užoj Srbiji koje su podnele prijave:
• Šumadijski okrug 1. Aranđelovac • Južnobanatski okrug 1. Alibunar 2. Bela Crkva Borski okrug 1. Bor Opštine koje nisu odgovorile: • • Bačka Topola Lapovo
Tabele
Tabela se definiše pomoću taga
.
Pojedinačna ćelija se definiše u okviru
.
Novi red se definiše sa
.
Ćelije prvog reda se definišu sa tagovima
.
Tabele
Naslov tabele
Sadržaj prve ćelija zaglavlja
Sadržaj poslednje ćelije headera
Sadržaj prve ćelije prvog reda
Sadržaj poslednje ćelije prvog reda
sadržaj prve ćelije poslednjeg reda
sadržaj poslednje ćelije poslednjeg reda
Atributi i osobine veličine tabele
Atributi, tj. osobine border i width su isti u HTML4 i XHTML-u, samo se border u HTML4 odnosi na celu tabelu a u XHTML-u samo na okvir tabele (ne nasleđuje se).
Atributima cellpadding i cellspacing u HTML4 odgovaraju osobine padding i border-spacing u XHTML-u. Pomoću padding osobine definiše se rastojanje između sadržaja ćelije i njene granice.
Pomoću border-spacing osobine se može odrediti rastojanje između pojedinih ćelija tabele.
(X)HTML dopušta mogućnost da se pojedine ćelije tabele protežu duž više redova ili kolona tabele. Ovakav efekat se može postići pomoću atributa colspan i rowspan, koji se ubacuju u
ili
tag one ćelije koja se želi posebno da formatira.
Vrednost ovih atributa se zadaje brojem kolona ili redova tabele duž kojih treba da se prostire data ćelija.
Ostali atributi i osobine
U HTML4 atributi align i valign se mogu aplicirati na celu tabelu ili ćelije tabele čiji se sadržaj pozicionira. U XHTML-u samo se tekst u ćelijama može pozicionirati pomoću osobina text-align i vertical-align, jer je tabela block element.
Pozadina tabele ili ćelije se u HTML-u specificiraju atributima bgcolor i background, a u XTHML-u osobinom background.
Tabele redovi u HTML4
hello
hello3
hello5
U datom primeru "hello“, “hello3” i “hello5” su ćelije u okviru istog reda
Tabele – kolone u HTML4
Da bi se napravila nova kolona potrebno je koristiti tag
hello
hello3
hello5
Primer HTML4 tabele
Ime:
Prezime:
Zvanje:
Aleksandra
Smiljanić
Predavač
Primer XHTML tabele
Ime:
Prezime:
Zvanje:
Aleksandra
Smiljanić
Predavač
Primer HTML4 tabele
Ime :
Prezime :
Zvanje :
Aleksandra
Smiljanić
Predavač
Primer XHTML tabele
Ime:
Prezime:
Zvanje:
Aleksandra
Smiljanić
Predavač
Primer XHTML tabele
Tabela predavača Internet programiranja:
Ime:
Prezime:
Zvanje:
Aleksandra
Smiljanić
Predavač
Boško
Nikolić
Predavač
Aleksandra predaje na smeru za telekomunikacije, a Boško za automatiku.
Primer XHTML tabele
Frejmovi
Frejmovi omogućavaju da se formira dokument koji će se sastojati od adresa bar dva različita dokumenta.
Frejmovi su dozvoljeni samo u XHTML Frameset varijanti Osnovni tag je složeni tag . Ovaj tag zamenjuje body tag u (X)HTML4 dokumentu. Nije podržan u HTML5.
Tag ima atribute: cols za vertikalnu podelu prozora i rows za horizontalnu podelu prozora navigatora.
Frejmovi
Početna komanda Adresa dokumenta se navodi u okviru taga preko atributa src.
Tag </b>sadrži poruku za browser koji nije u stanju da interpretira frejmove.</p>
<a id="p172"></a>
<h3>Frejmovi</h3>
<p> <html> <head> </head> <frameset> … Opšta struktura (X)HTML stranice sa frejmovima je: </frameset> </html></p>
<a id="p173"></a>
<h3>Primer HTML stranice sa frejmovima</h3>
<a id="p174"></a>
<h3>Atributi stranice sa frejmovima, HTML4</h3>
<p> Atributi <b><frameset> </b>taga u HTML4: <i>border</i>: debljina granice između frejmova izrađena u pikselima, <i>bordercolor</i>: definiše boju granice između frejmova. Ovaj atribut se primenjuje jedino pod uslovom da je atribut <i>frameborder</i> postavljen na aktivnu vrednost. <i>frameborder</i>: vrednost '1' ili 'yes' ovog atributa prikazuje granicu između dva frejma, dok vrednost '0' ili 'no' ne prikazuje. Nije potisnuta osobina.</p>
<p>Ovi atributi su zamenjeni osobinom <i>border </i>i njenim podosobinama u XHTML-u</p>
<a id="p175"></a>
<h3>Primer stranice sa frejmovima</h3>
<p><html> <head> <title>Nova stranica sa frejmovima </title></head> <frameset rows="20%, 80%" frameborder=”no" > <frame src="menu.html”/> <frame src="main.html”/> </frameset> <noframes> U okviru vašeg čitača nije moguće prikazati ovu stranicu.</p>
<p>
Atributi frejmova
(X)HTML atributi taga: src: definiše adresu dokumenta koji će se učitati u okviru frejma, name: specificira ime frejma koje se može koristiti u okviru drugih programskih modula, kao što su JavaScript ili VBScipt, noresize: ovaj atribut se samo navodi bez ikakve vrednosti, i sprečava korisnika da menja veličinu frejma, scrolling: može bit yes, no i auto.
XHTML osobine border i margin su zamenili HTML4 atribute: bordercolor: definiše boju ivice frejma, frameborder: vrednost '1' ili 'yes' ovog atributa prikazuje granicu frejma, dok vrednost '0' ili 'no' ne prikazuje, marginwidth: definiše veličinu praznog prostora između leve i desne strane frejma i njegovog sadržaja izražen u pikselima, marginheight: definiše veličinu praznog prostora između vrha i dna frejma i njegovog sadržaja izražen u pikselima.
Hiperlinkovi u frejmovima
Korišćenjem frejmova i linkova može se omogućiti promena jednog dela stranice, dok bi preostali deo stranice ostao nepromenjen.
Kod definicije linka (koji se nalazi na drugom frejmu) se navede atribut target sa vrednošću koja predstavlja ime frejma čiji se sadržaj menja.
Ovo je stranica ciji ce se sadržaj promeniti ako se aktiviraju linkovi s desne strane!
Element iframe
Element iframe služi za ubacivanje druge veb strane u određeni deo date strane.
Podržan je u HTML4, XHTML Transitional, i HTML5 Atributi su mu src, name, width,
height
Primer elementa iframe-a
Naslov
Tekst
Multimedija u HTML4
Koristi se tag. Ovaj tag podržava uobičajene formate kao što su .wav, .mid, .mp3, i .au. Osnovna struktura taga je sledeća: <embed src="filename.ext" width="x" height="x" autoplay="x" hidden="x" loop="x" volume="x">embed>
Atributi elementa u HTML4
src: njegova vrednost je URL (relativna ili apsolutna putanja) do multimedijalnog dokumenta. controls: moguće vrednosti ovog atributa su console i smallconsole. height and width: Za neke čitače ovo su obavezni atributi taga. Na primer njihovo izostavljanje u Netscape čitaču prouzrokuje nepredviđen rad. Ako se za ove atribute definišu veće vrednosti od dimenzija konzole, sivi prostor se dodaje u dodatom prostoru. volume: Vrednost ovog atributa je broj između 0 i 100. Manji broj definiše tiši zvuk.
Atributi elementa u HTM4
loop: defolt vrednost ovog atributa je FALSE: dokument se izvršava samo jednom. Ako je TRUE, dokument će ponavljati neograničen broj puta, a inače ako je broj, taj broj puta.
autostart: defolt vrednost true ovog atributa aktivira fajl čim je daunloudovan.
hidden: defolt vrednost ovog atributa je true i tada je konzola sakrivena. align: Moguće vrednosti ovog atributa su left i right. hspace i vspace: Slično kao kod taga ovi atributi se koriste da bi se definisao u pikselima horizontalni odnosno vertikalni prostor oko konzole.
Multimedija u XHTML-u
Atributi elementa u XHTML-u
classid: lokacija (url) implementacije datog objekta, njen relativni deo codebase: apsolutna adresa implementacije datog objekta codetype: tip implementiranog objekta specificiranog sa classiddata: lokacija konkretnog fajla koji treba da se prikaže type: tip objekta specificiran sa data
Atributi elementa u XHTML-u
archive: lokacija modula potrebnih za obradu objekta koji su arhivirani declare: ovaj objekat je pomoćni za obradu pravog objekta koji se instancira kasnijom naredbom standby: poruka koja se prikazuje dok se objekat obrađuje
Unos podataka preko veb strane
XHTML ne obezbeđuje punu interaktivnost, ali određuje izgled formulara i uopšte elemenata za unos podataka. Programski jezici kao što su Javascript i PHP obrađuju unete podatke i korisniku šalju XHTML fajl sa rezultatom obrade. Tagovi za unos podataka su , , ,
Skriveno tekst polje
Često je potrebno u okviru stranice zapamtiti određene vrednosti koje ne bi trebalo prikazivati korisniku. Ova mogućnost se izvršava pomoću taga i njegovog atributa type=“hidden”. Na primer:
Fiksno polje formulara
Nekad tekst polja imaju fiksnu vrednost koju korisnik ne može promeniti.
Primer je kada se određena tekst polja popunjavaju iz nekog drugog formulara.
Za fiksno tekst polje koristi se atribut readonly kome se dodeljuje vrednost “readonly”.
Primer formulara
Forma za komentare
Pošaljite svoje komentare
Primer formulara
Primer formulara
Restoran italijanske hrane
Primer formulara
Aploudovanje fajlova
Fajlovi se aplouduju pomoću tagova i . U tagu form je specificiran program pomoću koga se aplouduje fajl i atribut enctype=“multipart/form data”.
U tagu input da je u pitanju type=“file”.
Aploudovanje fajlova: Primer
Padajući meni
Opadajuća lista se definiše pomoću tagova i . Polje opisuje izbor između mogućih vrednosti navedenih u okviru tagova . Atributi uz tag su name koji se šalje serveru kao ime liste, size koji specificira broj opcija, i multiple=‘multiple’ kojim se omogućava izbor više opcija. U tom slučaju je ime Atributi taga su value koji specificira podatke koji se šalju serveru kao izabrani, a atribut selected=“selected” za biranje unapred datog atributa.
Moj omiljeni predmet na 1. godini je:
Padajući meni
Za hijerarhijske padajuće menije se koristi tag koji predstavlja grupu opcija iz kojih se bira opcija.
Ime grupe opcija se definiše atributom label taga čija vrednost prethodi grupi ali nije klikabilna .
Slanje formulara e-meilom
Koristi se tag
Korisni atributi: disabled
Atribut disable je koristan da spreči slanje formulara koji nije popunjen.
Korisni atributi: disabled
Korisni atributi: accesskey
Atribut accesskey je koristan za tagove za izbor opcije u listama pomoću slova dodeljenog ovom atributu koje prati alt ili ctr dugmiće.
Imate li vlastiti računar (kucaj ^d za da, ^n za ne)? Da Ne
![](“slike/osam.gif")
Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba Proba 
