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
Tips
- Bruk
<img>-taggen for å vise et bilde; - Bruk
src-attributtet for å angi bildeadressen; - Bruk
alt-attributtet for å gi beskrivende tekst for bildet; - Bruk
width-attributtet for å definere bildets bredde; - Bruk
height-attributtet for å definere bildets høyde.
Løsning
<!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?
Takk for tilbakemeldingene dine!
Seksjon 4. Kapittel 2
Spør AI
Spør AI
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