Läxa: Skapa en enkel webbplats med HTML och CSS
Redogörelse
- Årskurs: Åk 7 – 9
- Ämne: Digital teknik
- Tema: Skapa en enkel webbplats med 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, grundläggande språk för att skapa webbsidor. - CSS
Cascading Style Sheets, används för att styla och layouta webbsidor. - Tagg
En avgränsare i HTML som definierar ett element, t.ex. “ för paragraf. - Element
En byggsten i HTML som består av en starttagg, innehåll och en sluttagg. - Attribut
Extrauppgifter inom en tagg som ger ytterligare information, t.ex.hrefi “. - CSS-selector
Ett mönster som används för att välja vilka HTML-element som ska stylas. - Responsiv design
Webbdesign som anpassar sig efter olika skärmstorlekar och enheter. - Blockelement
HTML-element som tar upp hela bredden och börjar på en ny rad, t.ex. “. - Inline-element
HTML-element som inte börjar på ny rad och endast tar upp så mycket bredd som behövs, t.ex. “. - Semantisk HTML
HTML som använder element med betydelse för innehållet, vilket förbättrar tillgänglighet och SEO.
Instuderingsfrågor
- Vad står HTML för?
- Vad används CSS till?
- Hur definierar du en paragraf i HTML?
- Vad är ett attribut i en HTML-tagg?
- Ge ett exempel på en CSS-selector.
- Vad innebär responsiv design?
- Nämn ett blockelement och ett inline-element.
- Varför är semantisk HTML viktigt?
- Hur länkar du till en extern CSS-fil i HTML?
- Vad är skillnaden mellan en klass och ett ID i CSS?
Ö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 står CSS för? | Computer Style Sheets | Cascading Style Sheets | Creative Style Syntax | Colorful Style Sheets |
| 2. Vilken tagg används för att skapa en länk? | | | | |
|||
| 3. Hur startar du en kommentar i HTML? | ` |// Kommentar|/ Kommentar /|# Kommentar` |
|||
| 4. Vilket element används för huvudrubriken? | | | | |
|||
| 5. Hur applicerar du en CSS-klass på ett element? | class="namn" |
id="namn" |
class=namn |
#namn |
| 6. Vilken CSS-egenskap ändrar textfärgen? | text-color |
color |
font-color |
background-color |
| 7. Vad används “ för i HTML? | För att skapa tabeller | För att definiera sektioner | För att lägga till bilder | För att kommentera |
| 8. Hur gör du text fet i CSS? | font-style: bold; |
font-weight: bold; |
text-decoration: bold; |
font-bold: yes; |
| 9. Vilken enhet är bäst för responsiv design? | px |
em |
% |
vw |
| 10. Vad är en semantisk HTML-element? | Ett element utan betydelse | Ett element med definierad funktion | Ett dekorativt element | Ett element för JavaScript |
Skrivuppgifter
Här presenteras tre olika skrivuppgifter som är utformade på tre olika svårighetsnivåer: enkel, medel och svår.
Skrivuppgift 1: Beskriv din favoritwebbsida
Beskriv din favoritwebbsida och förklara varför du gillar den. Diskutera vilka HTML- och CSS-element som gör den användarvänlig.
Svarslängd: ca. 250 ord (Ungefär en halv sida)
Skrivuppgift 2: Planera din egen webbplats
Planera en enkel webbplats för ett fiktivt projekt. Skapa en skiss över sidans struktur och beskriv vilka HTML-element och CSS-stilar du skulle använda.
Svarslängd: ca. 350 ord (En halv till två tredjedelar av en sida)
Skrivuppgift 3: Analysera en webbplatskod
Välj en webbplats och analysera dess HTML- och CSS-kod. Diskutera hur strukturen är uppbyggd, vilka tekniker som används för styling och hur responsiv design implementeras. Föreslå eventuella förbättringar.
Svarslängd: ca. 400 ord (Två sidor)