Lektionsplanering: Webbutveckling 1
Årskurs: Gymnasiet
Ämne: Webbutveckling 1
Tema: Grundläggande märkspråk: HTML och CSS
Koppling till styrdokument
Centralt innehåll
Denna lektion syftar till att introducera eleverna till grundläggande märkspråk, HTML (HyperText Markup Language) och CSS (Cascading Style Sheets). Eleverna lär sig hur dessa språk används för att skapa och styla webbplatser.
Kunskapskrav
Eleven ska kunna beskriva och använda grundläggande HTML- och CSS-strukturer för att skapa webbsidor.
Lärarledda instruktioner
Introduktion till HTML (10 min)
- Förklara vad HTML är och dess roll i att strukturera webbinnehåll.
- Gå igenom grundläggande HTML-element såsom <html>, <head>, <body>, <h1>, <p>, och <a>.
- Diskutera hur HTML används för att skapa grundläggande sidstruktur.
Skapa en enkel webbsida med HTML (15 min)
- Demonstrera hur man skriver en enkel HTML-sida i en textredigerare.
- Visa hur man lägger till olika element som rubriker, stycken och bilder.
- Diskutera konsekvenserna av att använda semantiska element.
Introduktion till CSS (15 min)
- Förklara vad CSS är och hur det används för att styla HTML-element.
- Gå igenom grundläggande CSS-regler, inklusive selektorer, egenskapsnamn och värden.
- Demonstrera hur man länkar en CSS-fil till en HTML-sida och ger exempel på styling (färger, typsnitt, marginaler).
Praktisk övning i animation och layout (10 min)
- Visa hur man kan använda CSS för att skapa layout och responsiv design, inklusive flexbox och grid.
- Ge eleverna en praktisk övning där de ska styla sin tidigare skapade HTML-sida med CSS.
- Diskutera vikten av responsiv design och hur man skapar sidor som fungerar på olika enheter.
Reflektion och diskussion (10 min)
- Sammanfatta viktiga punkter kring HTML och CSS, och deras funktion i webbutveckling.
- Diskutera hur dessa språk interagerar och hur de kan användas tillsammans för att skapa effektiva webbsidor.
- Svara på eventuella frågor som eleverna har.
Aktivitet
Eleverna ska skapa en enkel webbplats som består av en startsida och en undersida. De ska använda HTML för strukturen och CSS för att styla sina sidor. Varje elev presenterar sin webbplats för klassen och beskriver hur de använt HTML och CSS för att nå sina designmål.
Exit-ticket
- Vad är HTML och vad används det till? (HTML är ett märkspråk som används för att strukturera innehåll på webben.)
- Nämn tre grundläggande HTML-element. (Exempelvis <h1>, <p>, <a>.)
- Hur fungerar CSS? (CSS används för att styla HTML-element, inklusive layout och färger.)
- Vad är en selektor i CSS? (En del av CSS-regeln som anger vilka HTML-element som ska stilas.)
- Varför är responsiv design viktig? (För att säkerställa att webbplatsen fungerar korrekt på olika enheter, som mobiler och surfplattor.)
Hemuppgift
Som hemuppgift ska eleverna skapa en komplett webbsida med HTML och CSS, inklusive layout och stil. De ska reflektera över sina val av design och hur de har anpassat sidan för olika skärmstorlekar.
Skriv “Hemuppgift” så tar jag fram en hemuppgift åt dig.
Citat
M.v.h. Isak Skogstad