Detailed HTML Course Outline SECTION on IMAGES

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  SILVER GRAY WHITEMAROON RED PURPLE FUCHSIA GREEN LIME OLIVE YELLOW NAVY BLUE TEAL AQUA

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>

.

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
	.