Computer Science Illuminated, Third Edition: Goin

Computer Science Illuminated, Third Edition

Lab #4

Images

3.1 The Image Tag

Up to this point, our web pages have contained nothing but text and formatting commands. As you probably know however, there is much more to web pages than just plain text. By using the image tag (<img>) we can include images in our web pages. It goes without saying that images can help to make a page more visually appealing, enforce a point, or provide a visual representation of something that could not otherwise be described by text.

Mort using the cat window lounger

To use the image tag, we first need to know the location of the image. This involves knowing where on the computer's file system the image is located. Ideally, it is easier if the image is located in the same directory as the web page source code file. Strictly speaking, the image file can be located elsewhere on the system, but for the purposes of these labs, we'll assume they are in the same directory.

Let us assume that we have the following image we wish to use with the Cat Window Lounger product. We first ensure that the image is in the same directory as our web page, and then determine the name of the image. The image shown to the right is named catnap.jpg. To embed the image in the web page for the Cat Window Lounger, we'll replace the line of text that states "Image of cat using lounger goes here." with the following line of html:

<img src="catnap.jpg">

There are two things to notice in our use of the image tag. The first is that there is no ending tag. Image tags don't have ending tags, so we don't need to use one.

The second thing to notice is the use of the src attibute inside of the tag. Here, we have specified the name of the image we wish to use by applying the src attribute and specifying the name of the image in quotes.

Another attribute you may be interested in using with the image tag is the border attribute. The border attribute is used to specify the width (in pixels) of a border that surrounds the image. In the image shown above, we actually used a 2 pixel border to enhance the appearance of the image. We will use a border of 2 pixels again in our web page to help distinguish the edges of the image.

When we replace the line of HTML with the image tag, our web page's source code looks like the following:

<html>

<head>

<title>Pete's Pet Store</title>

</head>

<body>

<b>Item:</b> 23445-555<br><br>

<center><h3>Cat Window Lounger &reg;</h3></center><hr>

<p><b>Description:</b> <blockquote>Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the <u>perfect present</u> for your

special friend.</p>



<p>The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.</p></blockquote>



<img src="catnap.jpg" border="2">



<hr width="30%" align="left">

<b>Price:</b> $22.95

<hr>

Pete's Pet Store

<i>&copy; 2002</i>

</body>

</html>

The result of our changes is shown in Figure 1, below.

The application of the image to the web page.

Figure 1: The application of our image to the web page.

Another attribute we can apply to the image tag is the alternate text atrribute (alt). This attribute will display a text string in place of the image if it is not possible to display the image or if the image display has been disabled by the user. You define the text of the alternate attribute just as you used the source attribute: specify the attribute, follow it with an equals sign, and double-quoted text. For example we can change our image tag to the following:

<img src="catnap.jpg" border="2" alt="Mort using the Cat Window Lounger">

Lab Activity #1:

Add two images to your web page and use the alternate attribute to provide text in the event the images are not displayed. Place a three pixel border around your images.

3.2 Image Alignment

We can arrange our image relative to the left and right margins of the web page by using the align attribute. For example, in Figure 1, it would really be nice to have the image to the left of the product description, rather than following it at the bottom of the page. This was actually the way we mocked-up the web page when we were working in Lab 2 (see Figure 2 of Lab 2).

We can use the image alignment attribute to correct this. First, we will specify the alignment of the image by adding either align="left" or align="right" to the image tag. The former will align the image along the left margin of the text it is adjacent to, while the latter will position the image along the right margin.

Next, we will move the image tag (and all of its attributes) to just prior to the product description label, so that the image will be aligned to the left of the description. Once we have done so, our source code will look like the following.

<html>

<head>

<title>Pete's Pet Store</title>

</head>

<body>

<b>Item:</b> 23445-555<br><br>

<center><h3>Cat Window Lounger &reg;</h3></center><hr>

<img src="catnap.jpg" border="2" align="left" alt="Mort using the Cat Window Lounger">

<p><b>Description:</b> <blockquote>Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the <u>perfect present</u> for your

special friend.</p>



<p>The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.</p></blockquote>



<hr width="30%" align="left">

<b>Price:</b> $22.95

<hr>

Pete's Pet Store

<i>&copy; 2002</i>

</body>

</html>

You should also note that the attributes of a tag do not need to be located in any particular order. In the example above, we have added the alignment attribute before the alternate attribute, however we could have reversed them if we desired. Now our web page looks like what is displayed in Figure 2.

Figure2: Aligning our image.

If you look carefully at Figure 2, you'll notice that the text for the product description is located to the right of the image. In the first paragraph however, it would seem that we lost the indentation of the blockquote we added in Lab 3. If you examine the second paragraph however, you will find that it is still indented. All of the formatting we did is not lost; it is dependent on how large the browser is. If the web browser were a little bit wider, we would have different results as to the text wrapping and indentation because of how much room there would be to render the product description's text. We'll come back and clean up this section when we cover tables.

Lab Activity #2:

Modify the placement of your images and utilize the align attribute in each image. Align one of your images to the left of a block of text and the other image to the right of some text.

3.3 GIF vs. JPEG Images

There are two basic types of images that you will encounter while authoring web pages. These are GIF and JPEG images. GIF stands for the Graphics Interchange Format, while JPEG is an acronym for the Joint Photographic Experts Group. Besides their names and underlying image representation formats, there are two rather important differences between GIF and JPEG images.

GIF images can contain a transparent color. This makes the background color of the web page, show through the image (where appropriate). For example, compare the two GIF images in the table below. The one on the left does not contain a transparent color. However, the one on the right does, resulting in a more pleasing image. (Note that we changed the background color to help bring out the white background for the GIF without transparency.)

GIF Image without transparency	GIF image with transparency

JPEG images are better for photos. JPEGs can represent a larger number of colors for a more realistic representation. However, this capability comes with a price. JPEG images are usually larger files (in terms of total number of bytes) and therefore may take longer to download, depending on the connection to the Internet.

Lab Activity #3:

Download at least two of the GIF images shown below and add them to your web page. Find other images on the web and add them to your web page as well.

About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN: 0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis