1.2 HTML och CSS – bygg vidare på din första sida¶

Illustration: personlig hemsida med HTML och CSS

Obs! Alla länkar i detta material är klickbara HTML-länkar. Externa länkar öppnas i ny flik.

I den här modulen bygger vi vidare på den sida du skapade i 1.1 med GitHub Pages.

Nu går vi från “bara text” till att:

förstå grunderna i HTML (struktur och innehåll)
se hur CSS styr utseendet
göra din sida lite mer lik en riktig personlig / förenings‑hemsida

Smakprov – HTML in 100 seconds (Fireship)¶

Som en kort, kul introduktion rekommenderar vi videon:

HTML in 100 seconds – Fireship

Mål¶

Efter den här modulen ska du:

känna igen de vanligaste HTML‑taggarna:
<html>, <head>, <body>
rubriker: <h1>–<h3>
stycken: <p>
länkar: <a href="...">
listor: <ul>, <li>
veta var du kan skriva CSS för att ändra utseendet
kunna:
ändra rubriker och text
lägga till en länk
ändra någon enkel stil (t.ex. färg eller typsnitt)

Fokus är fortfarande att våga prova, inte att skriva perfekt kod.

Upplägg på träffen¶

Föreslaget upplägg för en träff (ca 2 × 45 min med paus):

Del 1 – Från text till HTML¶

Kort prat i helgrupp:

Vi utgår från sidan du gjorde i 1.1.
Kursledaren visar ett enkelt exempel på en HTML‑sida, t.ex.:

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <title>Min första hemsida</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #111;
        color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <h1>Min första hemsida</h1>
    <p>Hej! Jag heter ... och detta är min första enkla sida.</p>
  </body>
</html>

Sedan gör ni tillsammans en av två varianter:

Variant A – skapa index.html
- I GitHub: Add file → Create new file
- Filnamn: index.html
- Klistra in HTML‑exemplet ovan
- Spara med Commit changes
- GitHub Pages använder nu index.html som startsida

Variant B – färdig sida
- Kursledaren har redan förberett ett index.html
- Fokus ligger direkt på att ändra innehåll och utseende

Del 2 – Gemensamma ändringar¶

Gör några saker tillsammans:

Ändra texten i <h1>
Ändra texten i <p>
Lägg till en extra paragraf (<p>)

Visa sedan hur små CSS‑ändringar fungerar:

h1 {
  text-align: center;
}

Efter varje ändring: - spara (commit) - vänta en stund - ladda om GitHub Pages‑adressen 🔄

Övningar för deltagarna¶

1. Presentera dig själv eller din förening¶

en huvudrubrik (<h1>)
minst två stycken (<p>)

2. Skapa en lista¶

<h2>Aktiviteter jag gillar</h2>
<ul>
  <li>Promenader</li>
  <li>Spela bordtennis</li>
  <li>Koda enkla hemsidor</li>
</ul>

3. Lägg till en länk¶

<p>
  Besök gärna
  <a href="https://www.fvk-media.se"
     target="_blank"
     rel="noopener noreferrer">
     FVK Media
  </a>
  för mer information.
</p>

4. Testa mer CSS¶

body {
  font-family: Arial, sans-serif;
  background-color: #202020;
  color: #f5f5f5;
}

h1 {
  color: #a7dca5;
}

Mellan träffarna (frivillig fördjupning)¶

HTML och CSS – nybörjarguide på svenska (spellista)

Tips till kursledare¶

Påminn deltagarna om att inget “går sönder”
Visa att det är okej att göra fel
Fokus är trygghet och förståelse, inte perfektion