XHTML-perusteita

• WWW-sivuihin liittyviä käsitteitä
  • Organisaatiot
  • Kielet
• WWW-sivujen tekeminen
  • Esimerkki XML-dokumentista
  • Ominaisuudet eli attribuutit
  • Dokumentin on oltava hyvin muodostettu
  • Dokumentin pitää olla validi
  • Hyvän XHTML-dokumentin runko
• Dokumentin perusrakenne
• XHTML Basic
• Lohkotason elementit
  • Otsikkoelementit - (h1 - h6)
  • Tekstikappale - p
• Erilaiset listat
  • Järjestämätön lista - ul
  • Järjestetty lista - ol
  • Sisäkkäiset listat
• Taulukot
• Korvattavat elementit
  • Kuva - img
  • br - pakotettu rivinvaihto
• Tekstitason elementit
• Dokumentin otsikkotietoihin sijoitettavat elementit
  • Linkkielementti - link
• Erikoismerkit HTML-dokumentissa ja URLeissa
  • HTML-dokumentissa
  • URLeissa
  • Linkkejä erikoismerkkien koodaamisesta
• Yleisimmät virheet XHTML-dokumentissa
• XHTML-dokumentin tuottamisen vaiheet

• tyovaline0502.mp3 3.5M
• tyovaline0503.mp3 3.5M
• tyovaline0504.mp3 3.3M
• tyovaline0505.mp3 3.6M
• tyovaline0506.mp3 3.2M
• tyovaline0507.mp3 4.3M

Tällä luennolla opitaan WWW-sivujen tekemiseen käytettävän XHTML-merkintäkielen perusteet.

WWW-sivuihin liittyviä käsitteitä

Organisaatiot

W3C ( World Wide Web Consortium )

W3C:n päämääränä on lead the web to its full potential. W3C tuottaa spesifikaatioita, ohjeita, ohjelmia ja työkaluja. W3C:n jäseniä ovat kaikki suuret selainvalmistajat ja palveluntarjoajat.

Kielet

SGML (Standard Generalized Markup Language)

SGML on yleinen dokumenttien rakenteen kuvaamiseen tarkoitettu kieli. SGML on metakieli jolla kuvataan dokumenttityyppejä.

• HTML (HyperText Markup Language)

  HTML on WWW:ssä käytettävien hypertekstidokumenttien rakenteen määrittelyyn tehty kieli.

XML (Extensible Markup Language)

XML on yksinkertaistettu versio SGML:stä. XML:llä määriteltyjä kieliä ovat esim.

• XHTML (Extensible HyperText Markup Language)

  XHTML on XML:n mukaan määritelty uusin versio HTML:stä.

• SVG (Scalable Vector Graphics)
• SMIL (Synchronized Multimedia Integration Language)

• XSL (Extensible Stylesheet Language)

  XSL-kielellä määritellään kuinka esitetään ja muunnetaan XML-tiedostoja.

CSS (Cascading Style Sheets)

CSS on XML-dokumenttien ulkoasun muotoilemiseen käytetty kieli.

WWW-sivujen tekeminen

XML-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.

Esimerkki XML-dokumentista

<?xml version="1.0"?>
<kerho>
<kerhonnimi>Kelmien kerho ry</kerhonnimi>

<maxjasenia>13</maxjasenia>
<jasen>
  <id>1</id>
  <nimi>Ankka Aku</nimi>
  <hetu>010245-123U</hetu>

  <katuosoite>Ankkakuja 6</katuosoite>
  <postinumero>12345</postinumero>
  <postiosoite>ANKKALINNA</postiosoite>
  <kotipuhelin>12-12324</kotipuhelin>

  <harrastukset>
     <harrastus>kalastus</harrastus>
     <aloit>1955</aloit>
     <viikossa>20</viikossa>

  </harrastukset>
  <harrastukset>
     <harrastus>laiskottelu</harrastus>
     <aloit>1950</aloit>
     <viikossa>20</viikossa>

  </harrastukset>
  <harrastukset>
     <harrastus>tyon pakoilu</harrastus>
     <aloit>1952</aloit>
     <viikossa>40</viikossa>

  </harrastukset>
</jasen>
<jasen>
  <id>2</id>
  <nimi>Susi Sepe</nimi>

  <hetu>020347-123T</hetu>
  <postinumero>12555</postinumero>
  <postiosoite>Takametsa</postiosoite>
  <harrastukset>

     <harrastus>possujen jahtaaminen</harrastus>
     <aloit>1954</aloit>
     <viikossa>20</viikossa>
  </harrastukset>

  <harrastukset>
     <harrastus>kelmien kerho</harrastus>
     <aloit>1962</aloit>
     <viikossa>2</viikossa>

  </harrastukset>
</jasen>
</kerho>

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>

Dokumentin on oltava hyvin muodostettu

XML vaatii, että tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed). Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.

Väärin

<p>XML vaatii, että tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu
 (<em>engl. well-formed</em>).</p></strong>

Oikein

<p>XML vaatii, että 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ä, mitä attribuutteja kuuluu millekin elementille jne.

Tällä kurssilla käytetään kahta erilaista XHTML-dokumenttityyppiä:

XHTML 1.1

XHTML 1.1 on uusin W3C:n XHTML-suositus.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic

XHTML Basic on erityisesti mobiililaitteita varten määritelty suppea versio XHTML 1.1:stä. Käytännössä XHTML Basic riittää kaikkiin perustarpeisiin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.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-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" >
  <head>
    <title>Jyväskylän yliopisto</title>
  </head>

  <body>
    <h1>Jyväskylän yliopisto</h1>
    <p>Jyväskylän yliopisto on ...</p>
  </body>

</html>

• xml-elementti kertoo käytetyn XML-standardin version. encoding-ominaisuus (engl. attribute) määrittelee käytetyn merkistön. iso-8859-1 tai iso-8859-15 (€-merkki mukana) on pohjoismaissa käytettävä merkistö.
• DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
• head-elementti sisältää kaiken dokumenttiin liittyvän metatiedon.
• title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikon. Otsikon pitää olla järkevä vaikka se otettaisiin erilleen koko dokumentista.
• body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
• h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo koko dokumentin pääotsikon.
• p-elementti merkitsee tekstikappaleen.

Dokumentin perusrakenne

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

• Dokumentissa kuuluu yleensä olla yksi ensimmäisen tason otsikko.
• Otsikkotasojen pitää edetä loogisesti (ensimmäinen taso, jonka alla toinen taso).
• Jokaisen otsikon jälkeen tulisi olla tekstikappale (ei heti toista otsikkoa).

XHTML Basic

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.

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

• 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 neljäs 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</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

• table-elementti muodostaa taulukon
• tr-elementti aloittaa uuden rivin taulukossa
• th-elementti määrittelee rivi- tai sarakeotsikon
• td-elementti määrittelee taulukon solun

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

• Taulukkoon laitetaan ainoastaan taulukkomuodossa olevaa dataa.
• Taulukoilla ei saa taittaa sivua!

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

Taulukkoon liittyvä otsikko

Esimmäisen sarakkeen otsikko	Toisen sarakkeen otsikko
1. rivin 1. solu	1. rivin 2. solu
2. rivin 1. solu	2. rivin 2. solu
3. rivin 1. solu	3. 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äisen sarakkeen otsikko	Toisen sarakkeen otsikko	Kolmannen sarakkeen otsikko
1. rivin 1. solu	1. rivin 2. solu	1. rivin 3. solu
2. rivin 1. solu	2. rivin 2. solu	2. rivin 3. solu
3. rivin 1. solu	3. rivin 2. solu	3. rivin 3. solu
4. rivin 1. solu joka laajenee kolmen sarakkeen alueelle
5. rivin 1. solu	5. rivin 2. solu, joka laajenee kahdelle riville	5. rivin 3. solu
6. rivin 1. solu		6. rivin 3. solu

<table  summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" >
<tr>
   <th>Ensimmäisen sarakkeen otsikko</th>  <th>Toisen sarakkeen otsikko</th>  <th>Kolmannen sarakkeen otsikko</th>
</tr>
<tr>
   <td>1. rivin 1. solu</td>               <td>1. rivin 2. solu</td>          <td>1. rivin 3. solu</td>
</tr>
<tr>
   <td>2. rivin 1. solu</td>               <td>2. rivin 2. solu</td>          <td>2. rivin 3. solu</td>
</tr>
<tr>
   <td>3. rivin 1. solu</td>               <td>3. rivin 2. solu</td>          <td>3. rivin 3. solu</td>
</tr>
<tr>
   <td colspan="3">4. rivin 1. solu joka laajenee kolmen sarakkeen alueelle</td>
</tr>
<tr>
   <td>5. rivin 1. solu</td>               <td rowspan="2">5. rivin 2. solu, joka laajenee kahdelle riville</td>
   <td>5. rivin 3. solu</td>
</tr>
<tr>
   <td>6. rivin 1. solu</td>                                                 <td>6. rivin 3. solu</td>
</tr>
</table>

Korvattavat elementit

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

Kuva - img

• src-attribuutin määrittelemä kuva ilmestyy img-elementin paikalle dokumenttiin.
• img-elementti pitää sijoittaa aina jonkin kappaletason elementin (p, li, h1, h2 jne) sisään.
• img-elementille ei ole normaalia lopetuselementtiä joten se pitää korvata lisäämällä aivan elementin loppuun välilyönti ja /-merkki.

Seuraavassa esimerkki img-elementin käytöstä. Esimerkin kuva on löydettävissä tästä dokumentista Dokumentin perusrakenteen yhteydestä.

<p>
<img src="rakenne.jpg" alt="Dokumentin rakenne puumaisena esityksenä" title="Dokumentin rakenne" />
</p>

br - pakotettu rivinvaihto

• br - pakotettu rivinvaihto. br-elementillä ei saa yrittää tehdä tyhjää tilaa (vrt. ylimääräiset rivinvaihdot tekstinkäsittelyssä).

  <address>
  yliopistonopettaja <a href="mailto:tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</a><br />
  Sähköposti: <strong><a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a></strong><br />
  Kotisivu: <URL: <a class="url" href="http://www.iki.fi/hazor/">http://www.iki.fi/hazor/</a>><br />
  Työhuone: <abbr title="Agora C431.2">AgC431.2</abbr><br />
  Puhelin: <em>(014) 260 2746</em><br />
  Fax: <em>(014) 260 2731</em></address>

• br-elementillä ei myöskään ole normaalia lopetuselementtiä vaan se korvataan laittamalla aivan elementin loppuun välilyönti ja /-merkki. vrt. img.

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

• a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan.
• • Absoluuttisella osoitteella oleva linkki kurssin kotisivulle

    <p>Absoluuttisella osoitteella oleva linkki kurssin
    <a title="Tietoverkot työvälineenä kurssin kotisivu"
    href="http://appro.mit.jyu.fi/2001/syksy/tietoverkot/">kotisivulle</a></p>

  • Suhteellisella osoitteella oleva linkki kurssin ensimmäisiin demoihin

    <p>Suhteellisella osoitteella oleva linkki kurssin
    <a href="../../demot/demo1/">ensimmäisiin demoihin</a></p>

  • Linkki tämän dokumentin otsikkoon Dokumentin perusrakenne

    <p>Linkki tämän dokumentin otsikkoon
    <a href="#perusrakenne">Dokumentin perusrakenne</a></p>

    Otsikkoon, jonne dokumentin sisäinen linkki osoittaa, täytyy olla määriteltynä id-attribuutilla yksikäsitteinen arvo. Sisäiset linkit alkavat aina #-merkillä

    <h2 id="perusrakenne">Dokumentin perusrakenne</h2>
    

• strong - erittäin tärkeät asiat
• em - tärkeät asiat

  Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat tärkeitä, toiset sanat ovat erittäin tärkeitä.

  <p>
  Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat <em>tärkeitä</em>, toiset
  sanat ovat <strong>erittäin tärkeitä</strong>.
  </p>
  

Dokumentin otsikkotietoihin sijoitettavat elementit

Linkkielementti - link

• link-elementti saa esiintyä vain head-elementin sisällä.
• link-elementille määritellään dokumentin suhde muihin dokumentteihin

<link rel="Prev" href="../luento1/" title="Luento 1" />
<link rel="Next" href="../luento3/" title="Luento 3" />
<link rel="Start" href="http://www.mit.jyu.fi/opetus/appro/2000/syksy/laitteistot/luennot/" title="Tietoverkot työvälineenä-kurssin luennot" />
<link rel="Copyright" href="http://www.mit.jyu.fi/opetus/appro/copyright.html" title="Copyright Notice" />
<link rev="Made" href="mailto:tommi.j.lahtonen@jyu.fi" title="Tietotekniikan approbatur" />
<link rel="StyleSheet" href="http://www.mit.jyu.fi/opetus/appro/appro.css" type="text/css" media="screen" />

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 osoitteeseen josta löytyy seuraavia erikoismerkkejä niin nämä erikoismerkit on kirjoitettava koodatussa muodossa.

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

Linkkejä erikoismerkkien koodaamisesta

• Jukka Korpela, "Merkit ja koodaukset".

Yleisimmät virheet XHTML-dokumentissa

• Elementit väärässä järjestyksessä.
• Kappaletason elementti tekstitason elementin sisällä.
• Väärin kirjoitettu dokumenttityyppi.
• Attribuuttien arvot ilman lainausmerkkejä.
• Elementtien ja attribuuttien nimet pitää kirjoittaa pienellä.
• Epätyhjät elementit pitää lopettaa lopetuselementillä <p> .. </p>
• Tyhjät elementit pitää lopettaa kauttaviivalla <img .. />

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ä.