Summary  
This chapter explains how to embed images in HTML using the `<img>` tag and its key attributes (`src`, `alt`, `width`, `height`), including best practices for accessible alt text and using absolute versus relative paths.  

General domain of usage  
Web page content design

Bilder gör webbsidor mer engagerande. Du kan infoga en bild med hjälp av `<img>`-taggen.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL21vdW50YWlucy5hdmlmIgogIGFsdD0iTW91bnRhaW5zIGluIHNub3cgYW5kIGNsZWFuIHNreSIKICB3aWR0aD0iNTAwIgogIGhlaWdodD0iMzMzIgovPg==

### Viktiga attribut:
- `src`: obligatorisk. Sökväg till bildfilen (absolut eller relativ);
- `alt`: obligatorisk. Text som visas om bilden inte kan laddas, används även av skärmläsare;
- `width` / `height`: storlek i pixlar. Utan dessa visas bilden i sin ursprungliga storlek.

## alt-attribut
`alt`-texten bör tydligt beskriva bilden och ge användbar kontext.

Föreställ dig följande exempel. Du har en källa om hästkapplöpning. Du vill visa hur deltagarna förbereder sig inför loppet.

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgaHVtYW4gb24gYSBob3JzZSIKLz4=

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgam9ja2V5IHJpZGVzIGEgaG9yc2UgdGhyb3VnaCBhIHRyYWluaW5nIGFyZWEgc3Vycm91bmRlZCBieSB0cmVlcyIKLz4=

Den förbättrade versionen ger verklig kontext och hjälper synskadade användare att förstå vad bilden visar.

## src-attribut
Attributet `src` kan använda både absoluta och relativa sökvägar för att ange platsen för bildfilen.

### Absolut sökväg
En fullständig URL som pekar på en bild online.

PGltZyBzcmM9Imh0dHBzOi8vZXhhbXBsZS5jb20vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Vem som helst kan komma åt bilden via denna fullständiga länk.

Vänligen granska följande verkliga exempel.
- [View the Code](https://github.com/olreyplay/adding-images-in-html/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html/)

### Relativ sökväg
Pekar på en bild i din projektmapp.

PGltZyBzcmM9Ii4vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Detta innebär att `image.jpg` är lagrad i images-katalogen nära din HTML-fil.

Undersök det verkliga exemplet nedan. Du hittar mappen `images`, som innehåller filen `sun.png`.

- [View the Code](https://github.com/olreyplay/adding-images-in-html-v2/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html-v2/)

Absoluta sökvägar: fullständiga webbadresser som fungerar var som helst på internet.

Relativa sökvägar: lokala projektsökvägar som används inom din egen mappstruktur.

Sammanfattning

Vilken tagg kan användas för att lägga in en bild på en webbplats?

Vilket attribut måste anges för en `<img/>`-tagg?

Lär dig grunderna i HTML (HyperText Markup Language), grunden för webbutveckling. Denna nybörjarvänliga kurs täcker taggar, attribut, element och strukturering av webbsidor. Få praktiska färdigheter i att skapa rubriker, stycken, listor, bilder, länkar, formulär och tabeller. Utforska bästa praxis, optimering och webbtillgänglighet. Börja din webbutvecklingsresa med HTML.

Utforska webben inre funktioner. Lär dig hur data färdas över nätverk, upptäck protokollens roll och lös mysterierna med IP-adresser och domännamn. Få en övergripande förståelse för hur webbläsare och servrar kommunicerar för att leverera webb-innehåll.

Upptäck kraften i taggar för att strukturera innehåll, från rubriker och stycken till listor och tabeller. Lär dig hur du förbättrar elementen med attribut.

Kärnan i HTML-dokumentstrukturen. Lär dig komponenterna i ett HTML-dokument, inklusive doctype-deklarationen, head och body. Förstå syftet med varje element och hur de bidrar till den övergripande strukturen på en webbsida.

Gör en webbsida mer tilltalande med hjälp av media som bilder, ljud och video. Arbeta med strukturerad tabulär data i form av tabeller.

Utforska mångsidigheten hos HTML-formulär. Lär dig att designa intuitiva och användarvänliga formulär genom att utnyttja viktiga koncept och tekniker. Upptäck hur formulär möjliggör användarinteraktion och dataöverföring på webbplatser.

Lägga till bilder i HTML

Viktiga attribut:

alt-attribut

src-attribut

Absolut sökväg

Relativ sökväg

1. Vilken tagg kan användas för att lägga in en bild på en webbplats?

2. Vilket attribut måste anges för en `<img/>`-tagg?