Tehtävä 7

Tutustu horisontaali menu-rakentamiseen.

Siirry horisontaali-menu kohtaan Menu:n "lukitseminen paikoilleen" näkyville.
Kokeile esimerkkiä ja avaa esimerkin koodaus linkistä.
Internet-selaimeen avautuvassa esimerkin koodauksessa on erikoisia merkkejä sivun tekstissä.
Avaa uusi tiedosto Notepad++ ohjelmaan, kopioi esimerkin koodaus www-sivulta ja tallenna tiedosto nimellä hmenu.html.
Avaa hmenu.html internet-selaimeen.

Etsi jokin kuva ja muokkaa koodaus näyttämään kuva sivulla kaksi kertaa.
Toteuta valitsemastasi teemasta yhden sivun mittainen www-sivu siten että sivun varsinainen sisältö on sivun keskellä ja molemmissa reunoissa on hieman tyhjää tilaa.
Käytä sisällön tuottamiseen sivulle div-elementtejä.
Muokkaa myös sivuston menun värejä.

Tee tee tehtävien palautussivustollesi tekstilinkki (tai painike) josta avautuu selaimessa uuteen välilehteen toteuttamasi internet-sivu.

HTML-koodaus:

CSS-ohjeet:

	  

Tehtävä 8

Etsi kuva ja liitä kuvaan kolme CSS-muotoilua.
1. Määritä kuvan koko prosentteina ja lisää kuvalle varjo
2. Tee CSS-ohje joka pienentää varjoa kun hiiren osoitin on kuvan päällä
3. Tee CSS-ohje vaihtaa hiiren painiketta painaessa varjon värin punaiseksi

HTML-koodaus:

CSS-ohjeet:

	  

Tehtävä 9

Etsi kuva ja liitä kuvaan kolme CSS-muotoilua.
1. Määritä kuvan koko prosentteina ja lisää kuvalle varjo
2. Tee CSS-ohje joka pienentää varjoa kun hiiren osoitin on kuvan päällä
3. Tee CSS-ohje vaihtaa hiiren painiketta painaessa varjon värin punaiseksi

HTML-koodaus:

CSS-ohjeet:

	  

Tehtävä 10

Etsi kuva ja liitä kuvaan kolme CSS-muotoilua.
1. Määritä kuvan koko prosentteina ja lisää kuvalle varjo
2. Tee CSS-ohje joka pienentää varjoa kun hiiren osoitin on kuvan päällä
3. Tee CSS-ohje vaihtaa hiiren painiketta painaessa varjon värin punaiseksi

HTML-koodaus:

CSS-ohjeet:

	  

Tehtävä 11

Etsi kuva ja liitä kuvaan kolme CSS-muotoilua.
1. Määritä kuvan koko prosentteina ja lisää kuvalle varjo
2. Tee CSS-ohje joka pienentää varjoa kun hiiren osoitin on kuvan päällä
3. Tee CSS-ohje vaihtaa hiiren painiketta painaessa varjon värin punaiseksi

HTML-koodaus:

CSS-ohjeet:

	  

Tehtävä 12

Etsi kuva ja liitä kuvaan kolme CSS-muotoilua.
1. Määritä kuvan koko prosentteina ja lisää kuvalle varjo
2. Tee CSS-ohje joka pienentää varjoa kun hiiren osoitin on kuvan päällä
3. Tee CSS-ohje vaihtaa hiiren painiketta painaessa varjon värin punaiseksi

HTML-koodaus:

CSS-ohjeet: