J & D Graphics HTML Guide

Basic HTML Guide - Part Two: The Basic Tags

Images & Links

Nothing makes a website more interesting than a few images around the place. Almost all websites that you will look at have images on them, be they in the background or used to illustrate a point, or just for the sake of having images.

A word of warning though. Images make a site more interesting, but if they are large, then the site loading time will increase greatly. It is a good idea to make sure your images are exactly the right size - large enough to be readable, but small enough to be quick to load. Also bear in mind what sort of computers you would expect viewers to be using - not everybody is privaliged with a 21" monitor with a resolution of 1280x1024. In fact, the most common screen resolution is 800x600, and sometimes even less, 640x480.

A good way to test how your page looks at a lower resolution is change your own display to a lower res, using the Windows desktop properties dialog.

But, back to the Image tag:

<IMG SRC="myimage.gif" HEIGHT="100" WIDTH="100">

The Image tag is one of the few HTML tags that does not have a corresponding closing tag.

In the SRC="...." part you place the path and filename of the image - note that it must be a GIF or JPG image. The Height and Width parts can be omitted, unless you want to dynamically change the size of the image when it is loaded - not a good idea, as it tends to slow down the loading process. You can enter the actual height and width (in pixels) of the image, as this helps with the formatting of your page.

Links

Links are what makes a web page useful. A link is an area you click on with the mouse, which takes you to another web page. It can be a link to another part of your site, or to another site entirely. As long as you know the URL (web address) you can link to that site. To add a link you use the following tag:

<A HREF="http://www.yahoo.com">A great search engine</A>

The http://www.yahoo.com part can be replaced with a link of your choice. The text between the > and the </A> is what will appear on the page, as a clickable link. You can combine image an links, as follows:

<A HREF="http://www.yahoo.com"><IMG SRC="yahoo.gif" BORDER=0></a>

The extra BORDER=0 line makes sure no border appears around the image. You can increase this number if you want to make it obvious that an image is a link, but it looks ugly.

[ - About - Gallery - HTML Guide - JavaScript - Subs - ]
[ - E-Mail - Disclaimer - ]