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:
<link href="tyylit.css" rel="StyleSheet" type="text/css" />

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

Harjoitus

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