XHTML

Miten HTML:ää ja XHTML:ää tehdään

HTML-sivujen tekemiseen on olemassa lukuisia editoreita. Ne voidaan jakaa kahteen pääluokkaan: WYSIWYG (What You See Is What You Get)- ja tekstieditoreihin.

Olette jo tällä kurssilla käyttäneet WYSIWYG-tyyppistä editoria: DreamWeaveria. WYSIWYG-editoreilla sivuja tehdessä tekijä näkee jatkuvasti, minkä näköisinä sivut näkyvät selaimessa. Todellisuudessa myös WYSIWYG-editorit tuottavat HTML-merkattuja tekstitiedostoja (eli HTML-tiedostoja).

HTML-tiedostoja tekstitiedostoja voidaan tuottaa myös käsin millä tahansa tekstiä tuottavalla editorilla (esimerkiksi Windowsin omalla Muistiolla (engl. Notepad)). Usein on kuitenkin käytännöllisintä käyttää jotakin editoria, joka on tarkoitettu HTML-koodin tuottamiseen.

Miksi käyttää tekstieditoria

WYSIWYG-editorit tuottavat yleensä varsin hirveää, ns. epävalidia koodia. Tämän havaitsee mm. sillä tavoin, että sivut saattavat näkyä eri tavoin eri selaimissa: Jokin sivu voi toimia hyvin Internet Explorerilla, mutta olla kokonaan näkymättä vaikkapa Firefoxilla. Mikäli sivu on toteutettu oikein XHTML-määritysten mukaisesti, näkyy se yleensä oikein kaikilla selaimilla: myös esimerkiksi kännykällä nettiä selattaessa.

Eri tekstieditoreita

Kuten sanottua, mitä tahansa tekstieditoria voi käyttää tiedostojen muokkaamiseen. Windowsista löytyvät oletuksina mm. Muistio ja WordPad. WordPadia, Wordia tai muuta vastaavaa käytettäessä pitää ottaa huomioon, että muistaa tallentaa sivut "Vain teksti (.txt)" -muodossa. Tällöin saattaa joutua myös muuttamaan tiedostopäätteen oikeaksi: ohjelma tallentaa "Vain teksti"-tilassa tallennetut tiedostot päätteellä .txt. Oikea pääte HTML-tiedostoille on .html.

Esimerkkejä tällaisista editoreista ovat mm. ConTEXT ja HTML-Kit

XHTML-tiedoston rakenne

XHTML-tiedosto on normaali tekstitiedosto, jossa on dokumentin rakennetta kuvaavia elementtejä. Elementtien nimet kirjoitetaan < ja > -merkkien väliin. Elementit alkavat aina jostakin ja päättyvät johonkin. Esimerkki elementistä:

<h1>Tähän tulee sivun pääotsikko</h1>

Kuten huomataan, tässä tapauksessa elementin merkitään alkuelementillä <h1> ja elementin loppu loppuelementillä </h1>. Eli elementin loppu on muuten samanlainen kuin alkuelementti, mutta siinä on / -merkki ennen elementin nimeä.

Toinen esimerkki elementistä:

<p>Tähän tulee tavallinen tekstikappale.</p>

HUOM! Elementtejä ei saa kirjoittaa "ristikkäin". Tämä tarkoittaa sitä, että elementit voivat olla vain sisäkkäin. Seuraava esimerkki on väärin:

<p><a href="www.jyu.fi">Linkki Jyväskylän yliopiston sivulle</p></a>

Väärin siksi, että p-elementti alkaa ja loppuu ennen a-elementtiä. Oikein olisi:

<p><a href="www.jyu.fi">Linkki Jyväskylän yliopiston sivulle</a></p>

Sivun rakenne

XHTML-sivut koostuvat aina kahdesta osiosta: head-osiosta ja body-osiosta. Head-osioon tulee sivustosta tietoa, jota ei näytetä käyttäjälle. Body-osio puolestaan sisältää kaiken käyttäjälle näkyvän informaation sivusta:

<?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="fi">

<head>
<title>Tähän tulee sivuston nimi</title>
</head>
<body>
Tähän tulee sivun varsinainen sisältö
</body>
</html>

Sivun alussa oleva "rimpsu" kertoo, minkätyyppisestä tiedostosta on kyse:

<?xml version="1.0" encoding="ISO-8859-15"?> -rivi kertoo, että kyseessä on xml-merkkaustapaa käyttävä tiedosto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -rivit kertovat, missä dokumentin "tulkkaukseen" käytettävä DTD-tiedosto sijaitsee

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi"> -rivi aloittaa html-merkatun tiedoston.

<head> -osioon tulee asiaa, joka EI näy sivuston varsinaisessa sisällössä.

<body> -osiossa tulee kaikki tiedoston näkyvään osaan tuleva sisältö.

HUOM! Tiedoston alun rimpsuun kannattaa suhtautua vain tiettynä välttämättömänä osasena tiedosta. Sen voi kopioida jokaisen tekemänsä XHTML-tiedoston osaksi esimerkiksi tästä.

Toinen HUOM! Huomioi että myös <html> ja <body> -osioihin kuuluu lopetuselementit (tiedoston lopussa).