Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Challenge: Arbeid med bilder | Arbeide med Media og Tabeller
Ultimate HTML

Challenge: Arbeid med bilder

Sveip for å vise menyen

Mål

Øvelse i å bruke absolutt bane for bilder i HTML.

Oppgave

Sørg for at src-attributtet til det første bildet bruker absolutt bane. Du finner bildet her:

https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png

Bruk den absolutte banen for src-attributtet til det andre bildet. Tilgang til bildet her:

https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png

Angi riktig verdi for alt-attributtet for begge bildene. Husk at alt-verdien er viktig for å gi kontekst dersom bilder ikke lastes inn, eller for brukere som benytter skjermleser.

index.html

index.html

Tips
expand arrow
  1. Bruk <img>-taggen for å vise et bilde;
  2. Bruk src-attributtet for å angi bildeadressen;
  3. Bruk alt-attributtet for å gi beskrivende tekst for bildet;
  4. Bruk width-attributtet for å definere bildets bredde;
  5. Bruk height-attributtet for å definere bildets høyde.
Løsning
expand arrow
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Challenge: Images</title>
  </head>
  <body>
    <!-- Image one -->
    <img
      src="https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png"
      alt="Emotion that opens the mouth"
      width="256"
      height="256"
    />

    <!-- Image two -->
    <img
      src="https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png"
      alt="Emotion that shows the tongue"
      width="256"
      height="256"
    />
  </body>
</html>
Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 2

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

Seksjon 4. Kapittel 2
some-alt