Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Tilføjelse af Billeder i HTML | Arbejde med Medier og Tabeller
Ultimativ HTML

bookTilføjelse af Billeder i HTML

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

index.html

index.html

copy

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 klart beskrive billedet og give nyttig kontekst.

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

Dårlig alt-tekst:

index.html

index.html

copy

Bedre alt-tekst:

index.html

index.html

copy

Den forbedrede version giver reel kontekst og hjælper synshandicappede 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.

index.html

index.html

copy

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

Undersøg venligst det følgende virkelige eksempel i kode-sandkassen nedenfor.

Note
Bemærk

For at undersøge filmappe-strukturen, træk skyderen på kode-sandkassens venstre side. I øverste venstre hjørne finder du en burger-knap repræsenteret ved tre striber. Ved at klikke på denne knap navigerer du til filmappe-organiseringen.

Relativ sti

Henviser til et billede inde i din projektmappe.

index.html

index.html

copy

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

Undersøg venligst det rigtige eksempel i kode-sandkassen nedenfor. Du vil finde mappen images, som indeholder filen sun.png.

Note
Resumé

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 1

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain the difference between absolute and relative paths in more detail?

What are some tips for writing effective alt text for images?

Can you show more examples of using the img tag with different attributes?

bookTilføjelse af Billeder i HTML

Stryg for at vise menuen

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

index.html

index.html

copy

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 klart beskrive billedet og give nyttig kontekst.

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

Dårlig alt-tekst:

index.html

index.html

copy

Bedre alt-tekst:

index.html

index.html

copy

Den forbedrede version giver reel kontekst og hjælper synshandicappede 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.

index.html

index.html

copy

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

Undersøg venligst det følgende virkelige eksempel i kode-sandkassen nedenfor.

Note
Bemærk

For at undersøge filmappe-strukturen, træk skyderen på kode-sandkassens venstre side. I øverste venstre hjørne finder du en burger-knap repræsenteret ved tre striber. Ved at klikke på denne knap navigerer du til filmappe-organiseringen.

Relativ sti

Henviser til et billede inde i din projektmappe.

index.html

index.html

copy

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

Undersøg venligst det rigtige eksempel i kode-sandkassen nedenfor. Du vil finde mappen images, som indeholder filen sun.png.

Note
Resumé

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 1
some-alt