Page History

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

• 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?

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?

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

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

Kiinteä vai mukautuva taitto?
Taulukkotaitto
CSS-asemointi

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

• HTML validaattori
• CSS Validaattori

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

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

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

Mac-editoreita, esim:

>> TextWrangler

>> Coda

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

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