xhtml css tutorial

Upload: ivana-gilic

Post on 19-Jul-2015

499 views

Category:

Documents


1 download

TRANSCRIPT

Internet Programiranje

Sadraj predmetaCilj predmeta jeste dizajn dinamikih veb strana koje ukljuuju 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 vebi u tri grupe na raunarima u laboratoriji paviljona II XHTML i CSS Tree dve nedelje predavanja JavaScript etvrte dve nedelje po 3 sata vebi u tri grupe u labu paviljona II Javascript Naredne tri nedelje po 4 asa predavanja PHP i MySQL Poslednje tri nedelje po 3 sata vebi u labu paviljona II PHP i MySQL

Polaganje predmeta

Iz svakog modula, XHTML, JavaScript i PHP, se dobija po 20 poena na vebama. Za XHTML i JavaScript obavezan je jedan blok od 3 sata vebi, a za PHP su obavezna dva bloka od 3 sata, samo ako su u okviru ovih blokova zavreni zadati projekti, uz potvrdu asistenta. Vebe se mogu odraivati samo uz lekarsko opravdanje. Ostalih 40 poena dobija se na ispitu koji se polae uz dozvoljenu literaturu.

HTML, XHTML & CSS

ta je HTML?HTML (HyperText Markup Language) je veoma jednostavan jezik koji slui za prikazivanje veb strana. HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u odreenom direktorijumu servera vezanog na Internet, to ih ini dostupnim na vebu. Pomou HTML jezika se generiu dokumenti tipa hipertekst.

Hipertekst

... je tekst koji sadri veze ili linkove ka drugim dokumentima ili na samog sebe. Hipertekst je skup stranica, meusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se moe kliknuti. Za razliku od obinog teksta, koji se ita linearno (sleva na desno, odozgo nanie), hipertekst se ita pratei hiper-veze u tekstu, dakle, ne nuno na linearan nain.

Jezici za opis hiperteksta

Najznaajniji 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 nain i bio je interpretiran od strane raznih brauzera na razliite naine. Standardizacijom se bavi W3C (WWW Consortium), www.w3c.org. Standardizacija je poela 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 moe nai 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 oteava programiranje. XHTML sa CSS jezikom olakavaju dizajn i auriranje velikih veb strana. XHTML i CSS bolje podravaju fleksibilni prikaz veb strana. Stari brauzeri ne podravaju uvek XHTML.

HTML vs. XHTML

XHTML je osetljiv na veliinu slova. Elementi, atributi i njihove vrednosti su pisane malim slovima. XHTML zahteva zavretak komandi. XHTML zahteva da atributi uvek budu pod navodnicima, a HTML samo kada sadre 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-html40119991224/ http://www.w3.org/TR/xhtml1/ http://www.w3.org/TR/html4/index/elements.ht ml http://www.w3.org/TR/REChtml40/index/attributes.html http://www.w3.org/TR/CSS2/propidx.html http://www.webstandards.org/learn/reference/c harts/entities/

Alati i (X)HTML

Za generisanje (X)HTML stranice potreban je najobiniji 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 moe videti u okviru veb brouzera: Mozilla Firefox, Netscape Navigator ili Internet Explorer.

Vaan tosLako se moe videti (X)HTML fajl bilo koje veb strane pomou brauzera. Mozilla Firefox: View -> Page Source Internet Explorer: View -> Source

DOCTYPE komanda

DOCTYPE komanda odreuje verziju jezika i njegovu varijantu i prva je. Varijante su:

Primer: Pre DOCTYPE komande esto ide i XML komanda:

Strict Transitional Frameset

Pojam Taga(X)HTML komande se piu u vidu tzv. tagova. Jedan tag je ustvari komanda koja govori brauzeru ta i kako da uradi tj. na koji nain da prikae sadraj vae stranice.

Tagovi

Tagovi se piu unutar oznaka "" (bez znakova navoda) npr: . Ovaj tag se nalazi na poetku svakog HTML dokumenta i govori brouzeru da je fajl koji je upravo poeo da uitava HTML dokument i da kao takvog treba i da ga prikae. Veina tagova ima i poetni i zavrni tag. Zavrni tag se dobija dodavanjem znaka "/" i oznaava mesto na kom prestaje dejstvo poetnog taga, npr: . Ovaj tag govori browseru da je to kraj (X)HTML dokumenta.

TagoviProsti tagovi za opisivanje jednostavnih elemenata logike strukture. Oblika su: . U XHTML-u je obavezno da se zavre kosom crtom: . Sloeni tagovi su zagrade oblika y kojima je opisan izgled dela teksta y. Mogue je koristiti atribute u okviru taga kojima se dodeljuju odreene vrednosti: 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, sadri meta-definicije (X)HTML dokumenta; , - zagrade za naziv (X)HTML dokumenta i , - zagrade teksta (X)HTML dokumenta.

Jezik veb strane

U html tagu se specificira Namespace i jezik:

Zaglavlje (X)HTML dokumentaSve ono to se napie u zaglavlju dokumenta nee se prikazati u prozoru brauzera ve obino slui samo da prui neke informacije o stranici. U zaglavlju se specificira azbuka a takoe i naslov veb strane koji gledaju pretraivai: