Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Legge til Bilder i HTML | Arbeide med Media og Tabeller
Learn
Kurs
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Ultimate HTML

bookLegge til Bilder i HTML

Bilder gjør nettsider mer engasjerende. Du kan sette inn et bilde ved å bruke <img>-taggen.

index.html

index.html

copy

Viktige attributter:

  • src: påkrevd. Sti til bildefilen (absolutt eller relativ);
  • alt: påkrevd. Tekst som vises hvis bildet ikke kan lastes, også brukt av skjermlesere;
  • width / height: størrelse i piksler. Uten disse vises bildet i sin opprinnelige størrelse.

alt-attributt

alt-teksten bør beskrive bildet tydelig og gi nyttig kontekst.

La oss tenke oss følgende eksempel. Du har en kilde om hesteveddeløp. Du ønsker å vise hvordan deltakerne forbereder seg til løpet.

Dårlig alt-tekst:

index.html

index.html

copy

Bedre alt-tekst:

index.html

index.html

copy

Den forbedrede versjonen gir reell kontekst og hjelper synshemmede brukere med å forstå hva bildet viser.

src-attributt

src-attributtet kan bruke både absolutte og relative stier for å angi plasseringen til bildefilen.

Absolutt sti

En fullstendig URL som peker til et bilde på nettet.

index.html

index.html

copy

Alle kan få tilgang til bildet via denne fullstendige lenken.

Vennligst undersøk det følgende virkelige eksempelet i kode-sandkassen nedenfor.

Note
Merk

For å undersøke mappestrukturen, dra glidebryteren på venstre side av kode-sandkassen. Øverst til venstre finner du en burgerknapp representert med tre striper. Ved å klikke på denne knappen navigerer du til filmappeorganiseringen.

Relativ sti

Peker til et bilde inne i prosjektmappen din.

index.html

index.html

copy

Dette betyr at image.jpg er lagret i images-mappen ved siden av HTML-filen din.

Undersøk det faktiske eksempelet i kode-sandkassen nedenfor. Du vil finne mappen images, som inneholder filen sun.png.

Note
Oppsummering

Absolutte stier: fullstendige nettadresser som fungerer fra hvor som helst på internett.

Relative stier: lokale prosjektstier brukt i din egen mappestruktur.

1. Hvilken tag kan brukes for å sette inn et bilde på et nettsted?

2. Hvilket attributt må spesifiseres for en <img/>-tag?

question mark

Hvilken tag kan brukes for å sette inn et bilde på et nettsted?

Select the correct answer

question mark

Hvilket attributt må spesifiseres for en <img/>-tag?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 1

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

bookLegge til Bilder i HTML

Sveip for å vise menyen

Bilder gjør nettsider mer engasjerende. Du kan sette inn et bilde ved å bruke <img>-taggen.

index.html

index.html

copy

Viktige attributter:

  • src: påkrevd. Sti til bildefilen (absolutt eller relativ);
  • alt: påkrevd. Tekst som vises hvis bildet ikke kan lastes, også brukt av skjermlesere;
  • width / height: størrelse i piksler. Uten disse vises bildet i sin opprinnelige størrelse.

alt-attributt

alt-teksten bør beskrive bildet tydelig og gi nyttig kontekst.

La oss tenke oss følgende eksempel. Du har en kilde om hesteveddeløp. Du ønsker å vise hvordan deltakerne forbereder seg til løpet.

Dårlig alt-tekst:

index.html

index.html

copy

Bedre alt-tekst:

index.html

index.html

copy

Den forbedrede versjonen gir reell kontekst og hjelper synshemmede brukere med å forstå hva bildet viser.

src-attributt

src-attributtet kan bruke både absolutte og relative stier for å angi plasseringen til bildefilen.

Absolutt sti

En fullstendig URL som peker til et bilde på nettet.

index.html

index.html

copy

Alle kan få tilgang til bildet via denne fullstendige lenken.

Vennligst undersøk det følgende virkelige eksempelet i kode-sandkassen nedenfor.

Note
Merk

For å undersøke mappestrukturen, dra glidebryteren på venstre side av kode-sandkassen. Øverst til venstre finner du en burgerknapp representert med tre striper. Ved å klikke på denne knappen navigerer du til filmappeorganiseringen.

Relativ sti

Peker til et bilde inne i prosjektmappen din.

index.html

index.html

copy

Dette betyr at image.jpg er lagret i images-mappen ved siden av HTML-filen din.

Undersøk det faktiske eksempelet i kode-sandkassen nedenfor. Du vil finne mappen images, som inneholder filen sun.png.

Note
Oppsummering

Absolutte stier: fullstendige nettadresser som fungerer fra hvor som helst på internett.

Relative stier: lokale prosjektstier brukt i din egen mappestruktur.

1. Hvilken tag kan brukes for å sette inn et bilde på et nettsted?

2. Hvilket attributt må spesifiseres for en <img/>-tag?

question mark

Hvilken tag kan brukes for å sette inn et bilde på et nettsted?

Select the correct answer

question mark

Hvilket attributt må spesifiseres for en <img/>-tag?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 1
some-alt