Harjoituksia
Harjoitus 1
1. Avaa Notepad
2. Kirjoita css-määrittelun mukaisia perustyylejä elementeille body, p, a (
+ pseudoluokat) sekä eri otsikkotasot.
...
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 Markup
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