Om een afbeelding toe te voegen aan een HTML-pagina, moet de afbeelding via internet toegankelijk zijn. Dat wil zeggen dat de foto geüpload is en dat je de URL moet weten (bijvoorbeeld: http://www.jouwdomeinnaam.com/foto.jpg).
Om een afbeelding te plaatsen gebruik je de onderstaande regel. Let op het één na laatste teken, een slash ( / ), dit teken geeft aan dat er geen aparte sluittag komt voor deze 'img'-tag. Omdat XHTML moet voldoen aan de XML-notatie, is dit verplicht bij een losstaande tag.

<img src="http://www.jouwdomein.nl/foto.jpg" width="100"
height="200" alt="Omschrijving" />

De 'alt'-parameter is een verplicht onderdeel van geldige XHTML, maar je mag de waarde tussen haakjes wel leeg laten. De waarde hiervan wordt gebruikt door zoekmachines en hulpsoftware voor slechtziende bezoekers om een idee te krijgen van wat er op de afbeelding te zien is.

De 'width'- en 'height'-parameters (breedte en hoogte van de afbeelding) hoeven in de soepelere 'transitional' XHTML niet aanwezig te zijn. In 'strict' XHTML is het wel verplicht. Alle voorbeelden in deze serie gaan uit van transitional XHTML. Een bijkomend voordeel van het invullen van de breedte en hoogte van een afbeelding is dat een browser kan beginnen met een correcte paginaopbouw voordat de afbeelding geladen is.

Door middel van CSS kun je een afbeelding wel of geen rand geven, uitlijnen en extra marge geven. Ik zal een voorbeeld geven dat tussen de 'style'-tags moet komen:

  img {
float: right;
padding: 0 0 10px 10px;
border: none;
}

Dit voorbeeld geldt voor iedere 'img'-tag. Als je alleen de 'img'-tags bedoelt die tussen 'div'-tags staan met id "inhoud", dan zet je de eigenschappen in "#inhoud img { }".

De "float: right;" zorgt voor een rechtse uitlijning van de afbeelding. Gebruik "float: left;" om de afbeelding links uit te lijnen.

De ruimte om de afbeelding is geregeld met 'padding', er is hier gekozen voor 0 ruimte boven de afbeelding, 0 ruimte rechts, 10 pixels onder en 10 pixels ruimte links van de afbeelding.

Er is gekozen om geen rand te gebruiken. Een voorbeeld van een rand van 3 pixels, onderbroken en in een rode kleur is: "border: 3px dashed red;". De soort lijn mag ook zijn: 'solid', 'dotted', 'double' of 'groove'.

Omdat zwevende afbeeldingen elkaar en de tekst eromheen kunnen verstoren, kun je een eigenschap 'clear: both;' toevoegen in de CSS-code van de afbeelding. Hiermee geef je aan dat de afbeelding geen zwevende elementen (float) naast zich mag hebben.

Ook een achtergrondpatroon voor een blok-element ('div') of voor de hele pagina kan met CSS geregeld worden. Om de hele pagina te voorzien van een witte achtergrond met daar op een herhalend patroon van de afbeelding 'achtergrond.jpg', stel je de CSS-code in als:

body
{ background: white url(achtergrond.jpg) repeat; }

Een patroon dat alleen verticaal herhaalt stel je in met 'repeat-y' in plaats van 'repeat'. Gebruik 'repeat-x' om alleen horizontaal te herhalen en 'no-repeat' om de achtergrond maar 1 keer weer te geven.