XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja
Sisältö XML Yleensä Eri kieliä XHTML CSS XSL
XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi versio Suunniteltu erityisesti WWW:in Metakieli - kuvauskielten kuvauskieli
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
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ää
XML kieliä XML Schema MathML SMIL Scalable Vector Graphics (SVG) XHTML XForms X3D
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
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ä
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ä
XML esimerkki <?xml version="1.0" encoding="iso-8859-1"?> <message> <from>liisa@hut.fi</from> <to>esko@hut.fi </to> <heading>terve</heading> <body> Miten menee?</body> </message>
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
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>
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
XForms
SVG Scalable Vector Graphics Määrittää vektorigrafiikkaa XML muodossa Vektorigrafiikka ei menetä tarkkuutta kokoa muutettaessa Elementtejä voidaan animoida
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
DOM-puu html <html> <body> body <h1>otsikko</h1> <p>tekstiä h1 p <a>linkki</a> </p> </body> # # a </html> #
Node NodeList Document Element Attr Text CData Comment DOM elementit
DTD Document Type Definition Määrittää mitä elementtejä kieli voi sisältää Määrittää dokumenttien rakenteen Kullakin XML kielellä oma, ei kuitenkaan pakollinen
Esim. DTD <!DOCTYPE message [ <!ELEMENT message (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]>
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
Esim. XML Schema <?xml version="1.0" encoding="iso-8859-1"?> <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>
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
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
Esim. Namespace <?xml version="1.0" encoding="iso-8859-1"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:smil="http://www.w3.org/2001/smil20/language"> <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>
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ä
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
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
HTML:n ja XHTML:n erot Tagien attribuuteilla tulee olla jokin arvo ja se pitää olla lainausmerkeissä name attribuutin korvaa id attribuutti
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 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
Esim. XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.dtd"> <html> <head> <title>title of the document</title> </head> <body> <h1>hello World</h1> </body> </html>
CSS Cascading Style Sheets W3C Recommendation CSS1 1996 CSS2 1998 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
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-tagissa viittaus tiedostoon) 3. Sisäinen tyylisivu (head-tagin sisällä) 4. Tyylimääritys tagin 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 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: http://jigsaw.w3.org/css-validator/
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
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
<?xml version="1.0" encoding="iso-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <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>
XSL muunnos <html> <body> <h2>message</h2> <table border="1"> <tr><td>from: liisa@hut.fi </td></tr> <tr><td>to: esko@hut.fi </td></tr> <tr><td>subject: Terve</td></tr> <tr><td>miten menee?</td></tr> </table> </body> </html>
XSL ja CSS HTML XML Muunnokset Syntaksi CSS Kyllä Kyllä Ei CSS XSL Ei Kyllä Kyllä XML
Linkkejä www.w3.org www.cs.tut.fi/~jkorpela www.w3schools.com www.xsmiles.org