Lesson 1: Introduction to Web Graphics


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:


  1. Open up the handout: Purpose and Guidelines for Effective Use of Web Graphics. Look over the three bullet points 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 unit4.htm, 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 (a good title would be "Unit 4: Web Graphics")
  5. As you may have learned by now in earlier lessons, the title specificed 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 to the body of the document as a main heading, like this:

    <h1>Unit 4: Web 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
    • Include an anchor inside the heading tags so you can give your heading a name, like this: <a name="evaluation" /> This will allow you to link directly to this section from your home page.
    • Find the current lesson in the list of Required Projects on your home page. Make this into a link to unit4.htm#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. In your Unit 4 web page, under the new "Evaluation of web graphics" subheading, use any XHTML tags that you feel are approriate to record the 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, do you feel the graphics on the page you selected serve a purpose? If so, what is it? If not, why not?
    2. Referring to the section in the handout titled Guidelines for effective use of web graphics, do you feel that the graphics on the page meet each guideline? If not, which guidlines do they not meet?

Resources/Online Documents