Webbutveckling · område 1

Sidans grund

Koden vi skriver på passet 1 september, rad för rad och med förklaringar. Var du borta den dagen är det här du läser i kapp.

2 sept Inlämning kl 23:59 Sidan ska vara publicerad och länken ligga i itslearning.

Koden går inte att kopiera

Det är med flit. Du lär dig inte HTML av att klistra in den – du lär dig av att skriva den, göra fel och se vad som händer. Exemplen här handlar dessutom om te, inte om webben, så de går ändå inte att lämna in.

1. Dokumentets grund

Varje HTML-fil börjar likadant. De här sju raderna är skelettet – innan de finns har du ingen sida.

<!doctype html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <title>Så kokar du te</title>
  </head>
  <body>
  </body>
</html>

Rad	Vad den gör
`<!doctype html>`	Säger till webbläsaren att det här är modern HTML. Alltid först i filen
`<html lang="sv">`	Sidan är på svenska. En skärmläsare behöver det för att uttala orden rätt
`<head>`	Sådant om sidan. Ingenting härifrån syns i fönstret
`<meta charset="utf-8">`	Utan den blir å, ä och ö till frågetecken
`<title>`	Namnet i webbläsarfliken, och det sökmotorn visar som rubrik
`<body>`	Själva sidan. Allt som syns ligger här

Prova själv

Skriv av de sju raderna och öppna sidan med Live Server. Den är tom och vit. Det är rätt – allt du skrivit ligger i <head>, och <body> är fortfarande tom. Titta på fliken högst upp i webbläsaren: där står din <title>.

2. Semantiska block

Nu fylls <body>. Tre block räcker för hela uppgiften.

  <body>
    <header>
      <h1>Så kokar du te</h1>
    </header>

    <main>
    </main>

    <footer>
      <p>Av Ditt Namn, Webbutveckling 1</p>
    </footer>
  </body>

Frågan du kommer att ställa är varför man inte bara använder <div> till allt. Svaret hänger ihop med användaragent från lektionen om webben som plattform:

Alla besökare är inte människor med ögon. En skärmläsare som möter <main> kan hoppa direkt till innehållet och slippa toppen. Möter den bara <div> vet den ingenting.

3. Rubriker och text

Skriv alla rubrikerna först, innan du skriver en enda mening brödtext. Då står strukturen även om du inte hinner klart.

    <main>
      <p>Det tar fem minuter och kräver inga specialverktyg.</p>

      <h2>1. Koka vattnet</h2>
      <p>Fyll kokaren med färskt vatten.</p>

      <h2>2. Välj te</h2>
      <p>Svart te vill ha kokande vatten.</p>
    </main>

Två regler om rubriker, och de gäller i hela kursen:

En <h1> per sida. Det är sidans namn.
Hoppa inte över nivåer. Efter <h1> kommer <h2>, inte <h3>.

Använd inte rubriker för att få stor text. Rubrikerna är sidans innehållsförteckning, inte textstorlekar. En skärmläsare kan lista alla rubriker och hoppa mellan dem – gör du dem i fel ordning blir listan obrukbar.

4. Bilder och länkar

Bilden ligger i mappen bilder/ och länkas relativt:

      <img src="bilder/stegen.svg"
           alt="Fem steg i följd: koka vatten, välj te, mät upp, låt dra, ta upp teet">

Del	Vad du behöver veta
`src`	Relativ sökväg: mappen bilder, härifrån räknat. Skriv aldrig `C:\Users\…` – den sökvägen finns bara på din dator
`alt`	Vad någon som inte ser bilden får i stället. Beskriv vad bilden visar, inte att det är en bild
Filnamnet	Måste stämma exakt. `Stegen.svg` och `stegen.svg` är samma fil hos dig och två olika på servern

Länken skrivs så här:

      <p>Läs mer hos
        <a href="https://www.livsmedelsverket.se/">Livsmedelsverket</a>.</p>

Texten mellan taggarna är det som syns och det en skärmläsare läser upp. Skriv vart länken går – aldrig klicka här.

5. Hela sidan

Allt ovan sammansatt. Det är den här filen som ligger i områdets referensprojekt/, och det är så din egen sida ska se ut – fast om de fem stegen från adress till färdig sida, inte om te.

<!doctype html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <title>Så kokar du te</title>
  </head>

  <body>
    <header>
      <h1>Så kokar du te</h1>
      <p>En sida för dig som aldrig gjort det förut.</p>
    </header>

    <main>
      <p>Det tar fem minuter och kräver inga specialverktyg.</p>

      <h2>1. Koka vattnet</h2>
      <p>Fyll kokaren med färskt vatten.</p>

      <h2>2. Välj te</h2>
      <p>Svart te vill ha kokande vatten.</p>

      <h2>Stegen i en bild</h2>
      <img src="bilder/stegen.svg" alt="Fem steg i följd">

      <h2>Läs mer</h2>
      <p><a href="https://www.livsmedelsverket.se/">Livsmedelsverket</a></p>
    </main>

    <footer>
      <p>Av Ditt Namn · Webbutveckling 1</p>
    </footer>
  </body>
</html>

6. Checklista mot kraven

Samma ska-krav som i uppgiften, fast sorterade efter var i koden de sitter. Bocka av medan du bygger.

Finns i din `index.html`?

<!doctype html> på första raden
lang="sv" på <html>
<meta charset="utf-8"> och å ä ö visas rätt
En <title> som beskriver sidan
<header>, <main> och <footer>
En <h1> och en <h2> per steg
Brödtext under varje rubrik
En bild med alt, i mappen bilder/
En länk till en källa, med text som säger vart den går

Kryssen sparas i din webbläsare.

7. Felsökning

Sök bland felen

8 rader

Symptom	Trolig orsak	Åtgärd
Sidan är helt tom och vit	Allt ligger i `<head>`, eller `<body>` är tom	Innehållet ska ligga mellan `<body>` och `</body>`
å, ä och ö blir frågetecken	`<meta charset="utf-8">` saknas	Lägg den först i `<head>`
Halva sidan har fel utseende	En tagg är inte stängd	Leta efter den tagg VS Code färgar rött. Kontrollera indenteringen
Bilden visas som en trasig ikon	Fel sökväg eller fel skiftläge i filnamnet	Filen ska ligga i `bilder/` och heta exakt som i `src`
Bilden syns hos mig men inte publicerat	Absolut sökväg, eller stor bokstav i filnamnet	Ta bort inledande `/`. Använd gemener
Rubrikerna ser inte ut som rubriker	Du skrev `<h2>` men glömde stänga med `</h2>`	Varje rubrik behöver både öppnande och stängande tagg
Live Server visar en gammal version	Filen är inte sparad	`Ctrl+S`, sidan laddas om av sig själv
Läraren ser inte mitt arbete	Du har committat men inte synkat	`Sync Changes`, kontrollera sedan på github.com