Getting Down with ...

by ...

Lesson n:

Images are a important part of many web pages. To include an image on your page, you need to specify where the image file is located, by using an img element, with syntax:

<img src="location of image file" alt="alt string">

Both the src and alt attributes are required to be valid html. The src attribute tells the browser where to find the image, and the alt attribute has an alt string as a value and tells the browser what to put in place of the image if the browser has its display images setting turned off.

The location of image file needs to be replaced with the path to the image, which as in the previous lesson can be either an absolute or relative URL.

Here is an example:

<p><img src="images/orangespiral.jpg" alt="Orange Spiral by Jerusalem Tekle"></p>

Which, assuming the file, orangespiral.jpg is contained in a directory called images in the same location as the current file, will display the following image:

Orange Spiral by Jerusalem Tekle

Exercises:

  1. Copy minimal_page.html to a new file name gallery1.html Put Some Pictures I Like in both the title and a top level heading. Select five images from either Paul Carduner Graphics or OpenPhoto, and include these images in your gallery. Your completed page should look somthing like this.
  2. Copy minimal_page.html to a new file name gallery2.html Put Some Pictures I Took in both the title and a top level heading. Select five images that you (or a friend or family member) took yourself, and include these images in your gallery.
  3. Edit the gdw.html file that you made in the last lesson, making Gallery I link to gallery1.html and Gallery II link to gallery2.html.