Web Development & Design Foundations with HTML5

Skip to Content 7th 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

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>

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


Review Activities

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

Chapter Updates

  • The HTML5 Main Element
    As of 9/23/2014, current versions of Internet Explorer still do not support the HTML main element and do not recognize the main element as a block display element. This results in Internet Explorer ignoring some CSS properties such as padding. Backward compatibility for HTML5 elements is discussed further in Chapter 6 but a quick workaround for when you experience main element display issues with Internet Explorer is to add the following to your CSS:
    main { display: block; }

  • Page 149 Hands-On Practice 4.5, Step 2
    Use myisland.jpg as the value of the src attribute in the img tag.

  • Page 169 Hands-On Practice 4.9, #2 — configure the style declarations for the h1 element selector as shown in the code sample.

  • Page 169 — There is a typo in the second-to-the last code sample. To configure a dark-gray drop shadow with 5px horizontal offset, 5px vertical offset, and a 5px blur radius code:
    box-shadow: 5px 5px 5px #828282;

  • JavaJam Coffee House Case Study
    Page 187:
    Configure the text in the paragraphs to match Figure 4.44.
    The text for Melanie should be:
       Melanie Morris entertains with her melodic folk style.
    The text for Greg should be:
       Tahoe Greg is back from his tour. New songs. New stories.

  • Pacific Trails Case Study
    Page 191 Task 2: The Home Page
    You will modify the index.html file to look similar to the web page shown in Figure 4.47.

Questions or Comments?

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