Harjoitus 4

Viikko 4

Yleinen lohko - div
div-elementti on yleinen lohkotason elementti, jota käytetään merkitsemään erilaisia lohkoja. Esimerkiksi kun lähdetään muotoilemaan Internetsivua ja käytetään CSS-tyylejä, tällöin täytyy käyttää div-elementtiä. Alla esimerkki navigointipalkista div-elementin sisällä:

<div class="navigointipalkki">
<ul>
<li>Alakoulu</li>
<li>Yläkoulu</li>
<li>Lukio</li>
<li>Kauppaoppilaitos</li>
<li>Ammattikoulu</li>
<li>Kansanopisto</li>
</ul>
</div>

Sivun muotoilu - CSS-tyylit

Dokumenttien ulkoasu määritellään CSS-tyylilomakkeen avulla. Kaikkiin uusimpiin selaimiin voi itse määritellä omat CSS-asetukset, joita käytetään oletuksena sivuja näytettäessä. Tyylit liitetään XHTML-dokumenttiin link-elementillä (head-elementin sisään) seuraavaan tapaan:

Esimerkkisivu, jossa sivun ulkoasua on muuteltu erilaisilla CSS-tyyleillä:
http://css-tricks.com/examples/AlternateStyleSheets/

Harjoitus

Jatketaan samaa harjoitusta kuin viime tunnilla. Avaa XHTML-kansio.
Lisää ”head”-elementtiin CSS-tyyli link-elementin avulla. (Katso teoriaosuus)
Tee etusivulla oleva lista div-elementin sisään. Nimeä tämä div-elementti nimellä ”navigointipalkki”.
Kirjoita kaikkiin alasivujen index.txt sivuille xhtml-koodia, joissa on ainakin seuraavat elementit: html, head, body ja title.
Tallenna tekstitiedosto ja tarkastele sitä Internet-selaimessa.