Vefsíðugerð – HTML og CSS saman
Tilgangur
Að nemendur læri að sameina HTML og CSS til að búa til skipulagða og sjónrænt aðlaðandi vefsíðu.
Hæfniviðmið og námsmarkmið
Nemandi getur búið til vefsíðu með HTML uppbyggingu og CSS stílum sem er bæði skipulögð og sjónrænt aðlaðandi.
- Nemandi skilur muninn á HTML (uppbygging) og CSS (útlit)
- Nemandi getur notað CSS til að breyta litum, leturstærð og bili
- Nemandi getur tengt CSS stílblað við HTML skjal
Getustig og forsendur nemenda
- Lestur: Nemendur geta lesið og skrifað íslensku og enska hugtök.
- Tækni: Nemendur þekkja HTML grunntög (h1, p, img, a, ul, li) frá 5. bekk.
- Aðrar forsendur: Nemendur þurfa þolinmæði og nákvæmni við innslátt kóða.
Lýsing á kennslustund
Nemendur byggja á HTML þekkingu sinni frá 5. bekk og bæta við CSS til að stíla vefsíðuna sína. Þeir læra um liti, leturgerðir, bakgrunna, bil og einfalda útlit. Verkefnið er að búa til vefsíðu um náttúru Íslands eða annað þema sem tengist námsefni þeirra.
1. Kynning (10 mín): Kennarinn sýnir tvær útgáfur af sömu vefsíðu – eina með bara HTML (svart á hvítu) og aðra með CSS stílum (litir, myndir, fallegt útlit). Spyr: Hvað er munurinn? CSS er eins og fatnaður vefsíðunnar! 2. CSS grunnur – Saman (20 mín): Kennarinn leiðir nemendur í gegnum: (a) Búa til style tag eða CSS skrá, (b) Breyta bakgrunnslit (background-color), (c) Breyta letri (font-family, font-size, color), (d) Setja bil (margin, padding), (e) Stíla mynd (border, border-radius). Nemendur fylgja á sínum tölvum. 3. Sjálfstæð vinna (35 mín): Nemendur velja þema (t.d. náttúra Íslands, uppáhalds íþrótt, dýr) og búa til vefsíðu: (a) Skrifa HTML efni (fyrirsögn, texti, myndir, tenglar), (b) Stíla með CSS (bakgrunn, litir, lettur, bil), (c) Gera síðuna fallega og læsilega. 4. Kynning (15 mín): Nemendur sýna vefsíður sínar á skjávarpa. Bekkurinn metur: Hvað er vel gert í hönnuninni? Er síðan auðlesin?
Verkfæri og hugbúnaður
Vefritlar sýna HTML og CSS niðurstöðu hlið við hlið sem gerir nám skilvirkara.
Vafri sýnir niðurstöðu kóðans og gerir kleift að nota 'Inspect Element' til að kanna stíla.
Kennsluaðferðir
Kennarinn sýnir CSS eiginleika á skjávarpa og nemendur prófa sjálfir með því að breyta gildum og sjá áhrifin strax.
Rannsóknargrundvöllur: Papert (1980) – Nemendur læra best þegar þeir sjá strax niðurstöðu breytinga sinna (immediate feedback).
Nemendur velja þema sem tengist öðru námsefni (t.d. náttúra Íslands) sem gefur verkefninu merkingu.
Rannsóknargrundvöllur: Krajcik og Shin (2014) – PBL: Verkefni sem tengjast raunveruleika nemenda auka innri áhugahvöt.
Matsaðferðir
- Verkefnamat: Notar nemandinn bæði HTML og CSS rétt? Er síðan skipulögð og sjónrænt aðlaðandi?
- Gátlisti: Fyrirsögn, texti, mynd, CSS stílar (litur, lettur, bakgrunnur, bil)
- Jafningjamat: Félagar meta vefsíðuna – Hvað er vel gert? Hvað mætti bæta?
Aðlögun
Nemendur bæta við CSS hover áhrifum, flexbox útliti eða búa til vefsíðu með mörgum síðum (navigation).
Nemandinn fær CSS sniðmát með fyrirfram skilgreindum stílum og þarf aðeins að breyta gildum (litir, stærðir).
Þverfaglegar tengingar
- Náttúrufræði/samfélagsfræði – efni vefsíðunnar tengist námsefni í öðru fagi
- Myndmennt – sjónræn hönnun, litaval og útlit