Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Lägga till Bilder i HTML | Arbeta med Media och Tabeller
Ultimate HTML

bookLägga till Bilder i HTML

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

index.html

index.html

copy

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.

Dålig alt-text:

index.html

index.html

copy

Bättre alt-text:

index.html

index.html

copy

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.

index.html

index.html

copy

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

Vänligen granska det följande verkliga exemplet i kodsandlådan nedan.

Note
Notering

För att undersöka mappstrukturen, dra reglaget på code sandbox-gränssnittets vänstra sida. I det övre vänstra hörnet hittar du en hamburgermenyn som representeras av tre streck. Genom att klicka på denna knapp navigerar du till fil- och mapporganisationen.

Relativ sökväg

Pekar på en bild inuti din projektmapp.

index.html

index.html

copy

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

Undersök gärna det verkliga exemplet i kodsandlådan nedan. Du hittar mappen images, som innehåller filen sun.png.

Note
Sammanfattning

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 1

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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?

bookLägga till Bilder i HTML

Svep för att visa menyn

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

index.html

index.html

copy

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.

Dålig alt-text:

index.html

index.html

copy

Bättre alt-text:

index.html

index.html

copy

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.

index.html

index.html

copy

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

Vänligen granska det följande verkliga exemplet i kodsandlådan nedan.

Note
Notering

För att undersöka mappstrukturen, dra reglaget på code sandbox-gränssnittets vänstra sida. I det övre vänstra hörnet hittar du en hamburgermenyn som representeras av tre streck. Genom att klicka på denna knapp navigerar du till fil- och mapporganisationen.

Relativ sökväg

Pekar på en bild inuti din projektmapp.

index.html

index.html

copy

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

Undersök gärna det verkliga exemplet i kodsandlådan nedan. Du hittar mappen images, som innehåller filen sun.png.

Note
Sammanfattning

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 1
some-alt