HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

Transkriptio

1 HTML ja CSS T WWW-palvelun suunnittelu Mikko Pohja

2 Sisältö HTML XHTML CSS DOM DHTML Käytännön esimerkkejä

3 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

4 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

5 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

6 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 Dokumentti tarkemmin määritelty kuin HTML:ssä Yhdenmukainen muiden XML kielten kanssa

7 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

8 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

9 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

10 Lisäksi XHMTL Basic W3C XHTML Mobile Profile Open Mobile Alliance (OMA)

11 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

12 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ä

13 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

14 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

15 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

16 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

17 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

18 Miten valita oikea versio? Käyttökohde vaikuttaa tarvittaviin ominaisuuksiin Selaintuki

19 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

20 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ä

21 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

22 Yleisimmät selaimet [ tammikuu 2008]

23 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

24 Tuetuin versio HTML 4.01 ja XHTML 1.0 XHTML:n etuina helpompi ylläpito ja yhteensopivuus tulevien formaattien kanssa

25 CSS Cascading Style Sheets W3C Recommendation CSS CSS 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

26 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>

27 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ä

28 Mediatyypit Voidaan määritellä erilaiset tyylit eri päätelaitteille Tyyppejä aural braille handheld print projection screen tv

29 Esim. screen { p.test {font-family:verdana,sans-serif; fontsize:14px} print { p.test {font-family:times,serif; font-size:10px} screen,print { p.test {font-weight:bold} }

30 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

31 CSS Box Model

32 Laatikoiden sijoittelu Flow Block:it allekain, inline:t peräkkäin Absolute position Relative position Float

33 Laatikoiden koon määritys Absoluuttinen Suhteellinen Prosentuaalinen Suhteessa fonttikokoon

34 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

35 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}

36 DOM Document Object Model Ohjelmointirajapinta dokumentin hallintaan DOM on HTML/XML dokumentin puumalli Dokumentin luonti Rakenteen navigointi Elementtien lisäys, poisto ja muokkaus

37 DOM-puu html <html> <body> <h1>otsikko</h1> body <p>tekstiä <a>linkki</a> h1 p </p> </body> # # a </html> #

38 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() >

39 Tapahtumakäsittelijät onabort onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseover onmouseout onreset onselect onsubmit onunload