Verkkoteknologian perusteet
...
| | Panel |
|---|
| 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 |
|---|
| title | Kurssin 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
|
|
|
...
Alla lyhyt kuvaus kurssin opetuskertojen sisällöstä. Sivustoille tulee lisämateriaalia koko ajan, myös kurssin edetessä.
1. Aloitusluento: HTML:n ja CSS:n historiaa ja peruskäsitteitä
1. HTML-sivun teko ja julkaisu
2. Tekstin merkkaus ja perusmuotoilut
4. 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
- 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 |
|---|
| Panel |
|---|
| bgColor | #efefef |
|---|
| title | Validointi |
|---|
| 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 |
|---|
| title | Mitä 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 |
|
|
...