XHTML

Tämä kirja perustuu W3Cn suositukseen XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) (2000-01-26, rev. 2002-08) ja erityisesti sen Strict-muotoon sekä soveltuvin osin HTML 4.01 standardiin (1999-12-24).

Wikipedia

Wikipedia-tietosanakirjassa on artikkeli aiheesta:

XHTML

XHTML 1.0 on HTML 4 kielestä reformuloitu XML 1.0 yhteensopiva merkintäkieli. Sitä käytetään WWW-sivujen tekemiseen ja sen on tarkoitus syrjäyttää vanhempi HTML 4. Sen seuraajaksi on kehitteillä XHTML 2 ja HTML 5

Ominaispiirteitä

XHTML on lyhenne sanoista EXtensible HyperText Markup Language. XHTML on lähes identtinen HTML 4.01:n kanssa ja se on tarkoitettu syrjäyttämään se. Näiden ero on siinä, että XHTML tarkempi ja "puhtaampi" kuin HTML 4.01. XHTML on HTML XML-sovelluksena määriteltynä.

XHTML-muotoilu ei ota kantaa sivun ulkoasuun. XHTML:llä merkitään datan rakenne käyttäen loogisia rakenteita, elementtejä. Ulkoasu merkitään CSS-tyyliohjeilla.

Elementin sisältö on avauksen ja sulun välissä. Elementteihin voidaan lisätä attribuutteja eli määritteitä. Tyhjissä elementeissä ei ole sisältöä, mutta voi olla attribuutteja.

Merkistö:

<elementti>: elementin avaus
</elementti>: elementin sulku
<elementti/>: elementin avaus ja sulku samassa, käytetään ns. tyhjille elementille
<elementti attribuutti="arvo"/>: elementin avaus ja sulku samassa, elementtiin on annettu attribuutti, käytetään ns. tyhjälle elementille, jolle kuitenkin annetaan attribuutteja
: kommentti

Elementit jaetaan kahteen tasoon:

lohkoelementit, kappaletasoiset elementit (block) varaavat oman lohkon sivulta, eli ne alkavat uudelta riviltä ja niitä seuraavat elementit alkavat uudelta riviltä.
rivielementit, merkkitasoiset elementit (inline) sijoittuvat kappaletason elementtien sisään.

Perussääntöjä

Elementit eivät saa ristetä eli ei näin:

~~<em><code>koodi</em></code>~~ vaan näin <em><code>koodi</code></em>.

Elementti tulee aina sulkea.
Elementit tulee aina kirjoittaa pienillä kirjaimilla.
Kaikilla dokumenteilla tulee olla vain yksi juurielementti
XHTML-tiedostot tallennetaan html-päätteellä.

Sivun perusrakenne - pakolliset elementit

Sivun perusrakenne on

<?xml version="1.0" encoding="utf-8"?>
<!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>Sivun otsikko</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

Sisältö

</body>
</html>

missä

<?xml version="1.0" encoding="utf-8"?>

kertoo XML:n käytettävän version ja merkistökoodauksen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

on dokumenttityypin määrittely eli Document Type Definition, lyhyesti DTD. Se määrittelee käytettävän XHTML:n version.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

on kaikkiin XHTML-tiedostoihin kuuluva html-juurielementti, joka kertoo selaimelle, että kyseessä on xhtml-tiedosto. Pakollinen XMLNS-attribuutti arvoineen määrittelee XML-sanaston. html sisältää pakollisena head- ja body-elementit. HTML:n lang- ja XML:n xml:lang-attribuuteilla määritellään koko tiedoston pääkieli.

<head>
	<title>Sivun otsikko</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

on ensimmäinen kahdesta sallitusta ja pakollisesta html-elementin alaelementistä ja sisältää sivulla näkymättömiä tietoja pakollista title-elementtiä lukuunottamatta.

<title>

on pakollinen otsikkoelementti, joka määrittää tekstin, joka näkyy ikkunan yläpalkissa. Tämä elementti on hyvin tärkeä, sillä yläpalkin lisäksi se näkyy myös työkalupalkissa sekä myös Kirjanmerkit-valikossa sivun nimenä. Myös hakukoneet painottavat hauissaan title-elementin sisältöä, mikä nostaa sen arvoa edelleen.

<body>

on jälkimmäinen kahdesta sallitusta ja pakollisesta html-elementin alaelementistä ja se sisältää sivulla näkyvän sisällön.

Perusrakenteet

body-elementin sisälle laitettavat elementit voidaan jakaa kahteen loogiseen ryhmään.

Lohkotason elementit eli block-level elements
- voivat sisältää toisia lohkotason elementtejä ja myös tekstielementtejä.
Tekstielementit eli inline elements
- voivat sisältää ainoastaan muita tekstielementtejä, ei lohkoelementtejä.
- kuvaavat tavallisesti tekstin ulkoasua.

Yleissääntönä elementit eivät voi sisältää itseään eli sisältää samaa elementtiä elementti itse on.

Kappale ja korostus-elementit

<body> 
<p>
Tekstikappale on p-lohkoelentin, sisässä. 
<em>
Korostettu teksti em-tekstielementin sisässä, ja oletuksena usein kursivoidaan.
</em>
<strong>
Vahvasti korostettu teksti strong-tekstielementin sisässä ja oletuksena usein lihavoidaan.
</strong>
</p>
</body>

Linkki

Elementti	Tyyppi	Merkitys	Pakolliset määritteet	Vapaaehtoisen määritteet
a	tekstielementti	hyperlinkki	href, linkkiteksti (muuten linkkiä ei voi klikata)	title

<a href='http://www.osoiteposoite.net'
 title='osoiteposoite-ponnahdusteksti'>osoiteposoite</a>

a- eli linkkielementille pakollinen href-attribuutti määrittää linkin osoitteen, vapaaehtoinen title-attribuutti määrittää ponnahdusvihje ja a-elementin sisään tuleva määrittää klikattavan kohteen. Linkkiteksti on oletuksena sininen ja alleviivattu.

Kuva

Elementti	Tyyppi	Merkitys	Pakolliset määritteet	Vapaaehtoisen määritteet
img	tekstielementti	hyperlinkki	src, alt	title

img-elementin määritteet
Attribuutti	Arvo	Merkitys	Pakollisuus
src	Kuvan osoite	Kuvan sijainti	Pakollinen
alt	Tekstiä	Kuvan vaihtoehtoinen esitys	Pakollinen
title	Tekstiä	Kuvan apuotsikko	Suositeltava

<img src="Puppeter_template.svg" alt="Nukkemestarin tunnus" title="Nukkemestari" />

<img src="http://upload.wikimedia.org/wikipedia/commons/f/fd/Puppeter_template.svg"
alt="Nukkemestarin tunnus" title="Nukkemestari" />

img-elementillä voidaan esittää kuvia. Se on niin sanottu tyhjä elementti. Sillä ei ole eikä saa olla varsinaista sisältöä vaan kaikki tarvittu tieto on annettava attrbituutteilla. Pakollinen srg-attribuutti määrittelee kuvan osoitteen. Toinen pakollinen, alt-attribuutti, määrittelee vaihtoehtoisen tekstin, joka näkyy mikäli kuva ei jostain syystä lataudu. Valinnainen title-attribuutti määrittää kuvalle otsikon.

Mikäli kuvalle ei anneta osoitetta, kuten ensimmäisessä esimerkissä, tulee kuvan olla samassa sijainnissa kuin xhtml-tidosto. WWW-osoitteella kuva voi olla missä tahansa päin WWW:tä.

Kuvan leveys ja korkeus sivulla määräytyy oletuksena kuvan oman leveyden ja korkeuden mukaan. Kuvan esittämisen leveyttä ja korkeutta voi määrittää muuksi kuin natiiviksi CSS:llä.

Listat

Elementti	Merkitys
ul	numeroimaton lista
ol	numeroitu lista
li	listan kohta, oli se sitten numeroimaton tai numeroitu
dl	määritelmälista
dt	määritelmälistan määriteltävä asia
dd	määritelmälistan määritelmä

<ul>
<li>listan objekti 1</li>
<li>listan objekti 2</li>
 <ol>
 <li>listan objekti 2.1</li>
 </ol>
</ul>

<dl>
    <dt>XHTML</dt>
    <dd>merkkikieli</dd>

    <dt>XML</dt>
    <dd>merkkikieli</dd>
</dl>

Sisennys saadaan asettamalla ul- ja ol-elementtejä sisäkkäin. Luettelomerkki ja muu muotoilu hoidetaan CCS:llä. Numeroidussa listoissa sisennys aloittaa numeroinnin alusta.

Taulukko

Elementti	Merkitys
table	taulukko
tr	taulukon rivi
th	taulukon rivin tai sarakkeen otsikko
td	taulukon solu

<table>
<tr>
<th>Solu 1</th>
<th>Solu 2</th>
</tr>
<tr>
<th>Solu 3</th>
<td>Solu 4</td>
</tr>
</table>

td- ja th-elementtien määritteet
Attribuutti	Arvo	Merkitys	Pakollisuus	Oletus
colspan	1, 2, ...	solun peittämien sarakkeiden määrä	vapaaehtoinen	1
rowspan	1, 2, ...	solun peittämien rivien määrä	vapaaehtoinen	1

Lainaus

Elementti	Tyyppi	Merkitys	Vapaaehtoisen määritteet
q	tekstitason lainaus	merkitsee tekstin lainaukseksi	cite, yleiset attribuutit
blockquote	lohkotason lainaus	merkitsee tekstin lainaukseksi	cite, yleiset attribuutit

<p>Saarnaajankin mukaan <q cite="http://www.netti.net">kaikki on turhuutta!</q>.</p>

<blockquote title="Raamattu [Saarn. 1:2]">
<p>
 Turhuuksien turhuus, sanoi Saarnaaja, turhuuksien turhuus, kaikki on turhuutta!
</p>
</blockquote>

q- ja blockquote-elementtien määritteet
Attribuutti	Arvo	Merkitys	Pakollisuus
cite	uri	lähteen url	vapaaehtoinen