Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section
Column
width50%

Verkkoteknologian perusteet

...

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

Panel
bgColor#ffffff
titleKurssin

...

Alla lyhyt kuvaus kurssin opetuskertojen sisällöstä. Osioiden alle avautuu oma sivustonsa, joissa on lisämateriaalia, kun kurssi etenee.

Aloitusluento: HTML:n ja CSS:n historiaa ja peruskäsitteitä

Internetin ja hypertekstin kehittyminen

Miksi on tärkeää opiskella HTML:ää ja CSS:ää systemaattisesti?

HTML:

  • merkkauskielten historiaa
  • mitä html-kielellä voi tehdä?
  • html-merkkauksen perusajatus

CSS

  • tyyliohjeen idea ja käytön hyödyt, lyhyt historia
  • miten ulkoasua voi säädellä?
  • mitä css:llä voi tehdä ja mitä ei voi tehdä?

Esimerkkejä ja projektiesittelyitä.

Jakaudutaan ryhmiin.

1. HTML-sivun teko ja julkaisu

HTML-dokumentin luominen: kokonaisrakenne ja olennaiset elementit

Tyyliohjeen luominen

Tyyliohjeen liittäminen html-sivuun

Linkkien luominen ja hakemistorakenne.

Kuvat ja muut upotettavat elementit.

Sivujen julkaisu: palvelin ja sen toiminta, FTP-ohjelmat.

Harjoituksia.

2. Tekstin merkkaus ja perusmuotoilut

Yleistä verkkosivustojen typografiasta

HTML ja  tekstin merkkaus

CSS tekstin muotoilussa

Lisää selektoreista. Selektorien käytön periaatteet.

Testaaminen tyylien kanssa ja ilman.

Selaimet ja niiden väliset erot.

Harjoituksia.

3. Typografia ja taitto I

Verkkosivustojen taitto, yleisiä periaatteita ja vaihtoehtoja

HTML- taulukkorakenteen perusteet: tieto- ja taittotaulukot

Taulukoiden ulkoasun muotoilu tyylitiedostoilla (perusteet)

Harjoituksia.

4. Typografia ja taitto II

Taulukoiden ulkoasun muotoilu tyylitiedostoilla

Listat ja navigaation rakentaminen

Harjoituksia.

5. Typografia ja taitto III

CSS-taitto

Kuvien käyttö ja niiden sijoittaminen verkkosivuille

Yksiköt ja prosentit. Yksikön valinnan periaatteet.

Harjoituksia.

6. Listat ja navigaation rakentaminen

CSS-taiton syventäminen (display, positioning)
    
Sivujen taitto kokonaisuutena: kiinteä vai mukautuva taitto?

Käyttäjän omat tyylitiedostot

Kaksoisjulkaiseminen

Harjoituksia.

7. Värit, taustat ja läpinäkyvyys

Värien käyttö verkkosivuilla

Muiden objektien upotus tarkemmin

Läpinäkyvyys.

Harjoituksia.

8. Teknisen tiedon syventäminen: DTD, skriptit jne.

DTD ja miten siihen viitataan.

DTD:n vaikutus sivuston näkymiseen (quirks- ja standards-tilat)

Html:n versioita: mitä html:n versiota käyttäisin?

Metatiedot ja metaelementti, hakurobotit

URLit: tarkoitus, rakenne ja URL-koodaus

Selainskriptit yleisesti: mitä ovat, mitä hyötyä?

Harjoituksia.

9. WWW-julkaisemisen erityiskysymyksiä

Validointi

Esteettömyys

Oman palvelintilan hankkiminen: erilaiset mahdollisuudet verkkosivujen säilyttämiseen ja ylläpitoon.

Harjoitellaan ja kerrataan aikaisemmin opittua.

10. Sivunteko-ohjelmat

suorittaminen
  • Läsnäolo opetuksessa 80%
  • Harjoitustyönä toteutettava sivusto (vähintään 1-2 sivua) sekä dokumentaatio 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
  • Julkaise sivusto kotihakemistossasi tai muualla verkossa
Ohjeita dokumentaatioon

Lähetä opettajalle sähköpostitse kuvaus (1-2 sivua)

  • Sivuston tavoite
  • Kohderyhmä
  • Suunnitteluperiaatteet
  • Miten toteutettu ja miksi? (onko käytetty taulukoita, tyylitiedostoja)
  • Mitä opin kurssista / harjoitustyön tekemisestä?
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 14.3.

Peruskäsitteet. Yksinkertaisen verkkosivun luominen. Validointi.

Ma 21.3.

Tyylitiedostojen luominen ja linkittäminen. Värien käyttö ja typografian muotoilu tyylitiedostoilla.

Ma 28.3.

Kuvan ja taustakuvan lisääminen ja asemointi. Linkit ja hakemistorakenne. Värit ja yksiköt. Etäyhteydet: ssh, ftp.

Ma 4.4.

CSS-taitto: Elementtien asemointitavat.

Ma 11.4.

CSS-taitto: Elementtien asemointitavat.

Ma 18.4.

Taulukon luominen ja muotoilu tyylitiedostolla

Ma 2.5.

Listat ja navigaation muotoilu.

Ma 9.5.

Harjoitustyön teko

Ma 16.5.

Harjoitustyön teko

Ma 23.5.

Harjoitustöiden esittely


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

DTD, Meta-elementit, merkkikoodit

Elementit
Elementtien määritteet

Tekstin muotoilu html-merkkauksella
Linkit ja hakemistorakenne linkityksessä

Kuvien lisääminen

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

Listat ja navigaation muotoilu
Kommentointi

Panel
bgColor#efefef
titleLayoutin teko

Kiinteä vai mukautuva taitto?
Taulukkotaitto
CSS-asemointi

Panel
bgColor#efefef
titleValidointi

HTML- ja CSS -dokumenttien oikeellisuus kannattaa tarkistaa ns. validaattoreilla. Validaattorit vertaavat sille annettua dokumenttia niitä koskeviin määrittelyihin ja tarkastavat dokumenttien muodollisen oikeellisuuden.

Panel
bgColor#efefef
titleMuuta materiaalia

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

Panel
bgColor#efefef
titleMitä ohjelmistoja tarvitaan?

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

 >> Lataa Notepad++ (vain windows-käyttöjärjestelmälle)

Mac-editoreita, esim:

>> TextWrangler

>> Coda

Panel
bgColor#efefef
titleTärkeitä linkkejä

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

Ohjeet sivujen julkaisemiseen (Metropolian tietohallinto)

Merkkauskielten idea (Jukka K. Korpelan verkko-opas)
W3Schools HTML Tutorial

Layout Gala (40 validia html/css-layoutia)
http://browsershots.org/ Ottaa kuvan sivustosta kaikilla selaimilla -> hyvä tarkistukseen

Panel
bgColor#ffffff
titleHarjoituksia

Tunneilla tehdyt harjoitukset

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

Taulukko-harjoituksia
CSS-taittoharjoituksia

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

...