Modul 1 · Kapitel 1.4

Länkar, bilder och listor

Fyll webbsidan med innehåll och träna på fungerande filvägar.

Mål

Efter kapitlet ska du kunna...

skapa länkar med a och href
lägga in bilder med img, src och alt
välja mellan ordnade och oordnade listor
använda textbetoning på ett semantiskt sätt

Länkar

Från en sida till en annan

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

a skapar länken.
href anger adressen.
Texten mellan taggarna blir klickbar.

Ny flik

target="_blank"

<a href="https://developer.mozilla.org/"
   target="_blank"
   rel="noopener noreferrer">MDN Web Docs</a>

target="_blank" öppnar länken i en ny flik eller ett nytt fönster.

Använd det med omdöme och lägg till rel="noopener noreferrer" för externa länkar.

Testa beteendet

Simulera en ny flik

Flik 1: Min sida

En flik är öppen.

http://127.0.0.1:5500/index.html

Knappen visar vad target="_blank" gör utan att lämna presentationen.

Bilder

Bildfil och textalternativ

<img
  src="images/dog.jpg"
  alt="Brun hund mot mörk bakgrund">

src pekar på bildfilen.

alt beskriver bilden för den som inte kan se den.

Brun hund mot mörk bakgrund — Simulerat resultat i webbläsaren.

Relativ sökväg

Var letar webbläsaren?

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

index.html→images/→profilbild.jpg

Därför blir sökvägen images/profilbild.jpg.

Alt-text

Beskriv det som är relevant

Tydligare	För otydligt
`alt="Porträttbild av mig"`	`alt="Bild"`

Alt-text kan läsas av skärmläsare och visas om bilden inte laddas.

Dekorativa bilder kan ibland ha tom alt-text: alt="".

Kontrollfråga

Vad saknas?

<img src="images/hund.jpg">

Tänk efter innan du går vidare.

Svar: attributet alt med en relevant bildbeskrivning.

Textbetoning

Betydelse – inte bara utseende

<strong>Viktigt!</strong>

strong markerar att innehållet är viktigt.

Det här är <em>verkligen</em> viktigt.

em ger språklig betoning.

Semantik

Välj element efter betydelse

Använd inte strong bara för att få fet text.

Använd inte em bara för att få kursiv text.

Utseendet styrs senare med CSS.

b och i finns också, men ger svagare betydelse och används sparsamt.

Ordnad lista

När ordningen spelar roll

<ol>
  <li>Skapa projektmapp</li>
  <li>Skriv HTML</li>
  <li>Validera sidan</li>
</ol>

Skapa projektmapp
Skriv HTML
Validera sidan

Oordnad lista

När ordningen inte är viktig

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

Listornas delar

ol, ul och li

Element	Betydelse
`ol`	Ordnad, numrerad lista.
`ul`	Oordnad punktlista.
`li`	En punkt i listan.

Exempeltext

Tillfälliga namn ska bytas ut

Lorem ipsum används ibland som platshållartext när en layout testas.

foo, bar och baz används som neutrala exempelnamn i kod.

I riktiga projekt ska de ersättas med namn som beskriver innehållet.

Prova själv

Bygg ut din sida

Lägg till en länk till en webbplats där du lär dig.
Lägg en bild i images och skriv en tydlig alt-text.
Skapa en ordnad och en oordnad lista.
Markera ett viktigt ord med strong.
Spara, ladda om och validera sidan.

Sammanfattning

Kom ihåg

href anger vart en länk går.
src anger bildens sökväg och alt beskriver bilden.
strong och em uttrycker betydelse.
ol används när ordningen spelar roll, annars ul.
Tydliga filvägar och namn hjälper webbläsaren hitta resurserna.