Harjoituksia

Harjoitus 1

1. Avaa Notepad 

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

...

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 kansioosi

Wiki Markup2. 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

...

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