free webpage counters
ETUSIVU materiaalit

7. Eihän se näytä miltään


XML-dokumentti määrittelee sisällön rakenteen. Se ei ota kantaa siihen miltä sivu näyttää, kun sitä katsotaan esim. webselaimen kautta. Jos siis haluaa selaimen kautta nähdä muutakin kun rakennepuun, voi ongelman helpoiten ratkaista käyttämällä css-tyyliä (Cascading Style Sheets) eli tyyliohjetta. Tee siis esim. tällainen tyyliohje:


henkilo {
display: block;
height: auto;
width: 300px;
border-color: #000000;
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
left:4px;
margin:4px;
padding:4px;
}

nimi {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #990000;
}

sposti, pituus, suosikkitagi {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}


Tee tyylisivuun viittaus esim. näin:


<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="tyylisivu.css" type="text/css"?>

Oikea paikka on siis XML määrittelyn jälkeen. HREF ilmaisee missä tyylidokumentti sijaitsee. Tässä esimerkissä css-tiedosto "tyylisivu.css" sijaitsee siis samassa kansiossa kuin varsinainen xml-dokumentti. Lopputulos on sitten kutakuinkin tällainen.

Tehtävä 7.
Kirjoita tyylisivu ja lisää se edellä olevaan esimerkkiin.