Om oppgaven

Katten Felix har forsvunnet. Eieren hans har laget en plakat for å henge opp i nabolaget, men du innser at å lage en webside gjør at mange fler kan se den. Eleven skal derfor lage en hjemmeside for den forsvunnede katten.

Oppgaven passer til:

Fag: Norsk, Programmering, Teknologi i praksis, Informasjonsteknologi 1

Anbefalte trinn: 7. trinn - VG2

Tema: HTML, css, web, dokumentasjon

Tidsbruk: Dobbelttime

Kompetansemål

Norsk, 4. trinn: lage tekster som kombinerer ord, lyd og bilde, med og uten digitale verktøy
Prorammering, 10. trinn: bruke grunnleggende prinsipper i programmering, slik som løkker, tester, variabler, funksjoner og enkel brukerinteraksjon
Programmering, 10. trinn: dokumentere og forklare programkode gjennom å skrive hensiktsmessige kommentarer og ved å presentere egen og andres kode
Teknologi i praksis, 10. trinn: undersøkje teknologiske produkt og dei vala som er gjorde med omsyn til bruk, tekniske løysingar, funksjonalitet og design
Informasjonsteknologi 1, VG2: redigere nettsteder ved bruk av standardiserte oppmerkingsspråk
Informasjonsteknologi 1, VG2: organisere og begrunne filstrukturen for nettsteder
Informasjonsteknologi 1, VG2: planlegge nettsteder som inneholder multimediekomponenter

Forslag til læringsmål

Elevene kan kombinere bilder og tekst i HTML.
Elevene kan kan bruke enkle HTML-tags til å lage fet tekst
Elevene kan legge til paragrafer av tekst som er relevant til et bilde
Elevene vet hva meta-data er og klarer å legge dette til på nettsiden
Elevene klarer å legge til kommentarer i HTML-filen sin
Elevene klarer se hvordan HTML og CSS brukes sammen for å lage nettsider

Forslag til vurderingskriterier

Eleven oppnår middels måloppnåelse ved å fullføre oppgaven.
Eleven oppnår høy måloppnåelse ved å videreutvikle egen kode basert på oppgaven.

Forutsetninger og utstyr

Forutsetninger: Bør ha gjort oppgaven Vi bygger hjemmeside.
Utstyr: Datamaskiner med internett og tekstbehandlingsprogram.

Fremgangsmåte

Her kommer tips, erfaring og utfordringer til de ulike stegene i den faktiske oppgaven. Klikk her for å se oppgaveteksten.

Steg 2: Legg til bilde

Viktig at bilde ligger i samme mappe som index.html.

Steg 5: Legge til kommentarer i koden

Her er det viktig å bruke riktig tegn.

Variasjoner

Elevene kan legge til mer innhold på siden: Er det noe annet du kan legge til websiden som vil hjelpe folk å finne Felix? Mer informasjon? Hvordan ville du lagt til et kart over hvor han forsvant?
Mer gøy med bilder. Legg til et bilde som beveger seg. Prøv å legge til bildet catswithhats.gif til websiden. Last ned gifen eller bruk lenken her: catswithhats.gif. Åpne det i nettleseren og se hva som skjer.
Hvis Felix blir funnet. Bruk taggen <del> for å streke over informasjon som ikke lenger er sant, som foreksempel forsvunnet. Bruk taggen <ins> for å sette inn ny informasjon istede, som foreksempel Funnet!