used in BCS 500 at Seneca College and CNET 204 at Centennial College
Detailed HTML Course Outline

this page last
Chpt 6

<!..............form list of netscape colours..........-><!..............form list of netscape colours..........-><!..............form list of netscape colours..........->The following is a list of all the colour names that can be recognized just by their name only, in HTML 4.0 code. For other colours, you have to use the hexademical codes. 


click here to go to the Netscape interlaced gif page
 GIF - Graphical Interchange Format -
          - Transparent GIFs explained on page 156 in the Text
          - Interlaced GIFs, easier to view as the page downloads,
explained on page 158
 JPEG - Joint Photographers Experts Group
 PNG - Portable Network Graphics

PNG is supported within Netscape only using a graphics plug-in program 
- for more details, read page 155 in the text
 PDF - Portable Data Format
          Adobe's home page
 TIFF- Tagged Image File Format
 BMP- (not supported in current browsers  - you need Paintbrush to view it)
 PCX- (an older image format - you need Paintbrush to view it)

link to a page about some of the newer image formats


A simple explanation of how to add images, according to Witiger

adding images to a page

1. To add a simple image, use

<IMG SRC = "image1.jpg">

where "image1.jpg" is the name of the image you are using

2. If you want to make the image a specific size, you can

<IMG SRC = "image1.jpg" WIDTH="100" HEIGHT="100">

This will give you a small pic which is about the size of a thumbnail

3. If you want to add an image which you can click on, you have to put the anchor tags in front, and behind

<A HREF="http://www......."> the image </A>

so it looks like this

<A HREF="http://www...."><IMG SRC = "image1.jpg"></A>

If you put a "clickable" image on a page, it will automatically have a blue border around it.
4. If you do not want the blue border, you have to change the border width to be zero.

<A HREF="http://www....">
<IMG SRC = "image1.jpg" border="0">

Sometimes it is kewl if you pass the mouse over the image and words pop up to tell the person what it is, or what to do, like "click here".
5. To insert comments on a mouse passover, you add in ALT as part of the image tag attributes. These alt comments can be identified using single quotes (').

<A HREF="http://www....">
<IMG SRC = "image1.jpg" border="0" alt='click here to view larger'>

click here to go to Ulead web site

Chpt 6

Start with the text - Chapter 6, page 161, and also follow the links they list there

The computers we use in the lab at Seneca have a simple GIF animation program on them. If you want to get a program to build some GIFs on your own at home, try using from Ulead Systems Inc.
They sell the world's most popular GIF animation software for about $40 USD

check out the Animated Gif Artists Guild at
- AGAG provides an on-line free tutorial about how to create simple animated gifs

- a page listing links to sites which are in turn collections of Animated Gifs. Long list was compiled by Jim Veatch at Nashville State Technical Institute go to


Caution: some of you are experiencing problems with the various colours of your GIFs and JPEGs not showing the same on different computers. For an explanation of why, read your text Chapter 6, page 143~145,
while you're at it, read the whole Chpater 6 ;-), good stuff in there

Also, to understand the difference between GIFs and JPEGs, read page 153 in the Text
The table at the bottom of the page will help you appreciate the quality difference in using GIFs versus JPEGs
 . Explanation of Assignment, Images (GIFs and JPEGs) 

1. In this assignment, you will create an Images.htm page
2. This page will be hyperlinked to your main page 
3. On this page you will provide examples of a variety of  GIFs and JPEGs and also provide examples of what you can do with these images 
4. show images by themselves, as well as images that are hyperlinked, as well as showing images that are thumbnailed
5. it is also useful to use a photoeditor to change the images - ie. creating a lighter version to use as background

example of using a table into which an image is loaded in 4 sections

Sometimes people do this so a large image loads faster

here is what the image looks like with 2 pixels space between the table cells, so you can see how it is divided into 4 parts