HTML ja CSS T-111.4360 WWW-palvelun suunnittelu Mikko Pohja
Sisältö HTML XHTML CSS DOM DHTML Käytännön esimerkkejä
Kuka tahansa pystyy tekemään yksinkertaisen dokumentin HTML Hyper Text Markup Language HTML määrittelee dokumentin rakenteen Otsikoita, kappaleita, listoja, taulukoita, kuvia, lomakkeita, linkkejä muihin dokumentteihin ym. Yksinkertainen syntaksi mahdollistanut webin valtavan kasvun <h1>otsikko</h1> Osaltaan myös virheet sallivat selaimet
HTML:n historia Tim Berners-Lee kehitti HTML:n CERN:ssä 1990-luvun alussa Julkaistu useita versioita HTML+ (1993), HTML 2 (1995), HTML 3 (1995), HTML 3.2 (1997), HTML 4 (1997), HTML 4.01 (1999) Selaimet eivät ole juurikaan toteuttaneet mitään versiota täydellisesti Sen sijaan jatkuvasti lisänneet muita ominaisuuksia
HTML 4.01 Nykyisin käytössö oleva versio Lisätty mm: CSS:n käyttö Skriptit Kehykset Objektit Parannuksia taulukoihin ja lomakkeisiin Käytettävyys
XHTML EXtensible HyperText Markup Language XHTML 1.0 W3C:n Recommendation 2000 HTML määriteltynä XML:n mukaan XHTML 1.0 sisältää HTML 4.01 elementit XML:n syntaksin mukaisesti XML 10 vuotta 10.2.2008 Dokumentti tarkemmin määritelty kuin HTML:ssä Yhdenmukainen muiden XML kielten kanssa
XHTML 1.0 Ensimmäinen suuri muutos HTML:iin vuoden 1997 jälkeen (HTML 4.0) Yhteensopiva HTML 4.01:n kanssa Kolme eri DTD:tä STRICT TRANSITIONAL FRAMESET
XHTML 1.1 Julkaistu 2001 Moduuli-pohjainen XHTML Elementit jaettu moduuleihin Muuten käytännössä sama kuin XHTML 1.0 Strict XHTML Basic sisältää tärkeimmät moduulit ja elementit
XHTML 2.0 W3C Working Draft heinäkuu 2006 Toteuttaa HTML:n alkuperäisen tarkoituksen Ei ole yhteensopiva aikaisempien versioiden kanssa Kuvaa vain dokumentin rakennetta Uusia elementtejä: section, h, nl,... Kaikki elementit voi olla linkkejä (href) Skriptejä korvattu toiminnallisuudella Sisältää myös muita moduuleita XML Events, XForms ja Ruby
Lisäksi XHMTL Basic W3C XHTML Mobile Profile Open Mobile Alliance (OMA)
HTML:n ja XHTML:n erot Eri syntaksi eri parseri XML vs. HTML XHTML dokumentit pitää olla wellformed XML parseri keskeyttää toiminnan kohdatessaan virheen, HTML parseri yrittää korjata sen Esim. XHTML:ssä elementit pitää olla oikein sisäkkäin
Lisää eroja XHTML:ssä tagit kirjoitetaan pienillä kirjaimilla Kaikki elementit pitää sulkea, myös tyhjät Elementtien attribuuteilla tulee olla jokin arvo ja se pitää olla lainausmerkeissä Processing Instructions vain XHTML:ssä XHTML:iin voi sisällyttää elementtejä muista kielistä
Eroja CSS:n suhteen CSS on isot ja pienet kirjaimet erotteleva XHTML:lle, mutta ei HTML:lle HTML luo jotain puuttuvia elementtejä, joten CSS määritykset saattavat toimia eri tavoin Sama Javascript:n suhteen
XML/XHTML webissä W3C päätti siirtyä käyttämään XML:ää eri tekniikoissa Helpompi parsia kuin HTML Voidaan sovittaa yhteen useampia kieliä Onnistunut ratkaisu monen tekniikan suhteen Ei tuonut uusia ominaisuuksia HTML:ään Lisäksi oli jo olemassa valtava määrä HTML-sivuja Tukea niille ei voida lopettaa
WHAT WG Web Hypertext Application Technology Working Group Perustajina Apple, Mozilla ja Opera 2004 Pitivät tärkeänä jatkaa HTML:n kehitystä Nykyään työ jatkuu myös W3C:ssä WHAT WG:n työn pohjalta Mukana kaikki isoimmat selainvalmistajat
HTML 5 Määrittelee kielen, jota voidaan kirjoittaa HTML 5 ja XHTML 5 syntakseilla Määrittelee saman mitä nykyiset selaimet tekee jokatapauksessa Korjaa virheitä, WYSIWYG editointi, XmlHttpRequest, ym. Lisäksi paljon uusia ominaisuuksia Pääasiassa webbisovelluksia varten
HTML 5:n uusia ominaisuuksia Sovelluksen tallennus Integroitu video ja audio Tarkempi rakenteen määrittely Lisää elementtejä Grafiikka API Drag and drop Dokumenttien välinen viestintä Server push Jotain jo toteutettu eri selaimissa Sisällön editointi
Miten valita oikea versio? Käyttökohde vaikuttaa tarvittaviin ominaisuuksiin Selaintuki
Selaintuki HTML 4.01:llä on suurempi tuki kuin XHTML:llä HTML selain voi kuitenkin tulkita XHTML 1.0:aa tietyin ehdoin XHTML 1.0 Appendix C. HTML Compatibility Guidelines XHTML 1.1 ja 2.0 voi tukea vain XHTML selain Jossain mobiililaitteissa tuki vain XHTML Mobile Profile:lle
Formaatin tunnistus selaimessa Selain tunnistaa formaatin HTTP Header:in Content-type:n perusteella application/xhtml+xml application/xml text/xml text/html Sen perusteella selain valitsee oikean parserin ym. Kaikki selaimet eivät tue kaikkia tyyppejä
Selaimet XHTML selaimia: Mozilla, Galeon, Firefox, Opera, Amaya, Camino, Chimera, DocZilla, icab, Safari ja WAP2 mobiiliselaimet Yleisimmistä selaimista vain Internet Explorer ei tue application/xhtml+xml -Content-type:ä Tukee text/html:ää ja myös application/xml :ää, mutta vain yleisenä XML:nä XHTML 1.0 dokumentti voidaan lähettää HTML:nä tai yleisenä XML:nä IE:lle
Yleisimmät selaimet [www.netapplications.com tammikuu 2008]
Miksi IE ei tue XHTML:ää? I made the decision to not try to support the MIME type in IE7 simply because I personally want XHTML to be successful in the long run. [...] If we tried to support real XHTML in IE 7 we would have ended up using our existing HTML parser (which is focused on compatibility) and hacking in XML constructs. It is highly unlikely we could support XHTML well in this way. - Chris Wilson, Platform Architect of the Internet Explorer, IEBlog 15.9.2005
Tuetuin versio HTML 4.01 ja XHTML 1.0 XHTML:n etuina helpompi ylläpito ja yhteensopivuus tulevien formaattien kanssa
CSS Cascading Style Sheets W3C Recommendation CSS1 1996 CSS2 1998 CSS3 tulossa Nyt käytössä 2.1 Tyyleillä määritetään kuinka HTML tai XML elementit näytetään Väri, paikka, koko, jne. Tyylit talletettu tyylisivuille (style sheet) Säästää paljon vaivaa Yhtenäinen ulkoasu helposti koko sivustolle
Syntaksi elementti {ominaisuus: arvo} body {background-color: red} h1, h2 {color: rgb(210,0,180)} class-attribuutti p.right {text-align: right} HTML: <p class= right > </p> id-attribuutti #sum {font-size: 16pt} HTML: <td id= sum > </td>
Tyylien määritys Useat tyylimääritykset ketjutetaan yhdeksi Ketjutusjärjestys 1. Selaimen oletusarvot 2. Ulkoinen tyylisivu (link-elementissä viittaus tiedostoon) 3. Sisäinen tyylisivu (head-elementin sisällä) 4. Tyylimääritys elementin sisällä
Mediatyypit Voidaan määritellä erilaiset tyylit eri päätelaitteille Tyyppejä aural braille handheld print projection screen tv
Esim. Mediatyypit @media screen { p.test {font-family:verdana,sans-serif; fontsize:14px} } @media print { p.test {font-family:times,serif; font-size:10px} } @media screen,print { p.test {font-weight:bold} }
CSS ja (X)HTML Erota sisältö ja ulkoasu Sisältö HTML-tiedostoon Tyylit CSS-tiedostoon Vältä erityisesti tyylimäärityksiä tagien sisällä Sensijaan: class- ja id-attribuutit ja span ja div elementit
CSS Box Model
Laatikoiden sijoittelu Flow Block:it allekain, inline:t peräkkäin Absolute position Relative position Float
Laatikoiden koon määritys Absoluuttinen Suhteellinen Prosentuaalinen Suhteessa fonttikokoon
Päätelaitteet Resoluutio vaihtelee paljon Puhelimista isoihin pöytäkoneisiin Absoluuttinen koko ja sijainti ei toimi kaikilla resoluutioilla Suhteelliset määrittelyt parempia Jossain selaimissa automaattinen ulkoasun uudelleenmuokkaus
Fontit Saatavuus riippuu järjestelmästä Jos fonttia ei löydy, käytetään oletusfonttia Kannattaa testata useammalla käyttöjärjestelmällä CSS: body {font-family: Georgia, Garamond, Verdana, Helvetica}
DOM Document Object Model Ohjelmointirajapinta dokumentin hallintaan DOM on HTML/XML dokumentin puumalli Dokumentin luonti Rakenteen navigointi Elementtien lisäys, poisto ja muokkaus
DOM-puu html <html> <body> <h1>otsikko</h1> body <p>tekstiä <a>linkki</a> h1 p </p> </body> # # a </html> #
DHTML Dynamic HTML Ei standardi, markkinointitermi HTML + CSS + Javascript Mahdollistaa dokumentin (DOM) muokkauksen selaimessa Javascriptin avulla Tapahtumakäsittelijät kutsuvat Javascriptfunktioita Esim. <h1 onclick= changecolor() >
Tapahtumakäsittelijät onabort onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseover onmouseout onreset onselect onsubmit onunload