Verkkopalvelu html css 09.03 tehtävä:

1) Lataa omalle koneellesi neorealismi.rtf

tee tekstistä nettisivu ulkoisella css koodilla. Tallenna html sivu tiedostonimellä neorealismi.html ja css tiedosto nimellä neotyyli.css

käytä tägejä: otsikko, tekstikappale, lista (ul)

-anna otsikolle oma taustaväri

ensimäisen kappaleen: leveys 50% (vinkki: käytä id tai class atribuuttia)

 

sivun pitäisi nyt näyttää noin tältä:

 

 

tallenna tehtävä levylle: Y:\Käpylä\AV-Viestinta_2\11D\verkkopalvelu\luento05tehtava\omasukunimi

 

 

2) lisää ensimäiseen kappaleeseen reunaviiva, täyte, keskitys ja tekstin kursivointi (css koodilla)

kuten kuvassa:

 

3) muuta otsikon taustaväri niin, että väri on täsmälleen kuten yllä olevassa kuvassa.

4) kääri koko body tagin sisältö yhteen div tägiin (anna luokka atribuutti ja sille arvo wrapper)

css arvot div wrapper elementille: leveys 780px, taustaväri (katso kuva alla), keskitys, marginaali ylös

anna body tagille oma taustaväri ja wrapper div:ille toinen taustaväri

nollaa body tagin marginaalit ja täytteet

body tagille kirjasin: Tahoma

sivu näyttää nyt tältä:

 

5) lisää täytettä tekstikappaleissa vasemmalle ja oikealle kuten kuvassa:

 

 

6) poistetaan lähdelistan listan pallukat:

lisää css koodi:

ul {
list-style-type:none;
}

editoi otsikkoa niin, että syntyy kaksi otsikkoa Elokuvan historiaa ja alaotsikkona NEOREALISMI

lisätään täytettä otsikkoihin ja säädetään niiden kokoa kuten kuvassa:

 

7) kääri sivun lopusta lähteet yhden div elementin sisään:

koodilla:

<div class="lahteet">
<h3>Lähteet: </h3>
<ul>
<li>Beaver, Frank E., On Film 1983. </li>
<li> Robinson, David, World Cinema 1895-1980. </li>

ja anna div elementille oma taustaväri:

tässä html koodi kohdassa 7

 

8) lataa taustakuva samaan kansioon ja lisää seuraavat koodi css tiedostoon:

background:url(filmitaustakuva5.jpg) repeat-x;

 

9) luo h2 tagille oma itse ideoitu taustakuva joka ei toistu (no-repeat)

10) hae netistä joku tekstiin liittyvä kuva ja liitä se tekstin kuvitukseksi img tagillä: käytä css float ominaisuutta kuvan rivittämiseen