Lektionsplanering i Tillämpad programmering
Årskurs: Gymnasiet
Ämne: Tillämpad programmering
Tema: Webbutveckling
Koppling till styrdokument
Centralt innehåll
Denna lektion introducerar grunderna i webbutveckling med fokus på HTML och CSS. Eleverna får lära sig hur man bygger en enkel webbapplikation och skapar en grundläggande webbsida för att förstå hur dessa teknologier samverkar.
Kunskapskrav
Eleven ska kunna använda HTML och CSS för att skapa och designa webbsidor samt förstå webbens grundläggande funktionalitet.
Lärarledda instruktioner
Introduktion till HTML (10 min)
- Förklara vad HTML är och dess roll som markup-språk för att strukturera webbinnehåll.
- Gå igenom grundläggande HTML-strukturer med exempel: <html>, <head>, <body>, <h1> och <p>.
- Diskutera hur man skapar länkar och bilder i HTML.
Introduktion till CSS (15 min)
- Förklara vad CSS är och dess betydelse för att styla och designa webbsidor.
- Demonstrera hur man använder interna och externa stilmallar.
- Gå igenom grundläggande CSS-regler: färg, typsnitt, bakgrund och layout.
Bygga en enkel webbsida (15 min)
- Guidning genom processen av att skapa en enkel webbsida i HTML och CSS.
- Visa hur man lägger till text, bilder, och länkar.
- Illustrera hur CSS används för att styla webbsidan och göra den mer visuellt tilltalande.
Responsiv webbdesign och avslutning (10 min)
- Introducera konceptet responsiv webbdesign och varför det är viktigt.
- Diskutera media queries och hur de kan användas för att anpassa layouten för olika skärmstorlekar.
- Besvara elevernas frågor och ge tips på resurser för vidare lärande.
Aktivitet
Eleverna får i uppgift att skapa sin egen personliga webbsida som innehåller en liten presentation om sig själva och deras intressen. De ska använda både HTML och CSS för att strukturera och styla sidan. Genom denna aktivitet får de praktiskt tillämpa de koncept som de har lärt sig under lektionen.
Exit-ticket
- Vad står HTML för? (HyperText Markup Language.)
- Hur kan du lägga till stil på din HTML-sida? (Genom att använda CSS.)
- Vad gör en <div>-tagg? (Den används för att skapa en sektion i HTML-dokumentet för styling eller layout.)
- Vad är en CSS-klass? (En typ av selektor som används för att tillämpa specifika stilar på element med samma klassnamn.)
- Varför är responsiv design viktigt? (För att säkerställa att webbsidan ser bra ut och fungerar på alla enheter, oavsett skärmstorlek.)
Hemuppgift
Som hemuppgift ska eleverna färdigställa sin personliga webbsida som de började arbeta med under lektionen. De ska lägga till fler sektioner, såsom en projektportfölj eller hobbyer, och se till att designen är responsiv. De ska också skriva en kort reflektion över vad de lärt sig om HTML och CSS.
Citat
”Webben är något vi skapar tillsammans, för alla.” – Tim Berners-Lee (1999)
Citatet understryker samarbetsandan och öppenheten som ligger till grund för webben, något som är viktigt att förstå när man lär sig webbutveckling.
Nästa lektion
Förslag på tema för nästa lektion: Databashantering