web-intro
  • Introduction
  • Introduksjon
    • Introduksjon
    • Din første nettside
      • Hello World
      • DevTools
  • Grunnleggende webutvikling
    • HTML
      • Elementer
      • Head og body
      • Semantikk
      • Bilder
      • Lenker
      • Knapper
      • DOM-en
    • CSS
      • Selectorer
      • Pseudo-klasser
      • Box model
      • Flyt
      • Layout
      • Responsivt
    • JavaScript
      • Filer
      • Variabler
      • Typer og operatorer
      • Strenger
      • Funksjoner
      • Listeoperasjoner
      • DOM-apiet
      • Promises
      • Async/await
      • Web-APIer
      • ESNext
      • Rammeverk
  • Neste steg
    • Universell utforming
    • React
    • Utviklingsmiljø
      • Dytt det til skyen!
    • Best practices
      • Linting og formatering
      • Code review
      • Keep it simple, stupid!
    • Flere ressurser
Powered by GitBook
On this page
  1. Grunnleggende webutvikling
  2. HTML

Bilder

PreviousSemantikkNextLenker

Last updated 5 years ago

Dokumentasjon fra MDN:

Bilder representeres med taggen img i HTML:

<img
    src="https://i.redd.it/dl7mxnceal2z.jpg"
    alt="Image: Front End Web Development 2017"
    style="width: 400px"
/>

En viktig ting å huske på når du legger til bilder og grafikk på nettsiden din, er å beskrive bildet slik at skjermlesere og andre verktøy kan presentere det riktig for brukeren. Om du for eksempel ikke legger til det beskrivende attributtet alt vil skjermleseren lese opp filnavnet eller bildeadressen til brukeren - noe som ikke er så moro når filnavnet er en . På kan du lese mer om hvordan du kan løse dette på en god måte.

Tips! Trenger du en placeholder? Sjekk ut .

Oppgave

Legg til et valgfritt bilde i index.html som du lagde i

img
data-URL
Difis nettsider
LoremFlickr
del 1