Lærerveiledning - HTML: Del inn nettsiden

Skrevet av: Lars Klingenberg og Susanne Rynning Seip

Kurs: Web

Tema: Tekstbasert, Nettside

Fag: Programmering, Kunst og håndverk

Klassetrinn: 8.-10. klasse, Videregående skole

Om oppgaven

Målet med denne oppgaven er å lære hvordan man kan organisere en nettside ved å dele den inn med forskjellige tagger. Dersom elevene ikke er kjent med tagg-strukturen i HTML som vi har sett på de tidligere oppgaven, så anbefaler jeg at elevene går tilbake og ser på disse. Vi skal også se på hvordan vi kan sette farge på de forskjellige taggene ved hjelp av CSS, men vi kommer ikke til å gå i dybden av CSS i denne oppgaven.

Oppgaven passer til:

Fag: Programmering, Kunst og håndverk, IT1

Anbefalte trinn: 8. trinn - VG2

Tema: Web, HTML, CSS

Tidsbruk: Dobbeltime

Kompetansemål

Kunst og håndverk, 7. trinn: bruke programmering til å skape interaktivitet og visuelle uttrykk
Programmering, 10. trinn: bruke flere programmeringsspråk, deriblant minst ett som er tekstbasert
IT1, VG2: designe og utvikle nettsider ved hjelp av markeringsspråk og programmering
IT1, VG2: planlegge og implementere brukergrensesnitt
IT1, VG2: lese, strukturere, analysere og kommentere programkode

Forslag til læringsmål

Eleven kan bruke grunnleggende HTML-tags til å dele inn en nettside
Eleven kan bruke grunnleggende CSS til å sette forskjellig stil på forskjellige deler av nettsiden.

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: Grunnleggende HTML og CSS.
Utstyr: Datamaskin med internett og tekstbehandlingsverktøy.

Fremgangsmåte

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

Generelt

Denne oppgaven er lagt opp slik at elevene må tenke litt selv og finne ut av ting på egen hånd. Dette gjør at elevene ikke bare kan kopiere kode, men må skrive den selv. Elevene vil få hint underveis, sammen med et forslag til koden så langt. De flinkeste elevene vil kanskje bare se på resultatet og programmere på seg frem til resultatet uten å bruke oppskriften.

Variasjoner

Eleven kan lage eget nettsted med eget design
Eleven kan gå tilbake til tidligere arbeid for gjøre om stilen og HTML-strukturen for å gjøre arbeidet mer strukturert.

Eksterne ressurser

Foreløpig ingen eksterne ressurser ...

Lisens: CC BY-SA 4.0

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!

Rapporter et problem

Gå til forumet

Vis koden og fiks selv