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

Koko: px

Aloita esitys sivulta:

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

Hannu Lasse Kahma
6 vuotta sitten
Katselukertoja:

1 , XHTML ja CSS T Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi versio Suunniteltu erityisesti WWW:in Metakieli - kuvauskielten kuvauskieli Kuvaa dokumentin loogista rakennetta Kuvaa tietoa Tagejä ei ole määritelty valmiiksi Kukin voi luoda tarvitsemansa kielen Voidaan ajatella tietokannan ASCIIversiona :n ja HTML:n ero ei korvaa HTML:ää kielet kuvaavat tietoa ja kertovat mitä tieto on HTML suunniteltiin esittämään tietoa ja kertomaan miltä tieto näyttää kieliä Schema MathML Synchronized Multimedia Integration Language (SMIL) Scalable Vector Graphics (SVG) XHTML XForms 1

2 Käyttötarkoituksia Tiedonsiirto erilaisten järjestelmien välillä Sisältö pelkkää tekstiä Voidaan luoda kokonaan uusia kieliä Tietokannoissa Erottaa tiedon HTML:stä Sisältö :na Ulkoasu HTML:na Syntaksi Elementit esitetään tageina <...> Kaikilla elementeillä pitää olla lopputagi, myös tyhjillä Isot ja pienet kirjaimet merkitsevät Tagit pitää oikein sisennetty 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ä esimerkki <?xml version="1.0" encoding="iso "?> <message> <from>liisa</from> <to>esko</to> <heading>terve</heading> <body> Miten menee?</body> </message> DOM Document Object Model API dokumentin hallintaan DOM on dokumentin puu-malli Dokumentin luonti Rakenteen navigointi Elementtien lisäys, poisto ja muokkaus Node NodeList Document Element Attr Text CData Comment DOM elementit 2

3 DTD Document Type Definition Määrittää mitä elementtejä kieli voi sisältää Määrittää dokumenttien rakenteen Kullakin 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)> ]> Schema -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. 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> </schema> Validointi Syntaksin mukainen dokumentti on Well Formed DTD:n tai Scheman mukainen dokumentti on Valid Valid dokumentti on aina myös Well Formed Virhe dokumentissa pysäyttää ohjelman Namespaces kieliä ja dokumentteja voidaan yhdistellä Voi esiintyä samannimisiä tagejä, joilla kuitenkin eri tarkoitus Tagit erotaan määrittelemällä Namespace kielelle Määritetään juuri-tagissa attribuuttina 3

4 Esim. Namespace XHTML <?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> EXtensible HyperText Markup Language XHTML 1.0 W3C:n Recommendation 2000 Korvaa HTML 4.01:n Dokumentti tarkemmin määritelty kuin HTML:ssä HTML määriteltynä :n mukaan XHTML sisältää HTML 4.01 elementit :n syntaksin mukaisesti 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ö HTML:n ja XHTML:n erot XHTML:ssä elementit pitää olla oikein sisennetty 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 DTD XHTML dokumentti koostuu kolmesta osasta DOCTYPE head body Tällä hetkellä kolme eri DTD:tä STRICT TRANSITIONAL FRAMESET 4

5 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> CSS Cascading Style Sheets W3C Recommendation CSS CSS CSS3 tulossa Tyyleillä määritetään kuinka HTML elementit näytetään Tyylit talletettu tyylisivuille (style sheet) Säästää paljon vaivaa Yhtenäinen ulkoasu helposti koko saitille Alunperin suunniteltu korvaamaan IE:n ja Netscapen omat tagit 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ä 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> Mediatyypit Voidaan määritellä erilaiset tyylit eri päätelaitteille Tyyppejä aural braille handheld print projection screen tv 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} } 5

6 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, id, span, div Validaattori: XSL Extensible Stylesheet Language kieli Tyylisivut :ää varten Monta eri toiminnallisuutta Muuntaa dokumentteja (HTML) Suodattaa ja lajittelee tietoa Muokkaa ulkoasua Esim. datan perusteella XSL ja CSS Linkkejä HTML CSS XSL Ei Muunnokset Ei Syntaksi CSS 6

Samankaltaiset tiedostot

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

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja 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