internet programiranje, xhtml i css
DESCRIPTION
Detaljno objasnjeni XHTML i CSSTRANSCRIPT
Internet Programiranje
Sadržaj predmeta Cilj predmeta jeste dizajn dinamičkih
veb strana koje uključuju interakciju korisnika.
Alati koji će se koristiti: XHTML i CSS JavaScript PHP i MySQL
Raspored predmeta Prve dve nedelje po 4 časa predavanja – XHTML i
CSS Druge dve nedelje po 3 sata vežbi u tri grupe na
računarima u laboratoriji paviljona II – XHTML i CSS
Treće dve nedelje predavanja – JavaScript Četvrte dve nedelje po 3 sata vežbi u tri grupe u
labu paviljona II – Javascript Naredne tri nedelje po 4 časa predavanja – PHP i
MySQL Poslednje tri nedelje po 3 sata vežbi u labu
paviljona II – PHP i MySQL
Polaganje predmeta Iz svakog modula, XHTML, JavaScript i
PHP, se dobija po 20 poena na vežbama. Za XHTML i JavaScript obavezan je jedan
blok od 3 sata vežbi, a za PHP su obavezna dva bloka od 3 sata, samo ako su u okviru ovih blokova završeni zadati projekti, uz potvrdu asistenta.
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.
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 izdavaja iz teksta.
Odnos brauzera i standarda se može naći na www.webstandards.org.
HTML vs. XHTML HTML 4.0 = XHTML 1.0 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 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.
...
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/attribute
s.html http://www.w3.org/TR/CSS2/propidx.html http://www.webstandards.org/learn/reference/cha
rts/entities/
Alati i (X)HTML Za generisanje (X)HTML stranice potreban
je najobičniji tekst editor, na primer Notepad. Nalazi se u Start meniju pod Programs -> 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.
Stranica se može videti u okviru veb brouzera: Mozilla Firefox, Netscape Navigator ili Internet Explorer.
Važan štos Lako se može videti (X)HTML fajl bilo
koje veb strane pomoću brauzera. Mozilla Firefox: View -> Page Source Internet Explorer: View -> Source
DOCTYPE komanda DOCTYPE komanda određuje verziju jezika i
njegovu varijantu i prva je. Varijante su:
Strict Transitional Frameset
Primer:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Pre DOCTYPE komande često ide i XML komanda:<?xml version="1.0"?>
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: <html>. Ovaj tag se nalazi na početku svakog HTML
dokumenta i govori brouzeru 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: </html>.
Ovaj tag govori browseru da je to kraj (X)HTML dokumenta.
Tagovi Prosti tagovi za opisivanje jednostavnih
elemenata logičke strukture. Oblika su: <x>. U XHTML-u je obavezno da se završe kosom crtom: <x />.
Složeni tagovi su zagrade oblika <x> y </x> kojima je opisan izgled dela teksta y.
Moguće je koristiti atribute u okviru taga kojima se dodeljuju određene vrednosti:
<x a1=v1 a2=v2 ...> y </x>. 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: <html>, </html> - zagrade (X)HTML teksta; <head>, </head> - zagrade zaglavlja, sadrži
meta-definicije (X)HTML dokumenta; <title>, </title> - zagrade za naziv (X)HTML dokumenta i <body>, </body> - zagrade teksta (X)HTML
dokumenta.
Jezik veb strane U html tagu se specificira Namespace i
jezik: <html
xmlns='http://www.w3.org/1999/xhtml' xml:lang='sr' lang='sr'>
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:
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8“/><title>Google</title></head>
Pri čuvanju dokumenta treba izabrati Encoding UTF-8
Telo (X)HTML dokumenta Sve ono što je napisano između
tagova <body> i </body> predstavlja telo dokumenta
Telo dokumenta pojaviće se kao sadržaj prezentacije u prozoru brauzera.
Izgled straniceDOCTYPE…<html><head><title> Ovde je naziv prezentacije </title></head><body> Ovde se unosi sve ono sto želite da se vidi u
prezentaciji </body></html>
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: <!-- komentar -->
Naslovi Naslovi (engl. headers) se kodiraju
prema relativnoj dubini ciframa od 1 do 6. Tag za naslov ima opšti oblik:
<hn> naslovNivoa_n </hn> gde n uzima vrednosti od 1 do 6.
Naslovi <h1> Naslov H1 </h1> <h2> Naslov H2 </h2> <h3> Naslov H3 </h3>
Navedeni kod se na (X)HTML stranici prikazuje na sledeći način:
Naslov H1 Naslov H2Naslov H3
Tagovi za formatiranje
Bold <b>Bold</b>
Strong <strong>Strong</strong>
Italic <i>Italic</i>
Underline <u>Underline</u> (potisnut)
Strike <strike>Strike</strike> (potisnut)
H2O H<sub>2</sub>O
23=8 2<sup>3</sup>=8
Paragraf Tag paragrafa je <p>. Paragraf počinje u
novom redu. levo
centrirano desno
HTML kod koji prikazuje gornji primer je:<p align="left"> levo </p><p align="center"> centrirano </p><p align="right"> desno </p> Inače atribut align je kod XHTML-a potisnut
Parcijalizacija teksta Tekst se može podeliti na blokove pomoću taga
<div>. Blok počinje u novom redu, kao i tekst posle
bloka. Atributi ovog taga su class i id, i označavaju
klasu određenog bloka, i partikularni blok da bi se na njega mogao aplicirati određeni stil.
<div><p> Paragraf 1 </p><p> Paragraf 2 </p></div>
Izdvajanje teksta Izdvajanje teksta koji ne počinje u novom
redu, se vrši pomoću taga <span>. Tab span ima iste atribute kao tag div, tj.
class i id. Tekst na srpskom <span class=engl> text
in English </span> 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:<p>     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 xxxxxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. </p>
HTML 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:<p> 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 xxxxxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx. </p>
Automatski prelom linije <html><head><title> Rad sa prelomom linije </title></head><body><h1>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...</h1>
</body></html>
Prelom linije u (X)HTML-u
<html><head><title> Rad sa prelomom linije </title></head><body><h1>Come Scroll with me, away to the right, as I
list out all of the long <br /> answers to the meaning of life accessible only to those that can scroll,scroll, scroll...</h1>
</body></html>
Nema preloma linije u HTML-u (potisnut) <html><head><title> Rad sa prelomom linije </title></head><body><nobr><h1>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...</h1></nobr>
</body></html>
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.
Primer: <div id=“sad” title=“Sadržaj”> Uvod
<br /> Razrada <br /> Zaključak </div>
Ubacivanje slika U okviru (X)HTML stranice slika se
prikazuje pomoću <img> 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.<img src="osam.gif" height="50%” width="50%” />
Pozicioniranje slike u HTML-u 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:
<img src="osam.gif" align="left” /> right - postavlja sliku uz desnu marginu:
<img src="osam.gif" align="right“ /> top - poravnava vrh slike sa vrhom teksta u paragrafu u
kome se nalazi:
<img src="osam.gif" align="top” /> bottom - poravnava donjom ivicom sa donjom ivicom
teksta:
<img src="osam.gif" align="bottom">
Pozicioniranje slike u HTML-u Vrednosti atributa align mogu biti:
middle - postavlja sliku tako je na donjoj ivici slova na sredini teksta:
<img src="osam.gif" align="middle"> absmiddle - postavlja sliku tako da se sredina slike i
sredina teksta poklapaju:<img src="osam.gif" align="absmiddle">
Izgled slike u HTML-u 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.<img src="osam.gif" hspace="50px" vspace="50">
U okviru stranice može se definisati i debljina granice pomoću atributa border čija se vrednost zadaje u pikselima. Ovo je potisnut atribut.<img src="osam.gif" border="5">
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.<img src="osam.gif" alt="Broj osam">
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 je u okviru iste
aplikacije i nalazi se na istom serveru gde i stranica sa polaznom pozicijom,
krajnja pozicija se nalazi na stranici koja ne pripada istoj aplikaciji, već 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 <a>. 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:
<a href=“imeKrajnjePozicije”> polaznaPozicija </a>
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 <a> sa atributom href i nazivom stranice do koje se želi da se napravi veza.<a href="Prva.html"> Veza do stranice Prva.html </a>
Link na stranicu u okviru istog servera 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, a to je rad 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 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 .. označava
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”.
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 jesema://domenServera [:port]/putanja/ imeDokumenta
Primer:<a href="http://www.etf.rs/"> Link ka
Elektrotehničkom fakultetu </a>
Link na istu stranicu Za ovu vrstu linkova prvo se napravi oznaka na
mestu na stranici gde se nalazi krajnja pozicijia. Oznaka se dobija pomoću atributa name u <a> tagu.
Na polaznoj poziciji navodi se tag sa imenom krajnje pozicije:<a href=“#imeKrajnjePozicije"> polaznaPozicija </a>
Na krajnjoj poziciji se navodi tag koji definiše ime krajnje pozicije: <a id="imeKrajnjePozicije"> krajnjaPozicija </a>
Link na istu (X)HTML stranicu<html> <head><title> Link u okviru iste stranice</title></head> <h2>Programiranja </h2> <p> <a href="#html"> Web i jezik HTML </a> </p> <p> <a href="#java"> Programski jezik Java </a></p> <p> <a href="#uvodc"> Uvod u C</a></p><h3> <a id="html"> Web i jezik HTML</a> </h3>
<p>................<br />................</p><p>................<br />................</p><p>................<br />................</p>
<H3> <A id="java"> Programski jezik Java </A> </H3><p>................<br />................</p><p>................<br />................</p><p>................<br />................</p>
<h3> <a id="uvodc"> Uvod u C </a> </h3><p>................<br />................</p><p>................<br />................</p><p>................<br />................</p>
</body></html>
Link na određenu poziciju 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 <a> tagu sa navođenjem imena stranice, ali se dodaje deo #imeKrajnjePozicije, da bi se pozicioniralo na krajnju poziciju.
<a href=“imeStranice#imeKrajnjePozicije"> polaznaPozicija </a>
Slika kao link 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.
<a href=“imeKrajnjePozicije"> tagSaSlikom </a>
Primer:<a href="Primer.html"><img
src=“slike/osam.gif"></a>
Link za elektronsku poštu Linkovi se mogu iskoristiti i za pisanje nove mail
poruke pomoću default programa za elektronsku poštu
<a href="mailto:[email protected]"> Pošaljite e-mail poruku! </a>
Pored adrese na koju se želi poslati poruka mogu se podesiti još neki parametri, kao što su naslov ili tekst poruke.
<a href="mailto:[email protected]?subject=Primer poruke&body=Napišite vaš komentar"> Pošaljite e-mail poruku! </a>
Povezivanje CSS stilova i delova XHTML dokumenta 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 imeElementaDetetaimeElementa#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;}.citati {color:red;} Primer stila svih potomaka:div#gaudi p {color:red;} Primer stila dece:div#gaudi > p {color:red;}
Koristan primer Pseudo klasa zavisi od korisničkih aktivnosti:imeElementa: 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šema:active{color:blue;} itd.
Apliciranje stilova Stilovi mogu biti definisani u eksternim
fajlovima koji se pozivaju u okviru zaglavlja pomoću taga <link>, ili interno u okviru zaglavlja pomoću taga <style>.
Atributi taga <link> su rel koji određuje da li je u pitanju glavni ili alternativni stil, type koji ima vrednost text/css, i href koji ima vrednost fajla sa stilom uključujući i njegovu lokaciju.
Atribut taga <style> je type. Fajl sa stilom se može u okviru ovog taga ubaciti pomoću naredbe @import koju ne prepoznaju stariji brauzeri.
Stilovi se mogu aplicirati i u okviru tagova.
Apliciranje stilova: primeri Primer apliciranja eksternog fajla sa
stilom:<head>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”/><title> Primer stranice sa eksternim stilom </title><link rel=“stylesheet” type=“text/css” href=“http://www.etf.rs/templates/etf2/css/size1.css”>
</head>
Apliciranje stilova: primeri Naredbu @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:
<head><meta http-equiv=“content-type” content=“text/html;charset=utf-8”/><title> Primer stranice sa internim stilom </title>
<style type=“text/css”>@import url("../stil.css")</style> </head>
Apliciranje stilova: primeri Primer internog apliciranja stila:<head>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”/><title> Primer stranice sa internim stilom </title>
<style type=“text/css”>img {border: solid;}</style> </head>
Apliciranje stilova: primeri Primer internog apliciranja stila u
mešanoj HTML&XHTML varijanti: <img src="http://www.etf.rs/images/
ETF_Images/naslovna.jpg" alt=“ETF Beograd” width=“250px” height=“160px” style=“border: solid;” align=“left” />
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.
Formatiranje teksta Sintaksa za formatiranje teksta se
razlikuje u HTML-u i XHTML-u. Brauzeri podržavaju oba formata, ali
je preporučivo da se pređe na XHTML jer je on standard.
Tag <font> iz HTML-a je potisnut
Fontovi u HTML-u Primeri: <font face="Comic Sans MS"> Ovde
dodje vaš tekst. </font><font size=“5” color="#ff0000” face
=“Arial”> Ovde ide vaš tekst. </font>
Fontovi u HTML-u
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 …
Fontovi u XHTML-u: Primeri Primeri:h1, h2 {font-size: 20px;}p {font: 12px/150% “Verdana”
“Helvetica”;}.citati {font-style: italic;font-
weight:bold;}
Ugrađivanje fontova u XHTML 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):<style type=“text/css” media=“screen, print”> @font-face { font-family: "Vera Serif Bold"; src:
url(“http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf”); }
body { font-family: “Vera Serif Bold”, serif; } </style>
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 HTML-u Boja npr. pozadine se određuje atributom
bgcolor u okviru <body> taga. U slučaju da se prilikom navođenja taga
body izostave opisani atributi, čitač im dodeljuje predefinisane vrednosti.
Primeri:<body bgcolor="#ffff00“ > <body bgcolor="yellow“ >
Boja teksta u HTML-u Pored pozadine, može se menjati i boja teksta,
pomoću atributa text. Primeri:<body bgcolor="#ffff00" text="#008000">
ili <body bgcolor="#ffff00" text="green">
ili<body bgcolor="yellow" text="#008000">
ili<body bgcolor="yellow" text="green">
Slika pozadine u HTML-u 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: <body background="pozadina1.jpg">
Pri definisanju pozadine u obliku slike, dobra praksa je da se definiše i bgcolor atribut.<body background="pozadina1.jpg" bgcolor="#0000ff">
Boja i slika pozadine u XHTML-u Boja i slika pozadine u XHTML-u se postižu
pomoću osobine background u okviru body taga. Ista osobina se može koristiti za bilo koji deo teksta.
On ima sledeće podosobine: background-color sa vrednostima transparent, ili ime boje; background-image je ime slike uključujući 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 početne pozicije slike.
Podosobine se mogu izostaviti i njihove vrednosti dodeliti osobine background prema gornjem redosledu, a podosobine čijih vrednosti nema će dobiti defolt vrednost.
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 nowrap, 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 objekata
Poravnjavanje slike ili drugog objekta se može vršiti pomoću osobine text-align, kao u primeru:
<style type="text/css"> .centeredImage { text-align:center;
display:block; } </style> … <img src="imgName.gif"
class="centeredImage" alt="image description" height="100" width="100">
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.
Atributi HTML elemenata Postoje zajednički atributi HTML
elemenata koji su bili pominjani u primerima, ali se uglavnom definišu za svaki element posebno. Najvažniji su: align, valign width, height border, bordercolor bgcolor, background
Pozicioniranje XHTML elemenata Celine se prikazuju pomoću osobine
display koji može biti block, inline, none ili list-item.
Poziciju određuju zatim osobine top, bottom, left, right koji određuju rastojanje početka bloka od odgovarajuće ivice roditeljskog elementa, ekrana ili svoje prirodne pozicije, kada je osobina position absolute, fixed i relative, respektivno.
Pozicioniranje XHTML elemenata Primer:#pozadina {position: absolute; top:
250px; left: 2%;}#sadržaj {position: absolute; top: 0px;
left: 2%;}#navigacija {position: absolute; top:
10px; left: 2%}h2, h3 {position: relative; left:-25px}
Primer pozicioniranja u XHTML fajlu<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Catalonia : Castle Makers : Castellers</title> <link rel="stylesheet" type="text/css" href="text.css" />
<style type="text/css">/* stuff to hide from Netscape 4 */@import "absolute.css";
</style></head><body><div id="navigation"><h1>Catalonia</h1>
<a href="index.html">Home</a> <a href="barcelona.html">Barcelona</a>
<a href="buildings.html">Famous Buildings</a><a href="festivals.html">Festivals</a>
</div><div id="bg">
<img alt="" src="img/nearthetop_b.jpg" width="100" /></div>
Primer pozicioniranja u XHTML fajlu<div id="content"><h2>Castle Makers</h2><p>If you've ever marveled at the amazing community effort of the Amish <a
href="http://www.discovery.com/area/exploration/amish/barnraising/day1.html" target="_blank">barn raising</a> parties, where young and old, male and female, strong and weak all come together with a common purpose, Catalonia's Castle Makers <em>(Castellers)</em> will also attract your attention.
</p><h3>Cummerbunds and Bare Feet</h3><p>Brightly colored clothes (unique to each club or <em>colla</em>), bare feet, and wide
cummerbunds distinguish climbers from the public that surrounds them on castle-building day. </p>
<h3>Fent Pinya (Making the Foundation)</h3><p>As a tower begins to form, supporters surround the foundation, placing hands one on top of the
next to make a solid base (the <em>pinya</em> or pineapple, so called because the rows of hands spiraling out from the center resemble that fruit). </p>
<h3>Castles in the Air</h3><p>Watching this diverse group of people join together fills me with envy and anxiety. </p><p><img alt="Waiting" class="line" src="img/waiting_s.jpg" width="154" height="106" /> <img
alt="Tall Tower" class="line" src="img/tall-tower_s.jpg" width="100" height="153" /> </p><h3>The Competition</h3><div id="calendar"><h3>Calendar</h3><p class="calendar">July 1 - Roses <br />June 30 - Girona <br />June 26 - Tarragona </p></div></div></body></html>
Stil za tekst: text.cssbody {
font-family: "Trebuchet MS", Verdana, Sans-serif;}
h2, h3 {color:#339}
a, a:link {color: #339;font-weight: bold;text-decoration: none;}
a:visited {color: #669;}
a:hover {background-color: #fff;color: #339;}
Stil za apsolutno pozicioniranje: absolute.css#bg {
position: absolute;top: 250px;left: 2%;}
#content {position:absolute;top: 0px;left: 30%;}
#navigation {position: absolute;top: 10px;left: 2%;}
#navigation a {display:block}
Primer apsolutnog pozicioniranja
Primer absolutnog pozicioniranja - skrolovanje
Primena osobine display#bg {
position: absolute;top: 250px;left: 2%;}
#content {position:absolute;top: 0px;left: 30%;}
#navigation {position: absolute;top: 10px;left: 2%;}
/* #navigation a {display:block} */
Primena osobine display
Primer nasleđivanja: Autor nije definisao stil linkovabody {
font-family: "Trebuchet MS", Verdana, Sans-serif;color:black; text-decoration: none;}
h2, h3 {color:#339}
/* a , a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;} */
a:visited {color: #669;}
a:hover {background-color: #fff;color: #339;}
Primer nasleđivanja: Autor nije definisao stil linkova
Primer nasleđivanja: Linkovi isti i predefinisanibody {
font-family: "Trebuchet MS", Verdana, Sans-serif;color:black; text-decoration: none;}
h2, h3 {color:#339}
a , a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;}
a:visited {color: #669;}
a:hover {background-color: #fff;color: #339;}
Primer nasleđivanja: Linkovi isti i nedefinisani
Primer nasleđivanja: Neki linkovi definisani, neki nebody {
font-family: "Trebuchet MS", Verdana, Sans-serif;color:black; text-decoration: none;}
h2, h3 {color:#339}
#navigation a , #navigation a:link {color: red;font-family: Arial;font-weight: bold;text-decoration: none;}
a:visited {color: #669;}
a:hover {background-color: #fff;color: #339;}
Primer nasleđivanja: Neki linkovi definisani, neki ne
Stil za fiksno pozicioniranje: fixed.css#bg {
position: fixed;top: 250px;left: 2%;}
#content {position:absolute;top: 0px;left: 30%;}
#navigation {position: fixed;top: 10px;left: 2%;}
#navigation a {display:block}
Stil za fiksno pozicioniranje
Stil za relativno pozicioniranje: relative.css#bg {
position: absolute;top: 250px;left: 2%;}
#content {position:absolute;top: 0px;left: 30%;}
#navigation {position: absolute;top: 10px;left: 2%;}
#navigation a {display:block}
h2, h3 {position:relative; left:-25px}
Stil za relativno pozicioniranje
XHTML vertikalno pozicioniranje 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 odgovara atributu align kod HTML-a, i aplicira se na objekte u liniji.
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.
XHMTL elementi koji lebde 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; padding: 5x; margin-left: 5px; margin-top: 7px; font-size:0.8em; width: 150px; float: right;}
Pomoću osobine clear koji ima vrednosti left, right, both, i none, može se zabraniti prolaz kroz dati element:
#kalendar {background:#339; color: white; padding: 5x; margin-left: 5px; margin-top: 7px; font-size:0.8em; width: 150px; clear: right;}
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.
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.
Pojam listi Liste u jeziku (X)HTML se koriste za
navođenje, popisivanje određenih delova teksta.
Postoje: nenumerisane, numerisane, neuređene liste.
Numerisane i nenumerisane liste u (X)HTML-u Numerisane liste koriste <ol> tag (engl.
ordered list), a nenumerisane liste <ul> tag (engl. unordered list).
Pojedine stavke liste se definišu pomoću <li> 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): <ul>
<li> element1Liste </li> <li> element2Liste </li>. . . . .
</ul>
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
Nenumerisane liste
Za primer sa kružnim dugmićima: • proleće • leto • jesen • zima odgovarajući HTML kod je:
<ul type=“disc"><li>proleće </li><li>leto </li><li>jesen </li><li>zima </li></ul>
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): <ol>
<li> element1Liste </li> <li> element2Liste </li>. . . . .
</ol>
Numerisane liste u HTML-u Atribut type:
A - velika slovaa - mala slovaI - rimski brojevii - mali rimski brojevi
Numerisane liste I. proleće II. leto III. jesen IV. zima Odgovarajući HTML kod:<ol type="I"><li>proleće </li><li>leto </li><li>jesen </li><li>zima </li></ol>
Definicione liste Ovaj oblik liste se dobija sa <dl> tagom.
Svaka stavka ovakve liste se sastoji iz dva dela: termina koji se definiše, i njegove definicije.
Termini zapocinju <dt> tagom, a njihove definicije <dd> 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: <dl>
<dt> odrednica1 <dt> <dd> opisOdrednice1 </dd>
<dt> odrednica2 </dt> <dd> opisOdrednice2 </dd> . . . . . </dl>
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:
<dl><dt>Proleće: </dt><dd>traje od 21. marta do 21. juna. </dd>
<dt>Leto:</dt><dd>traje od 21. juna do 21. septembra. </dd>
<dt>Jesen:</dt><dd>traje od 21. septembra do 21. decembra. </dd>
<dt>Zima:</dt><dd>traje od 21. decembra do 21. marta. </dd></dl>
Definicione listeJoš jedan primer, (X)HTML kod:<dl>
<dt> -i </dt> <dd> invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path </dd> <dt> -k </dt> <dd>invokes NCSA Mosaic for Microsoft Windows in kiosk mode </dd>
</dl>
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 Unutar neke liste može se definisati nova lista. Na primer:<ul>
<li> Opštine u Vojvodini koje su podnele prijave: <ul>
<li> Severnobački okrug <ol> <li> Bačka Topola </li> <li> Subotica </li> </ol></li>
<li> Južnobanatski okrug <ol> <li> Alibunar </li>
<li> Bela Crkva </li> </ol></li> </ul> </li>
<li> Opštine u užoj Srbiji koje su podnele prijave: <ul>
<li> Šumadijski okrug <ol> <li> Aranđelovac </li> <li> Lapovo </li> </ol></li>
<li> Borski okrug <ol> <li> Bor </li> </ol></li>
</ul> </li></ul>
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 2. Lapovo
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/examples/lists/rightarrow.gif)}
ol li {list-style-type: circle; font-size: 75%}
Primer liste sa stilom<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Prijave po opštinama </title><link rel="stylesheet" type="text/css" href="lista.css" /></head>
<body><div>Formulari za popis osnovnih škola je poslat svim opštinama. Neke opštine su
podnele potpune prijave, dok neki okruzi nisu uopšte odgovorili. Opštine koje su
odgovorile: <ul>
Primer liste sa stilom <li> Opštine u Vojvodini koje su podnele prijave: <ul>
<li> Severnobački okrug <ol> <li> Bačka Topola </li> <li> Subotica </li> </ol></li>
<li> Južnobanatski okrug <ol> <li> Bačka Topola </li>
<li> Subotica </li> </ol> </ li> </ul> </li>
<li> Opštine u užoj Srbiji koje su podnele prijave: <ul>
<li> Šumadijski okrug <ol> <li> Aranđelovac </li> <li> Lapovo </li> </ol></li>
<li> Borski okrug <ol> <li> Bor </li> </ol></ li>
</ul> </li></ul> Iz gornje liste vidimo da je broj opština koje su odgovorile dosta mali. </div>Okruzi koji nisu odgovorili:<ul>
<li> Severnobački okrug </li> <li> Bačka Topola </li> <li> Subotica </li>
</ul></body></html>
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;}
Primer liste sa stilom
Drugi 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;}
Lista sa drugim stilom
Tabele Tabela se definiše pomoću taga
<table>. Pojedinačna ćelija se definiše u
okviru <td> </td>. Novi red se definiše sa <tr> </tr>. Ćelije prvog reda se definišu sa
tagovima <th> </th>.
Tabele <table><caption> Naslov tabele </caption> <tr> <th> Sadržaj prve ćelija zaglavlja </th> <th> Sadržaj poslednje ćelije headera </th> </tr> <tr> <td> Sadržaj prve ćelije prvog reda </td> <td> Sadržaj poslednje ćelije prvog reda </td> </tr> <tr> <td> sadržaj prve ćelije poslednjeg reda </td> <td> sadržaj poslednje ćelije poslednjeg reda </td> </tr> </table>
Atributi i osobine veličine tabele
Atributi, tj. osobine border i width su isti u HTML-u i XHTML-u, samo se border u HTML-u odnosi na celu tabelu a u XHTML-u samo na okvir tabele (ne nasleđuje se).
Atributima cellpadding i cellspacing u HTML-u 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.
Primeri:<table border="2" width=“100%” cellpadding="30"
cellspacing="10">table, td.osnovni {border:2px solid red; width: 100%;
padding:3px; border-spacing:0;>
Atributi za spajanje ćelija (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 <td> ili <th> 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 HTML-u 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.
Pozadina tabele ili ćelije se u HTML-u specificiraju atributima bgcolor i background, a u XTHML-u osobinom background.
Tabele redovi u HTML-u
<table border="3" cellpadding="5" cellspacing="5"> <tr>
<td>hello</td> <td>hello3</td> <td>hello5</td>
</tr></table> U datom primeru "hello“, “hello3” i
“hello5” su ćelije u okviru istog reda
Tabele – kolone u HTML-u Da bi se napravila nova kolona
potrebno je koristiti tag <tr><table border="3" cellpadding="5"
cellspacing="5"><tr><td>hello</td></tr><tr><td>hello3</td></tr><tr><td>hello5</td></tr></table>
Primer HTML tabele <table border="2"><tr> <th><font face="Verdana" size=“12">Ime:</font></th> <th><font face="Verdana" size=“12">Prezime:</font></th> <th><font face="Verdana" size=“12">Zvanje:</font></th></tr><tr> <td><font face="Verdana" size=“12">Aleksandra
</font></td> <td><font face="Verdana" size=“12">Smiljanić</font></td> <td><font face="Verdana" size=“12">Predavač</font></td></tr></table>
Primer XHTML tabele <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> table,td,th {border: 2px solid; font-family: "Verdana"; font-size: 12px>
</style> </head> <body> <table> <tr><th>Ime:</th><th>Prezime:</th> <th>Zvanje:</th> </tr>
<tr><td>Aleksandra</td><td>Smiljanić</td><td>Predavač</td> </tr> </table> </body>
Primer HTML tabele<table border="2" width="100%"><tr> <th width=“25%"><font face="Verdana" size=“12">Ime :</font></th> <th width=“25%"><font face="Verdana" size=“12">Prezime :</font></th> <th width=“50%"><font face="Verdana" size=“12">Zvanje :</font></th></tr><tr> <td><font face="Verdana" size=“12">Aleksandra</font></td> <td><font face="Verdana" size=“12">Smiljanić</font></td> <td align=center><font face="Verdana" size=“12">Predavač</font></td></tr></table>
Primer XHTML tabele
Primer XHTML tabele<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body { font-family: "Verdana"; font-size: 14px/180%;} td {font-family: "Comic Sans MS"; font-size: 12px; color: blue;} table {margin:5px;} </style> </head> <body> <p> Tabela predavača Internet programiranja: <table border="2px"> <tr><th>Ime:</th><th>Prezime:</th> <th>Zvanje:</th> </tr>
<tr><td>Aleksandra</td><td>Smiljanić</td><td>Predavač</td> <tr /> <tr><td>Boško</td><td>Nikolić</td><td>Predavač</td></tr> </table> Aleksandra predaje na smeru za telekomunikacije, a Boško za automatiku. </p> </body></html>
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 <frameset>. Ovaj tag zamenjuje body tag u (X)HTML-dokumentu.
Tag <frameset> ima atribute: cols za vertikalnu podelu prozora i rows za horizontalnu podelu prozora navigatora.
Frejmovi Adresa dokumenta se navodi u
okviru taga <frame> preko atributa src.
Tag <noframes> sadrži poruku za browser koji nije u stanju da interpretira frejmove.
Frejmovi Opšta struktura (X)HTML stranice sa
frejmovima je:<html><head></head><frameset>…</frameset></html>
Primer HTML stranice sa frejmovima
Atributi stranice sa frejmovima Atributi <frameset> taga u HTML-u:
border: debljina granice između frejmova izrađena u pikselima,
bordercolor: definiše boju granice između frejmova. Ovaj atribut se primenjuje jedino pod uslovom da je atribut frameborder postavljen na aktivnu vrednost.
frameborder: vrednost '1' ili 'yes' ovog atributa prikazuje granicu između dva frejma, dok vrednost '0' ili 'no' ne prikazuje.
framespacing: definiše razmak između granica frejma i njegovog sadržaja izraženog u pikselima.
Ovi atributi su zamenjeni osobinom border i njenim podosobinama u XHTML-u
Primer stranice sa frejmovima<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 vaseg čitača nije moguće prikazati ovu stranicu.</noframes></html>
Atributi frejmova (X)HTML atributi <frame> 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 HTML 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.<frame src="Primer.html" name=“MenjaSe”>
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.
<a href="http://www.google.com" target=“MenjaSe”> Promena frejma </a>
Hiperlinkovi u frejmovima Stranica Glavna.html<html><frameset cols="25%,75%"> <frame src="meni.html"> < frame src ="PocetniSadrzaj.html"
name=”MenjaSe”></frameset></html>
Hiperlinkovi u frejmovima Stranica meni.html<html><body><table><tr><td><a href ="http://www.yahoo.com" target ="
MenjaSe">Yahoo</a> </td></tr><tr><td><a href ="http://www.etf.bg.ac.yu" target="MenjaSe">ETF</a> </td></tr><td><a href ="http://www.google.com" target
="MenjaSe">Google</a> </td></tr></table></body></html>
Frejmovi Stranica PocetniSadrzaj.html<html><body>Ovo je stranica ciji ce se sadržaj
promeniti ako se aktiviraju linkovi s desne strane!
</body></html>
Multimedija u HTML-u Koristi se <embed> 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 multimedije u HTML-u 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 <embed> 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 multimedije u HTML-u
loop: defolt vrednost ovog atributa je false, što prouzrokuje da se audio dokument izvršava samo jednom. Ako se vrednost postavi na true, dokument će ponavljati specificirani 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 <img> taga ovi atributi se koriste da bi se definisao u pikselima horizontalni odnosno vertikalni prostor oko konzole.
Multimedija u XHTML-u <object width="160" height="144"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B“ codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov"> <param name="autoplay" value="true"> <param name="controller" value="false">
<embed src="sample.mov" width="160"
height="144" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed>
</object>
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 <form>, <input>, <select>, <textarea>.
Ovi tagovi imaju i atribute čije su vrednosti imena programa.
Forme Za implementaciju formi koristi se osnovni tag
<form>. Opšti oblik ovog taga je:<form> <!------ definicija elemenata forme ------> ... </form> Najvažnija tri atributa taga <form> su:
action koji sadrži adresu (URL) programa na serveru kome se predaju podaci;
method kojim je opisana metoda prenosa argumenata programa. Ovaj atribut može imati vrednosti get ili post.
enctype koji opisuje mime tip podataka koji se šalju.
Tekst polje Koristi se tag <input> tag sa atributom type=“text”. Pomoću atributa value definiše se početni tekst koji će se
pojaviti u tekst polju Pomoću atributa size se zadaje veličina tekst polja u
znakovima, a maxlength je maksimalan broj karaktera koji se mogu uneti u okviru ovog elementa od strane korisnika.
Vrednost atributa name definiše samo ime elementa pomoću koga drugi elementi aplikacije (JavaScript, serverski deo aplikacije) mogu čitati ili menjati unetu vrednost u okviru tekst polja.
Ako se želi da se zamaskira tekst koji korisnik unosi u tekst polje umesto vrednosti text, treba koristiti vrednost type=“password”.
Ime: <input type="text" name="ime" value="Unesite ime" size="30“ />
Tekst polje za slanje i brisanje formulara Tag <input> u obliku dugmeta pomoću
koga se podaci šalju na server ima atribut type=“submit”. Vrednost atributa value je ispisana na dugmetu.
<input type=“submit" value="Pošalji“ /> Tag <input>, dugme, koje postavlja
vrednosti elemenata forme na predefinisane vrednosti ima atribut type= “reset”. Vrednost atributa value je ispisana na dugmetu.
<input type=“reset" value="Poništi“ />
Dugme Dugme se može da se definiše i
posebnim tagom <button>. Ovaj tag je složen i može da uključi i sliku dugmeta.
Funkcija dugmeta opšte namene se određuje pomoću nekog programa koji se aktivira na određenu akciju
<button type="button” onClick= ”funkcijaZaProveru()”> <img src=slika.jpg /> </button>
Dugmići submit i reset Vrednost atributa dugmeta može biti i
submit i reset. Kada je atribut type=“submit” pomoću
dugmeta se podaci šalju na server.<button type=“submit" value="Pošalji">… Kada je atribut type=“reset” pomoću
dugmeta se podaci resetuju na predefinisanu vrednost.
<button type=“reset" value="Poništi">…
Formular za izbor opcija Polje za izbor opcija se definiše korišćenjem taga
<input> i njegovog atributa type sa vrednošću “checkbox”. Pomoću atributa checked=“checked” data stavka će biti unapred izabrana, ali se može izbrisati. Atribut name definiše elemente liste, a atribut value vrednost koja je poslata serveru. Svi elementi mogu imati istu vrednost atributa name, ali je u tom slučaju ta vrednost niz.
<i>Koje programske jezike poznajete?</i><br /><ul><li> <input type=”checkbox” name=“jezici[]” value=”pas”> Paskal</li>
<li> <input type=”checkbox” name=“jezici[]” value=”jav”> Java</li></ul>
Formular za izbor jedne opcije “Radio” formular se definišu korišćenjem taga
<input> i njegovog atributa type=“radio”. Ima iste atribute kao i formular za izbor više opcija type=“checkbox”.
<i>Imate li vlastiti računar?</i><br /><ul>
<li> <input type=“radio” name=“racunar” value=“d”> Da </li><li> <input type=“radio” name=“racunar” value=“n”> Ne </li>
</ul>
Padajući meni Opadajuća lista se definiše pomoću tagova <select> i
<option>. Polje <select> opisuje izbor između mogućih vrednosti navedenih u okviru tagova <option>.
Atributi uz tag <select> 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 padajućeg menija niz.
Atributi taga <option> su value koji specificira podatke koji se šalju serveru kao izabrani, a atribut selected=“selected” za biranje unapred datog atributa.
<b><i> Moj omiljeni predmet na 1. godini je: </i></b><select name="predmeti"> <option> Analiza 1</option> <option> Analiza 2</option> <option> ORT</option> </select>
Padajući meni Za hijerarhijske padajuće menije se
koristi tag <optgroup> koji predstavlja grupu opcija iz kojih se bira opcija.
Ime grupa opcija se definiše atributom label taga čija vrednost prethodi grupi ali nije klikabilna <optgroup>.
Višelinijsko tekst polje Tag <textarea> prikazuje tekst u
odvojenom tekst prozoru sa skrol-barovima.
Dimenzije prozora su određene atributima rows (broj redova teksta) i cols (broj kolona, u znakovima).
Atribut name dodeljuje simboličko ime području u kome se nalazi tekst. <textarea name=“imeTeksta” rows=“4” cols=“10”> ... neki tekst ... </textarea>
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 <input> i njegovog atributa type=“hidden”. Na primer:
<input type=”hidden” name=”ident” value="08100-OEM-38069“ />
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”.
<textarea name=“glasanje” cols=“40” rows=“3” readonly=“readonly”> Glasali ste za Sony u ponedeljak </textarea>
Slanje formulara e-meilom Koristi se tag <form> u kome je atribut action=
mailto:e-meil. Primer:<form method=“post” action=“mailto:
[email protected]”>Ime i prezime: <input type="text" name="ime_prez"
value="Unesite ime i prezime" size="30” /> <br />Proizvod: <input type="text" name=“proizvod"
value="Unesite proizvod" size="30” /> <br />Adresa: <br /><textarea name=“adresa" rows=“6”
cols="30“> </ textarea><input type=“submit" value="Pošalji"></form>
Aploudovanje fajlova Fajlovi se aplouduju pomoću tagova
<form> i <input>. 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
<form enctype="multipart/form-data" action="uploader.php" method=“post">
Choose a file to upload: <input name="uploadedfile"
type="file" /><br /> <input type="submit" value="Upload
File" /> </form>
Korisni atributi: disable Atribut disable je koristan da spreči slanje formulara koji nije popunjen.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><body><form method="post" action="processform.php" name="upitnik"><i>Imate li vlastiti računar?</i><br /><input type="radio" name="racunar"
onclick="document.upitnik.posalji.disabled=false">   Da <br /> <input type="radio" name="racunar"
onclick="document.upitnik.posalji.disabled=false">   Ne <br /><input type="submit" name="posalji" value="Pošalji" disabled="disabled"></form></body></html>
Korisni atributi: disable
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.
<i>Imate li vlastiti računar (kucaj ^d za da, ^n za ne)?</i><br /><input type=”radio” name=”racunar” accesskey=“d”> Da <br /><input type=”radio” name=”racunar” onclick=“document.posalji.disable=false” accesskey=“n”> Ne <br />
Primer formulara <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head><title>Forma za komentare</title></head><body><h1>Pošaljite svoje komentare</h1><form action="comments.php" method="post”><p>Email adresa: <input type=“text” name="email" size=“50”> </p><p>Komentar:</p><textarea name=“komentari" rows=“15” cols=“70”></textarea> <p><input type="submit" value="Pošaljite komentar"> <input type="reset" value="Obrišite unete podatke"> </p></form></body></html>
Primer formulara
Primer formulara <html> <head><title>Restoran italijanske hrane</title></head><body><h1> Restoran italijanske hrane </h1><form action="order.php" method="post"><h2>Pice</h2>Koliko pica želite? <input name="numpizzas" value=“1" size=“3” maxlength=“3”> <br /><input type=“radio” name="size" value="large" checked=“checked”> Velika <br/><input type=“radio name="size" value="medium"> Srednja <br/> <input type=“radio” name="size" value="small"> Mala <br /><h3>Dodaci</h3><input type=“checkbox” name="topping[]" value="pepperoni"> Ljuta paprika <br /> <input type=“checkbox” name="topping[]" value="mushroom"> Pečurke <br /> <input type=“checkbox” name="topping[]" value="peppers"> Kečap <br /> <input type=“checkbox” name="topping[]" value="onion"> Luk <br /> <input type=“checkbox” name="topping[]" value="olives"> Masline <br />Ime: <input type="text" name="name"> </br> Broj telefona: <input type="text" name="phone"> <br />Adresa: <br /><textarea name="address" rows=“6” cols=“50”></textarea><p>Broj kreditne kartice: <input type=“password” name="creditcard" size=“20”></p><input type=“submit” value="Pošaljite narudžbinu"></form></body> </html>
Primer formulara