Images on the Web

1. Inserting an Image

Lets look at the properties of this image. The HTML must direct the browser to display an existing image.

Sample picture The image HTML is as follows:

Notice the image and text alignment (left attribute). Image is algned to the left of the text. The text will also wrap around the bottom of the image as this text is doing.

Image HTML Summary

TAG	ATTRIBUTES	DESCRIPTION
<img>	src="canaryislands.gif"	Image name (URL)
	alt="Sample picture"	Text the browser will display
	align="left"	Shows how image is aligned (left, right, top, bottom, middle, center)
	hspace="10" vspace="5"	hspace Specifies amount of space in pixels to the left and right of the picture vspace Specifies amount of space in pixels above and below the picture
	width="145" height="104"	Tells the browser to create space for the graphic. This speeds up dowload times.

Using Front Page to set Image Properties

Right click on the picture - Picture properties - Appearance tab

Specify layout. There are various alignment and border options
Specify size. Front Page will pick up the actual size in pixels. By specifying size you are speeding up dowload times

2. Background Image

Background Image HTML Summary

TAG	ATTRIBUTES	DESCRIPTION
<BODY BACKGROUND= "imageURL"> </BODY>	BACKGROUND= "imageURL">	<BODY BACKGROUND= "imageURL"> </BODY> To set up a background image use the BACKGROUND attribue of the BODY tag.

3. Horizontal Rule(Line)

Horizontal Rules are another graphic element. They are easy to deal with as they do not have to be sourced. That means they do not need to be downloaded from another location into the web page. This is what the HTML had to get the browser to do in the case of the image above.

This is a Horizontal Rule(Line) coloured red.

The relevant HTML is as follows:

Horizontal Rule(Line) HTML Summary

TAG	ATTRIBUTES	DESCRIPTION
<HR> Horizontal Rule(Line)	size="4"	Height of rule/line in pixels
	noshade	Removes the shadow from the line
	color="#FF0000"	Specifies colour. Red in this case.
	width="80%"	Specifies width in pixels or as a percentage of the page width.
	align="left"	Shows how the horizontal line is aligned (left, right, center)

Using Front Page to set Horizontal Line Properties

Insert the rule using Insert menu.

Insert menu - Horizontal line

Right click on the line - Horizontal Line properties

Specify width, height, alignment, colour and tick if it is to be a solid line (no shade property).

Lesson Material List | Home Page | List of Assignments