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ä[muokkaa | muokkaa wikitekstiä]

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ä[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

<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[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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