Namn: ____
Klass: ____
Datum: ____
Grunder i HTML och CSS
Stadie: Åk. 7 – 9
Ämne: Digital teknik
Tema: Webbdesign: HTML och CSS grunder
Ordkollen
För att lyckas väl med arbetsbladet är det bra att känna till följande termer inom webbdesign:
| Ämnesbegrepp | Förklaring | Synonymer |
|---|---|---|
| HTML | HyperText Markup Language, grundläggande språk för att skapa strukturen på webbsidor. | Markup-språk |
| CSS | Cascading Style Sheets, används för att styla och layouta webbsidor. | Stilmallar |
| Element | Byggstenar i HTML, såsom ,, och “, som definierar olika delar av en webbsida. |
Taggar |
| Responsiv design | Designmetod som gör att webbsidor anpassar sig till olika skärmstorlekar och enheter. | Anpassningsbar design |
| Semantik | Användningen av HTML-element enligt deras betydelse för att förbättra webbplatsens struktur och tillgänglighet. | Meningsfull kod |
Faktafrågor
-
Vad står HTML för och vad används det till?
-
Förklara vad CSS används för i webbdesign.
-
Nämn tre vanliga HTML-element.
-
Vad innebär responsiv design för en webbsidas utformning?
-
Varför är semantisk HTML viktig?
Flervalsfrågor
-
Vilket HTML-element används för att skapa en hyperlänk?
- a) “
- b) “
- c) “
- d) “
-
Vilken CSS-egenskap används för att ändra textens färg?
- a) background-color
- b) font-size
- c) color
- d) margin
-
Vad betyder det att ett element är "block-level" i HTML?
- a) Det kan inte ha marginaler.
- b) Det tar upp hela bredden av sin förälders element.
- c) Det kan endast användas inom andra block-element.
- d) Det har ingen specifik betydelse.
-
Vilket av följande är en fördel med responsiv design?
- a) Lägre utvecklingskostnader
- b) Bättre användarupplevelse på olika enheter
- c) Mindre behov av HTML-kunskaper
- d) Högre laddningstider
-
Vilket HTML-element används för att skapa en lista med punkter?
- a) “
- b) “
- c) “
- d) “
Sant eller falskt
-
CSS används för att skapa strukturen på en webbsida.
Sant / Falskt -
HTML-element kan ha attribut som modifierar deras funktion eller utseende.
Sant / Falskt -
Responsiv design innebär att webbplatsen endast ser bra ut på mobiltelefoner.
Sant / Falskt -
Semantisk HTML förbättrar webbplatsens SEO och tillgänglighet.
Sant / Falskt -
CSS och HTML är helt oberoende av varandra och påverkar aldrig varandra.
Sant / Falskt
Fyll i luckor i meningar
-
HTML används för att skapa webbsidans __ och struktur.
-
CSS står för __ __ __ och används för att styla webbsidor.
-
Ett exempel på ett semantiskt HTML-element är “ som definierar webbplatsens __.
-
Responsiv design säkerställer att en webbsida fungerar bra på både __ och __.
-
Genom att använda semantiska element kan man förbättra webbplatsens __ och __.
Matchningsövningar
Para ihop HTML- och CSS-terminologi med deras definitioner:
| Begrepp | Definition |
|---|---|
| “ | a) Används för att styla textfärg och bakgrundsfärg. |
| CSS | b) Ett blockelement som används för att gruppera innehåll. |
| Responsiv design | c) Anpassar webbplatsens layout efter enhetens skärmstorlek. |
| “ | d) Används för att skapa hyperlänkar. |
font-size |
e) CSS-egenskap för att ändra storleken på text. |
Svar:
1 – b
2 – a
3 – c
4 – d
5 – e
Tips för att fylla i arbetsbladet
- Läs varje fråga noggrant innan du svarar.
- Använd dina kunskaper om HTML och CSS för att besvara fakta- och flervalsfrågorna.
- Tänk kritiskt när du avgör om påståendena är sanna eller falska.
- För fyll-i-uppgifterna, skriv dina svar tydligt i de tomma utrymmena.
- För matchningsövningarna, koppla rätt begrepp med dess definition genom att skriva bokstaven från definitionen bredvid begreppet.
Lycka till!