3.1 The Image TagUp 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.
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:
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.<img src="catnap.jpg">
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:
The result of our changes is shown in Figure 1, below.<html> <head> <title>Pete's Pet Store</title> </head> <body> <b>Item:</b> 23445-555<br><br><center><h3>Cat Window Lounger ®</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>© 2002</i> </body> </html>
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">
3.2 Image AlignmentWe 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.
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.<html> <head> <title>Pete's Pet Store</title> </head> <body> <b>Item:</b> 23445-555<br><br><center><h3>Cat Window Lounger ®</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>© 2002</i> </body> </html>
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.
3.3 GIF vs. JPEG ImagesThere 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.
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis