Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Transkriptio

1 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 "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>esimerkkidokumentti</title> </head> <body> tämä dokumentti on <validi> <a href=" 1.0</a> -dokumentti. </body > </html> Kerrataan HTML-dokumenttien käsitteitä ja syntaksia (oletetaan esim. HTML 3.2 perusteiltaan jo tunnetuksi). Mitä yllä oleva oikeastaan tarkoittaa? RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 42

2 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 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 43

3 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" " 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?? RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 44

4 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> ks. kuva tyttö ja joutsen: <img src="tytto-ja-joutsen.jpg" alt="tyttö ja joutsen"/> </body> Elementtejä rajaavat alku- ja lopputagit, poikkeuksena tyhjät elementit Elementtien alku- ja lopputageista tulee muodostua aidosti sisäkkäinen elementtirakenne ([proper nesting]) RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 45

5 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> tyylikäs dokumentti! 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> korostettu 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 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 46

6 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) RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 47

7 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 ( ) 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 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 48

8 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;">  <!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, RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 49

9 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 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 50

10 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 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 51

11 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 RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 52

12 Huomioita XHTML:n kirjoittamisesta Elementtirakenteiden on oltava aidosti sisäkkäisiä, esim: very important text. - 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) RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 53

13 Attribuutin arvon ympärillä on aina käytettävä lainaus- tai merkkejä, esim: <a href=" kotisivu</a> <img src='televisio.gif' alt='televisio, 28"'/> Yksinkertainen XHTML-dokumentti: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>taas yksi XHTML-esimerkki</title> </head> <body> jälleen yksi <a href=" -esimerkki. </body> </html> Huomaa: dokumentin kielioppi on XML:n mukainen mutta elementtien ja attribuuttien nimet (muutamaa lukuun ottamatta) ovat tuttuja vanhoista HTMLversioista RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 54

14 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 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: - XHTML Basic: - Modularization of XHTML: - XHTML 1.1: RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 55

15 Katso myös Simppeli HTML-tutoriaali aloittelijoille, "Getting started with HTML" (ks. ) HTML 4.01 (ks. ) josta SGML:n ja HTML:n suhteesta kiinnostuneiden kannattaa tutustua osaan "On SGML and HTML" (ks. ) XHTML 1.0 (ks. ) HTML 3.2 (ks. ) Vaikka selaimet eivät HTML-dokumentteja kriittisesti jäsennäkään, voi omia (ja miksei muidenkin) dokumentteja validoida W3C:n HTML Validation Servicellä (ks. ) Lopuksi nyanssi WWW-kivikaudelta: ensimmäinen HTML-versio (ks. hypertext/hypertext/www/markup/markup.html ) RAKENTEISET DOKUMENTIT (kevät 2004) luentorunko ON & JH 56