HTML5-ohjelmointia

Tavoite

Tavoitteena on lisätä ymmärrystä WWW-käyttöliittymän ohjelmoinnista

  • HTML-kieleen ja

  • CSS-tyylitiedostoihin tutustuen

Teoriaa

MVC-malli

WWW-sivujen arkkitehtuuriksi on vakiintunut ns. MVC-malli.

M = model

V = view

C= controller

Hurjan MVC for dummies kuvaus MVC-mallista.

HTML5

WWW-sivujen näkymä (view) voidaan toteuttaa mm. HTML5:llä

HTML5 tarkoittaa erilaisia, toisiinsa osittain kytkeytyviä asioita (Lähde Wikipedia):

  • HTML-merkintäkielen uutta versiota tai kehitysvaihetta

  • yleisnimitystä monille nykyaikaisille web-tekniikoille

  • sovellusten toteuttamista webin tekniikoilla (JavaScript, CSS, HTML).

CSS (cascading style sheets)-tyylitiedostot ovat tiedostoja, joissa määritellään miten web-sivun elementit tulee näyttää käyttäjälle. HTML-kuvauskielellä määritellään web-sivun rakenne ja sisältö, tyylitiedostoilla sen ulkoasu. (Lähde: Helsingin yliopiston Web-selainohjelmointi)

HTML

Tutustu W3Schoolsin tutoriaaliin.

CSS

Tutustu Demoon W3Schoolsin sivulla.

Kokeile CSS-esimerkkiä.

Harjoitusohjeita

  1. Viritä HTML5-ympäristö kokeilua varten esimerkiksi seuraavasti

    • Käytä HTML-tekstin laatimiseen Notepad++:aa tai jotain vastaavaa tekstieditoria

    • Tallenna HTML-tekstisi koneellesi (katsotaan sopiva paikka tunnilla)

    • Lataa itse laatimasi (tai kopiomasi) teksti selaimeen, joka on Chrome

    • Tutustu Chromen kehittäjän työkaluihin

  2. Käy järjestelmällisesti läpi harjoituksia W3Schoolsin sivulta

    • Aloita HTML HOME -sivulta

    • Käytä Home ja Next-nappuloita siirtyäksesi sivulta toiselle

    • Aivan kaikkea ei tarvitse yrittää ymmärtää

    • Pyri etenemään aina CSS-harjoituksiin saakka.