Rätta HTML och skapa layout med CSS

Viktigt

Uppgiften krävs för högre än E

• Övningsuppgift 1 ska vara gjord först.
• Följ instruktionerna – ändra inte innehåll som inte ska ändras.
• Både kod och publicerad sida ska lämnas in.

Översikt

Uppgiften har fyra delar

Startfiler

Ladda ner och packa upp

1. Ladda ner ovn2.zip.
2. Packa upp zip-filen.
3. Kontrollera att mappen heter ovn2.
4. Öppna bara mappen ovn2 i VS Code.

Filer

Det här finns i mappen

ovn2/
├── index.html
├── html.webp
└── css.webp

CSS-filen finns inte ännu. Du ska skapa den med det namn som står i HTML-filens befintliga <link>.

Viktig regel

Ändra inte link-elementet

<link rel="stylesheet" href="styles.css">

Skapa därför filen styles.css.

Ändra inte länken så att den passar ett annat filnamn.

HTML-rättning

Rätta bara felen

• Kör index.html genom HTML-validatorn.
• Läs ett fel i taget.
• Rätta felet i VS Code.
• Validera igen.

Ändra inte texter eller struktur bara för att du själv hade skrivit dem annorlunda.

Kontrollera bilder

Filnamnet måste stämma exakt

<img src="css.webp" alt="CSS-logotyp">
<img src="html.webp" alt="HTML-logotyp">

• Filändelsen ska matcha filen i mappen.
• Varje innehållsbärande bild behöver relevant alt-text.

Valideringsarbete

Arbeta i en kort loop

Ett tidigt HTML-fel kan skapa flera följdfel. Börja alltid uppifrån.

CSS-krav 1

Font och text

body {
  font-family: Verdana, sans-serif;
  color: #000;
}

All text ska använda Verdana med sans-serif som reserv.

CSS-krav 2

Två ljusa bakgrunder

body { background-color: #f3f0dc; }
article,
footer { background-color: #d7edf1; }

• body ska vara ljus men inte vit.
• article och footer ska ha en annan ljus färg.

CSS-krav 3

Länkarnas två lägen

a {
  color: #075985;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Länken ska vara mörkare än bakgrunden och få understreck vid hover.

CSS-krav 4

Två spalter med Grid

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

De två article-elementen blir Grid-items.

Alternativ

Två spalter med Flexbox

section {
  display: flex;
  gap: 1rem;
}
article { flex: 1; }

Välj Grid eller Flexbox. Du behöver inte använda båda för spaltkravet.

Simulerat exempel

Före och efter CSS

Före CSSEfter CSSIngen egen CSS används ännu.

Artiklarna ligger under varandra och webbläsarens standardstil används.

Grunder layout

Grunderna i CSS

CSS styr färg, typografi och layout på webbsidan.

Här är ett YouTube-klipp om CSS.

Grunderna i HTML

HTML beskriver sidans innehåll och struktur.

Här är en artikel om HTML.

Exempelbild

Ett möjligt resultat

Din sida behöver inte ha exakt samma färger, men den ska följa alla krav.

Validera HTML

W3C Markup Validation Service

1. Öppna HTML-validatorn.
2. Ladda upp eller klistra in index.html.
3. Rätta fel – inte bara varningar du inte förstår.
4. Kör kontrollen igen tills HTML-koden klarar valideringen.

Validera CSS

W3C CSS Validation Service

1. Öppna CSS-validatorn.
2. Ladda upp eller klistra in styles.css.
3. Rätta syntaxfel.
4. Kör kontrollen igen tills CSS-koden klarar valideringen.

Publicera kod

GitHub-repository

• Lägg filerna i ett repository.
• Kontrollera att index.html, styles.css och bilderna finns där.
• Öppna filerna på GitHub och kontrollera senaste versionen.

Publicera sida

GitHub Pages

1. Öppna repositoryts Settings.
2. Välj Pages.
3. Publicera från rätt branch och mapp.
4. Öppna den publicerade adressen och testa sidan.

Lämna in två länkar

Kod och publicerad sida

Slutkontroll

Kontrollera kraven

• Verdana och svart text
• Två olika ljusa bakgrunder
• Mörka länkar utan understreck – understreck vid hover
• Två spalter med Grid eller Flexbox
• HTML och CSS validerade

Inlämningschecklista

Allt ska vara klart

• Mappen heter ovn2.
• HTML-felen är rättade utan onödiga ändringar.
• styles.css är skapad.
• Bilder och länkar fungerar.
• GitHub- och GitHub Pages-länkarna är testade.

Arbetsordning

Gör en sak i taget

1. Packa upp och öppna mappen.
2. Rätta och validera HTML.
3. Skapa CSS och uppfyll kraven.
4. Validera CSS.
5. Publicera och testa båda länkarna.