Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Arbeide med Bilder i HTML | Bilder og Medier
HTML-Grunnleggende

bookArbeide med Bilder i HTML

Bilder

Bilder spiller en avgjørende rolle i å forbedre det visuelle uttrykket og formidle informasjon på nettsider. I HTML settes bilder inn ved hjelp av <img>-taggen.

Innsetting av bilder

<img>-taggen brukes for å sette inn bilder i et HTML-dokument. I motsetning til de fleste HTML-tagger, har ikke <img>-taggen en avsluttende tagg og er selv-lukkende.
Eksempel:

<img src="image.jpg" alt="Description of the image">

I eksempelet over:

  • <img>-taggen brukes for å sette inn et bilde;
  • src-attributtet angir kilden (URL) til bildefilen;
  • alt-attributtet gir alternativ tekst for bildet. Denne teksten vises hvis bildet ikke kan lastes inn eller for tilgjengelighetsformål.

Før vi ser på et praktisk eksempel, skal vi forstå de grunnleggende attributtene til img-taggen og hvordan de påvirker innholdet.

Bildeattributter

  1. src: Angir kilden (URL) til bildefilen. Dette attributtet er påkrevd for at <img>-taggen skal vise bildet;
  2. alt: Gir alternativ tekst for bildet. Teksten som er angitt i alt-attributtet vises hvis bildet ikke kan lastes inn, eller for tilgjengelighetsformål. Dette er viktig for brukere som benytter skjermleser, eller i situasjoner der bildet ikke kan vises;
  3. width: Angir bredden på bildet i piksler eller som en prosentandel av overordnet beholder;
  4. height: Angir høyden på bildet i piksler eller som en prosentandel av overordnet beholder;
  5. title: Gir tilleggsinformasjon om bildet. Vises ofte som et verktøytips når brukeren holder musepekeren over bildet.
    Eksempel:
index.html

index.html

copy

I eksempelet ovenfor:

  • <img>-taggen setter inn et bilde på en nettside;
  • src-attributtet angir kilde-URL-en til bildefilen;
  • alt-attributtet angir alternativ tekst for bildet;
  • width-attributtet angir bildets bredde;
  • height-attributtet angir bildets høyde;
  • title-attributtet gir ytterligere informasjon om bildet.

Videoveiledning

1. Hvilken tag brukes for å sette inn bilder i et HTML-dokument?

2. Hvilket attributt er påkrevd for at <img>-taggen skal vise bildet?

3. Hva gir alt-attributtet for et bilde?

4. Hva skjer hvis bildet angitt i src-attributtet ikke kan lastes inn?

question mark

Hvilken tag brukes for å sette inn bilder i et HTML-dokument?

Select the correct answer

question mark

Hvilket attributt er påkrevd for at <img>-taggen skal vise bildet?

Select the correct answer

question mark

Hva gir alt-attributtet for et bilde?

Select the correct answer

question mark

Hva skjer hvis bildet angitt i src-attributtet ikke kan lastes inn?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. 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

Suggested prompts:

Can you explain more about the `alt` attribute and why it's important?

How do I use a local image instead of an online image in my HTML?

What happens if I don't specify the width and height attributes for an image?

Awesome!

Completion rate improved to 3.13

bookArbeide med Bilder i HTML

Sveip for å vise menyen

Bilder

Bilder spiller en avgjørende rolle i å forbedre det visuelle uttrykket og formidle informasjon på nettsider. I HTML settes bilder inn ved hjelp av <img>-taggen.

Innsetting av bilder

<img>-taggen brukes for å sette inn bilder i et HTML-dokument. I motsetning til de fleste HTML-tagger, har ikke <img>-taggen en avsluttende tagg og er selv-lukkende.
Eksempel:

<img src="image.jpg" alt="Description of the image">

I eksempelet over:

  • <img>-taggen brukes for å sette inn et bilde;
  • src-attributtet angir kilden (URL) til bildefilen;
  • alt-attributtet gir alternativ tekst for bildet. Denne teksten vises hvis bildet ikke kan lastes inn eller for tilgjengelighetsformål.

Før vi ser på et praktisk eksempel, skal vi forstå de grunnleggende attributtene til img-taggen og hvordan de påvirker innholdet.

Bildeattributter

  1. src: Angir kilden (URL) til bildefilen. Dette attributtet er påkrevd for at <img>-taggen skal vise bildet;
  2. alt: Gir alternativ tekst for bildet. Teksten som er angitt i alt-attributtet vises hvis bildet ikke kan lastes inn, eller for tilgjengelighetsformål. Dette er viktig for brukere som benytter skjermleser, eller i situasjoner der bildet ikke kan vises;
  3. width: Angir bredden på bildet i piksler eller som en prosentandel av overordnet beholder;
  4. height: Angir høyden på bildet i piksler eller som en prosentandel av overordnet beholder;
  5. title: Gir tilleggsinformasjon om bildet. Vises ofte som et verktøytips når brukeren holder musepekeren over bildet.
    Eksempel:
index.html

index.html

copy

I eksempelet ovenfor:

  • <img>-taggen setter inn et bilde på en nettside;
  • src-attributtet angir kilde-URL-en til bildefilen;
  • alt-attributtet angir alternativ tekst for bildet;
  • width-attributtet angir bildets bredde;
  • height-attributtet angir bildets høyde;
  • title-attributtet gir ytterligere informasjon om bildet.

Videoveiledning

1. Hvilken tag brukes for å sette inn bilder i et HTML-dokument?

2. Hvilket attributt er påkrevd for at <img>-taggen skal vise bildet?

3. Hva gir alt-attributtet for et bilde?

4. Hva skjer hvis bildet angitt i src-attributtet ikke kan lastes inn?

question mark

Hvilken tag brukes for å sette inn bilder i et HTML-dokument?

Select the correct answer

question mark

Hvilket attributt er påkrevd for at <img>-taggen skal vise bildet?

Select the correct answer

question mark

Hva gir alt-attributtet for et bilde?

Select the correct answer

question mark

Hva skjer hvis bildet angitt i src-attributtet ikke kan lastes inn?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 1
some-alt