Internet ja CSS

 Etusivu

Css ja www-sivu

Harjoittelemme seuraavaksi taulukoiden määrittelemistä ja kuvien käyttöä css-koodeja hyödyksi käyttäen.

Taulukot
Css,llä on helppoa määritellä taulukoille muotoja. Taulukot nimetään # avuksi käyttäen. Ensiksi taulukoille määritellään koko width ja height-ominaisuuksilla.

width/height - leveys ja korkeus esim 100%, 200px
margin-left - taulukon sijoitus vasemmalta sivulla esim 100px
border-width - reunaviivan paksuus esim 1px
border-style - reunaviivan tyyli esim solid, dotted
border-color - reunaviivan väri esim  black, #003399
border-spacing - solujen viivojen väli esim 10px
padding - irtautuminen reunasta esim 10px 10px 10px 10px
text-align - tekstin sijoitus esim left, center

Laatikot otetaan käyttöön <div id> -koodilla.
 

 

Kuvat ja linkkityylit
Kuvat tuodaan sivulle html-koodia käyttäen. Kuvien esille tuomista voidaan kuitenkin muokata laatimalla css-koodi img-valitsimelle. Oheisessa esimerkissä luomme kuville reunaviivan border-komennolla ja efektireunuksen radius ja padding-käskyllä. 

Linkkiefektin saa laatimalla a-valitsimelle omat määritelmät. Hoover-määritelmät koskevat aktiivista linkkiä kun hiiren osoitin on linkin päällä.

Tehtäväkuvat

Video

 
 

Aiheeseen liittyvät linkit

Internet ja historiaa
 - Värikoodit html-kielessä
 - Windows-fontit
 - W3schools css-koodeja

Opetusmateriaalia (PDF)
 - HTML-kielen perusteita
 

 

Kysy neuvoa tai anna vinkki

 

Tiedotteet ja aikataulut

Tervetuloa kurssille!

 

Tehtävät ja palautus

CSS-sivu tehtävä

1. Lisää harrastussivullesi kuvia hyödyntäen css-koodia. Laita sivun kuvat ja tekstit omiin taulukkoihin.

Palauta vastaukset verkkoon alla olevasta linkistä. Palauta tehtävät muistioon kirjoitettuna. Voit kirjoittaa ja muokata tehtäviä myös palautuksen jälkeen. Palautuskansio on salasanasuojattu. Saat käyttäjätiedot opettajalta. Palauta tiedosto varustettuna omalla nimelläsi muotoon:
sukunimi_etunimi.txt

» Palauta tiedosto tänne