3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. <?xml version="1.0" encoding="iso-8859-15"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15"/> <title>esimerkkidokumentti</title> </head> <body><!-- Dokumentin sisältö alkaa --> <p>tämä dokumentti on <validi> <a href="http://www.w3.org/tr/xhtml1/">xhtml 1.0</a> -dokumentti.</p> </body > </html> Kerrataan HTML-dokumenttien käsitteitä ja syntaksia (oletetaan esim. HTML 3.2 perusteiltaan jo tunnetuksi). Mitä yllä oleva oikeastaan tarkoittaa? 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 42
Mikä tai mitä HTML on? HTML (Hypertext Markup Language) on hypertekstin merkkaamiseen tarkoitettu merkintäkieli HTML:n ensimmäiset versiot ovat ns. SGML-sovelluksia, viimeisimpänä HTML 4.01 (edelliset merkittävät saman linjan versiot ovat HTML 4.0, HTML 3.2 ja HTML 2.0) - HTML on määritelty SGML:lla; syntaksi siten SGML:n mukaista - dokumenttien tyyppi on määritelty standardoidun & julkisen SGML-DTD:n muodossa - tyypillistä: kovakoodattu elementtien formatointi vs. tyylit Nykyään HTML:ää kehitetään XML:n kautta seuraavan sukupolven HTML:nä: tuloksena XHTML 1.0, joka on ns. XML-sovellus Uusin HTML:n versio on XHTML 1.1 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 43
HTML-dokumentin esittelyosa HTML-dokumentti alkaa esittelyosalla (joka voi myös puuttua, tällöin oletuksena on HTML 3.2), esim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Kyseessä on XML-dokumentin tyyppijulistus ([DOCTYPE declaration]), joka kertoo XML-prosessorille sovitulla tavalla, että kyseessä on HTML-tyyppinen dokumentti yleensä HTML-dokumentteja lukevat ohjelmat ovat kuitenkin yleisiä XML-prosessoreita huomattavasti erikoistuneempia!! Viittaukset ISO-standardeihin (esim. +/- -liput ja kielikoodit) Ongelma: mitä DOCTYPEen tulee kirjoittaa, jos kuitenkin aiotaan käyttää esim. HTML:n Netscape-laajennuksia?? 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 44
Elementit ja attribuutit HTML-dokumentin rakenne muodostuu pääasiassa elementeistä Lailliset elementit ja niiden korrekti käyttö on kuvattu HTML-suosituksessa (HTML 2.0, 3.2, 4.0, 4.01, jne.) Ks. HTML-esim: <body> <p>ks. kuva <em>tyttö ja joutsen</em>: <img src="tytto-ja-joutsen.jpg" alt="tyttö ja joutsen"/> </p> </body> Elementtejä rajaavat alku- ja lopputagit, poikkeuksena tyhjät elementit Elementtien alku- ja lopputageista tulee muodostua aidosti sisäkkäinen elementtirakenne ([proper nesting]) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 45
Osa elementeistä on tarkoitettu esitettäväksi lukijalle suoraan, osa ei, esim: <head> <title>otsikko</title> <link rel="stylesheet" href="tyyli.css" type="text/css"/> </head> <body> <p>tyylikäs dokumentti!</p> Esitettävät (display-tyyppiset) elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) tai listatyylisiä objekteja ([list item]), vrt. esim: <h3>otsikko</h3> <strong>korostettu</strong> asia <ol> <li>yksi</li> <li>kaksi</li> <li>kolme</li> </ol> Lohkotyyliset objektit esitetään suorakaiteena (margin/border/padding - attribuutit), tekstityyliset merkkivirtana ja listatyyliset lohkotyylin erikoistapauksena suorakaiteena 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 46
Huomaa termien elementti ja tagi eri merkitys: tagit merkitsevät elementin (elementtien merkitseminen tagien avulla parantaa niiden luettavuutta, toki myös muut menetelmät olisivat periaatteessa mahdollisia) Elementeille voidaan antaa sisällön lisäksi myös attribuutteja, joiden arvo määrätään tutun "="-operaation avulla elementin alkutagissa. Attribuuttien arvot ympäröidään aina lainaus- tai heittomerkein Attribuuttimääritysten järjestyksellä ei ole merkitystä Jos selain ei ymmärrä tagia tai attribuuttia, jätetään se huomiotta (tästä seuraa kaikenlaisia ongelmia) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 47
HTML-jäsentimistä Vanhan käytännön mukaisesti HTML-dokumentteja jäsennetään ymmärtäväisellä asenteella - selaimet ohittavat virheet ja tuntemattomat koodit ellei toisin määrätä - luovat arvaukset (esim. "<" ja ">" -merkit) - selainten ja selainversioiden erot! On kuitenkin olemassa myös validoivia HTML-jäsentimiä, joiden avulla myös HTML-dokumenttien kielioppi ja rakenne on mahdollista tarkastaa: ks. esim: - W3C HTML Validation Service ( http://validator.w3.org/ ) Validius ei kuitenkaan takaa sitä, että elementtejä on käytetty kuvailevan merkkauksen hengessä oikein! Koska XHTML 1.0 on XML-sovellus, onnistuu validien XHTML-dokumenttien käsittely myös yleisillä XML-editoreilla ja selaimilla 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 48
Miten HTML-kieli on määritelty? Laillinen elementtirakenne annetaan XHTML 1.0 DTD:ssä XML:n tyyppimäärityskielen mukaisina sääntöinä tyyliin: <!ENTITY % attrs "%coreattrs; %i18n; %events;"> <!-- Unordered list --> <!ELEMENT ul (li)+> <!ATTLIST ul %attrs;> Idea on selvä: määrityksessä esitellään HTML-dokumentin looginen rakenne Se, miten koodeja pitää käyttää tai mitä ne tarkoittavat kerrotaan sanallisesti tai esitetään esimerkkien avulla Yo. esimerkissä on helposti tunnistettavia osia: elementtimerkinnät (erityisesti "<"- ja ">"-merkit) kommentit, elementtien nimet, säännölliset lausekkeet, 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 49
XHTML Ensimmäinen XML-kieliopin mukainen HTML-versio on XHTML 1.0 (Extensible HyperText Markup Language) - XHTML 1.0 on HTML 4 -kielen XML-kieliopin mukainen uudelleenmuotoilu - kärjistys: XHTML säilyttää HTML 4-kuvauskielen elementtien ja attribuuttien nimet ja tulkinnan entisellään, kielioppi vaihtuu XML:sta SGML:iin XHTML 1.0 jakaantuu (HTML 4.01:n tapaan) kolmeen dokumenttityyppiin: - XHTML 1.0 Strict koostuu pelkästään rakenteen kuvaamiseen tarkoitetuista elementeistä ja attribuuteista (ulkoasu määritellään tyylitiedostoilla) - XHTML 1.0 Transitional sisältää edelleen joukon dokumentin ulkoasuun liittyviä ominaisuuksia (esimerkiksi body-elementin bgcolor-, text- ja linkattribuutit) - XHTML 1.0 Frameset on identtinen Transitional-määrityksen kanssa, paitsi: kehysten määrittelemiseen tarvittava frameset-elementti korvaa bodyelementin 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 50
Miksi XHTML? XHTML on XML-sovellus - suuri osa W3C:n uusista suosituksista perustuu XML:ään: yhteensopivuus XHTML mahdollistaa XML:n uusien ominaisuuksien hyödyntämisen - erityisesti uusien elementtien esittely (ei mahdollista SGML-pohjaisissa HTML-versioissa, paitsi div- ja span-elementtien sekä class-attribuutin yhteiskäyttö): laajennettavuus W3C:n "Modularization of XHTML" määrittelee HTML-sanaston jakamisen tarkoituksenmukaisiin osiin (moduuleihin) - yksittäisessä dokumentissa käytetyt tai tietyn sovelluksen (esim. selain) tukemat HTML-kielen ominaisuudet voidaan yksilöidä tarkemmin: modulaarisuus, profilointi 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 51
XHTML Basic pienin yhteinen tekijä XHTML Basic kokoaa yhteen joukon moduuleita siten, että - moduuleiden sisältämät ominaisuudet on mahdollista toteuttaa myös yksinkertaisessa päätelaitteessa (kännykkä, PDA, digi-tv-päätelaite) - moduuleiden sisältämien ominaisuuksien avulla on mahdollista toteuttaa tarkoituksenmukaista hypertekstiä XHTML Basic mahdollistaa esimerkiksi nämä: - perusteksti (sisältäen otsikot, kappaleet ja listat) - hyperlinkit ja linkit esim. tyylitiedostoihin - yksinkertaiset lomakkeet - yksinkertaiset taulukot - kuvat - metatieto 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 52
Huomioita XHTML:n kirjoittamisesta Elementtirakenteiden on oltava aidosti sisäkkäisiä, esim: <p>very <em>important</em> text.</p> - HUOM: sääntö on voimassa myös SGML:n mukaisissa HTML-versiossa mutta selaimet eivät tätä yleensä tarkasta Elementtien ja attribuuttien nimet kirjoitetaan pienellä (XML erottelee isot ja pienet kirjaimet) Elementin lopputagi on aina lisättävä, esim: <ul> <li>eka</li> </ul> Vaihtoehtoisesti käytetään tyhjän elementin tagia, esim: <hr /> - HUOM: tyhjän elementin tagissa kannattaa lisätä rivinvaihto ennen "/"- merkkiä (parantaa yhteensopivuutta vanhojen selainten kanssa) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 53
Attribuutin arvon ympärillä on aina käytettävä lainaus- tai merkkejä, esim: <a href="http://www.w3.org">w3c:n kotisivu</a> <img src='televisio.gif' alt='televisio, 28"'/> Yksinkertainen XHTML-dokumentti: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>taas yksi XHTML-esimerkki</title> </head> <body> <p>jälleen yksi <a href="http://www.w3.org/tr/xhtml1/">xhtml</a> -esimerkki.</p> </body> </html> Huomaa: dokumentin kielioppi on XML:n mukainen mutta elementtien ja attribuuttien nimet (muutamaa lukuun ottamatta) ovat tuttuja vanhoista HTMLversioista 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 54
XHTML on HTML:n tulevaisuus Nykyinen ja tuleva W3C:n tekemä HTML-kuvauskielen kehitystyö liittyy pelkästään XHTML:ään Uusin HTML-kielen versio on XHTML 1.1 - perustuu XHTML 1.0 Strict dokumenttityyppiin ja moduuleihin - suunniteltu toimimaan pohjana tuleville XHTML-perheen määrityksille XHTML 2.0 on jo kehitteillä Lisätietoa: - XHTML 1.0: http://www.w3.org/markup/#xhtml1 - XHTML Basic: http://www.w3.org/markup/#xhtml-basic - Modularization of XHTML: http://www.w3.org/markup/#xhtml-modularization - XHTML 1.1: http://www.w3.org/markup/#xhtml11 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 55
Katso myös Simppeli HTML-tutoriaali aloittelijoille, "Getting started with HTML" (ks. http://www.w3.org/markup/guide/ ) HTML 4.01 (ks. http://www.w3.org/tr/html4/ ) josta SGML:n ja HTML:n suhteesta kiinnostuneiden kannattaa tutustua osaan "On SGML and HTML" (ks. http://www.w3.org/tr/html4/intro/sgmltut.html ) XHTML 1.0 (ks. http://www.w3.org/tr/xhtml1/ ) HTML 3.2 (ks. http://www.w3.org/tr/rec-html32.html ) Vaikka selaimet eivät HTML-dokumentteja kriittisesti jäsennäkään, voi omia (ja miksei muidenkin) dokumentteja validoida W3C:n HTML Validation Servicellä (ks. http://validator.w3.org/ ) Lopuksi nyanssi WWW-kivikaudelta: ensimmäinen HTML-versio (ks. http://www.w3.org/history/19921103- hypertext/hypertext/www/markup/markup.html ) 73275 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 56