For this exercise, we will
placing an image on to the web page and then turn this image into a clickable
button.
Open Windows Notepad and then open the example from the previous exercise. You
should have something like the example below.
<HTML>
<HEAD>
<TITLE>My Motor Parts Business</TITLE>
</HEAD>
<BODY>
<H1><FONT FACE="Arial">Welcome to My Motor Parts
Business</FONT></H1>
<H2>For all your automotive needs</H2>
<H3><FONT COLOR=#33DB99>This site is under
construction</FONT></H3>
<A
HREF="page2.html">Go to Page 2</A>
</BODY>
Add a new line
under the <A HREF> line as follows...
<IMG
SRC="image.gif">
Replace the "image.gif"
with the file name of your own image file.
IMG stands for "image". It announces to the browser that an image will
go here on the page. The image will pop up right where you write in the image
tag.
There are two basic formats you
will find on the World Wide Web. Each is denoted to the browser by a different
suffix.
- .gif
This is an acronym for Graphics Interchange Format.
This format was invented by CompuServe and it's very popular. The reason is
that it's a simple format. It's a series of coloured picture elements, or
dots, known as pixels, that line up to make a picture. Your television's
picture is created much the same way. Browsers can handle this format quite
easily.
- .jpg
or .jpeg (pronounced "j-peg") There are two names to denote
this format because of the PC and MAC formats allowing 3 and 4 letters after
the dot. JPEG is an acronym for Joint Photographic Experts
Group, the organization that invented the format.
The format is unique in that it uses compression after it's been created.
That's fancy computer talk that means that when the computer is not using a
.jpeg image it folds it up and puts it away. For example, if the picture is
10K bytes when displayed, it may be only 4K bytes when stored. It save on
hard drive space, but also tends to require a bit more memory on your part
to unfold the image.
To make this into a clickable
hyperlink button, amend the above <IMG SRC> tag as follows...
<A
HREF="page2.html"><IMG SRC="image.gif"></A>
Now you will notice when you
view this page in your browser that there is a new border around the image. To
get rid of this border, amend the line as follows...
<A
HREF="page2.html"><IMG BORDER="0" SRC="image.gif"></A>
The 'BORDER' attribute
signifies how thick the border should be around your new button. A value of zero
will turn the border off.
Background Colours
To change the background colour
of your web page, change the <BODY> tag so that it looks like this...
<BODY
BGCOLOR=#FFFF00>
This will change
the background colour to yellow. To change to another colour consult our
colour
chart. You can also find out more about using colours on the 'Fonts
and Colours' page.
OK, so you want an
image as a background on your web page! Changes the <BODY> tag as
follows...
<BODY
BACKGROUND="image.gif">
Yes, its as easy
as that. A large image may only appear once (depending on the size of the
browser window), but smaller images will be redrawn as many times as necessary
to fill a page - a process known as 'tiling'.
Keep in mind that
there's no way to prevent a background image from tiling. So if you want to make
sure it doesn't, you'll have to make the image wide enough and tall enough to
accommodate large monitors.
As an example, if you wanted a background image to create a stripe down the
left-hand side, and you want the image file to be as small as possible, create a
short, wide striped image - 1,200 by 24 pixels, that looks something like the
image below (only larger).
That way, someone
would need a browser windows at least 1,201 pixels - or just under 17 inches -
wide to see a second stripe, but the image size is still quite small (25KB).
Note that the pixel-to-inch ratio is adjustable, and varies from platform to
platform; 72 pixels per inch is standard, since it corresponds with the
typographic rule of 72 "points" per inch.
Almost all current browsers supports background images (including Netscape 1.1
and later, and all versions of Internet Explorer). Only older versions of NCSA
Mosaic and the AOL browser will turn down your background's image.
