Verkkoteknologian perusteet
opettaja: Eeva Meltio, eeva.meltio@metropolia.fi
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ä
Kurssin rakenne
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
Harjoituksia Dreamveawerilla