Adding Images

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

At the end of this lesson, you will be able to:

  • Add images to your web pages.
  • Link two html pages together.

Instructions

  1. Open the XHTML document you created in Intro To Cascading Style Sheets.
  2. Find an appropriate image to go with each of your three paragraphs.
  3. Be sure to correctly specify the width and height attributes for each image.
  4. Each image element should contain the following attributes:

    src

    width

    height

    alt

  5. Make a second page with the filename animal.html
  6. The second page should have a picture of your favorite animal, and a brief paragraph explaining the image.
  7. Make a link from your home page to your favorite animal page, and make sure your favorite animal page has a link back to the home page.

Rubric

Component Possible Points Score
Everything from Project 4 is included in the document. 3
The first paragraph has an accompanying left-aligned image. 3
The second paragraph has an accompanying right-aligned image. 3
The third paragraph has an accompanying image under the text. 3
The document contains an image with a border. 3
The document contains an image without a border. 3
The following attributes are specified for each image: src, width, height, alt, border. 3
Favorite Animal Page
There is a link on the home page to the animal page. 3
The page contains an image of the animal with the following attributes specified: src, width, height, alt, border. 3
A paragraph briefly explains the image. 3
The page has an appropriate title. 3
The page has a link to the home page. 3
The project was submitted on time (20% off for each day late)
Total Score 36

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.