Läxa: Grundläggande Webbdesign med HTML, CSS och JavaScript
Redogörelse:
- Årskurs: Gymnasiet
- Ämne: Digital teknik – Webbdesign: HTML, CSS och grundläggande JavaScript
- Tema: Skapa en enkel webbplats
Ordkollen
Här listas tio ämnesord på läxans tema som är bra att känna till betydelsen av.
- HTML (HyperText Markup Language): Ett markeringsspråk som används för att strukturera innehållet på webbsidor.
- CSS (Cascading Style Sheets): Ett stilarkspråk som används för att beskriva presentationen av ett HTML-dokument.
- JavaScript: Ett programmeringsspråk som används för att skapa dynamiskt innehåll och interaktivitet på webbsidor.
- DOM (Document Object Model): Ett programmeringsgränssnitt för HTML- och XML-dokument som representerar sidan så att program kan ändra dess struktur, stil och innehåll.
- Responsiv design: En designmetod som gör webbsidor anpassningsbara till olika skärmstorlekar och enheter.
- Semantisk HTML: Användning av HTML-taggar som bär en tydlig betydelse för innehållet, vilket förbättrar tillgänglighet och SEO.
- Flexbox: En CSS-layoutmodell som gör det enklare att skapa flexibla och responsiva layoutstrukturer.
- CSS Grid: Ett CSS-layoutsystem som tillåter tvådimensionell placering av element i rader och kolumner.
- Eventhantering: Tekniken att svara på händelser som användarinteraktioner genom JavaScript.
- API (Application Programming Interface): Ett gränssnitt som tillåter olika programvara att kommunicera med varandra.
Instuderingsfrågor
- Vad står HTML för och vad används det till?
- Förklara skillnaden mellan HTML och CSS.
- Vad är JavaScript och vilka funktioner har det i webbdesign?
- Hur skiljer sig semantisk HTML från vanlig HTML?
- Vad innebär responsiv design och varför är det viktigt?
- Beskriv vad DOM är och dess roll i webbutveckling.
- Vad är Flexbox och till vad används det?
- Hur fungerar CSS Grid och när bör det användas?
- Vad är en eventlistener i JavaScript?
- Ge ett exempel på hur ett API kan användas i en webbapplikation.
Ö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.
| Beskrivning/Fråga | A | B | C | D |
|---|---|---|---|---|
| 1. Vad står HTML för? | HyperText Markdown Language | Home Tool Markup Language | HyperText Markup Language | HyperTransfer Markup Language |
| 2. CSS används huvudsakligen för att: | Strukturera webbsidor | Styla och layouta webbsidor | Lägga till funktionalitet med skript | Hantera databaser |
| 3. Vilken tagg används för att länka en CSS-fil i HTML? | | | | |
|||
| 4. Vilket av följande är ett JavaScript-ramverk? | Laravel | React | Django | Ruby on Rails |
| 5. Vad betyder DOM? | Document Object Model | Data Object Manipulation | Dynamic Object Management | Document Orientation Module |
| 6. Vilken CSS-egenskap används för att skapa ett flex-container? | display: block; |
display: flex; |
flex-container: true; |
layout: flex; |
| 7. Vilken metod används för att lägga till en eventlistener i JavaScript? | addEvent() |
attachEvent() |
addListener() |
addEventListener() |
| 8. Vad står API för? | Application Programming Interface | Automated Program Integration | Applied Programming Interface | Application Process Interface |
| 9. Vilken tagg används för att skapa en knapp i HTML? | | | Både A och B | “ |
|||
| 10. Vilken CSS-egenskap används för att justera textens färg? | background-color |
font-style |
color |
text-align |
Skrivuppgifter
Här presenteras tre olika skrivuppgifter som är utformade på tre olika svårighetsnivåer: enkel, medel och svår.
Skrivuppgift 1: Grundläggande HTML-struktur
Beskriv hur en grundläggande HTML-sida är uppbyggd. Förklara de viktigaste taggarna och deras funktioner.
Svarslängd: ca. 250 ord (En halv sida)
Skrivuppgift 2: Styling med CSS
Förklara skillnaden mellan klass- och ID-selektorer i CSS. Ge exempel på när du skulle använda var och en.
Svarslängd: ca. 350 ord (En halv till två tredjedelar av en sida)
Skrivuppgift 3: Interaktivitet med JavaScript
Beskriv hur JavaScript kan användas för att skapa interaktivitet på en webbplats. Inkludera exempel på minst två olika typer av händelser som kan hanteras.
Svarslängd: ca. 400 ord (Två sidor)