Modul 1

Kap 1.5 - Miniuppgift: profilsida

Du använder det du har lärt dig för att skapa en egen enkel webbsida.

Mål

  • Skapa en fungerande HTML-sida från grunden.
  • Använda rubrik, text, bild, länk och listor.
  • Kontrollera filvägar och validera koden.

Uppgift

Skapa en profilsida i mappen profil-sida. Sidan ska presentera dig, ett intresse, en hobby, ett ämne eller en fiktiv person. Välj gärna något neutralt om du inte vill skriva om dig själv.

Krav

  • Filen ska heta index.html.
  • Sidan ska ha korrekt grundstruktur med DOCTYPE, html lang, head och body.
  • Sidan ska ha en tydlig title.
  • Sidan ska innehålla minst en h1 och två p.
  • Sidan ska innehålla en bild med fungerande src och beskrivande alt.
  • Sidan ska innehålla minst en extern länk.
  • Sidan ska innehålla en ordnad lista och en oordnad lista.
  • Sidan ska innehålla minst en HTML-kommentar.

Exempel på struktur

<body>
    <!-- En profilsida om Tim Berners-Lee -->
    <h1>Tim Berners-Lee</h1>
    <img src="images/tim-berners-lee.jpg" alt="Porträtt av Tim Berners-Lee">
    <p>Tim Berners-Lee är en brittisk datavetare som uppfann World Wide Web.</p>

    <h2>Tre delar av webben</h2>
    <ul>
        <li>HTML</li>
        <li>HTTP</li>
        <li>URL</li>
    </ul>

    <h2>Viktiga händelser</h2>
    <ol>
        <li>Han skrev sitt förslag till webben 1989.</li>
        <li>Han skapade den första webbplatsen 1990.</li>
        <li>Han grundade organisationen W3C 1994.</li>
    </ol>

    <p>Hans idé gjorde det möjligt att länka samman och dela information på internet.</p>
    <a href="https://www.w3.org/People/Berners-Lee/">Läs mer om Tim Berners-Lee</a>
</body>
http://127.0.0.1:5500/index.html

Tim Berners-Lee

Illustrerat porträtt av Tim Berners-Lee

Tim Berners-Lee är en brittisk datavetare som uppfann World Wide Web.

Tre delar av webben

  • HTML
  • HTTP
  • URL

Viktiga händelser

  1. Han skrev sitt förslag till webben 1989.
  2. Han skapade den första webbplatsen 1990.
  3. Han grundade organisationen W3C 1994.

Hans idé gjorde det möjligt att länka samman och dela information på internet.

Läs mer om Tim Berners-Lee

Kontrollera innan du går vidare

  1. Öppna sidan med Live Server.
  2. Kontrollera att bilden syns.
  3. Klicka på länken och se att den fungerar.
  4. Validera HTML-koden.
  5. Rätta fel innan du fortsätter till publicering.

Exit ticket

Skriv två meningar: vad fungerade direkt, och vilket fel behövde du felsöka?