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

Billeder gør websider mere engagerende. Du kan indsætte et billede ved at bruge `<img>`-tagget.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL21vdW50YWlucy5hdmlmIgogIGFsdD0iTW91bnRhaW5zIGluIHNub3cgYW5kIGNsZWFuIHNreSIKICB3aWR0aD0iNTAwIgogIGhlaWdodD0iMzMzIgovPg==

### Vigtige attributter:
- `src`: påkrævet. Sti til billedfilen (absolut eller relativ);
- `alt`: påkrævet. Tekst vist, hvis billedet ikke kan indlæses, bruges også af skærmlæsere;
- `width` / `height`: størrelse i pixels. Uden disse vises billedet i sin oprindelige størrelse.

## alt-attribut
`alt`-teksten bør beskrive billedet tydeligt og give nyttig kontekst.

Forestil dig følgende eksempel. Du har en kilde om hestevæddeløb. Du vil vise, hvordan deltagerne forbereder sig til løbet.

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgaHVtYW4gb24gYSBob3JzZSIKLz4=

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgam9ja2V5IHJpZGVzIGEgaG9yc2UgdGhyb3VnaCBhIHRyYWluaW5nIGFyZWEgc3Vycm91bmRlZCBieSB0cmVlcyIKLz4=

Den forbedrede version giver reel kontekst og hjælper synshæmmede brugere med at forstå, hvad billedet viser.

## src-attribut
`src`-attributten kan bruge både absolutte og relative stier til at angive placeringen af billedfilen.

### Absolut sti
En fuld URL, der peger på et online billede.

PGltZyBzcmM9Imh0dHBzOi8vZXhhbXBsZS5jb20vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Alle kan få adgang til billedet via dette fulde link.

Se venligst det følgende virkelige eksempel.
- [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 sti
Henviser til et billede inde i din projektmappe.

PGltZyBzcmM9Ii4vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Dette betyder, at `image.jpg` er gemt i images-mappen tæt på din HTML-fil.

Undersøg venligst det rigtige eksempel nedenfor. Du finder mappen `images`, som indeholder 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/)

Absolutte stier: fulde URL'er, der fungerer fra hvor som helst på internettet.

Relative stier: lokale projektstier, der bruges inden for din egen mappestruktur.

Resumé

Hvilket tag kan bruges til at indsætte et billede på en hjemmeside?

Hvilken attribut er påkrævet at angive for et `<img/>`-tag?

Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.

Udforsk internettets indre funktioner. Lær hvordan data rejser over netværk, opdag protokollernes rolle, og afslør mysterierne bag IP-adresser og domænenavne. Få en overordnet forståelse af, hvordan webbrowsere og servere kommunikerer for at levere webindhold.

Opdag kraften i tags til at strukturere indhold, fra overskrifter og afsnit til lister og tabeller. Lær hvordan du forbedrer elementerne med attributter.

Kernen i HTML-dokumentstrukturen. Lær komponenterne i et HTML-dokument, inklusive doctype-deklarationen, head og body. Forstå formålet med hvert element, og hvordan de bidrager til den overordnede struktur af en webside.

Gør en webside mere attraktiv ved hjælp af medier som billeder, lyd og video. Arbejd med strukturerede tabeldata i form af tabeller.

Udforsk alsidigheden af HTML-formularer. Lær at designe intuitive og brugervenlige formularer ved at udnytte nøglekoncepter og teknikker. Opdag, hvordan formularer muliggør brugerinteraktion og dataindsendelse på hjemmesider.

Tilføjelse af billeder i HTML

Vigtige attributter:

alt-attribut

src-attribut

Absolut sti

Relativ sti

1. Hvilket tag kan bruges til at indsætte et billede på en hjemmeside?

2. Hvilken attribut er påkrævet at angive for et `<img/>`-tag?