Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width50%

Kurssin tavoitteet

Panel
bgColor#ffffff
title

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 a metropolia.fi

Kurssin suorittaminen

  • Läsnäolo opetuksessa 80%
  • Harjoitustyönä toteutettava sivusto (vähintään 4-5 sivua) sekä dokumentaatio (4-5 sivua A4) sivun suunnittelusta ja toteutuksesta
Ohjeita harjoitustyöhön
  • Tee validit html-sivut ja ulkoinen css-tiedosto (html 4.01 & css 2)
  • erota rakenne ja ulkoasu toisistaan
  • Suunnittele myös tulostusnäkymä
  • Julkaise sivusto kotihakemistossasi tai muualla verkossa
Ohjeita dokumentaatioon
  • Lähetä opettajalle sähköpostitse kuvaus (3-4 sivua) sivuston tavoitteesta, kohderyhmästä ja suunnitteluperiaatteista
Harkkatyön arviointikriteerit
  • Oikeaoppinen ja validi HTML ja CSS
  • Layout: käytettävyys, visuaalisuus
  • Dokumentaatiossa kuvaillut perustelut tehdyille valinnoille: miten toteutettu sivusto vastaa tavoitteisiin?

Aikataulu ja sisällöt

Perusopiskelijat

Aihe

Ma 15.3. klo 8.30-11.45

Peruskäsitteet. Yksinkertaisen verkkosivun luominen. Validointi.

Ma 22.3. klo 8.30-11.45

Etäyhteydet: ssh, ftp. Tyylitiedostojen luominen ja linkittäminen. Värien käyttö ja typografian muotoilu tyylitiedostoilla.

Ma 29.3. klo 8.30-11.45

Kuvan lisääminen ja asemointi. Linkit ja hakemistorakenne. 

Ke 14.3. klo 8.30-11.45

CSS-taitto

Ma 19.4. klo 8.30-11.45

Taulukon luominen ja muotoilu tyylitiedostolla

Ma 26.4. klo 8.30-11.45

Listat ja navigaation muotoilu.

Ma 3.5. klo 8.30-11.45

Yhteenveto: Kokonaisen verkkosivun luominen: taitto, navigaatio, julkaisu

Ma 10.5. klo 8.30-11.45

Harjoitustyön teko

Ma 17.5. klo 8.30-11.45

Harjoitustyön teko

Ma 24.5. klo 8.30-11.45

Harjoitustöiden esittely

Perusopiskelijoiden kevään aikataulu

Aikuisopiskelijat

Aihe

To 18.3. klo 16.30-20.30

Peruskäsitteet. Yksinkertaisen verkkosivun luominen. Validointi.

To 25.3. klo 16.30-20.30

Etäyhteydet: ssh, ftp. Tyylitiedostojen luominen ja linkittäminen. Värien käyttö ja typografian muotoilu tyylitiedostoilla.

To 1.4. klo 16.30-20.30

Kuvan lisääminen ja asemointi. Linkit ja hakemistorakenne. 

To 15.4. klo 16.30-20.30

CSS-taitto

To 22.4. klo 16.30-20.30

Taulukon luominen ja muotoilu tyylitiedostolla

To 29.4. klo 16.30-20.30

Listat ja navigaation muotoilu.

To 6.5. klo 16.30-20.30

Yhteenveto: Kokonaisen verkkosivun luominen: taitto, navigaatio, julkaisu. Aloitetaan harjoitustöiden teko.

To 13.5. klo 16.30-20.30

Helatorstai - ei opetusta

To 20.5. klo 16.30-20.30

Harjoitustyön teko

To 27.5. klo 16.30-20.30

Harjoitustoiden viimeistely ja esittely

Aikuisopiskelijoiden kevään aikataulu

Kurssin suorittaminen

  • Läsnäolo opetuksessa 80%
  • Harjoitustyönä toteutettava sivusto (vähintään 4-5 sivua) sekä dokumentaatio (4-5 sivua A4) sivun suunnittelusta ja toteutuksesta
Ohjeita harjoitustyöhön
  • Tee validit html-sivut ja ulkoinen css-tiedosto (html 4.01 & css 2)
  • erota rakenne ja ulkoasu toisistaan
  • Suunnittele myös tulostusnäkymä
  • Julkaise sivusto kotihakemistossasi tai muualla verkossa
Ohjeita dokumentaatioon
  • Lähetä opettajalle sähköpostitse kuvaus (3-4 sivua) sivuston tavoitteesta, kohderyhmästä ja suunnitteluperiaatteista
Harkkatyön arviointikriteerit
  • Oikeaoppinen ja validi HTML ja CSS
  • Layout: käytettävyys, visuaalisuus
  • Dokumentaatiossa kuvaillut perustelut tehdyille valinnoille: miten toteutettu sivusto vastaa tavoitteisiin?


    Column

    Kurssimateriaali

    Panel
    bgColor#efefef
    titleYleistä

    Verkkosivustojen suunnittelu ja toteutus

    HTMLn ja CSSn historiaa ja peruskäsitteitä

    Selaimen ja palvelimen toiminta

    Oman sivuston julkaiseminen ja ylläpito

    Yksiköt (px, em jne)

    Miksi on tärkeää opiskella html ja css systemaattisesti?

    Panel
    bgColor#efefef
    titleHTML

    Mitä on HTML?

    HTML-sivun luominen

    Elementit ja tagit

    Tekstin muotoilu html-merkkauksella

    Linkit ja hakemistorakenne linkityksessä

    Kuvien lisääminen

    Järjestetyt ja järjestämättömät listat

    Elementit ja määritteet

    Panel
    bgColor#efefef
    titleCSS

    Ulkoasun muotoilu CSS:llä

    Tyylitiedostojen muoto ja rakenne

    Tyylimäärittelyn liittäminen html-sivuun

    Tyyliohjeiden yhdistäminen

    Tärkeimmät selektorit

    CSS ja selainten tuki

    Värit ja värikoodit

    Tekstin ja linkkien muotoilu

    Kiinteä vai mukautuva taitto?

    Listat ja navigaation muotoilu

    Kaksoisjulkaiseminen

    Kommentointi

    Panel
    bgColor#efefef
    titleTeknisesti toimivat sivut

    DTD, Meta-elementit, merkkikoodit

    Validointi

    Panel
    bgColor#efefef
    titleMuuta materiaalia

    Multimedian lisääminen sivuille
    Vierityspalkin lisääminen ja sen ulkoasun muuttaminen tyylitiedostoilla
    Selainskriptit

    Panel
    bgColor#efefef
    titleMitä ohjelmistoja tarvitaan?

    Kurssilla käytetään tekstieditoreita html- ja tyylitiedostojen tekemiseen.

     >> Lataa Notepad++

    Panel
    bgColor#efefef
    titleTärkeitä linkkejä

    http://www.w3.org/, World Wide Web Consortium

    Merkkauskielten idea (Jukka K. Korpelan verkko-opas)

    Panel
    bgColor#ffffff
    titleHarjoituksia

    Perusharjoituksia html-sivujen tekoon
    Perusharjoituksia tyylitiedostojen käytöstä

    Taulukko-harjoituksia
    CSS-taittoharjoituksia

    Listojen käyttö ja navigaation rakentaminen
    CSS-lohkot ja kaksoisjulkaiseminen