Programming & construction	HTML	WYSIWYG editors (in development)	Interactivity & animation (in development)	Web applications (in development)	Implementation (in development)

Using images

Images are not embedded (or contained within) the HTML file. The HTML code contains a reference to the image file, which instructs the browser to locate and insert the image into the document. The image file therefore needs to be copied to the web server along with the HTML file.

Images must be sized and compressed appropriately for the internet, and saved into a format that browsers can load - JPEG or GIF are the most widely used formats.

To find out more about acquiring and processing images for the web, go to the module on Producing Content for the Web: Visual content

Attributes of Images

The reference to the image in the HTML code may also contain a variety of attributes, such as source, size, border and description.

Eg:

<img src="pic.gif" width="100" height="100" border="0" alt="photo of children playing">

• src = file name and path to the image file*
• width and height = width and height in pixels of the image
• border = width (in pixels) of any border around the image
• alt = text description of the image*

  * Required attribute

Other possible image attributes are alignment (to control placement on the page and text wrapping), low source (a low-res image that appears while the browser is loading the larger image), and vertical/horizontal space (for space around the image).

src attribute and file paths

The source attribute (src) describes a pathway from your current document to the image file. This is called a ‘relative’ file path. It is possible to provide a full URL-based pathway in the ‘src’ attribute, however this is not to be recommended.

Problems can occur when an ‘absolute’ file path to an image on your hard disk cannot be accessed by the web server once the web page is uploaded.

The usual relationship between HTML documents and their associated images is to either have them in the same directory, or place images in a subdirectory named ‘images’. Once the relationship is established, the files should not be moved independently, or links within the HTML will need to be re-established.

Eg:

Now find out about creating links >