Skip to Content

Web Development & Design Foundations with HTML5

Chapter 4 Visual Elements and Graphics

A key component of a compelling website is the use of interesting and appropriate graphics. This chapter introduces you to working with visual elements on web pages.

When you include images on your website, it is important to remember that not all users are able to view them. Some users may have vision problems and need assistive technology such as a screen reader application that reads the web page to them. In addition, search engines send out spiders and robots to walk the web and catalog pages for their indexes and databases; such programs do not access your images. Visitors using a mobile device may have images disabled. As a web developer, strive to create pages that are enhanced by graphical elements, but are usable without them.

Image Map Example


The Nature Conservancy Door County Vacations Door County

Image Map Code:

<map name="fishing">
<area href="http://nature.org/"
  target="_blank"
  shape="rect"
  coords="0,51,416,170"
  alt="The Nature Conservancy">
<area href="http://www.doorcounty.com"    target="_blank"
  shape="rect"
  coords="24, 188, 339, 283"
  alt="Door County Vacations">
</map>
<div>
<img src="fishingboat.jpg" usemap="#fishing" alt="Door County" width="416" height="350">
</div>

Chapter Updates

  • Hands-On Practice 4.9
    There is a typo in the code sample.
    Replace the semi-colon after repeat-y with a comma.
    url(coffeeback.gif) repeat-y,
Web Development & Design Foundations with HTML5

Review Activities

Review Games

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.

Resources

10th Edition Student Files

HTML Validator
HTML Reference

CSS Validator
CSS Reference

Color Chart
Design Checklist

Graphic Resources

Find free to use photos on Flickr.com — select the advanced search page and check Only search within Creative Commons-licensed content. Be sure to follow the instructions for attribution when indicated.