Power Tools for Technical Communication:
Importing and Positioning Graphics (Web Pages)


In this lab, you experiment with positioning graphics in Web pages, using any of the techniques discussed in Chapter 11 of Power Tools for Technical Communication. To be ready for this project, you need to have have studied Chapter 17 and have done at least one other web-page formatting project:
  1. Using a simple text editor or web-page editor of your choice, create a simple web page like the one shown in Chapter 17 entitled My First Web Page. Between the <TITLE> and </TITLE> tags and between the <H1> and </H1> tags, substitute Positioning Web Graphics: Practice.
  2. Follow the directions below for adding the graphic to the web page and for the different ways to position the graphic in a web page.
  3. Each time you format the graphic in relation to the text in a different way, put your name, Importing and Positioning Graphics: Web Pages, insert a brief note on the settings you used, and the date on the page, and print it out for your instructor.


  1. In the web page you just started, copy, paste, and format the text in the following. Then add the HTML tagging for the graphic below that text (see Chapter 11 for the HTML tagging for graphics):

When you are ready to brew your espresso, carefully follow these steps:
  1. Plug in the espresso machine.
  2. Pour a small amount of cold water (about 30 ml) into the water reservoir. Without inserting the filter basket, attach the filter holder to the machine. Place the carafe or cup under the filter holder, then turn the switch on. Let hot water flow for 20 seconds to pre-heat the brewing head, filter holder, and the carafe or cup.
  3. After all the water is used and all the pressure is released from the reservoir, turn the switch off.
  4. Place the filter basket into the filter holder.

  1. It's likely that the graphic will be on the left margin to start out with. Here some different ways to position the graphic:

    • To force the graphic to align to the text of the preceding numbered-list item, putting the tags for the graphic before the </OL> and put a <BR> or <P> tag between the last numbered-list item and the graphic.

    • To center the graphic, enclose the IMG tags within the CENTER tags.

    • Experiment with ALIGN="right" tag within the IMG tags. Watch how the text wraps in relation to the image. (To control the wrapping style, remember that you can use the <BR> or <P> tags.)

    • To achieve the two-column look that you see above, create a two-column table and make the appropriate adjustments (for example, change the column widths or turn off the borders). To see the HTML, just look at the source of this page.

Information and programs provided by hcexres@io.com.