HTML made EZ Part 2

Images

Last issue we covered most of the text related HTML tags. Of course most HTML pages these days also make use of pictures to get their point across.

It is infact relatively simple to incorporate graphics into your designs. Virtually all browsers support both GIF and JPG so it is up to you which format to use. JPG files are usually much better for photographs as they allow your pictures to contain millions of colours and are also relatively small.

However, GIF images have a number of advantages...

• They can be animated or transparent
• Small file sizes compared to JPG’s on pictures with large blocks of colour
• More universal than JPG - some browsers only support GIF files

Unfortunately, Compuserve - the owners of the GIF format - have introduced a licencing fee to any software making use of it.

Once you have your graphics your ready to start spicing up your pages. Images are added with the <img src=".."> tag. Various attributes can be assigned to graphics ranging from their horizontal and vertical dimensions to the position on the page they occupy. The following examples demonstrate a few of these attributes:

HTML Code	Browser Display

Text wraps around images depending on where they are on the page.

Other important attributes for images are:

border=n

The size of the border surrounding the image when it is used in conjunction with an anchor tag. 0 is off, the default value is 1.

alt="alternative"

This is displayed if the viewer has images turned off as well as when images are loading.

align=x

As well as the positions shown above, this attribute can also have values of top, middle or bottom.

hspace and vspace

Controls the amount of white-space around the image.

usemap

This indicates that the image is to be used as an imagemap. This will be covered in detail in a future issue.

Anchors

The whole point of Hyper Text systems is their ability to ’link’ to other sections of the overall document. HTML is no different and it enables you to link to other pages or to different parts of the same page.

This is achieved by making use of the ’Anchor’ tag. This tag takes the form ... and requires the use of a number of attributes. For example, the following code is used to link to another HTML file:

<center><pre><a href="glossary.htm">Click here for Glossary</a></pre></center> This is the most common form of the anchor tag. The href attribute contains the URL of the page you wish to link to. You can link to pages anywhere on the internet by specifying their full address in the URL:

<center><a href="http://www.users.zetnet.co.uk/polonowski/index.htm"> http://www.users.zetnet.co.uk/polonowski/index.htm</a></center>

Images can also be used as links, in fact anything between the start and end anchor tags is treated as a link.

The other main use of the anchor is to jump to certain areas in the page you are already viewing. You must first decide on the points where anchors will be added and then they must be given names:

<center><a name="introduction"></center>

Now to jump to this area via a standard href link, a second anchor is added. The URL is the same as that defined in the name tag but it is preceeded with the # sign:

<center><a href="#introduction">Go to Introduction</a></center>

In fact, both of these examples can be combined. Say you have a contents page which is separate from the rest of the document. You define the name tags in the main document and then link to them from the contents page as in the following example:

<center>a href="main.htm#introduction">Introduction</a></center>

Anchors do not have to link to HTML pages. You can link to a picture which the browser will display, binary files such as ZIP or LZH can be linked to and the browser will ask the user to save them to disk.

You can also add links for email as in the following example:

<center><a href="mailto:polonowski@zetnet.co.uk">Send mail to Colin Polonowski</a></center>

This creates the link below. When you click on it, the your browser will allow you to send an email to the address in the URL.

<center><a href="mailto:polonowski@zetnet.co.uk">Send mail to Colin Polonowski</a></center>

Other possible links are:

News

This links to the news groups specified in the URL for example:

<a href="news:comp.sys.atari.st">comp.sys.atari.st</a>

FTP

You can link to FTP sites in the same way as other HTML files:

<a href="ftp://ftp.shareware.com/pub/file.zip">file.zip at ftp.shareware.com</a>

Finally, there is one more important attribute which wil become very useful in later issues when we cover Frames. This is the target="frame" attribute. This allows you to specify which frame to open the page in. If you wish to override the frames then you would use the target="_top" attribute which opens the page into the whole window.

Next Time

Next issue we will cover the use of imagemaps and tables in your documents.
Colin Polonowski

---

---