Åpne HTML-filen for nettsiden du vil legge til et bilde i et tekstredigeringsprogram som Notisblokk eller nettutviklingsprogramvare.
Legg til en tag i filen. Plasser taggen etter elementet du vil at et bilde skal vises under når HTML-filen åpnes i en nettleser. Taggen har ikke en egen avslutningsbrikke. Innenfor taggen må du spesifisere kilden til bildet du vil vise ved å skrive inn bildets plassering på internett med src Egenskap. Hvis bildet er lagret i samme mappe som HTML-filen, skriv inn bildets navn og filtype. Hvis bildet er lagret et annet sted, skriv inn hele URL-en til bildet.
Legg til alt attributt til taggen din. I HTML5 kreves alt-attributtet. Bruk dette attributtet for å beskrive bildet i tilfelle det ikke kan lastes. Hvis et bilde ikke kan lastes, viser nettleseren teksten du skriver inn etter alt-attributtet. I tillegg er alt-attributtet viktig for skjermleserprogramvare som brukes av personer med synshemming. Programvaren leser teksten i alt-attributtet slik at personen med synshemming som ser på nettstedet ditt kan høre hva som er på bildet selv om de ikke kan se det.
Spesifiser bildets dimensjoner i piksler med høyde og bredde egenskaper. Hvis du ikke spesifiserer dimensjonene, vet ikke nettleseren hvor mye plass som skal være til bildet når siden lastes inn. Dette resulterer i at en side lastes hakkete, ettersom teksten lastes først, etterlater en liten plass til bildet, og deretter hopper fra hverandre når bildet lastes inn og får plassen til å utvide seg. Med de spesifiserte dimensjonene, etterlater nettleseren nøyaktig riktig mengde mellomrom mellom de andre elementene på siden for at bildet skal fylles ut når det er ferdig lastet.
Test koden for å være sikker på at bildet vises på riktig sted ved å åpne HTML-filen i en nettleser.
Bruk CSS for å flytte et bilde til venstre eller høyre side av skjermen eller ha tekstomslag rundt det. Du kan for eksempel bruke style="float: left;" eller style="float: right;" i taggen.
Hvis du ikke vet både høyden og bredden til et bilde, er det greit å bruke enten høyde- eller breddeattributtet alene. Du kan også bruke CSS for å spesifisere høyden og bredden; for eksempel, med et bilde på 100 x 100 piksler, bruk style-attributtet: style="height: 100px; bredde: 100px."
Gjør bildet til en klikkbar lenke ved å plassere taggen i et "a href" tag-par. Hvis du for eksempel vil at et bilde skal kobles til Facebook, skriver du inn følgende.
Ikke bruk alt-attributtet for å prøve å øke sidens SEO. Søkemotorer har lenge vært klar over at noen webdesignere prøver å fylle alt-attributtet med ekstra nøkkelord, og derfor ignorerer de teksten i alt-attributtet.
