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

 www.witiger.com/senecacollege/BCS500/BCS500classlist2001.htm

this page last
 
Chpt 6
Colour
Images

<!..............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. 

BLACK 

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
          http://www.cdrom.com/pub/png/
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 pagehttp://www.adobe.com/
 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 
http://www.pint.com/workshop/webmech/Past/1.4/WM1.4.p14.htm

.
IMAGES

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">
</A>



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'>
</A>

.
click here to go to Ulead web site

Chpt 6
Colour
Images

ANIMATED GIFS
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
 http://www.ulead.com/ga/runme.htm 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  www.agag.com/
- AGAG provides an on-line free tutorial about how to create simple animated gifs www.agag.com/howto/how2pc1.html

- 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  www.nsti.tec.tn.us/library/director/ANILINKS.HTML



 

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

 
 
 
witiger.com
  CONTACTIMAIN PAGE I NEWS GALLERY IE-BIZ SHORTCUTS I INT'L BIZ SHORTCUTS  IMKTG&BUSINESS I TEACHING SCHEDULE  IMISTAKES ITEXTS USED IIMAGESIRANKI
.