XHTML demonstration

Exercise 3 - Images and attributes

  1. In index.html in Notepad, insert the following code immediately after the <blockquote> tag:
    <td><img src="home.gif" alt="Home" width="110" height="25" /></td>
    <td><img src="volume1.gif" alt="Volume 1" width="110" height="25" /></td>
    <td><img src="volume2.gif" alt="Volume 2" width="110" height="25" /></td>
    <td><img src="volume3.gif" alt="Volume 3" width="110" height="25" /></td> </tr>
  2. Save the changed index.html file. Refresh your browser window.

i. The <img> or image element does not need to be closed in HTML but it must be closed in XHTML. As an empty tag, or one that contains no text, it is closed with /> at the end of the tag. Don't forget to include a space before the forward slash when closing tags in this manner.
ii. The <img> tag requires a src or source attribute. In Exercise 3, the src values are all files saved in the XHTML for Beginners folder; however, src values may also be URLs, or Uniform Resource Locators, that take visitors to other websites.
iii. The <img> tag also requires an alt or alternate text attribute. Browsers display the alternate text when an image fails to load or is slow to load. Some browsers also display the alt value as mouse-over text.
iv. The width and height attributes are optional and provide the image's pixel width and height respectively.
v. In XHTML attribute names must be written in lower case and attribute values must be quoted.

Home page