Åbn HTML-filen for den webside, du vil tilføje et billede til, i et tekstredigeringsprogram som Notesblok eller webudviklingssoftware.
Tilføj et tag til filen. Placer tagget efter det element, du ønsker et billede skal vises under, når HTML-filen åbnes i en browser. Tagget har ikke et separat lukkemærke. Indenfor tagget skal du angive kilden til det billede, du vil vise, ved at indtaste billedets placering på internettet med src attribut. Hvis billedet er gemt i samme mappe som HTML-filen, skal du indtaste billedets navn og filtypenavn. Hvis billedet er gemt et andet sted, skal du indtaste billedets fulde URL.
Tilføj alt attribut til dit tag. I HTML5 er alt-attributten påkrævet. Brug denne egenskab til at beskrive billedet, hvis det ikke kan indlæses. Hvis et billede ikke kan indlæses, viser browseren den tekst, du indtaster, efter alt-attributten. Derudover er alt-attributten vigtig for skærmlæsersoftware, der bruges af personer med synshandicap. Softwaren læser teksten i alt-attributten, så personen med et synshandicap, der ser din hjemmeside, kan høre, hvad der er på billedet, selvom de ikke kan se det.
Angiv billedets dimensioner i pixels med højde og bredde egenskaber. Hvis du ikke angiver dimensionerne, ved browseren ikke, hvor meget plads der skal være til billedet, når siden indlæses. Dette resulterer i, at en side indlæses hakkende, da teksten indlæses først, efterlader en lille plads til billedet, og derefter springer fra hinanden, efterhånden som billedet indlæses og får pladsen til at udvide sig. Med de angivne dimensioner efterlader browseren præcis den rigtige mængde plads mellem de andre elementer på siden, så billedet kan udfyldes, når det er færdigt med indlæsning.
Test din kode for at være sikker på, at billedet vises på den rigtige placering ved at åbne din HTML-fil i en browser.
Brug CSS til at flytte et billede til venstre eller højre side af skærmen eller få tekstombrydning omkring det. For eksempel kan du bruge style="float: left;" eller style="float: right;" inden for tagget.
Hvis du ikke kender både højden og bredden af et billede, er det fint at bruge enten højde- eller bredde-attributten alene. Du kan også bruge CSS til at angive højden og bredden; med et billede på 100 x 100 pixel skal du f.eks. bruge style-attributten: style="height: 100px; bredde: 100px."
Gør billedet til et klikbart link ved at placere tagget i et "a href" tag-par. For eksempel, hvis du vil have et billede til at linke til Facebook, skal du skrive følgende.
Brug ikke alt-attributten til at forsøge at booste din sides SEO. Søgemaskiner har længe været klar over, at nogle webdesignere forsøger at fylde alt-attributten med ekstra søgeord, og derfor ignorerer de teksten i alt-attributten.
