Infoga bilder

Varje bild på en webbsida utgörs av en bildfil (.gif eller .jpg). Bildfiler läggs lämpligen i en egen undermapp på webbplatsen och ska då vara redigerade och klara att användas.

Med det tomma elementet <img /> skapas den platshållare där bilden ska visas på webbsidan. Eftersom det är ett fraselement placerar man det vanligtvis först inuti ett styckeelement. Attributet src (source) beskriver adressen till bildfilen som ska visas. Att ange adresser till bilder fungerar på samma sätt som när man gör länkar.

<p><img src="bilder/tomater.jpg" />Solmogna tomater från...</p>

Bilder som länkar

En bild kan göras klickbar genom att man placerar bildelementet i länkelementet <a> (anchor). Klickbara bilder används t.ex. som annonser eller när man vill länka en liten bild till en större version av samma bild.

<p><a href="big_02.jpg" target="_blank"><img src="small_02.jpg"
alt="Klicka för större version av bilden" /></a></p>

Bredd och höjd på bildobjekt

Ett bildelement utan uppgifter om bredd och höjd visas i de flesta fall ändå av webbläsaren. Fördelen med att ange bildens mått upptäcker man när den publicerade sidan ska laddas in av webbläsaren.

När ett bildelement saknar uppgifter om bredd och höjd, kan inte webbläsaren i förväg skapa en platshållare. Det innebär i sin tur att den mer snabbladdade texten måste flyttas när bilden väl börjar laddas.

Eftersom bilder på en webbplats kan vara av varierande storlek, anger man oftast dimensionerna direkt i elementet med attributet style . Bildelementet ska ha samma pixeldimensioner som den verkliga bilden. Du använder CSS-egenskaperna width och height och anger måtten i pixlar.

<p><img src="bilder/tomater.jpg"
style="width:100px; height:150px" />Solmogna tomater från...</p>

OBS! Bilders bredd och höjd kan du se i Den här datorn i visningsläget Sammanfattning. Annars högerklickar du på bildfilen och väljer Egenskaper och fliken Sammanfattning.

Figursättning av bildobjekt

Vid figursättning av bildobjekt används egenskapen float (se avsnitt om detta här). Att högerjustera en bild med direkt CSS kan se ut som i exemplet nedan. Egenskapen margin används här för att öka avståndet mellan texten och bildens vänstra sida.

<p><img src="bilder/tomater.jpg" style="width:100px; height:150px;
float:right; margin:0 0 0 10px" alt="Röda, saftiga tomater" />
Solmogna tomater från...</p>