HTML - Kuva, linkki, taulukko yms.

Kokeilua

Käy läpi seuraavat asiat itse testaamalla:

• Kuvan lisääminen, diat 14-15
• Taustakuva tai taustaväri, dia 9
• Vaakaviiva, dia 11
• Vierivä teksti, dia 12
• Linkki, diat 16-18
• Taulukko, diat 22-25

Opetusvideot

• Linkki, kuvat, vaakaviiva, vierivä teksti
• Taulukko

Työ

 Jatka aiemmin tekemääsi kotisivua eteenpäin lisäämällä seuraavat asiat:

1. Vaihda kotisivun taustan väriä.
2. Lisää sivun yläreunaan vierivä teksti, jonka fonttikoko on tavallista tekstiä isompi.
3. Lisää sivulle kuva
   • Laita kuva samalle tasolle vasemmalle tasatun tekstin kanssa, mutta siirrä kuva oikeaan reunaan
   • Muokkaa kuvaa pienemmäksi
   • Lisää siihen reunat
   • Laita kuvaan komento, jolla näkyy kuvateksti, kun siirretään hiiri kuvan päälle
4. Lisää vasemmalle tasatun ja keskelle tasatun tekstin väliin vaakaviiva, joka menee sivun reunasta reunaan. Viiva pitää olla eri väriä taustan kanssa, jotta se erottuu.
5. Tee kokonaan uusi html-koodi uutta sivua varten. Tälle sivulle tulee otsikko "Linkkejä" ja sen alle lisätään 3x2 taulukko. Taulukkoon rakennetaan vierekkäin linkki toiselle sivustolle ja siihen viereen aina lyhyt selostus. Esimerkiksi:
   
   

   Katso hauska video

   klikkaa tästä!

6. Tee alkuperäiselle sivulle linkki, joka avaa uudessa ikkunassa juuri äsken tekemäsi linkkisivun.

Ekstra: Lisää sivulle upotettu YouTube-video. Huomaa, että iso osa videoista on copyright suojattuja, jolloin niitä ei voi upottaa omalle sivulle. Kannattaa siis etsiessä sisällyttää hakusanaksi "no copyright". Muokkaa video alkamaan automaattisesti. Lisää apua saat tarvittaessa täältä.

Tietokonetaitojen opettelua aina kuvankäsittelystä koodamiseen.