Lesson 4: Adding Images to Your Web Page


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:


  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 unit4.htm 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." Place an anchor before the heading, as in this example:

    <a name="album"/>

    Next, add each of the 1 x 1 inch 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.

    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.

  2. Once you are completed, the final page should look something like this sample photo album. If you need help, the html code for the sample album is provided below: Create the hyper link on the portfolio. Be sure to include the anchor name:

    <a href ="unit4.htm#album">

    Sample Web Photo Album:

    hiking into an alpine lake kayaking in Puget Sound Lake Diablo

    Sample Code:

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

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

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

  3. 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.

    Would you use tables or CSS to accomplish this? What are the advantages and disadvantages of using each?

    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.

    Below are some examples using each method:

All done?

Make sure to save your web page. You will be adding more projects to it in future lessons.