Kurssin tavoitteet
Opiskelija
- ymmärtää verkkoteknologioiden peruskäsitteet
- ymmärtää html- ja css -dokumenttien rakenteet ja toimintaperiaatteet
- osaa rakentaa oikeaoppisia verkkosivustoja
- oppii itsenäisesti seuraamaan verkkoteknologioiden kehitystä ja etsimään lisätietoa erilaisista lähteistä
Opettaja: Eeva Meltio, eeva.meltio@metropolia.fi
Aikataulu ja sisällöt
Perusopiskelijat |
Aikuisopiskelijat |
Aihe |
Paikka |
---|---|---|---|
Ma 15.3. klo 9-12 |
To 18.3. klo 17-20 |
Peruskäsitteet |
http://kulttuurilukkari.metropolia.fi/
Kurssin suorittaminen
Kurssin suorittamiseksi opiskelijan on oltava läsnä opetuksessa 80%.
Lisäksi opiskelija tekee harjoitustyönä vähintään 4-5 sivun kokonaisuuden. Sivuston aiheena on
- oma portfolio
- muu oma projekti (hyväksytä ensin opettajalla!)
Vaatimukset:
- validit html-sivut ja ulkoinen css-tiedosto (html 4.01 & css 2)
- sisältävät minimissään kuvaa ja tekstiä, mielellään myös muuta mediaa
- myös tulostusnäkymä on suunniteltu
Arviointikriteerit:
- Sivuston toimivuus ja käytettävyys
- Toimivuus eli selaimilla ja käyttöjärjestelmillä
- HTML:n ja CSS:n soveltamisen laajuus sivustolla:
- rakenteen ja ulkoasun erottaminen
- typografian suunnittelu: toimivuus käyttäjän kannalta
- layout: käytettävyys, visuaalisuus
Harjoitustyön muoto:
- omassa kotihakemistossa tai muualla verkossa julkaistu toimiva sivusto
- sähköpostitse lähetetty kuvaus (3-4 sivua) sivuston tavoitteesta, kohderyhmästä ja suunnitteluperiaatteista.
*Palautuspäivä: *
Materiaalia
HTML:n ja CSS:n historiaa ja peruskäsitteitä
Internetin ja hypertekstin kehittyminen
Selain
Palvelin
Verkkosivustojen suunnittelu ja toteutus
Oman sivuston julkaiseminen
Yksiköt (px, em jne)
Mitä on HTML?
Määrittelyt ja standardit
HTML-dokumentin luominen
Tekstin muotoilu
Elementit ja määritteet
Värit
Yksiköt
Linkkien teko
Hakemistorakenne linkityksessä
Kuvien lisääminen
Järjestetyt ja järjestämättömät listat
DTD ja miten siihen viitataan
Validointi
Ulkoasun muotoilu CSS:llä
CSS:n muoto ja rakenne
Tyylimäärittelyn liittäminen html-sivuun
span / div / display
Tärkeimmät selektorit
Tekstin muotoilu
- taustavärit
- reunite (borders)
- marginaali
- täyte (padding)
Taitto - Validointi
Multimedian upottaminen verkkosivuille
Selainskriptit