4. Graphics

4.1 Background Graphics

Now we are going to bring some graphics to the web page. Graphics are very important on the WWW and make the Internet more accessible for people. As well as making the WWW more fun, graphics can open the way for companies to market themselves effectively, for people to communicate more easily and for accurate information to be exchanged.

One of the quickest, and most effective ways of transforming a web page is by changing the background colour. This can be done by using the BGCOLOR command within the <BODY> tag and applying the same colour numbering as we used earlier for the fonts. For instance, just changing the colour to black can be very effective:

<HTML>

<HEAD>

<TITLE>
The necessary starting template for an HTML document!
</TITLE>

</HEAD>

<BODY BGCOLOR="#000000">
<FONT COLOR="#FFFFFF">

<HR>
<CENTER>
<H1>The HTML Tutorial</H1>
</CENTER>
<HR>

</BODY>

</HTML>

Produces:

Have you noticed that I have had to change the font colour to another colour (in this case, white)? The font default colour in HTML is black, and black does not show up too well on a black background, strangely enough!

If we want to be a little fancy, we can stick the page onto a slab of marble. The following code:

<HTML>

<HEAD>

<TITLE>
The necessary starting template for an HTML document!
</TITLE>

</HEAD>

<BODY BACKGROUND="images\wmarble2.gif">

<HR>
<CENTER>
<H1>The HTML Tutorial</H1>
</CENTER>
<HR>

</BODY>

</HTML>

Results in:

What do you mean you don't like the colour?

If you look carefully you can see that I have inserted a line into the <BODY> tag. This line "images/wmarble2.gif" is referencing a .GIF file which sits in an images sub-directory in the directory that the HTML file, which you are writing, sits. Did that make sense? The parser sees the inverted commas and goes hunting for a file, in this case a picture of a small slab of yukky green marble. It then plasters this picture, lots of times, all over the background of the page. You can make your own .GIF (or .JPG file for more colours) file if you wish, using a graphics program such as Paintshop Pro. It is important to ensure that the case for the filenames is correct. Most web servers are Unix/Linux-based rather than Windows-based. Unix-based Operating systems are case-sensitive.

By the way, it is not obligatory to put these .GIF files in an images directory, you could just stick it in the same place as the HTML file, in which case you would insert the line BACKGROUND="wmarble2.gif" instead. The images directory is there for tidiness sake. GIF and JPG (JPEG) file formats are used in the WWW environment because they are compressed graphic files, thereby allowing faster download times across Wide Area and Dialup networks.

4.2 Graphics Within The Page

We're not just stuck with sticking graphics as wallpaper in the background, we can have them cluttering up the page as well. We do need to be careful, however, that we don't go overboard with the number and size of the pictures, so slowing the web page download times. Keeping graphic files down to 30Kbytes or less is a good rule of thumb.

So, how do we pop a piccy into a web page?

Here is a new tag to learn, the <IMG SRC=imagename> tag. This has no closing tag. Consider the following example:

<DIV>
<IMG SRC="images\bluebrd2.gif" ALIGN=RIGHT>
Here is an image which is aligned to the right of
the text.  You can keep the text flowing around the
picture if you wish, but only down one side, not both
sides.  What a shame!  Remember this is not a
fully-featured DTP package that we are dealing with,
much trial and error is required to obtain the
desired effect.  You will also notice that the
orientation of the words and images change as the page
is resized.  This is a clue for you to test the layout
of the page at different screen resolutions e.g.
640 x 480 or 800 x 600.
</DIV>

<DIV>
<IMG SRC="images\bluebrd2.gif" ALIGN=LEFT>
Next the same image is aligned all the way to the left
of the text.  I hope that you like the image
because we are going to display a few more times.
</DIV>

<DIV>
<IMG SRC="images\bluebrd2.gif" ALIGN=TOP>
When aligning the image at the top,
as you can see, you can only get one line to the side
of the image at the top.
</DIV>

<DIV>
<IMG SRC="images\bluebrd2.gif" ALIGN=MIDDLE BORDER=12>
When aligning text with the middle of the image you again
only get one line to the side.
</DIV>

<DIV>
<IMG SRC="images\bluebrd2.gif" ALIGN=BOTTOM>
Finally, aligning text with the bottom of the picture.
</DIV>

Giving:

Notice how that the image name contained a path to the images directory. This is fine if the HTML file is in a directory higher up for which the 'images' directory is a sub-directory. if the HTML directory is another directory which is sub to the root, and parallel to the 'images' sub-directory, then you would type <IMG SRC="../images/bluebrd2.gif">. If the image is in the root directory and the HTML file is in a sub-directory, then you would type something like <IMG SRC="../bluebrd2.gif">.

As you can see you are able to place pictures almost anywhere within the text and even put borders around them to push text away a little. Note the fourth picture and the use of the BORDER command. And, yes I changed the marble colour! The green one was a bit much!

The following attributes can be used with the <IMG> tag:

BORDER - by default, if you are using an image within a hyperlink then a border of one pixel is added to indicate the link colour. You can get rid of this by setting a value of 0. You can also use other values as demonstrated earlier to thicken the border. The value is in pixels.
HSPACE - By setting this attribute in pixels you can ensure that text which lies above or below the image is just the right distance away.
VSPACE - This does the same as HSPACE but for text either side of the image.
WIDTH - This sets the width of the picture in pixels.
HEIGHT - This sets the height of the picture in pixels.

The WIDTH and HEIGHT attributes are a way of ensuring that a picture takes up a strictly specified space. This is particularly useful in tables (see later). There is nothing worse than a table being distorted by an image that has been replaced with one of a different size. Be aware that this is not a licence to use large-sized image files and for these to be shrunk by these attributes to fit on to the web page. You need to make the image files as small as possible in your paint program to minimise download times.

A neat trick is to download images for web pages that follow the current one. This can be done whilst the user is still reading the first web page. The beauty of this is that these preloaded images spring quickly on to the screen when the user selects a page where they are used. This is because these images have been saved locally within the user's web cache.

To preload an image, all you do is type <IMG SRC="image.jpg" WIDTH=1 HEIGHT=1> on the page before the one that the user is likely to link to. Notice the use of the WIDTH and HEIGHT attributes to resize the image to 1 pixel. This means that the image will not be visible on the preload page. When it is referenced on the proper page, it will be sized correctly and called from the local cache rather than from across the Internet. Perceived download speed has increased for the user. This method should be used judisciously for a few large images and ones that a user is likely to come across. See the website https://www.kingstonvillage.org/ for an example of its use.

4.3 Image Maps

A useful feature is to be able to take an image and to divide it into areas and then for each area to have its own caption and link.

An image program such as Paintshop Pro is required to give you coordinates around your selected image. These coordinates that you select determine the areas that you want to use on the image.

The first stop is to set up the <MAP> and </MAP> tag pair and add the attribute NAME with a name for the map. Next, you set up the areas using the <AREA> tag for each one. The <AREA> tag uses the attribute SHAPE to describe the shape of the area, and the attribute COORDS to describe the specific size and position. See the following examples of area types:

SHAPE="RECT" COORDS="X₁,Y₁,X₂,Y₂" - where (X₁,Y₁) are the coordinates of the top left corner of the rectangle and (X₂,Y₂) are the coordinates of the bottom right corner.
SHAPE="CIRCLE" COORDS="X,Y,R" - where (X,Y) specify the centre of the circle and R specifies the radius of the circle in pixels.
SHAPE="RECT" COORDS="X₁,Y₁,X₂,Y₂...X_N,Y_N" - where the coordinates describe a polygon of any shape or size.

Within the AREA tag you can add the HREF attribute to create a link to another page or E-mail. In addition, you can use the ALT attribute to create hotspots where areas within the image can have different descriptions.

Once the map code has been completed, the final step is to tie it to the image itself by adding the attribute USEMAP="#map_name" to the <IMG> tag, where the map_name is that which was used in the NAME attribute within the MAP tag.

The following code illustrates the use of the RECT Image Map:

<MAP NAME="rect">
<AREA SHAPE="RECT" COORDS="49,46,149,147"
ALT="You are now within the Rectangle!">
</MAP>
<IMG SRC="images\rect.gif" USEMAP="#rect" BORDER="0">

This gives us:

Notice how that as you hover over the blue rectangle, the ALT tag comes into play telling you that you are within the rectangle. As soon as you move outside of the rectangle into the black space nothing happens. You can extend this to include anchors (links) to other pages and sections. The coordinates were found by using a paint package such as Paintshop Pro.

Here is the code illustrating the use of the CIRCLE Image Map:

<MAP NAME="circle">
<AREA SHAPE="CIRCLE" COORDS="100,86,68"
ALT="You are now within the Circle!">
</MAP>
<IMG SRC="images\circle.gif" USEMAP="#circle" BORDER="0">

This gives us:

The same thing but with a pink circle!

Now for something a little more complex, the POLY Image Map:

<MAP NAME="poly">
<AREA SHAPE="POLY" COORDS="45,135,84,110,107,70,135,
50,149,32,183,46,169,48,166,57,162,79,146,99,
108,110,57,139"
ALT="You are now within Pretty Poly!">
</MAP>
<IMG SRC="images\poly.gif" USEMAP="#poly" BORDER="0">

This gives us:

This is more fiddly to set up but as you can see, the shape of the bird has been followed pretty accurately when you move your pointer over the bird.

5. Links

Home

Disclaimer