Harjoituksia

Harjoitus 1

1. Avaa Notepad 

2. Kirjoita css-määrittelun mukaisia perustyylejä elementeille body, p, a (
+ pseudoluokat) sekä eri otsikkotasot.

Esim.
body
{       background-color : #FFFFFF;
        {
 #FFFFFF;
 font-family : Verdana, Arial, sans-serif;
        color : #000088;
        margin: 0px;
}

3. Tallenna tyylitiedosto samaan kansioon kuin muutkin harjoitukset *css*-nimiseen kansioon nimellä *tyyli1.css*

4. Avaa viime kerralla tehty harjoitussivu, joka sisältää kuvia ja tekstiä. 

5. Linkitä *tyyli.css* -tiedosto harjoitussivuun LINK-määritteellä

6. Tallenna tyylitiedosto ja esikatsele html-sivu selaimessa

Harjoitus 2

1. Avaa loputkin viime kerralla tehdyt harjoitukset ja linkitä *tyyli1.css*-tiedosto niihin

...

3. Muokkaa tyylitiedostoa, jos vielä tarpeen

Harjoitus 3

1. Avaa viime kerralla tehty harjoitus, jossa on tekstiä nokkaeläimestä (platypus)

...

5. Tallenna ja esikatsele

Harjoitus 4

1. Luo uusi html-sivu perusrakenteineen ja tallenna se omaan kansioosiunmigrated-wiki-markup

2. Valitse kolme kuvaa sivulta \ [http://www.sxc.hu/\] ja lisää ne sivulle peräkkäin

3. Luo uusi tyylitiedosto ja ja tallenna se css-nimiseen kansioon nimellä *kuvat.css*

4. Tee jokaiselle kuvalle oma luokka (.class) tyylitiedostootyylitiedostoon. Määrittele luokassa jokaiselle kuvalle erilainen reunaviiva, marginaali ja täyte (padding)

5. Muut Muuta kuvien leveyksiä siten, että ensimmäisen leveys on 30%10%, toisen 50% 30% ja kolmannen 100%50%.

6. Lisää kuviin marginaalia.

6. Tallenna ja katsele selaimessa

*Lisätehtävä nopeille:*

Wiki MarkupTutustu clip-elementin toimintaan: \[http://www.w3schools.com/css/tryit.asp?filename=trycss_clip\]

Leikkaa kuvista reunat pois clip-elementin avulla. 

Harjoitus 5: Käyntikorttina toimivan sivuston luominen

Tee 3-4 sivun kokonaisuus, johon teet ulkoisen tyylitiedoston.

Sivun tarkoituksen on toimia kuvitteellisen mainostoimiston käyntikorttina verkossa. Sivulle tulee lyhyt kuvaus yrityksen toiminnasta, yhteystiedot ja linkkejä yrityksen toteuttamiin sivuihin.

Käytä sivulla ainakin seuraavia elementtejä:

- taustaväri (esim. navigaatiossa olevien linkkien taakse)

- kuvituskuva / taustakuva

- leipätekstin muotoilu (tekstin koko, rivivälit, rivinkorkeus)

- marginaalit ja täyte elementtien asettamisessa