XHTML - Odjel za matematiku

Web programiranje i primjeneXHTML1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek1

HTMLHTML – Hyper Text Markup Language• HTML je jezik za opisivanje i formatiranje sadržaja web stranica• sastoji se od konačno mnogo oznaka (eng. tagova) definiranih/propisanihod strane W3C‐a• HTML tagovi sastoje se od imena taga zatvorenog u šiljaste zagrade, npr.• HTML tagovi obično dolaze u parovima –svaki početni tag (npr. )ima odgovarajući završni tag ()• HTML dokumenti sastoje se od HTML tagova i običnog teksta i kao takvičine web stranicePrimjer: struktura jednostavnog html dokumenta(DOCTYPE deklaracija, zaglavlje i tijelo html dokumenta)• HTML dokument ima ekstenziju .html ili .htm1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek2

XML ‐ ukratkoXML ‐ eXtesible Markup Language• XML je jezik čija je primarna zadaća pohrana, organizacija i prijenospodataka• XML tagove korisnik definira sam –svitagovi dolaze u parovima (početni izavršni tag), pravila za imenovanje tagova su propisana, tagovi moraju bitipravilno ugnježdeni (po principu LIFO): ... ‐ nepravilno ... ‐ pravilnoHTML vs. XML“HTML is about displaying information, while XML is about carryinginformation.”1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 3

XHTMLXHTML ‐ eXtensible Hyper Text Markup Language• XHTML je gotovo identičan verziji HTML 4.01• XHTML je stroža i čišća verzija HTML‐a• XHTML se sastoji od svih oznaka HTML‐a 4.1. na koje su primjenjenastroga sintaktička pravila XML‐a• XHTML je W3C preporuka od 26.1.2000.• W3C ‐ normativna definicija XHTML‐a 1.0.Neke razlike između HTML‐a i XHTML‐a1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 4

XHTML – elementi• XHTML element – sadržaj – XHTML element počinje početnim tagom (npr. )– XHTML element završava završnim tagom ( je završni tag taga)– u XHTML‐u ime taga mora biti napisano malim slovima– sadržaj XHTML elementa je sve što se nalazi između početnog izavršnog taga (to mogu biti drugi tagovi postavljeni u skladu s LIFOprincipom i običan tekst)– neki XHTML elementi nemaju sadržaj –prazni XHTML elementi– prazne XHTML elemente zatvarmo u sklopu početnog taga na sljedećinačin:– većina XHTML elemenata može imati atribute1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 5

XHTML ‐ atributi• XHTML atributi– snabdjevaju XHTML elemente dodatnim informacijama koje najčešćesluže za formatiranje prikaza elementa– atributi se dodaju početnom tagu– atributi dolaze u paru ime‐vrijednost, tj. imenu atributa se pridružujedozvoljena vrijednost pod navodnim znakovima ... – ime i vrijednost atributa moraju biti napisani malim slovima– primjer – dodavanje linka u html dokumentu– lista HTML atributa1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 6

XHTML – naslovi, paragrafi i komentari• XHTML naslovi (zaglavlja) definirani su tagovima do – Najveći naslov– Najmanje naslov– w3schools primjer• XHTML paragraf definiran je tagom – Tekst paragrafa– w3schools primjer• XHTML komentari– čine html dokument razumljivijim i čitljivijim, ali nisu prikazani u webpregledniku– sintaksa: – w3schools primjer1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 7

XHTML –važni prazni elementi• XHTML prijelom (prelazak u novi red)– definiran tagom koji ne nosi nikakav sadržaj– tekst u prvom redu... ... tekst u drugom redu– w3schools primjer• XHTML horizontalna linija– definirana tagom koji ne nosi nikakav sadržaj– u sljedećem primjeru dva dijela teksta odvojena su horizontalnomlinijom:tekst u prvom redu... ... tekst u drugom redu– w3schools primjer1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 8

XHTML –formatiranje sadržaja• Samo nekoliko primjera formatiranja sadržaja html dokumenta:Podebljani tekstUkošeni tekstPodcrtani tekstStil outputa računalaPovećani tekstIndeksEksponent• w3schools primjer1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 9

XHTML –atribut style (CSS)• atribut style ‐ nepraktičan i vremenski zahtjevan način stiliziranja htmldokumenta ‐ preporučuje se stiliziranje html dokumenta korištenjemvanjske stilske stranice (CSS)• definiranje pozadinske boje html elementa– tekst– w3schools primjer HTML boje –imena i heksadecimalni kodovi• definiranje vrste, boje i veličine fonta– tekst– w3schools primjer• poravnanje teksta– tekst– w3schools primjer1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 10

XHTML ‐ linkovi• tag ‐ služi za postavljanje linka (poveznice) u html dokumentu– na drugi dokument, pomoću atributa hrefnpr. Odjel za matematikuw3schools primjer– na “sidro” (eng. anchor) u istom html dokumentu, pomoću atributanamenpr. Na vrh straniceprimjer• atribut target –vrijednost“new” ili “_blank” omogućava otvaranjedokumenta u novom prozoru web preglednika– w3schools primjer1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 11

XHTML ‐ tablice• tagovi , , i – tag služi za definiranje tablice– pomoću taga (table row) tablica se dijeli na redove, a svaki se redpomoću taga (table data) dijeli na polja tablice– Za definiranje zaglavlja tablice umjesto taga korist se tag (table header)– sadržaj elementa omeđenog tagovima i je sadržaj jednogpolja tablice –običan tekst, link, slika, druga tablica, lista, forma...– sintaksa: zaglavlje 1, red 1zaglavlje 2, red 1 polje 1, red 2polje 2, red 2 polje 1, red 3polje 2, red 3 1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 13

XHTML ‐ tablice• atributi caption, colspan i rowspan, cellpadding i cellspacing– caption – definira naslov tablicew3schools primjer– colspan i rowspan – spajaju polja tablice u istom redu (colspan) i poljatablice u istom stupcu (rowspan)w3schools primjer– cellpadding – određuje veličinu razmaka između ruba i sadržaja poljatablicew3schools primjer– cellspacing –služi za povećavanje razmaka među susjednim poljimatablicew3schools primjer1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 14

XHTML ‐ liste• neuređena lista– lista se kreira pomoću taga (unordered list), a svaki element listekreira se pomoću taga (list item)– sintaksa: prvi element listedrugi element liste• uređena lista– lista se kreira pomoću taga (ordered list), a svaki element listekreira se pomoću taga (list item)– sintaksa: prvi element listedrugi element liste1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 15

XHTML ‐ liste• opisna ili definicijska lista– lista elemenata koja sadrži opis/definiciju svakog elementa– lista se kreira pomoću taga (definition list), svaki element listekreira se pomoću taga , a opis/definicija svakog elementa listekreira se pomoću taga – sintaksa: prvi element liste‐ opis prvog elementa listedrugi element liste‐ opis drugog elementa liste• w3schools primjer –različiti primjeri neuređenih lista, uređenih lista iugnježdenih lista1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 16

XHTML ‐ forme• HTML forme koriste se za slanje podataka poslužitelju (serveru)• forma može sadržavati polja za unos teksta, kućice višestrukog izbora(checkbox), kućice jedinstvenog izbora (radio‐buttons), gumbe za brisanjesadržaja forme ili slanje sadržaja forme• za definiranje forme korsiti se tag • polje za unos teksta –sintaksa:Ime:

XHTML ‐ forme• kućice višestrukog izbora –sintaksa vozim bicikl vozim auto• gumb za slanje unesenog sadržaja poslužitelju ‐ sintaksaKorisničko ime: • w3schools primjeri1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 18

XHTML ‐ iframe• tag– služi za prikazivanje jedne web stranice unutar druge web stranice– sintaksa:...– vrijednosti atributa width i height određuju dimenzije prikazaw3schools primjer– vrijednost atributa frameborder određuje debljinu okvira oko prikazaw3schools primjer– prikaz jedne web stranice unutar druge (primarne) web stranice možese realizirati i klikom na link postavljen na primarnoj web straniciw3schools primjer1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 19

XHTML – meta tagovi• tag služi za opskrbu html dokumenta (web stranice) dodatniminformacijama– opis web stranice, ključne riječi pomoću kojih je web stranicu mogućenaći korištenjem pretraživača, ime autora stranice, datum zadnjepromjene stranice...• sadržaj taga nije vidljiv u prikazu html dokumenta u webpregledniku• tag smješta se između početnog i završnog taga, tj. uzaglavlje html dokumenta• primjer:

XHTML ‐ validacija• sintaktička ispravnost XHTML dokumenta može biti provjerena pomoćuW3C validatora• prije postupka validacije u prvu liniju html dokumenta treba dodati točnuDTD (Document Type Definition) deklaraciju (koja sadrži definicije svihXHTML elemenata, njihovog sadržaja i atributa):– stroga DTD deklaracija –uključuje samo definicije tagova i atributa kojinisu zastarjeli– prijelazna DTD dekalracija – proširenje stroge DTD deklaracijedefinicijama zastarjelih tagova i atributa– frameset DTD dekalaracija – proširenje prijelazne DTD deklaracijetagovima i atributima potrebnima za definiranje frame‐ova u htmldokumentu– XHTML validator1/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 21

XHTML ‐ kratko ponavljanjeDaljnji razvoj HTML‐a – HTML51/3/2012 Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek 22