Web Development & Design Foundations with HTML5

Skip to Content 8th Edition

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.

Resources & Chapter Links

New WebP Image Format

WebP is a new image format created by Google developers that provides lossless and lossy compression for images on the web. At this time only the Google Chrome and Opera browers support WebP images. Overview of WebP Images

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.

Free Image Editors

Free online image editor applications:

Free image editor applications to download:

Free Online Image Optimization Tools:

Round the corners of rectangular images:

Create an icon from your image:

Free Graphics Tutorials

Often students need a logo banner or a button for their first web site project but have not taken any graphics courses yet. You can learn how to create a logo and button with the free tutorials below:

Image Slicing


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>


Review Activities

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

Chapter Updates

  • Page 160-161, Configuring a Favorites Icon
    Be aware that if you use a .gif, .png. or .jpg file as a favorites icon, the MIME type should be image/ico. For example,
    type="image/ico"


  • Page 147, FAQ
    Microsoft Edge and recent versions of Google Chrome browsers do not offer a "Properties" or "View Image Info" context-sensitive menu option.


  • Page 159, Table 4.4
    The first entry in the last table row should be poly instead of polygon.

Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com