XML, XHTML ja CSS. T Hypermediadokumentin laatiminen. Mikko Pohja

Koko: px

Aloita esitys sivulta:

Download "XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja"

Kirsi Lehtonen
8 vuotta sitten
Katselukertoja:

1 XML, XHTML ja CSS T Hypermediadokumentin laatiminen Mikko Pohja

2 Sisältö XML Yleensä Eri kieliä XHTML CSS XSL

3 XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi versio Suunniteltu erityisesti WWW:in Metakieli - kuvauskielten kuvauskieli

4 XML Kuvaa dokumentin loogista rakennetta Kuvaa tietoa Tietokoneen ymmärtämällä tavalla Elementtejä ei ole määritelty valmiiksi Kukin voi luoda tarvitsemansa kielen Voidaan ajatella tietokannan ASCIIversiona

ei ole määritelty valmiiksi Kukin voi luoda

5 XML:n ja HTML:n ero XML ei korvaa HTML:ää XML kielet kuvaavat tietoa ja kertovat mitä tieto on HTML suunniteltiin esittämään tietoa ja kertomaan miltä tieto näyttää

6 XML kieliä XML Schema MathML SMIL Scalable Vector Graphics (SVG) XHTML XForms X3D

7 Käyttötarkoituksia 1. Voidaan luoda kokonaan uusia kieliä 2. Ohjaus dokumenttejä Tiedonsiirto erilaisten järjestelmien välillä 3. Tietokannoissa 4. Esityksissä 5. Erottaa tiedon HTML:stä Sisältö XML:na Ulkoasu HTML:na Muunnos XSL:n avulla

välillä 3. Tietokannoissa 4. Esityksissä 5.

8 Syntaksi Elementit esitetään tageina <...> Kaikilla elementeillä pitää olla lopputagi, myös tyhjillä. </p>, <br/> Isot ja pienet kirjaimet merkitsevät Tagit pitää olla keskenään sisäkkäin Dokumentillä on juuri-tagi, jonka sisällä on kaikki muut tagit Attribuuttien arvot pitää olla lainausmerkeissä

</p>, <br/> Isot ja pienet kirjaimet merkitsevät Tagit pitää olla

9 Elementit Elementit voivat olla tyhjiä tai sisältää tekstiä tai muita elementtejä tai molempia Nimeäminen Kirjaimia, numeroita ja muita merkkejä Ei saa alkaa numerolla tai välimerkillä Ei saa alkaa kirjaimilla xml Ei saa sisältää välilyöntejä

numeroita ja muita merkkejä Ei saa alkaa numerolla tai

10 XML esimerkki <?xml version="1.0" encoding="iso "?> <message> </to> <heading>terve</heading> <body> Miten menee?</body> </message>

11 SMIL Synchronized Multimedia Integration Language Kuvaa multimediaesityksiä Elementeille määritetään aika ja paikka Voi sisältää kuvia, ääntä, tekstiä, videokuvaa, animaatioita ja muita dokumentteja Ei määrittele mitään formaatteja MMS-viestit perustuvat SMIL:iin Perustoiminnot mukana

sisältää kuvia, ääntä, tekstiä, videokuvaa, animaatioita ja muita

12 Esim. SMIL <smil> <head> <layout> <region id= reg1 top= 0 left= 0 width= 300 height= 200 /> <region id= reg2 left= 300 width= 300 height= 200 /> </layout> </head> <body> <seq> <img id= id1 src= intro.jpg region= reg1 dur= 4s /> <audio id= id2 src= music.wav dur= 2s /> <par> <video id= id3 src= movie5s.mpg region= reg1 /> <img id= id4 src= intro.jpg begin= 3s region= reg2 /> </par> </seq> </body> </smil>

jpg region= reg1 dur= 4s /> <audio id= id2 src= music.

13 XForms Tulevaisuuden Web-lomakkeet Erottaa tarkoituksen ja ulkoasun Tarkoituksena vähentää palvelinten kuormaa ja tietoliikennettä Skriptit korvattu elementtien toiminnallisuudella Voi olla osana mitä tahansa XML-kieltä Tarvitsee isäntädokumentin Lomake lähetetään XML-dokumenttina Dokumenttia voidaan lukea kokoajan

korvattu elementtien toiminnallisuudella Voi olla osana mitä tahansa

14 XForms

15 SVG Scalable Vector Graphics Määrittää vektorigrafiikkaa XML muodossa Vektorigrafiikka ei menetä tarkkuutta kokoa muutettaessa Elementtejä voidaan animoida

16 XML DOM Document Object Model API XML dokumentin hallintaan DOM on XML dokumentin puu-malli Dokumentin luonti Rakenteen navigointi Elementtien lisäys, poisto ja muokkaus

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

18 Node NodeList Document Element Attr Text CData Comment DOM elementit

19 DTD Document Type Definition Määrittää mitä elementtejä kieli voi sisältää Määrittää dokumenttien rakenteen Kullakin XML kielellä oma, ei kuitenkaan pakollinen

20 Esim. DTD <!DOCTYPE message [ <!ELEMENT message (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]>

21 XML Schema XML-pohjainen vaihtoehto DTD:lle Määrittää sallitut elementit ja rakenteen Korvannee DTD:n Etuja verrattuna DTD:iin Ei tarvitse opetella uutta syntaksia Tukee datatyyppejä Helppo laajentaa ja käyttää uudestaan

22 Esim. XML Schema <?xml version="1.0" encoding="iso "?> <schema> <element name= message > <complextype> <sequence> <element name= from" type= string"/> <element name= to" type="string"/> <element name= heading" type="string"/> <element name= body" type="string"/> </sequence> </complextype> </element> </schema>

23 Validointi Syntaksin mukainen XML dokumentti on Well Formed DTD:n tai XML Scheman mukainen XML dokumentti on Valid Valid dokumentti on aina myös Well Formed Virhe XML dokumentissa pysäyttää ohjelman

24 XML Namespaces XML kieliä ja dokumentteja voidaan yhdistellä Isäntä ja lisätyt kielet Isäntä määrittää layout:in Voi esiintyä samannimisiä elementtejä, joilla kuitenkin eri tarkoitus Elementit erotaan määrittelemällä Namespace kullekin XML kielelle Määritetään juuri-tagissa attribuuttina

25 Esim. Namespace <?xml version="1.0" encoding="iso "?> <html xmlns=" xmlns:smil=" <head> <link rel="stylesheet" type="text/css" href="test3.css" /> </head> <body> <h1>x-smiles Hockey Watch</h1> <smil:video src="../smil/simple/movie5s.mpg" begin="1s" repeatdur="9s"/> </body> </html>

26 XHTML EXtensible HyperText Markup Language XHTML 1.0 W3C:n Recommendation 2000 Korvaa HTML 4.01:n HTML määriteltynä XML:n mukaan XHTML 1.0 sisältää HTML 4.01 elementit XML:n syntaksin mukaisesti Dokumentti tarkemmin määritelty kuin HTML:ssä

27 Miksi XHTML? Nykyään ei tarvitse kirjoittaa tarkasti HTML:n sääntöjen mukaan Vaatii selaimelta paljon korjata mahdollisimman monta virheistä Tulevaisuudessa paljon pieniä päätelaitteita, resurssit eivät riitä XHTML yhteensopiva HTML:n kanssa Erotetaan esitystapa ja sisältö Yhdenmukainen muiden kielten kanssa

28 HTML:n ja XHTML:n erot XHTML:ssä elementit pitää olla oikein sisäkkäin XHTML dokumentit pitää olla wellformed Virheen esiintyessä selain näyttää virheilmoituksen Tagit pienillä kirjaimilla Kaikki tagit pitää sulkea, myös tyhjät

29 HTML:n ja XHTML:n erot Tagien attribuuteilla tulee olla jokin arvo ja se pitää olla lainausmerkeissä name attribuutin korvaa id attribuutti

30 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

31 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

32 XHTML 2.0 W3C Working Draft toukokuu 2003 Korjaa aikaisempien versioiden puutteita ja suunnitteluvirheitä Toteuttaa HTML:n alkuperäisen tarkoituksen Ei ole yhteensopiva aikaisempien versioiden kanssa Kuvaa vain dokumentin rakennetta Uusia tageja: section, h, nl,... Kaikki elementit voi olla linkkejä (href) Skriptejä korvattu toiminnallisuudella Sisältää myös muita moduuleita XML Events, XForms ja Ruby

33 Esim. XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html> <head> <title>title of the document</title> </head> <body> <h1>hello World</h1> </body> </html>

34 CSS Cascading Style Sheets W3C Recommendation CSS CSS CSS3 tulossa Tyyleillä määritetään kuinka HTML tai XML elementit näytetään Tyylit talletettu tyylisivuille (style sheet) Säästää paljon vaivaa Yhtenäinen ulkoasu helposti koko sivustolle Alunperin suunniteltu korvaamaan IE:n ja Netscapen omat tagit

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

36 Tyylien määritys Useat tyylimääritykset ketjutetaan yhdeksi Ketjutusjärjestys 1. Selaimen oletusarvot 2. Ulkoinen tyylisivu (link-tagissa viittaus tiedostoon) 3. Sisäinen tyylisivu (head-tagin sisällä) 4. Tyylimääritys tagin sisällä

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

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

39 CSS ja 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 Validaattori:

40 CSS ja XML XML dokumentin ulkoasu voidaan määritellä CSS:n avulla Vastaa esim. HTML dokumenttia display block, inline, none, table, table-row, table-cell, list-item, jne... position static, relative, absolute, fixed, inherit -> Ei tarvita erillistä XHTML-selainta

41 XSL Extensible Stylesheet Language XML kieli Tyylisivut XML:ää varten Monta eri toiminnallisuutta Muuntaa XML dokumentteja (esim. HTML) Suodattaa ja lajittelee tietoa Muokkaa ulkoasua Esim. datan perusteella

42 <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body> <h2>message</h2> <table border="1"> <tr><td>from: <xsl:value-of select="from"/></td></tr> <tr><td>to: <xsl:value-of select="to"/></td></tr> <tr><td>subject: <xsl:value-of select="heading"/></td></tr> <tr><td><xsl:value-of select="body"/></td></tr> </table> </body> </html> </xsl:template> </xsl:stylesheet>

43 XSL muunnos <html> <body> <h2>message</h2> <table border="1"> <tr><td>from: </td></tr> <tr><td>to: </td></tr> <tr><td>subject: Terve</td></tr> <tr><td>miten menee?</td></tr> </table> </body> </html>

44 XSL ja CSS HTML XML Muunnokset Syntaksi CSS Kyllä Kyllä Ei CSS XSL Ei Kyllä Kyllä XML

45 Linkkejä

Samankaltaiset tiedostot

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002 , XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi