Appro | Tietokone ja tietoverkot työvälineenä | Luennot | Demot | Harjoitustyö | Moniste | Postituslista | FAQ | Linkit | Palaute
Edellinen Seuraava

XHTML-perusteita

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ä.
XML (Extensible Markup Language)
XML on yksinkertaistettu versio SGML:stä. XML:llä määriteltyjä kieliä ovat esim.
CSS (Cascading Style Sheets)
CSS on XML-dokumenttien ulkoasun muotoilemiseen käytetty kieli.

WWW-sivujen tekeminen

Dokumentin perusrakenne

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

Dokumentin rakenne puumaisena esityksenä

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.
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
  2. Järjestetyn listan toinen alkio
  3. Järjestetyn listan kolmas 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ä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

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

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

Dokumentin otsikkotietoihin sijoitettavat elementit

Linkkielementti - link

<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" />

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 on syytä välttää, koska XHTML ei millään tavalla kiinnitä dokumentin ulkoasua vaan ainoastaan rakenteen.

http://appro.mit.jyu.fi/opiskeluymparisto/luennot/luento5/
© Tommi Lahtonen (tjlahton@mit.jyu.fi)<URL: http://www.iki.fi/hazor/>
2002-10-18 09:47:28
Appro | Tietokone ja tietoverkot työvälineenä | Luennot | Demot | Harjoitustyö | Moniste | Postituslista | FAQ | Linkit | Palaute
Edellinen Seuraava