Modul 1 · Kapitel 1.5

Miniuppgift: profilsida

Använd det du har lärt dig för att skapa en egen enkel webbsida.

Mål

Efter uppgiften ska du kunna...

skapa en fungerande HTML-sida från grunden
använda rubrik, text, bild, länk och listor
kontrollera filnamn och relativa sökvägar
testa sidan och validera HTML-koden

Uppgift

Vad ska sidan presentera?

Skapa en profilsida i mappen profil-sida.

Sidan kan handla om dig, ett intresse, en hobby, ett ämne eller en fiktiv person.

Välj något neutralt om du inte vill skriva om dig själv.

Krav · struktur

Dokumentet måste vara komplett

Startsidan heter index.html.
Dokumentet har DOCTYPE och html lang="sv".
head innehåller en tydlig title.
body innehåller sidans synliga innehåll.
Koden innehåller minst en HTML-kommentar.

Krav · innehåll

Det här ska finnas på sidan

minst en h1 och två p
en bild med fungerande src och beskrivande alt
minst en extern länk
en ordnad lista och en oordnad lista

Hela exemplet · del 1 av 3

Dokumentets head

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Min profilsida</title>
</head>

Hela exemplet · del 2 av 3

Rubrik, text, bild och länk

<body>
  <!-- Presentation av mitt hundintresse -->
  <h1>Mitt hundintresse</h1>
  <p>Jag tycker om att lära mig om hundar.</p>
  <img src="images/dog.jpg"
       alt="Brun hund mot mörk bakgrund">
  <p>Här samlar jag fakta och tips.</p>
  <a href="https://example.com">Läs mer</a>

Hela exemplet · del 3 av 3

Två sorters listor

  <h2>Träning i rätt ordning</h2>
  <ol>
    <li>Välj en övning</li>
    <li>Träna en kort stund</li>
    <li>Ta en paus</li>
  </ol>
  <h2>Bra saker att ha</h2>
  <ul>
    <li>Godis</li>
    <li>Leksak</li>
  </ul>
</body>
</html>

Förhandsvisning

Så kan sidan se ut

Mitt hundintresse

Jag tycker om att lära mig om hundar.

Läs mer

Bildens alt-text: Brun hund mot mörk bakgrund.

Projektmapp

Filerna måste ligga rätt

profil-sida/
  index.html
  images/
    dog.jpg

Öppna hela mappen profil-sida i VS Code.

Arbeta med en projektmapp i taget.

Om bilden inte syns

Kontrollera sökvägen steg för steg

Finns bilden i mappen images?
Är filnamnet exakt dog.jpg?
Är filändelsen rätt?
Stämmer stora och små bokstäver?
Är src="images/dog.jpg" korrekt?

Kontrollfråga

Uppfyller bilden kravet?

<img src="images/dog.jpg" alt="Bild">

Tänk efter innan du går vidare.

Inte helt. Sökvägen kan fungera, men alt-texten ska beskriva bildens relevanta innehåll.

Arbetsordning

Bygg, testa och rätta

Bygg sidan→Testa med Live Server→Validera→Rätta fel

Publicera inte förrän sidan fungerar och HTML-felen är rättade.

Slutkontroll

Innan du går vidare

Öppna sidan med Live Server.
Kontrollera att bilden syns.
Klicka på länken.
Kontrollera båda listorna.
Validera HTML-koden.
Rätta alla fel.

Exit ticket

Vad lärde du dig?

Skriv två meningar:

Vad fungerade direkt?
Vilket fel behövde du felsöka?

Sammanfattning

Klart när allt fungerar

Sidan har korrekt HTML-grundstruktur.
Rubrik, text, bild, länk och båda listtyperna finns med.
Filvägar och filnamn fungerar.
Sidan är testad med Live Server.
HTML-koden är validerad och felen är rättade.