Webpage Workshop: Home » XHTML » Using images

Using images

Images are inserted into your pages using the image element. This element also caters for user agents (browsers etc) that do not display the image, such as Lynx or Speech browsers. The example below shows the basic syntax of the image element:

<img src="image.jpg" alt="Alternative text" />

The src attribute is where you specify the location of the image, and is used much like the href is in links. The alt attribute is a required attribute and is used to specify the text that should be used if the image is not displayed. It should be a replacement, and not a description.

It is generally considered good practice to specify the width and height of an image within the image element. This helps when your page is loading as it stops the text from jumping about as the images are loaded. The width and height are specified in pixels as in the example below:

<img src="image.jpg" alt="Alternative text" width="#"
height="#" />

The dimensions of the image should be set to the actual size of the image, and you should generally avoid trying to resize the image using the image element - that is what an image editor is for!

It is also possible to make your text flow around the image. This can be done using HTML, but it is generally advised that it be done with Cascading Stylesheets. In fact, this is only possible in the transitional document type.

<img src="image.jpg" alt="Alternative text" align="left" />

The example below shows how to make the image on the left with the text flowing on the right. To make the text flow on the left instead, simply change the align="left" attribute to align="right".

<< Previous page | Next page >>