Skip to Page Content | Navigation for Module


Navigation for Module 3: Powerpoint
Page 10 of 25

  1. *Introduction
  2. *Tools You Need
  3. *Methods to Put Online
  4. *Make Webpage Method
  5. *Save Slides as Images
  6. * Template of Webpage
  7. *Title Slide
  8. *Bullet-List Slide
  9. *Multiple Column Slide
  10. *Embedded Video Slide
  11. *Table Slide
  12. *Image Slide
  13. *Drawing Shapes Slide
  14. *Notes Slide
  15. *Chart Slide
  16. *Non-Outline Text Slide
  17. *Sound Slide
  18. *Animation Slide
  19. *Publish to Blackboard
  20. *Publish to WebCT
  21. *Resources

Template for Making PowerPoint into Webpage

The previous page discussed the set-up processes of creating folders to organize the files and saving all slides as images when using the recommended "Make Webpage" method to achieve an accessible PowerPoint presentation. In this module, a sample twelve slide PowerPoint presentation (HCI.ppt) that contains information which is common to most higher-education courses (syllabus, grading, professor contact, and textbooks) will be made into one webpage. Each slide of the PowerPoint must be converted to webpage content and inserted into a template file, which is the basis of the webpage.

Starting and Saving the Template File

Most webpages are written in HTML, as recognized by the .htm or .html extension code that follows the filename. HTML stands for Hypertext Markup Language. The template for making a PowerPoint into one webpage involves creating an HTML file.

Note: If you are unfamiliar with the basic structure and coding of a webpage, read Basic Concepts of HTML from Module 9: Making HTML Files Accessible.

To start the template file:

  1. Complete the steps outlined on the previous page for creating folders to organize the files and saving all slides as images.
     
  2. Open your preferred text editor or web authoring tool. For this example, a text editor common to most computers, NotePad, will be used. To open NotePad, go to your "Start" menu then select "Programs" then "Accessories" and then "NotePad."
     
  3. After your tool opens, create a new file. For this example using NotePad, a new file is automatically started (or go to "File" and select "New").
     

To keep from losing your work when creating the template file, periodically save the file to the desired location.

To save the template file:

  1. Go to the "File" menu and then select "Save" or "Save As", or use the keyboard shortcut by selecting the "Ctrl" (or Alt) key then the "S" key.
     
  2. A new window called "Save As" is displayed; browse to the desired location. For this example, go to "My Documents" and select the "Mod3_PPT_to_Webpage" folder.
     
  3. In the "Save as type" dropdown box, select "All Files."
     
  4. In the "File name" text box, enter the name of the file. For this example, use "presentation.html" as the name.

    Tip: File names containing spaces are not supported by many browsers or the standard for HTML. If a file name contains more than one word, use an underscore ( _ ) in place of the space or put the words together, capitalizing only the first letter of each additional word (even if the word is an acronym).


  5. Select "Save" to close the window and return to web authoring tool or text editor.
     
  6. The name of the file will appear in the title bar.
     

Basic Webpage Structure of the Template File

The template for making a PowerPoint into one webpage involves creating an HTML file. The following twelve steps can be used as a basis for creating any new webpage.

To create the basic webpage structure of the template file:

  1. Open the template file in your preferred text editor or web authoring tool. For this example, use NotePad and open the "presentation.html" file within the "Mod3_PPT_to_Webpage" folder of "My Documents."
     
  2. Identify the document type as html by adding this code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.

    Tip: You must identify the document type within the first line of the code for an automated validation tool (i.e.Bobby(browse to website), WAVE(browse to website)) to evaluate if the webpage meets established web accessibility standards (i.e. Section 508(browse to website), W3C-WAI Web Content Accessibility Guidelines(browse to website)) . For more information on making webpages accessible, visit Module 9: Making HTML Files Accessible.


  3. Identify the language ("lang") as english ("en") and start the "html" by adding this code: <html lang="en">.
     
  4. Start the "head" of the file by adding this code: <head>.
     
  5. Provide a title for the file by adding this code:
    <title>Put title of presentation here</title>
    For this example, the title should be "Human Computer Interaction."

    Tip: Make certain you provide a meaningful title as the title will be displayed in the title bar of the web browser and is the first item in the file that is read by a screenreader or search engine.


  6. Close the "head" of the file by adding this code: </head>.
     
  7. Start the "body" that will hold the content of the file by adding this code: <body>
     
  8. Create a comment that cannot be seen in the web browser but serves as a reminder or explanation when the code is viewed using a web authoring tool or text editor by adding this code: <!-- Put comment here -->.
    For this example, the comment should be: "Content: Images and information of PowerPoint slides #1-12."
     
  9. Close the "body" to end the content and close the "html" to complete the webpage structure of the file by adding this code: </body></html>.
     
  10. Save the file. For this example, "presentation.html" should be the filename.
     
  11. Verify the code of the file resembles the following:
    Code sample of the basic webpage structure of the template
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    <HTML lang="en">
    <HEAD>
    <TITLE>
      Human Computer Interaction
    </TITLE>
    </HEAD>
    <BODY>
    <!-- Content: Images and information of PowerPoint slides #1-12 -->
    </BODY>
    </HTML>
  12. Check the progress of the file by viewing in a web browser. For this example, open the web browser, Internet Explorer, and view the file (presentation.html) in the "Mod3_PPT_to_Webpage" folder of "My Documents." The browser view should have:
    • The title of the presentation (Human Computer Interaction) in the title bar of the web browser
    • A blank page.

     

Slide Framework of the Template File

When using the "Make Webpage" method to achieve an accessible PowerPoint, all slides of the PowerPoint will need to be converted to webpage content. The framework for each slide should consist of these four aspects:

To create the slide framework of the template file:

  1. Open the template file in your preferred text editor or web authoring tool. For this example, use NotePad and open the "presentation.html" file within the "Mod3_PPT_to_Webpage" folder of "My Documents."
     
  2. Create the basic webpage structure of the template file.
     
  3. Go to the <BODY> section of the file.
     
  4. Create a comment for the first slide by adding this code: <!-- Slide 1 -->.
     
  5. Provide the image of the original PowerPoint slide by adding this code:
    <img src="location and name of image file" alt="text describing the image">.

    For this example, the source (src) of the slide image is located in the images folder "images/" with the name "Slide1.JPG" and the alternative text (alt) should be "Slide 1."

    Tip: The text within the "alt" of the image tag (<img>) displays when images are unable to be seen whether due to disability or environment (i.e. text-based web browser). All images must have this alternative, more commonly called 'alt-text'. For more information, read Images in HTML from Module 9: Making HTML Files Accessible.

  6. Provide the title of the slide using a "header 1" tag (<h1>) by adding this code:
    <h1>Slide Title</h1>

    For this example, the slide title should be "Title of Slide 1."

    Tip: Because web browsers display code differently and assistive technology (i.e. screenreaders) rely on structure to correctly interpret a webpage, it is important to properly format the code of webpages. For more information, read Textual Elements in HTML from Module 9: Making HTML Files Accessible.

  7. Provide the information of the slide. For this example, the information should be: <p>This is the text of slide 1.</p>.

    Note: Dependent upon the elements contained within the slide (i.e. bulleted lists, two-columned text, etc.), the code for converting the slide information to webpage content will be different. Over the next twelve pages, the details of converting specific elements often used in PowerPoint presentations will be demonstrated.


  8. Provide a horizontal line to separate this slide from the next slide by adding this code: <hr>
     
  9. Create a comment and add the image, title, and information for the next slide as outlined in steps 4-9. For this example, the code should reference "Slide 2".
     
  10. Save the file. For this example, "presentation.html" should be the filename.
     
  11. Verify the code of the file resembles the following:
    Code sample of template for making a PowerPoint into one webpage
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    <HTML lang="en">
    <HEAD>
    <TITLE>
      This is the title for the presentation
    </TITLE>
    </HEAD>
    <BODY>

      <!-- Slide 1 -->
      <img src="images/Slide1.JPG" alt="Slide 1">
       <h1>Title of Slide 1</h1>
      <p> This is the text of slide 1.</p>

      <hr>

      <!-- Slide 2 -->
      <img src="images/Slide2.JPG" alt="Slide 2">
      <h1>Title of Slide 2</h1>
      <p>This is the text of slide 2.</p>

      <hr>

    </BODY>
    </HTML>
  1. Verify the web browser view of the template file. For this example, open the web browser, Internet Explorer, and view the file (presentation.html) in the "Mod3_PPT_to_Webpage" folder of "My Documents" (see Image 3).
    Browser view of template for making a PowerPoint into one webpage has:


    Description of Image 3: Browser view of template for making a PowerPoint into one webpage

    • The title of the presentation (i.e. Human Computer Interaction) in the title bar of the web browser.
    • The image of the original PowerPoint slide.
    • The slide title on one line.
    • The slide information formatted to convey the intent of the slide (i.e. bullet-list, paragraph, table, etc.).
    • A horizontal line to separate this slide and its information from the next slide.

The next page will discuss how to convert a Title Slide of a PowerPoint into webpage content.

Top of Page arrow up
       Page 10
Next Page Next
Page 11:
Title Slide


 
-- END OF PAGE