Kirjoittaja: Juice (2004 – 2012).
⚠ Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi. ⚠
Tämä opas on tarkoitettu lukijalle, joka tuntee jo HTML:n ja haluaa oppia XHTML:n. Opas keskittyy XHTML:n ja HTML:n eroavaisuuksiin.
XHTML (eXtensible HyperText Markup Language) on XML-pohjainen koodikieli, joka suunniteltiin korvaamaan HTML (HyperText Markup Language). Alkuun XHTML:ää pidettiin nettisivujen tulevaisuuden kielenä, mutta sittemmin innostus on laantunut, kun HTML:n päivitetty versio HTML5 alkoi muotoutua.
XHTML 1.0 sisältää samat tagit kuin HTML 4.01. XHTML 1.1 on tästä päivitetty versio, josta on karsittu vanhentuneita ominaisuuksia. Näiden seuraajaksi suunniteltu XHTML 2.0 jäi lopulta (vuonna 2009) kesken. Uusi XHTML:n haara on XHTML5, joka on HTML5-koodia XML-muodossa kirjoitettuna.
XHTML pystyy kaikkeen samaan kuin HTML, ja lisäksi siihen voi helposti upottaa muita XML-pohjaisia muotoja kuten SVG-kuvia tai MathML-kaavoja. XHTML saattaa tuntua hankalammalta kuin HTML, koska koodi pitää kirjoittaa tiukempien sääntöjen mukaan eikä virheitä sallita. Sääntöjen etuna on, että virheetkin löytyvät helpommin eivätkä selaimet yritä enää arvailla, mitä koodari on tarkoittanut. Toisaalta pieni virhe voi estää koko sivun näyttämisen, minkä vuoksi koodia muokatessa pitää olla hyvin tarkkana.
XML-dokumentin alussa voi olla XML-määrittely (engl. XML declaration), joka määrittelee dokumentissa käytettävän merkistökoodauksen ja XML:n version.
<?xml version="1.0" encoding="UTF-8" ?>
Jos versio on 1.0 ja merkistökoodaus on UTF-8, merkintä on tarpeeton. XHTML-dokumentin merkistön voi ilmoittaa myös muulla tavalla, esimerkiksi HTTP-otsikoilla ja tietyillä tageilla, joten tätä merkintää ei tarvita juuri koskaan. Lisäksi Internet Explorer 6 ja jotkin sitä vanhemmat selaimet eivät tue tätä ominaisuutta kunnolla, joten käytännössä määritelmä on usein parempi jättää nettisivuilta pois, ellei sen käytölle ole jotain tärkeää syytä.
XHTML-dokumentin ensimmäinen pakollinen osa on DOCTYPE-määrittely. XHTML5:ssä käytetään HTML5:stä tuttua, erittäin lyhyttä DOCTYPE-määrittelyä, jonka tärkein tarkoitus on tyydyttää selaimet, jotka vaativat DOCTYPE-määrittelyn toimiakseen oikein.
<!DOCTYPE html>
XHTML 1.0:sta on kolme versiota: Strict, Transitional ja Frameset. Strict tarkoittaa suomeksi ankaraa ja tinkimätöntä. Tämä nimitys tulee siitä, että tämä on "puhdasta" XHTML:ää. Tämä ei esimerkiksi sisällä vanhentuneita tageja eikä kehyksiä. Tätä suositellaan käytettäväksi CSS:n kanssa.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional on lähinnä samanlainen kuin HTML 4.01.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset-versio sisältää kaikki Transitionalin tagit ja lisäksi kehykset. Kehyksien käyttöä pidetään nykyään huonona tapana.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPE-määrittelyn jälkeen seuraava XHTML-dokumentin pakollinen osa on <html>-tagi. Se kuuluu XHTML:ssä näin:
<html xmlns="http://www.w3.org/1999/xhtml">
Tämä poikkeaa HTML:n yksinkertaisemmasta muodosta siitä syystä, että XHTML on XML-pohjainen kieli, kuten jo johdannossa mainitiin.
HTML-tagin jälkeen tulee <head>-tagi. Huomaa, että edellä mainitun tagin jälkeen on pakko tulla <title>-tagi, eli siis näitten välissä ei saa olla muita tageja. Näin ollen <title> on myös XHTML-dokumentin pakollinen osa. XHTML-dokumentin loppuosa on samanlainen kuin HTML-dokumentin, eli sitten tulee vielä </head>, <body> ja </body> (tai <frameset> ja </frameset>) ja lopuksi </html>.
Laitan asiaa selventääkseni alle vielä esimerkin:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML-esimerkki</title> </head> <body> <p>XHTML on helppo kieli.</p> </body> </html>
XHTML:ssä kaikki tagit (paitsi DOCTYPE-määrittely) tulee kirjoittaa pienin kirjaimin. Esimerkiksi tagi <head> voidaan kirjoittaa HTML-kielessä myös muodossa <HEAD>, mutta tämä merkintätapa on XHTML:ssä kielletty.
Attribuutit tulee myös kirjoittaa pienellä ja niiden arvot tulee laittaa lainausmerkkeihin. Nimen ja arvon välissä on =-merkki, ja sen ympärillä ei saa olla välejä. Attribuuttien arvoja ei saa myöskään lyhentää. Esimerkki:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Attribuuttiesimerkki</title> </head> <body> <form action="?" method="post"> <input type="text" name="tieto" required="required" /> <button type="submit">Lähetä</button> </form> </body> </html>
Huomaa, että kaikkien attribuuttien arvot ovat lainausmerkeissä. Toinen huomioimisen arvoinen seikka on input-tagissa, kun määritellään, että tekstikenttä on pakko täyttää. HTML:ssähän attribuutin saa lyhentää näin:
<input type="text" name="tieto" required>
XHTML on, toisin kuin HTML, hyvin tarkka tagien sisäkkäistämisen(engl. nesting) suhteen. Sisäkkäistäminen on helpoin selostaa esimerkillä:
<i><b>Tämä on väärin.</i></b>
Tässä tagit on suljettu väärässä järjestyksessä. Oikea muoto olisi seuraava:
<i><b>Tämä on oikein.</b></i>
XHTML:ssä kaikki tagit täytyy sulkea (paitsi XML- ja DOCTYPE-määritykset). Esimerkiksi seuraava merkintätapa kävisi HTML:ssä, mutta XHTML:ssä se ei käy päinsä:
<p>Tämä on oikein HTML:ssä, mutta väärin XHTML:ssä.
Sen sijaan seuraava tapa on oikein myös XHTML:ssä:
<p>Tämä passaa molemmissa kielissä.</p>
Miten sitten kirjoitetaan lyhyet tagit kuten <img> ja <br>? Näihin lisätään loppuun välilyönti ja sitten kauttaviiva.
<br /> <img src="esimerkki.jpg" alt="mallikuva" /> <hr />
Jos dokumentin kieli halutaan määritellä, kuten on suositeltavaa, se tehdään seuraavan kaavan mukaisesti:
<html xmlns="http://www.w3.org/1999/xhtml" lang="fi" xml:lang="fi">
Kielen voi määritellä attribuuteilla lang ja xml:lang myös yksittäiselle muulle elementille, eli samalla sivulla voi olla monia eri kieliä.
HTML-dokumentin MIME-tyyppi (Multipurpose Internet Mail Extension) on text/html. XHTML 1.1-tiedostot täytyy lähettää tyyppinä application/xhtml+xml. XHTML 1.0-tiedostot pitäisi lähettää tuona tyyppinä, mutta myös edellä mainittu tyyppi text/html käy. Lisätietoa MIME-tyypistä application/xhtml+xml on osoitteessa http://www.rfc-editor.org/rfc/rfc3236.txt.
Mutta kuinka tiedosto lähetetään jonakin tiettynä MIME-tyyppinä? Monet palvelimet lähettävät .xhtml-päätteiset tiedostot automaattisesti oikein. Muussa tapauksessa voi muokata palvelimen asetuksia tai käyttää jotain palvelimella ajettavaa skriptikieltä kuten PHP:tä:
<?php header('Content-Type: application/xhtml+xml; charset=UTF-8'); ?>
Usein MIME-tyyppi ilmoitetaan myös lisäämällä dokumentin head-osioon metadataa. Tässä määritellään sekä MIME-tyyppi sekä käytettävä merkistökoodaus:
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
Tämä merkintätapa ei todellisuudessa vaikuta selaimen toimintaan, koska selain joutuu tulkitsemaan dokumentin saadakseen merkinnän selville eikä se sitten enää muuta tulkintatapaa.
Jee. Mä luulin että xml ois jotain ihan sekavaa hankalaa pskaa mutta jopas kiva. Hyvä selkeä kompakti opas.
XML + XSL on ehkä utopistisin vääntö, mihin oon koskaan törmänny. Jaksoin vääntää ehkä 4h ja sain aikaan yhden sanan tulostuksen ku se ei suostunu looppaa XML-dokumentin arvojen läpi. En vaan osaa ;__;. Sitä toivon jatko-osaksi erityisen paljon ;).
XML+XSL on todella virhealtis ja vaikea. Enpähän tiedä, että jaksaisko siitä jatko-osaa vääntää. No käy kummiski W3 Schoolsissa opiskelemassa ko. asiaa. Tai sitten kokeile XML + CSS. Ja sooda: XML on mielestäni kyllä osittain sitä miten sitä kuvailit. XHTML on vain XML:n osa ja se on kyllä melkoisen helppoa verrattuna XML + XSL-virityksiin.
XML:ssä on hyvä puoli se että paskaa koodia ei vain voi yksinkertaisesti tehdä. Jos koodissa on yksikin virhe niin sivua ei näytetä.
Krhm...
En tiedä teinkö jotain väärin, mutta kun lisäsin tuon PHP-koodin sivuuni niin selaimeen tuli se tiedoston latausikkuna xD Päätimpä sitten ottaa sen pois.
Tuolta näkyy puuttuvan x tuosta application/html+xml-pätkästä, sen lisääminen varmaan auttaa.
Entä kuinkas kierretään tilanne, jossa tuo selain ja validaattori itkevät kuin linkissä on esim. ?tieto1=arvo&tieto2=arvo ?
Jostain syystä ne eivät tykkää jos linkkiin on laittanu useamman muuttujan...
Matti Kaijomaa:
Kokeileppa korjata & -> &
Eli ainakin & pitää olla html-entiteettinä.
Jihaa kiva opas=)ja hyödyllinen
Tästä oli apua :)
Ääkköset pitää pistää entiteeteiksi. Tämä ei käy ilmi oppaasta.
ville-v kirjoitti:
Ääkköset pitää pistää entiteeteiksi. Tämä ei käy ilmi oppaasta.
Eipä siitä validaattori kylläkään älähdä, kunhan muistaa lähettää headerissa oikean merkistötyypin.
Tämä oli kyllä hyvä opas. Pisti vain tuossa ekalla rivillä silmään "XHTML on XML-pohjainen koodikieli". XHTML ei ole koodikieli siinä missä HTML ja XML:kään.
Hieno opas. Mutta mitä tapahtuu, jos laittaa vain <img src="kuva://kkk.kuvia.kuv/kuvia/kuva.kva">
Juhko kirjoitti:
Hieno opas. Mutta mitä tapahtuu, jos laittaa vain <img src="kuva://kkk.kuvia.kuv/kuvia/kuva.kva">
Näkyy se kuva siltikin, mutta koodi ei ole standardin mukaista.
Tässä oppaassa on jäänyt mainitsematta attribuuttien määreiden oikeanlainen käyttö. Ne täytyy laittaa lainausmerkkien sisään. Muuten ei sivu toimi. Eivätkä ongelmat tähän loppuneet. Saan käyttäessäni xhtml:ää seuraavanlaisen virheilmoituksen:
XML-jäsennysvirhe: yhteensopimaton tunnus. Odotettu tunnus: </br>.
Rivinumero 17, sarake 6:
</center>
--^
Mistäköhän mahtaa olla kyse?
Ai niin, sivu näyttää toimivan Internet Explorerilla, muttei Mozilla Firefoxilla. Mutta Internet Explorer ei näytä äätä eikä öötä. Dokumentin kielen määrittelykään ei auta.
Koodari_Antti kirjoitti:
Tässä oppaassa on jäänyt mainitsematta attribuuttien määreiden oikeanlainen käyttö.
Eipäs ole.
Opas kirjoitti:
Attribuutit tulee myös kirjoittaa pienellä ja niiden arvot tulee laittaa lainausmerkkeihin.
Kysele keskustelualueella ja pistä linkki. Oletan, että tagisi ei ole muotoa <br /> ja toisessa lienee headeriongelma tai jtn.
Nyt aloin päästä selville ongelmasta. Syynä oli huono tapani vaihdella fontin kokoa <font></font>-attribuuttien avulla ja se aiheutti tagien sulkemisia väärässä järjestyksessä. Täytynee vihdoinkin opetella CSS-tyylien käyttö.
Oppaan kirjoittaja kirjoitti:
Attribuutit tulee myös kirjoittaa pienellä ja niiden arvot tulee laittaa lainausmerkkeihin.
Joo. Tämmöinen kelvannee:
<input type="submit" value="TäSsÄ eI sEnTäÄn KaI oLe UpPeRcAsElLa VäLiÄ" />
Mä huomasin että ohjelmointiputkan sivut määritetään xhtml strictiks mutta käytetään br-tagia ilman />-loppuosaa.
Kiva opas.
Meni hermot.
Hyvä opas.
Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.