Last issue, we had a look at how to incorporate images into your documents. The technique was simple and enables you top make your page stand out. We also had a look at 'anchors' and how they can make navigating around an HTML document simple.

As I said last issue, anchors can be used in conjunction with images enabling you to create icons linking to other parts of the overall document. This is fine until you have a lot of separate image links - a lot of unneccessary space can be wasted making your pages take longer to download over the internet.

It is possible to replace a lot of single images with one bigger one which takes up significantly less space.

For example, you may have a menu made up of maybe six icons of around 3K each. You could however incorporate all these icons into one larger image that may take up just 12K - a saving of 6K. This image can then form the basis of an 'imagemap'.

Once you have created you image, you need to note the coordinates of the corners of each 'link'.

Below is an example of the sort of thing you can achieve with the use of imagemaps along with the HTML code used.

HTML Code

<map name="imap"> <area shape="RECT" COORDS="5, 0, 136, 24" HREF="../../menu.htm"> <area shape="RECT" COORDS="44, 39, 175, 63" HREF="#imagemap"> <area shape="RECT" COORDS="0, 76, 131, 99" HREF="glossary.htm"> <area shape="RECT" COORDS="46, 116, 177, 141" HREF="features.htm"> </map> <img src="../images/imap.gif" usemap="#imap">

Browser Display

The 'shape' attribute tells the browser the shape of the area within the map. This can be either 'RECT' (Rectangle), 'CIRCLE' (Circle), 'POLYGON' (Polygon), 'DEFAULT' (All other unmapped areas).

The 'coords' attribute contains the coordinates of the corners (or dimensions) of each area. Four are required for rectangular imagemaps (x1, y1, x2, y2), three for circles (centerx, centery, radius) and polygons can have as many as you want (x1, y1 ... xn, yn)

Tables

One of the most useful things in the HTML language is the <table> tag.

This tag enables you to create a table on your page to the specifications you require.

Tables have a start and end tag, but within these there are a number of other tags which position the cells within table. A basic table of say, two rows and two columns is easy to create as can be seen in the code below.

HTML Code	Browser Display
<table border=1 width=200> <tr> <td>Cell 1,1</td> <td>Cell 1,2</td> </tr> <tr> <td>Cell 2,1</td> <td>Cell 2,2</td> </tr> </table>	Cell 1,1 Cell 1,2 Cell 2,1 Cell 2,2

However the table tag is a lot more versatile than this and you can achieve a number of impressive designs with it.

It is possible for cells to span more than one row or column by using the rowspan=n and colspan=n attributes within the <td> tag. You can apply a background colour to each cell in the same way as you do to whole HTML documents by using the bgcolor=color attribute.

You can also adjust the size of the tables border by using the border=n attribute in the <table> tag. Finally, it is possible to assign the actual cell and table dimensions within the appropriate tag by using the width=n and height=n attributes.

Below is the code for such a table.

By making use of the tags and attributes covered in the series so far, you should now be able to create interesting and attractive web pages with very little difficulty.

Next issue we'll show you how to go even farther with the use of special characters and 'frames'.