Modul 1

Kap 1.4 - Länkar, bilder och listor

Nu fyller du sidan med vanliga HTML-element och tränar på fungerande filvägar.

Mål

  • Skapa länkar med a och href.
  • Lägga in bilder med img, src och alt.
  • Använda listor och textbetoning på ett semantiskt sätt.

Länkar

En länk skapas med a. Attributet href berättar vart länken går.

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

Så kan det se ut när länken öppnar en ny flik

Min sida
http://127.0.0.1:5500/index.html

Flik 1: Min sida

På din sida syns länken:

Klicka på länken för att simulera vad target="_blank" gör.

target="_blank" betyder ny flik eller nytt fönster. För externa länkar är det också bra att lägga till rel="noopener noreferrer".

Externa länkar kan öppnas i ny flik med target="_blank". Använd det med omdöme.

Bilder

En bild behöver minst src och alt. src pekar på bildfilen. alt beskriver bilden för den som inte kan se den. 

<img src="images/profilbild.jpg" alt="Porträttbild av mig">

Så tolkar webbläsaren koden

src="images/profilbild.jpg" betyder att webbläsaren ska leta efter bildfilen profilbild.jpg i mappen images.

alt="Porträttbild av mig" är textalternativet. Det kan användas av skärmläsare och visas också om bilden inte kan laddas.

I ett riktigt projekt skulle rutan till vänster vara själva bilden.

Om bilden är dekorativ kan alt-texten ibland vara tom, men i kursens första uppgifter ska du skriva en tydlig alt-text så att du tränar vanan.

Textbetoning

strong betyder att något är viktigt. em betyder betoning. Använd inte strong och em bara för att få fet eller kursiv stil. Utseende styrs senare med CSS.

b och i finns också, men de ger svagare betydelse. Använd dem sparsamt.

Listor

En ordnad lista används när ordningen spelar roll. En oordnad lista används när ordningen inte är viktig.

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

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

Ordnad lista: ol

  1. Skapa projektmapp
  2. Skriv HTML
  3. Validera sidan

Oordnad lista: ul

  • HTML
  • CSS
  • JavaScript

Platshållartext och exempelnamn

Lorem ipsum används ibland som tillfällig text när layout testas. Orden foo, bar och baz används ofta som neutrala exempelnamn i kod. I riktiga projekt ska de ersättas med namn som beskriver innehållet.

Prova själv

  1. Lägg till en länk till en webbplats du använder för att lära dig.
  2. Lägg till en bild i mappen images och skriv en alt-text.
  3. Lägg till en ordnad lista och en oordnad lista.
  4. Markera ett viktigt ord med strong.