Web Development and Design Foundations with HTML5

Skip to Content

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 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:

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:

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.

Image Slicing


Review Activities

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

Chapter Updates

  • Page 153 The second sentence in the second paragraph should be:
    XHTML syntax for the area element is <area />.

  • Page 153 The last phrase in the third paragraph should be:
    distance to the lower-right corner from the top of the image.

  • Page 160 The last three sentences on the page should be replaced with the following:

The value contain will preserve the aspect ratio of the image as it scales the background image to the largest size for which both the height and width of the image will fit within the area. The value cover will preserve the aspect ratio of the image as it scales the background image to the smallest size for which both the height and width of the image can completely cover the area. Figure 4.28 demonstrates the use of background-size: cover in the following CSS:

  • Page 165 #2
    Set 650px width instead of 700px width

  • Page 167 The second sentence in the second bullet point should be:
    Negative value configures a shadow above.

  • Page 177 Remove the first closing div tag on the page.

  • Page 186 Task 5, #1
    Replace "container" with "wrapper"

  • Page 188 Task 3
    See Task 2 #1 and review the placement of the content div. Edit the Yurts Page and configure a div assigned to the content id in a similar manner.

  • Page 191 Updated Figure 4.47

  • Page 192 Task 5
    Replace "pacific.css" to "prime.css"

Questions or Comments?

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