Powerpoint
Introduction
Tools You Need
Methods to Put Online
Make Webpage Method
Save Slides as Images
Template of Webpage
Title Slide
Bullet-List Slide
Multiple Column Slide
Embedded Video Slide
Table Slide
Image Slide
Drawing Shapes Slide
Notes Slide
Chart Slide
Non-Outline Text Slide
Sound Slide
Animation Slide
Publish to Blackboard
Publish to WebCT
Resources
Many PowerPoint slides contain images, some of which are decorative and
are placed on the slide to "liven up" a presentation, and some of which
are critical to the message of the slide. This page addresses the very
important process of converting PowerPoint slides into accessible HTML
slides while preserving the images contained in the slide.
From the sample "Human-Computer Interaction" presentation, the original PowerPoint slide 7 (see Image 26).
Image 26 <!-- Slide 7 -->
<img src="Slide7.jpg" alt="Slide 7">
<H1>Textbook</H1>
The only content on this particular slide is one image representing the cover of the textbook for the class.
You have already worked with the HTML for images, since each slide contains an image of the PowerPoint slide. The main difference now is that the image for the textbook cover needs a more meaningful textual description than the slide images. With the slide images, it was sufficient to simply state "Slide 1" or "Slide 2" because the slides' content is represented in HTML following the image. You must provide a very descriptive textual equivalent (using our ALT attribute of the IMG tag) for users who cannot see or see well.
Save your work as an HTML file. For this example, save as presentation.htm.
The completed code for converting an Image Slide (i.e. Slide 7) of the
PowerPoint presentation HCI.ppt should be as follows.
<!-- Slide 7 -->
<img src="Slide7.jpg" alt="Slide 7">
<H1>Textbook</H1>
<img src="textbook_cover.jpg"
alt="The cover of 'The Design of Everyday
Things' by Donald
Norman. White cover
with a red coffee
pot">
Be sure that you have access to the image that you are referencing. In this case, refer to the image stored in the file called "textbook_cover.jpg". Note: You used single quotes around the title of the book because if you use double quotes, it will cause an error in the HTML; only use double quotes around the entire ALT text.
,
520 KB).
Notice that the alternative text appears when the mouse moves over the
image. This is a nice feature even for people who can see the image but
want to know more about the image.
But what would this slide look like without the image? What would the Web browser display if the images were turned off or were not downloaded? The alternative text would be displayed in lieu of the image (see Image 28).
Note: The image has been replaced by an empty space and the alternative text. You might question why someone would want to view a Web page like this, but realize that many people have slow Internet connections and do not want to download all of the images; also, many people cannot see well, so their screen readers software will read this text too them, giving them an accurate impression of the image.
The next page will discuss how to convert slides with drawing shapes.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
Previous Page
