Nguyen Vu
April 26, 2000
Comp 212 (6-10 Wed)
Leslie Potter
Assignment 5

Due Date: May 3, 2000
HTML Tutorial 3 Designing a Web Page: 
·	Read the learning objectives at the beginning of the chapter. 
·	Draft an outline or map of the chapter main topic and subtopics. 
Learn how HTML handles color
Create a color scheme for a Web page
Insert a background image into a Web page
Create spot color
Learn how to control the placement and appearance of images on a Web page
Work with client-side image maps
·	Write answers to these questions. 

1.	Explain the following terms:
Client-side image map (p. 3.35) - image map is inserted into the HTML file and the image map is processed locally by the Web browser.
Color name (p. 3.4) - usually refers to the sixteen basics colors that any version of HTML can understand.
Color value (p. 3.5) - is a numerical expression that exactly describes a color’s appearance.
Dithering (p. 3.32) - is the process when a 16 million colors image is displayed to its original colors by approximate with only 256 colors. 
GIF (p. 3.17) - (Graphics Interchange Format) is the most basic format of graphic use on the internet because of its simple 256 colors that is compatible to all graphical browsers.  It also allow for graphic interlacing, transparent, and animation.
Hotspot (p. 3.34) - a defined area of an image that acts as a hypertext link. 
Image map (p. 3.34) - this list the coordinates on the image that define the boundaries of the hotspots.
Interlaced GIF (p. 3.18) - is a gif image created by GIF89a that load up in a browser as a blurred image to a focus image thus allowing one to know what the image is even before it is finish loading, similar to a window blind.
JPEG (p. 3.23) - (Joint Photographic Experts Group) is the other type of image format that is used on the internet because of its exceptional ability to be compress while still keeping its photographic looks with 16 million colors. 
Non-interlaced GIF (p. 3.18) - is a gif image that loads from a browser from top to bottom like that of a curtain. 
RGB triplet (p. 3.6) - refers to the three basic colors; Red, Green, and Blue that produces sixteen million other colors based on the intensity of each color lights that in turns is translated into three numbers that the computer uses to produce colors. 
Safety Palette (p. 3.33) - is the 211 colors that all browsers used therefore if an image uses the palette it is guarantee to be the same on all browsers without dithering. 
Server-side image map (p. 3.35) - the computer that stores the Web page controls the image map.
Spot color (p. 3.10) - using <FONT> tags to affect colors in a few sections of a page.
Tiling (p.3.14) - The effect when the browser inserts a picture repeatedly on the screen to create the background. 
Transparent color (p. 3.19) – an ability of GIF89a to make a color on the image appear transparent by integrates inline images with the page background.

2.	Explain how to represent any hexadecimal number from 0 to 255. 
To create hexadecimal number you must first understand how to use it.  Hexadecimal uses 16 numbers.  The first ten is represented by the number 0 – 9.  The rest of the six numbers are represented by letters; A = 10, B = 11, C = 12, D = 13, E = 14, and F = 15.  The format use is [(16 * number) + number = Answer].  I.e. [(16 * F) + F = 255]

3.	Visit at least two of the web sites listed on p.3.7 and explain how to use the sites. 
http://www.maximized.com/shareware/colorbrowser
Use the Color Pick-Me-Up TM tool to pick up any color from the screen
Round colors to the nearest entry in the 216-color browser palette
Easily choose MSIE color names
Select any of 16 million colors
Save 16 favorite colors for easy re-use
The other sites did not worked.
4.	Explain how to define a color scheme for a web page (3.8). 
To define the color scheme for a web page, you can edit the <BODY> tag by adding BGCOLOR=color for background color, TEXT=color to change text color, LINK=color to change hyperlink color, VLINK=color to change visited link; where color is where you can either write one of the accepted color name or the color’s hexadecimal value.

5.	Use the instructions starting on page 3.9 to set the color scheme. 
<BODY BGCOLOR=mediumwood TEXT=orange LINK=lime VLINK=oldgold >

6.	Explain how to use the font tag to modify text appearance (size and face). What is the range of size (3.11)? 
To modify font style and size you use the <FONT> tag with closing tag </FONT>.  To change the size, color, and face, you would use the SIZE=size where size is where you state between 1 – 7, COLOR=color where color you state the color that you want, and FACE=font where font is where you state what font style.
7.	Explain how to insert a background image into a web page (3.13). 
To insert a image as the background of the Web page, you add the code BACKGROUND=”image_name” into the  tag.  
8.	Visit at least two of the web sites listed on p.3.15 and explain how to use the sites. 
http://www.sfsu.edu/~jtolson/textures/textures.htm
The site belong to Julianne who made swatch patterns out of few basic colors for people to download and use it on their Web page background.
http://www.sonic.net/~lberlin/new/3dnscape.html
This site offer links to 3D imaging sites.  One of the cool site is this one http://home.main-rheiner.de/ohler/3d/3d.phtml which you can view the site in 3D if you have a 3D glasses.

9.	Explain the differences between different image formats: GIF and jpeg (3 characteristics each). 
GIF:
Limited to only 256 colors
Capable of having one transparent colors and produces animation
Can be interlaced load
JPEG:
Can produce photographic clarity with 16 million colors
Highly compress file
Cannot use transparent colors or animate (p.3.25)
10.	Explain interlaced GIF and transparent color for GIF files. 
An interlaced GIF of GIF89a format appears as a blur image that becomes clear as it is loaded.  It also has the capability of making one color mimic the background color thus making it appears transparent.
11.	Explain how animated GIF files work. 
Animated GIF work like a movie where a few picture are displayed one after another with slight changes thus giving the effect that it is moving.
12.	Explain morphing. 
Morphing is almost like animated in the sense that it displayed on picture after another with the exception that it fades from one frame to the next frame.
13.	Visit at least two of the web sites listed on p.3.21 and explain how to use the sites. 
http://www.peda.com/ggg
This site offer a program that can produce animated gif by capturing screen picture and animate them.
http://www.mindworkshop.com/alchemy/gifcon.html
The state of the art in GIF animators, GIF Construction Set Professional
features Animation Wizard to create sophisticated animations; Supercompressor
to squeeze your GIF files down to size; extensive documentation and tutorials;
and much, much more.
http://rtlsoft.com/animagic/ 
Animagic GIF Animator is an easy to use yet powerful GIF animation tool. With an intuitive user interface and advanced optimizations it produces output files that are 10% to 80% smaller than non-optimized GIF's.
14.	After you use the instructions starting on page 3.22 to re-set the logo, what is the difference in GIF size? 
LogoAimat.gif = 22kb
     Logo.gif = 7kb
   Difference = 15kb
15.	How can you determine if a GIF version of a file will be smaller than a JPEG version? 
One way that you can determine if a GIF version will be smaller than a JPEG when the image has more of the same color in the image. (p.3.23)
16.	What is a progressive JPEG file? 
A new format for JPEG that allows for interlacing without increasing the size of the graphic file. (p.3.23)
17.	Explain the purpose of the ALT property. 
The ALT property is used to describe the image that cannot be display by an older browser so that viewer can get an understanding of what the image suppose to be in place. (p.3.25)
18.	Describe the components of and explain how to control the appearance of images on a web page (3.27…). 
An image that is place on a Web place can be manipulated in several ways.  On a page with text, an image can be set with the text such as top, middle, or bottom.  To use these function, either place ALIGN=TOP, ALIGN=MIDDLE, or ALIGN=BOTTOM inside the  tag.  You can also have word wrap around the picture if it is large by using the ALIGN=LEFT to wrap on the left of the picture or ALIGN=RIGHT to text wrap on the right.  You can also create a space border surrounding the picture.  To create spaces on the left and right of the image, type HSPACE=value, where value is the number of pixels, inside the  tag.  To create a border above and below, type VSPACE=value, again, where value is the number of pixels, inside the  tag. (p.3.27)
19.	Explain the tips for working with color and images (3.31…). What is the maximum suggested size of a web page? 
It is suggested that when using graphic and colors on a web page, you should keep the page no more than 40 to 50 kb of images.  To reduce the size of images, try using another format or a graphic editor to reduce the file size.  You should contrast the text color against the background color for readability.  To avoid dithering, try using safety color palette.  (p.3.32)
20.	Explain dithering. What is the safety palette and why would you use it? 
Dithering is when an older browser has to down size the an image in high resolution such as 16 million colors to a lower resolution such as 256 colors.
Safety palette are the 221 colors that all browsers used to display colors.  By limiting your colors to the safety palette, you can be sure that the colors you use will be the same under all browsers. (p.3.32)
21.	Visit http://www.microsoft.com/workshop/design/color/safety.asp and explain how to use the site. 
Site not available to be view.  Address not updated or the page is not available.
22.	Contrast server-side and client side image maps. What are the 3 major benefits of client side image maps. 
To create an image maps (or the coordinates for hotspots) there are two types.  
In Server-side image maps, the coordinates of the hotspot or image maps are stores on the Web page server so when a user click a hotspot then the server has to process the request thus can cause delay.
On the other hand, a client-side image map is local, mean that the coordinates are written inside the HTML code and processes with the client machine.  Since it does not have to be process through a network, you are able to test the Web page locally on your machine.  You can also see the target hotspot when the pointer is moves over the image.  (p.3.35)
23.	Explain how to create and use client side image maps and hot spots. 
To create client side image maps:
Create <MAP> tag for different hotspots by specifying a name for each hotspot such as 
<MAP NAME=”mapname”> where mapname is the specifying name that you create.
Then you need to define the shape, coordinates, and destination as follow 
<AREA SHAPE=”shape” COORDS=coordinates HREF=URL> where shape can be circle, rectangle, or polygon, coordinates is the pixels coordinates on the image, and URL is the link address.
Then use the </MAP> to close.
Lastly, add the USEMAP property to the image code as follow 
<IMG SRC=”image” USEMAP=”#mapname”> where image is the image file and #mapname is the mapname from above.
To create hot spots:
Within the  tag, specify the shape of hotspots and then the coordinates follow by the link as follow:
<AREA SHAPE=RECT COORDS=”x_left, y_upper, x_right, y_lower”HREF=”URL”>
<AREA SHAPE=CIRCLE COORDS=”x_center, y_center, radius”HREF=”URL”>
<AREA SHAPE=POLY COORDS=”x1, y1, x2, y2, x3, y3….”HREF=”URL”>
24.	Explain the three image map shapes, coords, and href. 
The components of the image are shapes, coords, and href.  Shapes can be either of the circle, rectangle, or polygon where the coords is the coordinates of the shape on the image and the href is the hyperlink address for the hotspot.
25.	Visit at least two of the web sites listed on p.3.37 and explain how to use the sites. 
http://www.concentric.net/~automata/hotspots.shtml
Site offer products that can create image maps and additional functions that animates and add messages.
http://www.mediatec.com/
There is no simpler image mapping program available anywhere. LiveImage inserts automatically all the coordinates and needed HTML tags for you -- just follow the Wizards.

26.	By the end of the week, add your name to the page, print the source, place your work on oscar, link to it from your home page and test it with both browsers. 

·	What other things have you learned about this topic? 
·	What were the most important things you learned about this topic? 
·	What is still unclear about this topic? 
·	How can you clarify what is still unclear about this topic?

BACK HOME