Adding images to HTML pages

Add an h2 heading saying Images.  Download this image and save it in the same folder as your Web pages.

Add this code under the image heading:

<img src="whatsinside.png">

As with link elements there is an attribute.  The attribute src sets the source of the image (the image file).  Save and view the page.

There is another attribute which you are required to include.  The alt attribute contains text which describes the image.  This text will be used if the image is not available (for example to a blind person).

Add the second attribute after the first one like this:

<img src="whatsinside.png" alt="person investigating what is inside a computer - with a chainsaw">

To test the alt attribute change the file name of the src attribute to something else (e.g. what.png instead of whatsinside.php).  Save and view and the image should be replaced by the text.  Change the file name back so that the image works again.

Add a second image of your choice to the page:

  1. download or copy it noting the and and the type of file and extension (e.g. a .jpg or .png)
  2. if necessary give it a simple name but don't change the file extension
  3. put it in the same folder as your pages
  4. copy the first image link but change the attribute values (the file name and the alternate text)
  5. save and view (and don't worry the image should be alongside the other one for now)

Images in a Web page