MODULE 3 - HTML TUTORIAL - Graphics and file formats

Initially I had frustrations getting my images to display on the page from 'My Web space' folder, and I was so tempted to put out a call for help in the discussion posts, but I'm all for trying to work things out for myself if I can as it sharpens the brain.
Anyhow, eventually it seemed the fault was with the fact that the actual image was in a seperate sub folder than the actual html doc and when I put them both in the same one voila, all was well!

In response to the following review questions for this session:

1. What are the two graphic formats used for the World Wide Web?
A. jpeg and gif

2. How can a graphic file display on different computers?

A.The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. GIF compression is most effective on graphics that have contiguous areas of solid color, and compression is even greater when the color is continuous in the horizontal direction. GIF images have the feature of defining a color to be "transparent" so images can appear to have non-rectangular boundaries. They can also be saved in the "interlaced" format so that when you see a web page, the images start to appear soon and "dissolve" to the final image. See 'graphics a la web'
A. JPEG compression is very effective for photographic images where the colors can vary spatially over short distances ("grainy" images). JPEG offers some dramatic compression in filesize, sometimes by a factor of 10 (e.g. a 1500 kb file reduced to 150 kb), which may be at a trade-off for some image quality. JPEG images do not have the ability to have transparency. See 'graphics a la web'

3. What are some key points to consider when including graphics in web pages?

- Make sure the images add meaning to the page!

- Be conscious of size and keep images to a minimum of between 50k and 100k to avoid viewer from having to continually scroll down the page to see them

- Avoid colour gradients

- Opt for "no dithering" if possible when converting GIF images, to remove "noise".

- Remember that dark grey may not display well on Macintosh computer screens

- It is better to 'link' to images rather than display many on one page - saves time


4. How did you save the lava graphic for use in your WWW document?

Saved in 'My Web space' as "lava.gif"

PART 2

Review Topics

1. What is the HTML format for an inline image?


2. What type of tag must you put before an image tag to make the image appear on a separate line?
align=middle align=bottom or align=top

3. How did you add the lava picture to your document?


4. What does the alt="...." attribute do? What does the height="...." attribute do?

alt: tag allows for substitution of a descriptive string of text to hold the place of the image.

height: sets the height of the image in pixels.

Independent Practice

Add an inline image to your web page using a GIF picture file that is stored on your computer or one that you have downloaded from the Internet.

TICK.......