XHTML - Odjel za matematiku
XHTML - Odjel za matematiku
XHTML - Odjel za matematiku
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Web programiranje i primjene<strong>XHTML</strong>1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek1
HTMLHTML – Hyper Text Markup Language• HTML je jezik <strong>za</strong> 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 <strong>za</strong>tvorenog u šiljaste <strong>za</strong>grade, npr.• HTML tagovi obično dolaze u parovima –svaki početni tag (npr. )ima odgovarajući <strong>za</strong>vrš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, <strong>za</strong>glavlje i tijelo html dokumenta)• HTML dokument ima ekstenziju .html ili .htm1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek2
XML ‐ ukratkoXML ‐ eXtesible Markup Language• XML je jezik čija je primarna <strong>za</strong>daća pohrana, organi<strong>za</strong>cija i prijenospodataka• XML tagove korisnik definira sam –svitagovi dolaze u parovima (početni i<strong>za</strong>vršni tag), pravila <strong>za</strong> 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 3
<strong>XHTML</strong><strong>XHTML</strong> ‐ eXtensible Hyper Text Markup Language• <strong>XHTML</strong> je gotovo identičan verziji HTML 4.01• <strong>XHTML</strong> je stroža i čišća verzija HTML‐a• <strong>XHTML</strong> se sastoji od svih oznaka HTML‐a 4.1. na koje su primjenjenastroga sintaktička pravila XML‐a• <strong>XHTML</strong> je W3C preporuka od 26.1.2000.• W3C ‐ normativna definicija <strong>XHTML</strong>‐a 1.0.Neke razlike između HTML‐a i <strong>XHTML</strong>‐a1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 4
<strong>XHTML</strong> – elementi• <strong>XHTML</strong> element – sadržaj – <strong>XHTML</strong> element počinje početnim tagom (npr. )– <strong>XHTML</strong> element <strong>za</strong>vršava <strong>za</strong>vršnim tagom ( je <strong>za</strong>vršni tag taga)– u <strong>XHTML</strong>‐u ime taga mora biti napisano malim slovima– sadržaj <strong>XHTML</strong> elementa je sve što se nalazi između početnog i<strong>za</strong>vršnog taga (to mogu biti drugi tagovi postavljeni u skladu s LIFOprincipom i običan tekst)– neki <strong>XHTML</strong> elementi nemaju sadržaj –prazni <strong>XHTML</strong> elementi– prazne <strong>XHTML</strong> elemente <strong>za</strong>tvarmo u sklopu početnog taga na sljedećinačin:– većina <strong>XHTML</strong> elemenata može imati atribute1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 5
<strong>XHTML</strong> ‐ atributi• <strong>XHTML</strong> atributi– snabdjevaju <strong>XHTML</strong> elemente dodatnim informacijama koje najčešćesluže <strong>za</strong> formatiranje prika<strong>za</strong> 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 6
<strong>XHTML</strong> – naslovi, paragrafi i komentari• <strong>XHTML</strong> naslovi (<strong>za</strong>glavlja) definirani su tagovima do – Najveći naslov– Najmanje naslov– w3schools primjer• <strong>XHTML</strong> paragraf definiran je tagom – Tekst paragrafa– w3schools primjer• <strong>XHTML</strong> komentari– čine html dokument razumljivijim i čitljivijim, ali nisu prika<strong>za</strong>ni u webpregledniku– sintaksa: – w3schools primjer1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 7
<strong>XHTML</strong> –važni prazni elementi• <strong>XHTML</strong> prijelom (prela<strong>za</strong>k u novi red)– definiran tagom koji ne nosi nikakav sadržaj– tekst u prvom redu... ... tekst u drugom redu– w3schools primjer• <strong>XHTML</strong> 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 8
<strong>XHTML</strong> –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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 9
<strong>XHTML</strong> –atribut style (CSS)• atribut style ‐ nepraktičan i vremenski <strong>za</strong>htjevan način stiliziranja htmldokumenta ‐ preporučuje se stiliziranje html dokumenta korištenjemvanjske stilske stranice (CSS)• definiranje po<strong>za</strong>dinske 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 10
<strong>XHTML</strong> ‐ linkovi• tag ‐ služi <strong>za</strong> postavljanje linka (poveznice) u html dokumentu– na drugi dokument, pomoću atributa hrefnpr. <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>w3schools 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 11
<strong>XHTML</strong> ‐ tablice• tagovi , , i – tag služi <strong>za</strong> 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 <strong>za</strong>glavlja 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: <strong>za</strong>glavlje 1, red 1<strong>za</strong>glavlje 2, red 1 polje 1, red 2polje 2, red 2 polje 1, red 3polje 2, red 3 1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 13
<strong>XHTML</strong> ‐ 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 <strong>za</strong> povećavanje razmaka među susjednim poljimatablicew3schools primjer1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 14
<strong>XHTML</strong> ‐ 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 15
<strong>XHTML</strong> ‐ 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 16
<strong>XHTML</strong> ‐ forme• HTML forme koriste se <strong>za</strong> slanje podataka poslužitelju (serveru)• forma može sadržavati polja <strong>za</strong> unos teksta, kućice višestrukog izbora(checkbox), kućice jedinstvenog izbora (radio‐buttons), gumbe <strong>za</strong> brisanjesadržaja forme ili slanje sadržaja forme• <strong>za</strong> definiranje forme korsiti se tag • polje <strong>za</strong> unos teksta –sintaksa:Ime:
<strong>XHTML</strong> ‐ forme• kućice višestrukog izbora –sintaksa vozim bicikl vozim auto• gumb <strong>za</strong> slanje unesenog sadržaja poslužitelju ‐ sintaksaKorisničko ime: • w3schools primjeri1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 18
<strong>XHTML</strong> ‐ iframe• tag– služi <strong>za</strong> prikazivanje jedne web stranice unutar druge web stranice– sintaksa:...– vrijednosti atributa width i height određuju dimenzije prika<strong>za</strong>w3schools primjer– vrijednost atributa frameborder određuje debljinu okvira oko prika<strong>za</strong>w3schools 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 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 19
<strong>XHTML</strong> – meta tagovi• tag služi <strong>za</strong> 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 <strong>za</strong>dnjepromjene stranice...• sadržaj taga nije vidljiv u prikazu html dokumenta u webpregledniku• tag smješta se između početnog i <strong>za</strong>vršnog taga, tj. u<strong>za</strong>glavlje html dokumenta• primjer:
<strong>XHTML</strong> ‐ validacija• sintaktička ispravnost <strong>XHTML</strong> 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 svih<strong>XHTML</strong> elemenata, njihovog sadržaja i atributa):– stroga DTD deklaracija –uključuje samo definicije tagova i atributa kojinisu <strong>za</strong>starjeli– prijelazna DTD dekalracija – proširenje stroge DTD deklaracijedefinicijama <strong>za</strong>starjelih tagova i atributa– frameset DTD dekalaracija – proširenje prijelazne DTD deklaracijetagovima i atributima potrebnima <strong>za</strong> definiranje frame‐ova u htmldokumentu– <strong>XHTML</strong> validator1/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 21
<strong>XHTML</strong> ‐ kratko ponavljanjeDaljnji razvoj HTML‐a – HTML51/3/2012 <strong>Odjel</strong> <strong>za</strong> <strong>matematiku</strong>, Sveučilište J.J. Strossmayera, Osijek 22