Allgot

Arbetsblad. Digital teknik. Webbdesign: HTML och CSS grunder. [Åk. 7 – 9]

Ladda ner PDF

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:

ÄmnesbegreppFörklaringSynonymer
HTMLHyperText Markup Language, grundläggande språk för att skapa strukturen på webbsidor.Markup-språk
CSSCascading Style Sheets, används för att styla och layouta webbsidor.Stilmallar
ElementByggstenar i HTML, såsom ,, och “, som definierar olika delar av en webbsida.Taggar
Responsiv designDesignmetod som gör att webbsidor anpassar sig till olika skärmstorlekar och enheter.Anpassningsbar design
SemantikAnvändningen av HTML-element enligt deras betydelse för att förbättra webbplatsens struktur och tillgänglighet.Meningsfull kod

Faktafrågor

  1. Vad står HTML för och vad används det till?

  2. Förklara vad CSS används för i webbdesign.

  3. Nämn tre vanliga HTML-element.

  4. Vad innebär responsiv design för en webbsidas utformning?

  5. Varför är semantisk HTML viktig?

Flervalsfrågor

  1. Vilket HTML-element används för att skapa en hyperlänk?

    • a) “
    • b) “
    • c) “
    • d) “

  2. Vilken CSS-egenskap används för att ändra textens färg?

    • a) background-color
    • b) font-size
    • c) color
    • d) margin

  3. 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.

  4. 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

  5. Vilket HTML-element används för att skapa en lista med punkter?

    • a) “
    • b) “
    • c) “
    • d) “

Sant eller falskt

  1. CSS används för att skapa strukturen på en webbsida.
    Sant / Falskt

  2. HTML-element kan ha attribut som modifierar deras funktion eller utseende.
    Sant / Falskt

  3. Responsiv design innebär att webbplatsen endast ser bra ut på mobiltelefoner.
    Sant / Falskt

  4. Semantisk HTML förbättrar webbplatsens SEO och tillgänglighet.
    Sant / Falskt

  5. CSS och HTML är helt oberoende av varandra och påverkar aldrig varandra.
    Sant / Falskt

Fyll i luckor i meningar

  1. HTML används för att skapa webbsidans __ och struktur.

  2. CSS står för __ __ __ och används för att styla webbsidor.

  3. Ett exempel på ett semantiskt HTML-element är “ som definierar webbplatsens __.

  4. Responsiv design säkerställer att en webbsida fungerar bra på både __ och __.

  5. Genom att använda semantiska element kan man förbättra webbplatsens __ och __.

Matchningsövningar

Para ihop HTML- och CSS-terminologi med deras definitioner:

BegreppDefinition
“a) Används för att styla textfärg och bakgrundsfärg.
CSSb) Ett blockelement som används för att gruppera innehåll.
Responsiv designc) Anpassar webbplatsens layout efter enhetens skärmstorlek.
“d) Används för att skapa hyperlänkar.
font-sizee) 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!

Relaterade planeringar