Tehtävä 15

Tässä tehtävässä aiemmin tehdyn sivuston HTML-dokumentit muokataan sellaisiksi, että kaikki ulkoasuun liittyvät attribuutit ja muotoilut poistetaan ja siirretään omaan CSS-tyylitiedostoon.

Tämä tehdään kolmessa vaiheessa:

  1. ensin HTML-koodista poistetaan kaikki muotoilut ja sivun alkuun lisätään linkki tyylitiedostoon.
  2. Seuraavassa vaiheessa luodaan tuo tyylitiedosto ja sen sisään kaikkien elementtien ominaisuudet.
  3. Lopuksi vielä kaikki tiedostot tarkistetaan validaattoreilla.

Harjoituksen tekemiseen saattaa mennä vähän aikaa, varsinkin jos joudut tarkistamaan jokaisen ominaisuuden nimen W3C:n sivuilta. Voit toki tehdä tehtävän osissa, esim. ensin vain vaihe 1 ja myöhemmin osa vaiheesta 2 jne.

Kun saat tehtävän valmiiksi, ilmoita siitä keskustelupalstalla tai lähettämällä kurssin ohjaajalle postia.

Hauskaa koodaamista!

Vaihe 1: HTML-tiedoston muokkaaminen

  1. Avaa tehtävässä 11 luotu HTML-dokumentti paasivu.html
  2. Poista siitä kaikki ulkoasuun viittavat elementit:
    • body:n attribuutit
    • sijainnin kursivointi ja kirjaisinkoon pienennys
    • kaikkien kolmen hr-elementin väri, paksuus ja leveys
    • taulukon kaikki attribuutit mukaanlukien tr ja td-elementtien attribuutit
    • h1 ja h3-elementtien muotoilut (tasaus ja kirjaisin)
    • copyright-merkinnän muotoilut
  3. Jotta voit myöhemmin määritellä tietyille elementeille oman ulkoasun, joudut seuraaville elementeille määrittämään oman luokan tai nimen (id:n):
    1. sijainti (sivun vasemmassa yläreunassa):
      käytä tälle span-elementtiä luokalla "sijainti" eli
      <span class="sijainti">Sijainti...</span>
    2. sivun alareunassa oleva hr-elementti
      Käytä tälle omaa nimeä, esim.
      <hr id="loppu">
    3. sivun lopussa oleva copyright-merkintä:
      käytä tälle p-elementtiä luokalla "copy" eli
      <p class="copy">&copy; Velu Webbaaja 2005</p>
  4. Nyt varsinainen HTML-koodin on melkein valmis. Seuraavaksi pitää muuttaa doctype:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
  5. Ja vielä lisätä tiedoston head-osaan linkki seuraavaksi tehtävään tyylitiedoston (käytä tätä nimeä!):
    <head>
	<title>Kotisivu</title>
	<link rel="stylesheet" type="text/css" href="sivusto.css">
</head>

Vaihe 2: tyylitiedoston luominen

  1. Luo tuttuun tapaan tekstieditorilla tavallinen tekstitiedosto (text, ASCII) ja anna sille nimeksi sivusto.css. Tallenna se samaan hakemistoon muiden tiedostojen kanssa (eli samaan paikkaan missä paasivu.html, cv.html, linkit.html-tiedostot sijaitsevat.
  2. Kirjoita CSS-tiedostoon seuraavat ominaisuudet seuraaville elementeille ja luokille. Jos et muista minkä nimisiä nuo ominaisuudet oikein olivat, tarkista ne vaikka W3C:n koulutussivujen CSS-osiosta.
    • body
      • taustaväri #808000
      • tekstin väri #000080
      • vasen ja oikea marginaali 40 pikseliä
      • ylä- ja alamarginaali 20 pikseliä
      Kun saat määritykset valmiiksi, testaa tehdyt muutokset lataamalla työn alla oleva HTML-sivu uudestaan (reload, F5).
    • linkit (a)
      • linkin väri #cfcf00
      • vieraillun linkin väri #800000
      • kun hiiri menee linkin päälle, linkin väri muuttuu keltaiseksi (yellow) ja taustaväri siniseksi (blue)
      Kun saat määritykset valmiiksi, testaa tehdyt muutokset lataamalla työn alla oleva HTML-sivu uudestaan (reload, F5).
    • h1, h3
      • kirjaisimeksi "Courier New", Courier, monospace
    • h1
      • tasaus keskelle
      Kun saat määritykset valmiiksi, testaa tehdyt muutokset lataamalla työn alla oleva HTML-sivu uudestaan (reload, F5).
    • hr
      • väri #000080 ja paksuus 1px
      Kun saat määritykset valmiiksi, testaa tehdyt muutokset lataamalla työn alla oleva HTML-sivu uudestaan (reload, F5).
    • table
      • taulukon leveys 250px
      • taulukon (sisällä olevan) tekstin tasaus keskelle (center)
    • td
      • solun td leveys 33%
      • solun reunaviiva: border: 2px solid #000080; (tuossa suoraan oikea koodi niin ei tarvitse etsiä ja miettiä)
      Kun saat määritykset valmiiksi, testaa tehdyt muutokset lataamalla työn alla oleva HTML-sivu uudestaan (reload, F5).
      HUOM! tässä kohtaa huomaat, että taulukko ei ihan näytä siltä miltä pitäisi: solujen reunaviivat eivät kohtaa vaan väliin jää tyhjää, ja toisekseen itse taulukko ei ole keskitetty. Voit koettaa ratkaista nämä ongelmat ihan itse, mutta jos se tuntuu liian hankalalta (tai olet laiska) niin palataan näihin kahteen ongelmaan vähän ajan kuluttua. Voit siis jatkaa.
    • sijainti ja copy-luokat
      • kirjaisimen koko 80% ja tyyli (style) italic (kursiivi)
    • copy-luokka
      • tasaus keskelle
      Kun saat määritykset valmiiksi, testaa tehdyt muutokset lataamalla työn alla oleva HTML-sivu uudestaan (reload, F5).
    • loppu-niminen elementti
      • leveys 40%
  3. No niin, palataan vielä tuohon taulukko-probleemaan. CSS:ssä ei ole ominaisuutta, jolla taulukon voisi suoraan tasata keskelle sivua. Tämä pitää tehdä siis kiertoteitse, ja se on seuraavanlainen (muitakin jippoja löytyy):
    • Tehdään luokka, jossa sekä vasen että oikea marginaali asetetaan automaattiseksi:
      .center {margin-left:auto; margin-right:auto;}
    • Tämän jälkeen määritellään taululle tämä luokka:
      <table class="center">
    Seuraavaksi pitäisi ratkaista solujen välinen rako. Ratkaisu löytyi googlettamalla (hakusanoilla cellspacing css) ja tältä sivulta.
  4. Kun olet testannut, että kaikki toimii niin tee kohdat 2-5 tiedostoille cv.html ja linkit.html.
  5. Kopioi kaikki tiedostot (paasivu.html, cv.html, linkit.html, sivusto.css) web-kotisivutilaasi.

Vaihe 3: validointi

  1. Testaa vielä validaattorilla, että kaikki HTML-sivut ovat standardin mukaisia. Jos koodissa on virheitä, korjaa ne ja varmista, että korjattu koodi on palvelimella (web-kotisivutilassasi). Testaa uudestaan ja kun saat hyväksytyn vastauksen validaattorilta, lisää sivun loppuun validaattorin antama koodinpätkä heti copyright-merkinnän perään.
  2. Vielä lopuksi, testaa vielä CSS-validaattorilla että tekemäsi CSS-tiedosto on standardin mukainen.