Esimerkkejä XHTML:n peruselementeistä
Kaikki tämän sivun esimerkkikoodit ovat myös validia HTML5:sta.
Lohkotason 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
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
- Järjestetyn listan ensimmäinen alkio
- Järjestetyn listan toinen alkio
- Järjestetyn listan kolmas alkio
- 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
- 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
- Järjestetyn listan ensimmäinen alkio
- Järjestetyn listan toinen alkio
- Järjestämättömän listan kolmas alkio
- Järjestetyn listan toinen alkio
- 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!
Seuraavassa yksinkertainen esimerkki taulukosta, jossa on neljä riviä ja kaksi saraketta.
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> <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> <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
Korvattavat elementit eivät sisällä tekstiä tai muita elementtejä, vaan ne korvataan esim. kuvalla tai jollakin muulla objektilla.
Kuva - img
- src-attribuutin määrittelemä kuva ilmestyy img-elementin paikalle dokumenttiin.
- img-elementti pitää sijoittaa aina jonkin kappaletason elementin (p, li, div, 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ä.
<p>
<img src="rakenne.jpg" alt="Dokumentin rakenne puumaisena esityksenä" title="Dokumentin rakenne" />
</p>
Tekstitason elementit
- strong - erittäin tärkeät asiat
- em - tärkeät asiat
Tässä on pitkä kappale tekstiä, jossa jotkin sanat ovat tärkeitä ja toiset sanat ovat erittäin tärkeitä.
<p> Tässä on pitkä kappale tekstiä, jossa jotkin sanat ovat <em>tärkeitä</em> ja toiset sanat ovat <strong>erittäin tärkeitä</strong>. </p>
Käyttäjien kommentit