lesson3 images

Introduction to HTML Lesson 3: Images

32


33


Libraries of clipart and stock photographs can be readily purchased at computer stores or online.

When creating your own graphics, the first question to ask is, which software should you use? Programs like Adobe Photoshop, Adobe Illustrator, CorelDraw!, and Paint Shop Pro are well-known and good choices for creating graphics.

You can also take digital photographs or scan your own pre-existing photos into the computer, and then modify them using a graphics program.

34


The GIF format once gained its popularity with CompuServe but it is now the most commonly used graphic format on the web. The GIF format generally downloads faster than others but with its limitation of 256 colors, it is not ideal for photographs.

A GIF file can be saved as interlaced or non-interlaced. An interlace GIF allows the browser to show a blurry version of the image as it downloads. Large images especially should be saved as interlaced so the user has something visual to look at while the web page is downloading.

There is an 89A version of GIF which allows the user to choose one color in the image to be transparent. This is a very useful feature for the web as it makes an image appear to be floating on the web. Advantages of GIF:

Shorter download time when compared with JPEG. No information in the graphic is lost during the compression process. GIF files are compressed files (i.e. 256 colors).

35


The JPEG format is relatively new but due to its high compression rate, it is now often preferred on the web. The name of this format is JPEG and the file extension is .JPG. Because it supports a large number of colors, JPEG should be used for photographs and other high resolution images. However, JPEG does not support transparent colors.

The JPEG equivalent of an interlaced GIF is the progressive JPEG which shows a blurry image while it is being downloaded.

Advantages of JPEG: JPEG has 16.7 million color palette. JPEG images are better looking because it reproduces photographic

quality.

36


Main differences between GIFs and JPEGs:

GIF JPEG Does not reproduce photographic

quality.

GIF can only contain a maximum of 256 colors.

Ability to make specific color transparent.

In GIF no information in the graphic is lost during the compression process.

GIF files load faster than JPEG files.

JPEG is able to reproduce photographic quality.

JPEG has a 16.7 million-color palette.

It cannot be rendered transparent.

In JPEG there is loss of information about the image during compression.

JPEG files tend to load slower than GIFs.

37

When using the <IMG SRC> tag, you are telling the browser where the image can be found. If you are using a relative address, it can be written as: images/logo.gif. If you are using an absolute address or URL (Uniform Resource Locator), write as: http://www.mysite.com/images/logo.gif.

If you have no images, download an image from www.clipart.com and save it in a folder entitled “images” and type as in the following exercise.

Practice Exercise <BODY><IMG SRC=”images/filename.ext”> </BODY>

38


Note: Bandwidth can be a major challenge for graphical hyperlinks because many users use 56K and 28.8K modems.

To create imagemaps, mapping programs can be downloaded from shareware sites on the web, though these take a long time to download.

Practice ExerciseOpen default.htm and type the following:

<BODY><A HREF=”http://www.microsoft.com”<IMG SRC=”images/logo.gif”></A></BODY>

39


The ALT attribute can be especially helpful for users who are surfing the web with text-based browsers as it gives them an idea of what the image is about.

Note that the ALIGN attribute does not move the image itself. It aligns the text that comes after the image with the image.

Practice Exercise <BODY><IMG SRC=”images/logo.gif” ALT=”ABC Company Logo” ALIGN=”Middle”> <H2>The ABC Company...up to the times.</H2></BODY>

40


With the LOWRES attribute, you can keep the user “entertained” while the actual high-quality image is downloading

(To practice this, we would need two versions of the same image with different qualities. This would have to be created in a graphics program.) <BODY><IMG SRC=”images/logo.gif” LOWRES=”images/logolow.gif”></BODY>

41


These attributes should not be used for sizing/scaling the image as they do not affect file size, only the appearance in the browser.

Practice Exercise Type the following and then change the values for HEIGHT and WIDTH to see its effect. <BODY><IMG SRC=”images/logo.gif” HEIGHT=”100” WIDTH=”85”></BODY>

42


The BORDER is simply a frame around the image. It is effective for certain images.

Practice Exercise Type the following:

<BODY><IMG SRC=”images/logo.gif” BORDER=”3”></BODY>

43


44


45


3.1.

46


47


48


49


Summary

Libraries of clipart and photographs can be downloaded, ordered on-line, or purchased from a retail shop.

GIF format is one of the most popular graphic formats on the web. GIF files download fast, but have a limitation of 256 colors and thus are not suitable for photographs.

JPEG supports up to 16.7 million colors. JPEG files are ideal for photographs.

Transparent GIF’s are very common on the web; they appear as though they are floating on the web page. Paintshop Pro, Photoshop, etc, can be used to create GIF’s with transparent backgrounds.

An imagemap is one single image (GIF or JPEG) with hot links for which a map is defined. Imagemaps allow you to create a graphical interface and are helpful for navigation of a web site.

GIF animations are a series of images saved as one file. Images must be saved as GIF’s. All the images must be the same size.

50


Exercises

1. What images do common browsers support?

2. Can images be hyperlinked?

3. How do you make an image as background?

4. Make a simple HTML document with an image as a background and give <ALT> attribute to the image. Also give a heading to the page in <H1> tags.

51

lesson3 images

Documents