Nyt olisi sopiva hetki päättää minkä tyyppisen ulkoasun haluaa. Tarkemmin sanoen sinun tarvitsee vasta päättää kuinka
monta tasoa (
div
-elemettiä) haluat. Samalla voisimme lisätä
title
-elementtiin sivun otsikon,
joka näkyy ikkunan selitystekstinä (yleensä ikkunan ylälaidassa samassa palkissa sulku- ja pienennysnäppäinten kanssa).
Jokainen taso on erikseen aseteltavissa ja säädeltävissä. Tasoilla voi olla omat taustakuvat ja -värit tain ne voivat olla läpinäkyviä. Tämän takia esimerkiksi minä luon yhden tason valikolle, toisen sisällölle, kolmannen otsikolle ja yhden lisää ihan vain siksi, että tämän sivuston tarkoituksena on kertoa tasoista.
Tasot syntyvät
div
-elementeillä ja ne sijoitetaan
body
-osioon.
Koodi muuttuu siis seuraavaksi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Sivun otsikko
</title>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
Nyt se ryhtyi näyttämään sekavalta, kun koodissa on noinkin monta tyhjää tasoa. Huomattavasti selkeämmäksi
kaikki muuttuu, kun lisäämme
class
-määrittelyt tasoille.
Nyt minun toki täytyy selittää hiukan mihin me
class
-määrittelyjä tarvitsemme.
Class
-määrittittelyt ovat erittäin käytännöllisiä, kun hetken kuluttua tuomme
mukaan
CSS
-tyylit. Nyt kuitenkin lisäämme vain ne
class
-määrittelyt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Sivun otsikko
</title>
</head>
<body>
<div
class="otsikko"
>
</div>
<div
class="valikko"
>
</div>
<div
class="sisalto"
>
</div>
<div
class="oikea"
>
</div>
</body>
</html>