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.