Nu har vi fått ordning på textformattering och länkar, men för att få lite liv i sidorna kan det vara bra att lägga till lite bilder. Detta gör du så här.

Till att börja med vill jag höja ett varnande finger: folk vill ha snabbladdade hemsidor. Ju större saker som är på en hemsida, desto längre tid tar det att ladda hem sidan. Bilder är väldigt bra på att ta plats, använd dem därför sparsamt. Nog om detta, över till HTML-kodandet!

Grundkoden för en bild är <img src=...>, där "src" står för source (källa). Källan anger sökvägen till bilden. Som med länkar kan du ange adressen med antingen relativa eller absoluta adresser (glömt bort vad det betyder? Hoppa tillbaka och tjuvkika!). Till skillnad från de allra flesta HTML-taggar, finns ingen stängningstagg (skulle i så fall varit </img>). Detta beror på att en bild bara är ett element och kan inte "sluta". Den finns på en plats och så är det med det. Nu har jag sagt det, så du inte behöver försöka. Däremot, eftersom jag tidigare har pratat om XML/XHTML, så går det faktiskt att avsluta även sådana taggar, genom att lägga till en / i slutet av taggen, alltså <img src="..." />. Om detta nu gör dig förvirrad, kan du bortse från detta så länge.

Vi lägger till en bild så vi får se vad vi egentligen håller på med:

<img src="bild.gif">

Detta är det minsta som behövs för att bilden ska visas. Det fungerar helt ok, vi ser en fin liten bild och det borde väl räcka? Egentligen inte. Det rekommenderas att du använder 4 saker till när du infogar bilder på en hemsida, nämligen följande:

Width="xx" - Sätter hur bred bilden är. Detta brukar göras av två orsaker. Dels blir sidan lite snabbare om man fördefinerar hur stora bilderna är, men sedan kan man också krympa eller göra bilder större om man sätter det till annan bredd. Det sista är dock inte att föredra, eftersom bilden blir kornig. Om du inte vet hur stor din bild är, öppna den direkt i Internetläsaren(Arkiv -> Öppna... och välj filen), så visas storleken i pixlar i namnlisten, med bredden först.

height="xx" - Sätter hur hög bilden är. I övrigt, se width.

alt="Text" - Visar vad för text det ska stå där bilden skulle visats för användare som valt att stänga av bilder. Visas även när man håller musen över en bild. Detta attribut krävs för att det ska vara korrekt HTML och bör även ha en informativ mening, eftersom handikappsanpassade browsers meddelar detta innehåll. Om bilden inte innehåller någon information, är det ok att lämna detta attribut blankt (alt=""), men det ska ändå alltid finnas med.

border="0" - Vill du ha en ram runt bilden? Om inte, lägg till border=0 efter bilden. Du kan även sätta den till ett godtyckligt värde, 0-15 är att föredra.

Dessa fyra ger ingen direkt visuell skillnad (bortsett från eventuellt border), men rekommenderas ända att användas. Ta det till vana direkt, så slipper du tänka på det sedan. Koden för den tidigare bilden blir då enligt följande.

<img src="bild.gif" width="88" height="31" border="0" alt="Frenetic!">

Så tar vi några varningens ord, igen. Som tidigare sades, kan du ändra bildstorleken med hjälp av "width" och "height". Detta ändrar bara på hur bilden visas, den ändrar inte själva bildens storlek. Säg t.ex. att du har en bild som är 800x600 pixlar, men som du vill men du vill visa den i 400x300 pixlar och drar ner width och height till detta. Allt ser jättebra ut, men den stackars besökaren till hemsidan får fortfarande ladda hem en 4 gånger större bild än han får se. Detta skapar irritation, eftersom sidan upplevs som sölig att ladda hem. Öppna istället bilden i ett bildbehandlingsprogram och ändra storleken på den egentliga bilden. Därefter kan du skriva in den riktiga storleken på width och height.

Så har du kommit ytterligare ett steg närmare HTML-guru! Nästa steg blir att titta lite närmare på hur du ändrar på färger av alla de slag, samt hur bakgrundsbilder används. Gå vidare!