XHTML-perusteita

Luennolla käsitellään XHTML-dokumentin rakenteen määrittämistä peruselementtien avulla.

Luentotaltiointi

WWW-sivujen tekeminen

XHTML-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.

Elementeillä on aina aloitus ja lopetus joiden välissä on varsinainen elementin sisältö. esim. 

<title>Tietokone ja tietoverkot työvälineenä</title>

<title> on aloituselementti.

</title> on lopetuselementti. Lopetuselementissä on aina /-merkki

Jos elementillä ei ole sisältöä niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin: <br />

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.

Ominaisuudet eli attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät jotakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään a-elementtiin tulevalla href-attribuutilla: 

<a href="http://www.jyu.fi/">Jyväskylän yliopisto</a>

Dokumenttityypeistä

Word tallentaa omassa tiedostomuodossaan, HTML-kit tekstinä

Dokumentin rakenteen määrittäminen

Organisaatiot

Standardeista lyhyesti

Dokumentin on oltava hyvin muodostettu

Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.

Väärin

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu 
 (<em>engl. well-formed</em>).</p></strong>

Oikein

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu 
 (<em>engl. well-formed</em>)</strong>.</p>

Dokumentin pitää olla validi

Dokumentin pitää olla myös validi (engl. valid) eli sen rakenne pitää olla jonkin dokumenttityypin mukainen. Dokumenttityyppi määrää mitä elementtejä voi käyttää, mitkä elementit saavat sijaita minkäkin elementtien sisällä ja mitä attribuutteja kuuluu millekin elementille jne.

XHTML 1.0 strict

XHTML 1.1 on uusin W3C:n XHTML-suositus mutta eroaa XHTML 1.0 strictistä lähinnä vain modulaarisuutensa takia. Käytämme tällä kurssilla XHTML 1.0 strictiä


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

XHTML-dokumenttien tarkistamiseen eli validointiin on olemassa ns. HTML-validaattoreita.

Pelkillä www-selaimilla testaamiseen ei voi luottaa koska ne yrittävät hiljaisuudessa ohittaa käyttäjän tekemät virheet jonka tuloksena virheellinen dokumentti toimii kuun asennosta, auringonpilkuista ja käytetystä selaimesta riippuen ehkä joskus tai ei koskaan.

Hyvän XHTML-dokumentin runko

<?xml version="1.0" encoding="iso-8859-1"?>
<!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 sivun otsikko</title>
  </head>

  <body>
    <h1>Tähän pääotsikko</h1>
    <p>Tähän tekstiä...</p>
  </body>

</html>

Dokumentin perusrakenne

Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannattaa huomata seuraavat asiat:

Dokumentin rakenne puumaisena esityksenä

Dokumentin rakennetta voi tutkia puumaisena hierarkisena rakenteena esimerkiksi Mozilla-selaimen DOM Inspectorilla. DOM Inspector löytyy Mozillasta valikosta Tools | Web Development | DOM Inspector.

Hyvä rakenne - otsikkotasot löytyvätHuono rakenne - ei otsikkotasoja ja liian syvä

XHTML:n elementit

Seuraavassa on esitetty lyhyesti XHTML Basic suosituksen mukaiset elementit.

Seuraavassa kaaviossa pyritään selventämään XHTML-elementtien suhdetta toisiinsa XHTML 1.1:ssä. Kaaviosta puuttuu hyvin paljon elementtejä ja kaavio ei ilmaise täysin elementtien välisiä riippuvuuksia.
XHTML-elementtien rakennekaavio

XHTML-elementtien rakennekaavio

Lohkotason elementit

Lohkotason elementtejä voi sijoittaa suoraan body-elementin sisään.

Useimmat lohkotason elementit voivat sisältää joko pelkkää tekstiä tai merkkitason elementtejä.

Otsikkoelementit - (h1 - h6)

<h1>Ensimmäisen tason otsikko</h1>

  <p>Tämä on tekstikappale</p>

<h2>Toisen Tason otsikko</h2>

  <p>Tämä on tekstikappale</p>

Tekstikappale - p 

<p>
  Tämä on tekstikappale
</p>
<p> Tämä on tekstikappale </p>

Erilaiset listat

Listat ovat myös lohkotason elementtejä. Listojen sisään voi sijoittaa sekä merkkitason elementtejä että toisia lohkotason elementtejä

Seuraavassa on esimerkkien avulla käsitelty järjestämätön ja järjestetty lista sekä määritelmälista.

Järjestämätön lista - ul

<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio</li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>

Järjestetty lista - ol

  1. Järjestetyn listan ensimmäinen alkio
  2. Järjestetyn listan toinen alkio
  3. Järjestetyn listan kolmas alkio
  4. Järjestetyn listan neljäs alkio
<ol>
  <li>Järjestetyn listan ensimmäinen alkio</li>
  <li>Järjestetyn listan toinen alkio</li>
  <li>Järjestetyn listan kolmas alkio</li>
  <li>Järjestetyn listan neljäs alkio</li>
</ol>

Sisäkkäiset listat

  1. Järjestetyn listan ensimmäinen alkio
    • Järjestämättömän listan ensimmäinen alkio
    • Järjestämättömän listan toinen alkio
      1. Järjestetyn listan ensimmäinen alkio
      2. Järjestetyn listan toinen alkio
    • Järjestämättömän listan kolmas alkio
  2. Järjestetyn listan toinen alkio
  3. Järjestetyn listan kolmas alkio
    • Järjestämättömän listan ensimmäinen alkio
    • Järjestämättömän listan toinen alkio
    • Järjestämättömän listan kolmas alkio
      • Järjestämättömän listan ensimmäinen alkio
      • Järjestämättömän listan toinen alkio
    • Järjestämättömän listan neljäs alkio
<ol>
<li>Järjestetyn listan ensimmäinen alkio
<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li> 
  <li>Järjestämättömän listan toinen alkio
    <ol>
      <li>Järjestetyn listan ensimmäinen alkio</li>
      <li>Järjestetyn listan toinen alkio</li>
    </ol>
  </li>
  <li>Järjestämättömän listan kolmas alkio</li>
</ul> 
</li>
<li>Järjestetyn listan toinen alkio</li>
<li>Järjestetyn listan kolmas alkio
<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li> 
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio
  <ul>
    <li>Järjestämättömän listan ensimmäinen alkio</li> 
    <li>Järjestämättömän listan toinen alkio</li>
  </ul>
  </li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>
</li>
</ol>

Taulukot

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

Seuraavassa yksinkertainen esimerkki taulukosta, jossa on neljä riviä ja kaksi saraketta.

Taulukkoon liittyvä otsikko
Esimmäisen sarakkeen otsikkoToisen sarakkeen otsikko
1. rivin 1. solu1. rivin 2. solu
2. rivin 1. solu2. rivin 2. solu
3. rivin 1. solu3. rivin 2. solu
<table summary="Tekstikuvaus taulukon sisällöstä">
<caption>Taulukkoon liittyvä otsikko</caption>
<tr>
  <th>Esimmäisen sarakkeen otsikko</th>
  <th>Toisen sarakkeen otsikko</th>
</tr>
<tr>
  <td>1. rivin 1. solu</td>
  <td>1. rivin 2. solu</td>
</tr>
<tr>
  <td>2. rivin 1. solu</td>
  <td>2. rivin 2. solu</td>
</tr>
<tr>
  <td>3. rivin 1. solu</td>
  <td>3. rivin 2. solu</td>
</tr>
</table>
Ensimmäinen otsikko Toinen otsikko Kolmas otsikko
1. rivin 1. 1. rivin 2. 1. rivin 3.
2. rivin 1. 2. rivin 2. 2. rivin 3.
3. rivin 1. 3. rivin 2. 3. rivin 3.
4. rivin 1. solu kolmen sarakkeen alueelle
5. rivin 1. 5. rivin 2.kahdella riville5. rivin 3.
6. rivin 1. 6. rivin 3. 
<table  summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" >
<tr>
 <th>Ensimmäinen otsikko</th> <th>Toinen otsikko</th> <th>Kolmas otsikko</th>
</tr>
<tr>
 <td>1. rivin 1.</td> <td>1. rivin 2.</td> <td>1. rivin 3.</td>
</tr>
<tr>
 <td>2. rivin 1.</td> <td>2. rivin 2.</td> <td>2. rivin 3.</td>
</tr>
<tr>
 <td>3. rivin 1.</td> <td>3. rivin 2.</td> <td>3. rivin 3.</td>
</tr>
<tr>
 <td colspan="3">4. rivin 1. joka laajenee kolmen sarakkeen alueelle</td>
</tr>
<tr>
 <td>5. rivin 1.</td> <td rowspan="2">5. rivin 2. kahdella riville</td> <td>5. rivin 3.</td>
</tr>
<tr>
 <td>6. rivin 1.</td>  <td>6. rivin 3.</td>
</tr>
</table>

Korvattavat elementit

Korvattavia elementtejä voidaan sijoittaa lohko- tai tekstitason elementtien sisään.

img - Kuva

Seuraavassa esimerkki img-elementin käytöstä.

Käytettävä kuva voi sijaita millä tahansa www-palvelimella jos kuvan osoitteeksi kirjoitetaan kokonainen URI:

<p>
<img src="http://appro.mit.jyu.fi/images/appro2_p.png" alt=" " title="Appro-logo" />
</p>

Useimmiten kuvat sijaitsevat samalla palvelimella ja samassa kansiossa kuin xhtml-dokumenttikin. Tällöin on järkevintä käyttää suhteellista osoitusta kuvaan:

<p>
<img src="appro2.png" alt=" " title="Appro-logo" />
</p>

Kuvalle pitää keksiä korvaava tekstikuvaus alt-attribuutin arvoksi. alt-attribuutin sisältö näytetään jos kuvaa ei pystytä esittämään.

Hämähäkki lämmittelee auringossa rinkan päällä 

<p>
<img 
  src="http://www.iki.fi/hazor/jotunheimen-2002/tommi/thumbs/DSCN4283-H%E4m%E4h%E4kki.jpg"
  alt="Hämähäkki lämmittelee auringossa rinkan päällä" 
  title="Hämähäkki lämmittelee auringossa" />
</p>

br - pakotettu rivinvaihto

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

Erikoismerkit HTML-dokumentissa ja URLeissa

HTML-dokumentissa

Perussääntönä kannattaa pitää, että kaikki erikoismerkit pitää koodata HTML-dokumenteissa. Nykyään selaimet ymmärtävät hyvin skandimerkkejä, jos merkistö on valittu oikein, joten niiden koodaaminen ei ole välttämätöntä.

Merkki Koodi
< &lt;
> &gt;
& &amp;
€ &euro;

URLeissa

Perussääntönä kannattaa pitää, ettei käytä erikoismerkkejä URLeissa. Jos niitä on kuitenkin pakko käyttää, niin merkit on koodattava merkkiä vastaavalla heksadesimaaliluvulla.

Suomeksi: jos lisäät www-dokumenttiisi linkin (a-elementti) tai kuvaviittauksen (img-elementti) osoitteeseen josta löytyy seuraavia erikoismerkkejä niin nämä erikoismerkit on kirjoitettava seuraavassa koodatussa muodossa:

Merkki Koodi
Välilyönti %20
ä %E4
ö %F6
å %E5
Ö %D6
Ä %C4
Å %C5

Esimerkki

Kuvatiedoston nimi on DSCN4283-Hämähäkki.jpg mutta ä-kirjaimet on koodattava seuraavasti:

<p>
<img 
  src="DSCN4283-H%E4m%E4h%E4kki.jpg"
  alt="Hämähäkki lämmittelee auringossa rinkan päällä" 
  title="Hämähäkki lämmittelee auringossa" />
</p>

Sama pätee tavallisen linkin kohdalla:

Koodattu linkki Koodaamaton linkki 

<p>
<a
 href="http://www.iki.fi/hazor/jotunheimen-2002/tommi/DSCN4283-H%E4m%E4h%E4kki.html">
 Hämähäkki</a>
</p>

Linkkejä erikoismerkkien koodaamisesta

Dokumentin otsikkotietoihin sijoitettavat elementit

Linkkielementti - link

<link 
  rel="StyleSheet" 
  href="http://appro.mit.jyu.fi/appro2003.css" 
  type="text/css" 
/>

Yleisimmät virheet XHTML-dokumentissa

XHTML-dokumentin tuottamisen vaiheet

  1. Kirjoita dokumentin sisältö
  2. Määrittele dokumentin rakenne
  3. Validoi dokumentti
  4. Testaa dokumentti jollakin selaimella
  5. Määrittele dokumentin ulkoasu (CSS)
  6. Validoi CSS
  7. Testaa ulkoasu selaimilla
  8. Siirrä dokumentti WWW-palvelimelle

XHTML-dokumentin kirjoittamiseen voi käyttää haluamaansa tekstieditoria (esim. notepad) tai jotakin erityisesti XML:n kirjoittamiseen kehitettyä editoria (esim. HTML-kit).

Graafisia WYSIWYG (What You See Is What You Get) -editoreita (esim. Frontpage ja Dreamweaver) on syytä välttää, koska XHTML ei millään tavalla kiinnitä dokumentin ulkoasua vaan ainoastaan rakenteen. Graafisia editoreitakin voi käyttää kunhan ymmärtää mitä on tekemässä.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tyovaline/luennot/luento5/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2004-03-01 21:36:58
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto