Back to index

Downloading and Using Images

Web pages are pretty boring without images (and other multimedia files). In this lesson we will take a look at how to include images on your web page. To begin with you should be aware of the IMG tag and it's three most used attributes: src, height, and width. Look at the source for this page and find examples of this tag and attributes.

As you undoubtedly discovered while inspecting the source for this page, images can be resized. In fact, they can be resized in odd ways which distort the original image. As you probably realize, pixelation can be a problem when you enlarge an image.

Another thing that is worth pointing out is that attributes can normally be included in any order within a tag. It does not matter if height, src, or width are included in any particular order. Also height and width are completely optional, although it's hard to imagine using the IMG tag without the src attribute!

ASSIGNMENT: Go out on the Internet and locate twelve images for this assignment. You will display the images several times on the page you create and you will use ABSOLUTE addresses for these images instead of RELATIVE addresses. (One example on this page uses an absolute address for an image and the others use relative addresses.) The advantage of absolute addresses is that it saves you from downloading the image. (NOTE: Some sites block use of images in this manner. If you run across such a site, just try a different site.)

PICKY DETAILS: Your page must have a title, include twelve different images, and display them three per row so that they all appear to be the same size. The title and the images must relate to a single clear topic. For instance, any of the following topics would make perfect sense: buildings, leaves, cars, cats, cakes, houses, trees, or cows. Feel free to use a different topic.