Lesson 1: Introduction to Web Graphics

Overview

Before you start learning how to create graphics for your web pages, it is important to think about how graphics can be used effectively to enhance pages without creating accessibility and usability problems. In this lesson, you will learn about the purpose of graphics in web design and discuss guidelines for effective use of web graphics.

Learner Outcomes

At the completion of this exercise, you will be able to:

• identify what constitutes purposeful use of web graphics
• identify guidelines for effective use of graphics on web pages
• utilize graphics for web design in a manner that minimizes accessibility and usability impacts

Activities

1. See the web page Purpose and Guidelines for Effective Use of Web Graphics. Look over the three items that discuss the purpose of graphics in web design. Why do you think it is important that generally speaking it is good practice to let the content of the page lead the graphics on the page and not the other way around? Can you think of any situations where this may not be the case?
2. In the same handout, read the section titled Guidelines for effective use of web graphics. For each guideline, think about why you think that guideline is important to web design. Remember what you learned about good design principles and accessibility in Unit 1. Can you think of any additional guidelines for effective use of web graphics that have not been listed?
3. Open the blank web page graphics.html, which you created in the Unit 2 lesson on Essential Tags. You will now populate this page with several sections of content, each section related to a different lesson in the current unit.
4. Be sure the web page has a <title> element that is reflective of the purpose of this page (if you followed the instructions carefully in Unit 2, the title should be something like "Web Portfolio: Your Name's Graphics Page")
5. As you may have learned by now in earlier lessons, the title specified using the <title> element does not show up in the body of the document. So, it's a common practice to add this same title, or a similar one, to the body of the document as a main heading, like this:
   <h1>Web Portfolio: Graphics</h1>
6. Your web page will include this main heading, as well as several subheadings. Following these guidelines in entering your first subheading:
   • Use <h2>...</h2> to identify your subheading as a level-2 subheading.
   • The text of your subheading should be: Evaluation of web graphics
   • Add an id attribute to the opening <h2> tag, like this:
     <h2 id="evaluation"/>

     This will allow you to link directly to this section using a URL that includes a filename like graphics.html#evaluation

7. Go on to the Internet and find a web page of your choice. Identify where graphic images have been used on the page. Back to your graphics.html file, under the new "Evaluation of web graphics" subheading, use any HTML tags that you feel are appropriate to record the title and URL of the site you chose, and your responses to the following two questions:
   1. Referring to the section in the handout titled Purpose of graphics in web design, what do you feel is the purpose of the graphics on the page you selected?
   2. Referring to the section in the handout titled Guidelines for effective use of web graphics, how well does the page you selected meet these guidelines? Which guidelines does it do especially well on, if any? Which guidelines does it fail to meet?

Resources/Online Documents

• Purpose and Guidelines for Effective Use of Web Graphics
• Web Style Guide: Graphics

All done?

Show your instructor your completed activity, then proceed to the next lesson.