WWW-sivut (HTML)

Harjoitus

Suunnittele ja tee yksinkertainen www-sivu (kuten CHL-esimerkkisivu mestareiden liigasta), käytä mielikuvitustasi. Sivu voi olla esim.
  • SM-Liigasta tai muutamasta sen joukkueesta, Englannin valioliigasta, salibandyliigasta tai jostain urheiluseurasta
  • Moottoripyöristä
  • Muutamasta bändistä, artistista tai vaikka kitaroista
  • Mieliharrastuksistasi
  • Laivoista
  • Merkittävimmistä keksinnöistä
  • jne. mitä mieleen tulee.

Tallenna sivu omaan kansioosi .html -muodossa kuvaavalla nimellä (esimerkiksi chl.html).

Sivulla täytyy olla...

  • Eri otsikkotasoja (h1,h2,h3) ja kappaleita (p). Huom! Kappaleissa täytyy olla myös tekstiä (saat etsiä myös netistä, mutta sen täytyy olla sivustoon sopivaa ja oman näköistä)
  • Vähintään 1 kuva. Huom! Kuvien tulee olla tallennettuna samaan kansioon kuin html-tiedostosi. (Muokkaa kuvia tarvittaessa esim. Irfanview-ohjelmalla)
  • Vähintään 1 linkki
  • Tekijän tiedot (esim. nimi ja päivämäärä) address-elementillä

Sivun täytyy olla...

  • Hyvin suunniteltu
    • Esim. otsikointi on järkevästi tehty ja sivun rakenne on selkeä
    • Suunnittele sivun runko ensin paperille
  • Visuaalisesti tyylikäs ja hillitty
    • Esimerkiksi fonttien värit täytyy olla valittu siten, että ne erottuvat hyvin taustasta

2. Tee otsikot (eri otsikkotasot h1, h2, h3) ja tekstit (p)

Tee sivuillesi otsikkotasot
  • <h1>Näiden tagien sisään suurin otsikkotaso</h1>
  • <h2>Näiden tagien sisään toiseksi suurin otsikkotaso</h2>
  • <h3>Näiden tagien sisään kolmanneksi suurin otsikkotaso</h3>

ja tekstit
  • <p>Näiden tagien sisään tekstit. </p>

3. Muotoillaan CSS-tyyleillä otsikot, tekstit ja koko sivun taustaväri

Tee head-elementin sisään style-elementti, jonne määritellään tyylit. Esimerkin tyylit ovat alla olevan kuvan mukaiset (tässä muotoiltu vain siis taustaväri, h1 ja h2, muut ovat oletusarvoilla). Mieti itse omat värit, fontit, keskitykset ja muut tyylit, kysy tarvittaessa apua.

5. Lisää kuva

Tallenna kuvatiedosto esim. kuva.gif samaan kansioon html-tiedoston kanssa.

Lisää kuva sivullesi seuraavalla tagilla.

<img src="kuva.gif" alt="Tähän kirjoitetaan teksti, joka kertoo, mitä kuvassa on, niille, jotka kuvaa eivät näe.">

Peda.net käyttää vain välttämättömiä evästeitä istunnon ylläpitämiseen ja anonyymiin tekniseen tilastointiin. Peda.net ei koskaan käytä evästeitä markkinointiin tai kerää yksilöityjä tilastoja. Lisää tietoa evästeistä