Läxa: Digital teknik – Webbdesign
Redogörelse:
- Årskurs: 7–9
- Ämne: Digital teknik – Webbdesign: HTML, CSS och grundläggande JavaScript
- Tema: Introduktion till HTML och CSS
Ordkollen
Här listas tio ämnesord på läxans tema som är bra att känna till betydelsen av.
- HTML: HyperText Markup Language, det språk som används för att strukturera innehållet på webbsidor.
- CSS: Cascading Style Sheets, används för att styla och layouta webbsidor.
- JavaScript: Ett programmeringsspråk som används för att skapa interaktiva funktioner på webbsidor.
- Element: Grundläggande byggstenar i HTML, såsom
,, och “. - Attribut: Egenskaper som kan läggas till HTML-element för att ge dem ytterligare information, till exempel
hrefi länkar. - Selektorer: I CSS används för att välja vilka HTML-element som ska stylas.
- Responsiv design: En designmetod som gör att webbsidor anpassar sig efter olika skärmstorlekar och enheter.
- DOM (Document Object Model): Ett programmeringsgränssnitt för HTML och XML dokument som representerar strukturen av dokumentet.
- Framework: En samling verktyg och bibliotek som underlättar utveckling av webbsidor och applikationer.
- Semantisk HTML: Användning av HTML-element som speglar innehållets betydelse, vilket förbättrar tillgänglighet och SEO.
Instuderingsfrågor
- Vad står HTML för och vad används det till?
- Förklara skillnaden mellan HTML och CSS.
- Vad är ett HTML-element? Ge ett exempel.
- Hur används attribut i HTML? Ge ett exempel på ett attribut.
- Vad är syftet med CSS-selektorer?
- Beskriv vad responsiv design innebär.
- Vad betyder DOM och vilken roll har det i webbutveckling?
- Nämn två populära JavaScript-ramverk.
- Varför är semantisk HTML viktigt?
- Hur kan JavaScript förbättra användarupplevelsen på en webbplats?
Övning
Nedan listas uppgifter och fyra svarsalternativ. Du ska ringa in det alternativ som är korrekt. Observera att av de fyra alternativen är endast ett korrekt.
| Uppgift | A | B | C | D |
|---|---|---|---|---|
| 1. Vad används “-elementet för i HTML? | För att skapa bilder | För att gruppera innehåll | För att länka till andra sidor | För att skapa rubriker |
| 2. Vilket attribut används för att lägga till en länk? | src |
href |
alt |
title |
3. Hur skriver man en CSS-selektor för alla `-element? |#p { }|.p { }|p { }|*p { }` |
||||
| 4. Vilket av följande är ett JavaScript-språk? | HTML | CSS | JavaScript | SQL |
5. Vad gör background-color i CSS? |
Ändrar bakgrundsbilden | Ändrar bakgrundsfärgen | Ändrar textfärgen | Ändrar fontstorleken |
| 6. Vilken tagg används för huvudrubriken på en sida? | | | | |
|||
| 7. Vad står CSS för? | Computer Style Sheets | Creative Style Sheets | Cascading Style Sheets | Colorful Style Sheets |
| 8. Hur kommenterar man i HTML? | // Detta är en kommentar |
/* Detta är en kommentar */ |
` |# Detta är en kommentar` |
|
| 9. Vilken egenskap i CSS styr textstorleken? | font-style |
text-size |
font-size |
text-style |
| 10. Vad används JavaScript främst för på webben? | Strukturera innehåll | Styla webbsidor | Göra webbsidor interaktiva | Lagra data på servern |
Skrivuppgifter
Här presenteras tre olika skrivuppgifter som är utformade på tre olika svårighetsnivåer: enkel, medel och svår.
Skrivuppgift 1: Skapa en enkel webbsida
Beskrivning: Skapa en enkel webbsida med HTML som innehåller minst en rubrik, ett stycke text och en bild. Använd grundläggande HTML-element.
Svarslängd: ca. 200 ord (En tredjedel sida)
Skrivuppgift 2: Stilisera med CSS
Beskrivning: Använd CSS för att styla din webbsida från skrivuppgift 1. Ändra färger, typsnitt och layout för att göra sidan mer attraktiv.
Svarslängd: ca. 300 ord (En halv sida)
Skrivuppgift 3: Lägg till interaktivitet med JavaScript
Beskrivning: Implementera en enkel JavaScript-funktion på din webbsida som exempelvis visar en alert när användaren klickar på en knapp, eller ändrar innehållet på sidan dynamiskt.
Svarslängd: ca. 400 ord (Två sidor)