Lesson 4: Adding Images to Your Web Page

Overview

In this lesson you will use the images you created in the previous lesson along with basic HTML skills from Unit 2 to create a mini web photo album.

Learner Outcomes

At the completion of this exercise, you will be able to:

• utilize images created in a graphics program in an HTML page.
• use thumbnail images to link to a larger image.
• use the ALT attribute when adding images to a page.

Activities

1. Now it is finally time to add the images you created in the previous lesson to an actual web page. Using your text editor open the graphics.html file. You will be using this page to display the graphics you complete in this lesson. Head this section of the document "Web Photo Album" and give it an id of "photoalbum", like this:
   <h2 id="photoalbum">Web Photo Album</h2>
2. Next, add each of your thumbnail images to the page using the <img> element. Be sure to include the following attributes for each image:
   • src="location of the image - This can be either an absolute address (full URL include http://) or a relative address, such as "images/myImage.jpg"
   • alt="some alternate text" - Alternate text is text that briefly describes the image for users who aren't able to see it. Too much detail is overkill - just try to make sure that people who can't see the images have access to whatever is being communicated.
   • width="image width in pixels" and
     height="image height in pixels" - If you provide image width and height, browsers will reserve a place for the images while they download. Otherwise the layout might change shape as images gradually appear, which can be distracting for users.
3. Once you have added the images, the next step is to create a link from each thumbnail image to the larger, viewable image. See if you can remember how to do this from what you learned in Unit 2.
4. Once you are completed, your photo album should look something like the example below. If you need help, we've also provided the html code for the example album

Sample Web Photo Album

Sample Code

<div>

  <a href="images/photo1.jpg">
    <img src="images/photo1_tmb.jpg"width="72" height="72" style="border:none"
         alt="hiking into an alpine lake" />
  </a>

  <a href="images/photo2.jpg">
    <img src="images/photo2_tmb.jpg" width="72" height="72" style="border:none"
         alt="kayaking in Puget Sound" />
  </a>

  <a href="images/photo3.jpg">
    <img src="images/photo3_tmb.jpg" width="72" height="72" style="border:none"
         alt="Lake Diablo" />
  </a>

</div>

Now that you've successfully added the images to the web page, try to format your photo album so that there is a brief description of the photo, or caption, next to each picture. Remember the layout techniques you learned in Unit 3 and try to come up with a solution that allows you to do this.

Experiment with different methods until you find the one you like best. Share your results with the class and compare it to what other students came up with.

Wait until you're finished to compare your results to our example CSS picture album.

All done?

Make sure to save your web page. You will be adding more projects to it in future lessons. When you are finished, proceed to the next module.