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="X1,Y1,X2,Y2"
- where (X1,Y1) are the coordinates of the top left corner of the rectangle
and (X2,Y2) 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="X1,Y1,X2,Y2...XN,YN"
- 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.
|