XML johdatus

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

XML ja CSS

Harjoitus 3a: XML:n ja CSS:n yhdistäminen 

Tee seuraavanlainen tiedosto:

<?xml version='1.0' standalone='yes'?>
<?xml-stylesheet type="text/css" href="harj3a1.css"?>
<document>
<body>
Dokumentin alussa on varoitus.<warning>Voit joutua ojasta allikkoon.</warning> Muita huomautustyyppejä ovat sitten pienet vihjeet <tip>Parempi katsoa kuin katua</tip> ja myös toimintavaihtoehdot: <resource>Parempi pyy pivossa kuin kymmenen oksalla.</resource>
</body>
<
/document>

Tee sitten sitä varten tyylitiedosto harj3a1.css:

body {display : block}
tip {margin-left:1.5cm;width:250px;border:solid 3px
   black;position:relative; background-color:yellow;}
resource {margin-left:1.5cm;width:250px;border:solid 3px
   black;position:relative; background-color:green;}
warning {margin-left:1.5cm;width:250px;border:solid 3px
   black;position:relative; background-color:red;}

Tallenna ja testaa näiden toiminta. Muokkaa tyylitiedosto yksinkertaisemmaksi niin, että kaikille yhteiset tyylimäärittelyt annetaan vain kerran, ja tallenna nimellä harj3a2.css.

Harjoitus 3b: XML:n ja CSS:n yhdistäminen, CD-tietokantasi 

Harjoituksessa 1 suunnittelit, miten esittäisit CD-levyä koskevat tiedot XML-muodossa.

Seuraavaksi luo CD-esittelystä selaimella aseteltu sivu CSS-tyylitiedoston avulla. Täydennä tiedoston dataa siten, että sitä on riittävästi kiinnostavan tulostuksen aikaansaamiseen. Käytä erilaisia värejä, sisennyksiä tai kirjasintyylejä erityyppiselle tiedolle.
Voit kehittää CD-esitystä paremmaksi käyttäen hyväksi esim. taulukoita, lohkojen sijoittelua, kuvan lisäämistä sekä sivupalkkia.

Tallenna ja testaa jälleen parilla selaimella. Voit helposti havaita, että XML ja CSS yhdistelmänä eivät vielä riitä kunnollisen lopputuloksen tekemiseen, joten voit suosiolla jättää vaativat asiat toteutettaviksi vaikkapa XSLT:llä.

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

Päivittänyt: Jaana Holvikivi
Muutettu 25.3.2015