Skip to Page Content | Navigation for Module


Navigation for Module 9: HTML
Page 5 of 16

  1. *Introduction
  2. *Files You Need
  3. *Basic Concepts
  4. *Images
    1. * Lab:Images
  5. *CSS
  6. *Textual Elements
  7. *Forms
  8. *Tables
  9. *Plug-ins
  10. *Image Maps
  11. *Resources

Lab: Images in HTML

Estimated Time for Completion: 15 minutes

Prerequisite Knowledge:

To gain the most from this lab, you should have familiarity with:

Files:

For this lab, you will need:

Getting Started:

Now you will apply what you have learned about making images accessible in building an accessible HTML document that contains an image that needs a long description.

To begin:

  1. Open your preferred web authoring software.
  2. Open or create an HTML document.
    For this example, open the document: MakingImages.htm.
  3. Documents should always have an appropriate title, enter the desired title of the document between the <title> tags.
    For this example, the title should be: Making Images Accessible.
  4. Add an image to the document using the <img> tag with the "src" attribute set to the location and filename of the image.
    For this example, add the image: driving_map.gif.
  5. Add a brief text description to the <img> tag using the "alt" attribute.
    For this example, the alternative text should be: "Driving directions to Jane's house."
  6. In this example, a long description is needed.
    1. Open or create a new HTML document for the long description.
      For this example, open the document: directions.htm.
    2. Enter the desired title of the document.
      For this example, make the title: Driving Directions to Jane's House.
    3. Type in the long description into this new HTML document.
      For this example, the long description has already been entered.
    4. Save this HTML document with the long description and remember the filename.
    5. Return to the the URL (filename) to the "longdesc" attribute of the image
  7. In addition to the "longdesc", you also need to provide a description link just below the image.
    1. Create an "a href" tag just below the image tag
    2. The hyperlink reference ("href") attribute should point to the same HTML document that you created in step 6 of this process (the "longdesc" page)
    3. The content of the "a href" tag should be "[D]"
    4. Close the tag using "</a>"
  8. Save your work and open your newly-created web page in a web browser.

Code sample of the "makingimages.htm" file:

<img src="driving_map.bmp" alt="Driving directions to get to my house" longdesc="directions.htm">
<a href="directions.htm" title="Driving Directions">[D] </a>

Code sample of the "directions.htm" file:

<p>
To get to my house, take I-75 north; exit at Alice Rd. and turn right at the exit ramp.  At the first light, turn left onto Rex Lane and drive for 1/2 a mile.  Turn right onto Maple; my house is the fifth on the left - 123 Maple.
</p>

Browser view of the "makingimages.htm" file:

Driving directions to get to my house [D]

Note: The visual sample above contains the driving_map image and the description link (the "D" after the image).If you move your mouse over the image and leave it there momentarily, the "alt" text will be displayed. If you follow the description link, you will be taken to an HTML page that displays the longer description of the image.

The next page presents information on Cascading Style Sheets.

Top of Page arrow up
       Page 5
Next Page Next
Page 6:
CSS


 
-- END OF PAGE