Öppna HTML-filen för webbsidan du vill lägga till en bild på i en textredigerare som Anteckningar eller webbutvecklingsprogram.
Lägg till en tagg till filen. Placera taggen efter det element som du vill att en bild ska visas under när HTML-filen öppnas i en webbläsare. Taggen har ingen separat stängningsbricka. Inom taggen måste du ange källan till bilden du vill visa genom att skriva in bildens plats på internet med src attribut. Om bilden är lagrad i samma mapp som HTML-filen, skriv in bildens namn och filnamnstillägg. Om bilden lagras någon annanstans, skriv in hela webbadressen till bilden.
Lägg till alt attribut till din tagg. I HTML5 krävs alt-attributet. Använd det här attributet för att beskriva bilden om den inte kan laddas. Om en bild inte kan laddas visar webbläsaren texten du anger efter alt-attributet. Dessutom är alt-attributet viktigt för skärmläsarprogram som används av personer med synnedsättning. Programvaran läser texten i alt-attributet så att personen med synnedsättning som tittar på din webbplats kan höra vad som finns på bilden trots att de inte kan se det.
Ange bildens mått i pixlar med höjd och bredd attribut. Om du inte anger måtten, vet webbläsaren inte hur mycket utrymme som ska lämnas för bilden när sidan laddas. Detta resulterar i att en sida laddas hackigt, eftersom texten laddas först, lämnar ett litet utrymme för bilden och sedan hoppar isär när bilden laddas och får utrymmet att expandera. Med de angivna måtten lämnar webbläsaren exakt rätt utrymme mellan de andra elementen på sidan för att bilden ska fyllas i när den har laddats klart.
Testa din kod för att vara säker på att bilden visas på rätt plats genom att öppna din HTML-fil i en webbläsare.
Använd CSS för att flytta en bild till vänster eller höger sida av skärmen eller ha textomslutning runt den. Du kan till exempel använda style="float: left;" eller style="float: right;" inom taggen.
Om du inte vet både höjden och bredden på en bild, går det bra att bara använda antingen höjd- eller breddattributen ensam. Du kan också använda CSS för att ange höjd och bredd; till exempel, med en bild på 100 x 100 pixlar, använd style-attributet: style="height: 100px; bredd: 100px."
Gör bilden till en klickbar länk genom att placera taggen i ett "a href"-taggpar. Om du till exempel vill att en bild ska länka till Facebook, skriv följande.
Använd inte alt-attributet för att försöka öka din sidas SEO. Sökmotorer har länge varit medvetna om att vissa webbdesigners försöker fylla på alt-attributet med extra nyckelord, och därför ignorerar de texten i alt-attributet.
