XHTML

Wikikirjasto
Loikkaa: valikkoon, hakuun
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 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]

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-->
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]

  • 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]

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]

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]

<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]

Elementti Tyyppi Merkitys Pakolliset määritteet Vapaaehtoisen määrittteet
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]

Elementti Tyyppi Merkitys Pakolliset määritteet Vapaaehtoisen määrittteet
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]

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]

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]

Elementti Tyyppi Merkitys Vapaaehtoisen määrittteet
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