Teknik · Årskurs 6 · Internet och nätverk · Vårtermin

Webbplatser och webbläsare

Eleverna lär sig hur webbplatser är uppbyggda och hur webbläsare tolkar information för att visa innehåll.

• Skolverket Kursplaner
• Lgr22: Teknik 4-6, Centralt innehåll, Informations- och kommunikationsteknik, Internet och hur information överförs
• Lgr22: Teknik 4-6, Centralt innehåll, Teknikutvecklingsarbetets olika faser, Skisser, ritningar och modeller

Om detta ämne

Webbplatser och webbläsare handlar om hur digitalt innehåll byggs upp och visas på skärmen. Elever i årskurs 6 utforskar hur webbplatser består av HTML för struktur, CSS för utseende och JavaScript för interaktion. De lär sig att webbläsare tolkar denna kod steg för steg: hämtar filer från servrar, parsar HTML till en DOM-trädstruktur och renderar pixlar på skärmen. Detta kopplar direkt till Lgr22:s centrala innehåll i teknik, där elever analyserar internetöverföring och teknikutvecklingsfaser som skisser och modeller.

Ämnet bygger systemtänkande genom att elever jämför webbplatser som nyhetssidor, e-handel och spelportaler, och undersöker hur designval som färger, typsnitt och navigering påverkar användarupplevelsen. De ser hur responsiv design anpassar sig till olika enheter, vilket förbereder för senare programmering och UX-design.

Aktivt lärande gynnar detta ämne särskilt väl, eftersom elever snabbt kan experimentera med verkliga webbläsare och enkla kodredigerare. När de ändrar HTML i realtid och ser effekterna direkt, blir abstrakta processer konkreta och minnesvärda, vilket stärker förståelse och motivation.

Nyckelfrågor

1. Förklara hur en webbläsare visar en webbsida på din skärm.
2. Jämför olika typer av webbplatser och deras syften.
3. Analysera hur designen av en webbplats påverkar användarupplevelsen.

Lärandemål

• Förklara hur en webbläsare tolkar HTML- och CSS-kod för att rendera en webbsida visuellt.
• Jämföra syftet och den typiska strukturen hos tre olika webbplatstyper (t.ex. nyhetssida, e-handel, personlig blogg).
• Analysera hur val av färger, typsnitt och layout på en webbplats påverkar användarens upplevelse och navigering.
• Skapa en enkel skiss eller modell som illustrerar hur information överförs mellan en användares webbläsare och en webbserver.
• Klassificera olika webbplatsfunktioner baserat på deras syfte (information, interaktion, transaktion).

Innan du börjar

Grundläggande datoranvändning

Varför: Eleverna behöver känna till hur man navigerar på en dator och använder program för att kunna använda en webbläsare.

Informationssökning på internet

Varför: För att förstå hur webbplatser är uppbyggda behöver eleverna ha erfarenhet av att söka och hitta information online.

Nyckelbegrepp

HTML (HyperText Markup Language)	Ett standardiserat märkspråk som används för att skapa och strukturera innehåll på webbsidor. Det definierar element som rubriker, stycken och länkar.
CSS (Cascading Style Sheets)	Ett stilarksspråk som beskriver hur HTML-element ska visas på skärmen. Det styr färger, typsnitt, layout och andra visuella aspekter.
Webbläsare	Ett program (som Chrome, Firefox, Safari) som hämtar, tolkar och visar webbsidor från internet. Den översätter kod till visuellt innehåll.
DOM (Document Object Model)	En programmeringsgränssnitt för HTML- och XML-dokument. Det representerar sidans struktur som ett träd, vilket gör det möjligt för skript att dynamiskt ändra innehåll och stil.
Webbserver	En dator som lagrar webbplatsfiler och skickar dem till användares webbläsare när de begärs via internet.

Se upp för dessa missuppfattningar

Vanlig missuppfattning

Webbplatser är bara statiska bilder.

Vad man ska lära ut istället

Webbplatser byggs av kod som webbläsaren tolkar dynamiskt. Aktiva experiment med developer tools låter elever se HTML-strukturen bakom bilderna och ändra den live, vilket korrigerar missuppfattningen genom direkt observation.

Vanlig missuppfattning

Webbläsaren laddar hela sidan på en gång.

Vad man ska lära ut istället

Webbläsaren hämtar och renderar resurser stegvis, som text först och bilder sist. Gruppaktiviteter med nätverksverktyg i developer tools visualiserar laddningssekvensen, så elever förstår processen bättre.

Vanlig missuppfattning

Design påverkar inte funktionalitet.

Vad man ska lära ut istället

Bra design förbättrar användarupplevelsen och därmed effektivitet. UX-tester i par visar hur navigering påverkar uppgifter, och diskussioner hjälper elever koppla estetik till praktisk nytta.

Idéer för aktivt lärande

Utforska Developer Tools: Webbläsarinspektion

Låt elever öppna en webbsida i Chrome eller Firefox och aktivera developer tools (F12). De inspekterar element, ändrar CSS-färger live och ser hur DOM-trädet uppdateras. Avsluta med att de antecknar tre förändringar och deras effekter.

30 min·Par

Webbplatsjämförelse: Gruppanalys

Dela in elever i grupper som analyserar tre webbplatser: en nyhetssida, en butik och en spelportal. De noterar struktur, design och syfte i en tabell. Grupperna presenterar fynd för klassen.

45 min·Smågrupper

Enkel Webbsida: Skissa och Kod

Elever skissar en personlig startsida på papper, kodar grundläggande HTML och CSS i en online-editor som CodePen. De testar i webbläsare och itererar baserat på kamratfeedback.

50 min·Individuellt

UX-Test: Navigationsutmaning

Visa en webbsida med bra och dålig navigering. Elever i par tidtagar varandra när de letar efter specifik info och diskuterar hur designen påverkar hastighet och frustration.

25 min·Par

Kopplingar till Verkligheten

• Webbutvecklare på företag som Spotify använder HTML, CSS och ibland JavaScript för att bygga och underhålla gränssnittet där användare lyssnar på musik och upptäcker nya artister.
• Journalister och redaktörer på nyhetssajter som SVT Nyheter planerar hur information ska presenteras visuellt och struktureras med hjälp av webbteknologier för att göra nyheterna lättillgängliga och engagerande för läsarna.
• UX/UI-designers arbetar med att analysera hur användare interagerar med webbplatser, till exempel på e-handelsplattformar som IKEA.se, för att förbättra navigering och köpupplevelse genom designval.

Bedömningsidéer

Utgångsbiljett

Ge eleverna en lapp där de ska rita en enkel skiss av hur en webbsida kan se ut. De ska sedan skriva en mening som förklarar hur en webbläsare skulle tolka minst två olika element (t.ex. en rubrik och en bild) för att visa det på skärmen.

Diskussionsfråga

Visa två webbplatser med tydligt olika design (t.ex. en barnspelssida och en banktjänst). Ställ frågor som: 'Vilket syfte verkar varje webbplats ha?', 'Hur skiljer sig designen åt för att passa syftet?', 'Vilken av dessa sidor tycker ni är lättast att använda och varför?'

Snabbkontroll

Be eleverna identifiera och skriva ner tre olika typer av information eller funktioner de hittar på en specifik webbplats (t.ex. en nyhetssida). De ska sedan kort beskriva syftet med varje identifierad del (t.ex. 'sökfunktion för att hitta artiklar', 'bildgalleri för att visa händelser').

Vanliga frågor

Hur fungerar en webbläsare när den visar en webbsida?

Webbläsaren hämtar HTML-filen från servern, parsar den till en DOM-struktur, laddar CSS och JavaScript, och renderar innehållet till pixlar. Elever kan se detta i developer tools genom att inspektera element och nätverk. Detta bygger förståelse för internetöverföring i Lgr22 och förbereder för kodning.

Hur kan aktivt lärande hjälpa elever att förstå webbplatser och webbläsare?

Aktivt lärande gör abstrakta processer konkreta genom hands-on aktiviteter som att redigera HTML live i webbläsaren eller jämföra webbplatser i grupper. Elever ser omedelbara effekter av kodändringar, vilket stärker minnet och motivationen. Samarbetsuppgifter som UX-tester utvecklar kritiskt tänkande kring designens roll, i linje med Lgr22:s fokus på modeller och analys.

Vilka typer av webbplatser finns det och vad är deras syften?

Nyhetssidor informerar snabbt, e-handelssidor säljer produkter med sökfunktioner, och sociala medier bygger communities med interaktion. Elever analyserar dessa genom att jämföra struktur och design i grupper, vilket visar hur syfte styr utveckling. Detta kopplar till teknikens faser i läroplanen.

Hur påverkar designen användarupplevelsen på en webbplats?

Designval som tydlig navigering, kontrastrika färger och responsiv layout minskar frustration och ökar engagemang. Elever testar detta i par genom tidtagning av uppgifter på olika sidor. Aktiviteter som dessa illustrerar sambandet mellan estetik och funktion, essentiellt för digital kompetens.