Skip to Page Content | Navigation for Module


Navigation for Module 3: Powerpoint
Page 11 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

Adding Title Slide to Webpage Template

The previous page discussed creating the template file used in the recommended "Make Webpage" method for achieving an accessible PowerPoint presentation. In this module, a sample twelve slide PowerPoint presentation (HCI.ppt) will be made into one webpage. Typically, the Title Slide is the first slide in the PowerPoint presentation.

Note: Before proceeding, you should have completed all steps in the Save Slides as Images and Template of Webpage.


Converting a Title Slide into Webpage Content

When making a PowerPoint presentation into a webpage, each slide must be converted to webpage content and inserted into a template file, which is the basis of the webpage. The following ten steps demonstrate how to convert a Title Slide.
 

To convert a Title Slide into webpage content:

  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. Go to the <BODY> section of the file.
     
  3. Create a comment for the Title Slide to be converted by adding this code:
    < !-- Slide X -->.

    For this example, add a comment for slide 1 which will be created from converting slide 1 of the sample PowerPoint (HCI.ppt).
     
  4. Provide the image (<img>) of the original PowerPoint slide by adding this code:


    Description of Image 6: Title Slide of sample PowerPoint (slide 1)

    <img src="location/name of image file" alt="text describing the image">.

    For this example, slide 1 of the sample PowerPoint presentation (HCI.ppt) is the Title Slide (see Image 6). The source (src) of the slide image is located in the images folder "images" with the name of "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.
  1. 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 "Human Computer Interaction."

    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.

  2. Provide each piece of information in a Title Slide as a separate paragraph (<p>) by adding this code:
    <p> Text of Title slide</p>.

    For this example, the information in slide 1 of the sample PowerPoint (HCI.ppt) has two pieces that each need to be a paragraph: "Lecture 1" and "Syllabus and Class Introduction."

    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.


  3. Provide a horizontal line to separate this slide from the next slide by adding this code: <hr>
     
  4. Save the file. For this example, "presentation.html" should be the filename.
     
  5. Verify the code for converting a Title Slide resembles the following:
    Code sample of a Title Slide converted into webpage content:
    <!-- Slide 1 -->
    <img src="images/Slide1.JPG" alt="Slide 1">
    <H1>Human-Computer Interaction</H1>
    <p>Lecture 1</p>
    <p>Syllabus & Class Introduction</p>
    <hr>
  1. Verify the web browser view of converting a Title Slide. 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 7 ).


    Description of Image 7: Title Slide of sample PowerPoint converted into webpage content (slide 1)

    Browser view of converted Title Slide has:
    • The title of the presentation (i.e. Human Computer Interaction) in the title bar of the web browser.
    • The image of the Title Slide from the original PowerPoint.
    • The slide title on one line (i.e. Human-Computer Interaction).
    • The slide information on separate lines.
    • A horizontal line to separate this slide and its information from the next slide.
  1. Check template file progress and view the context of the Title Slide in the complete conversion of the sample PowerPoint to one webpage (, 520 KB).

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

Top of Page arrow up
       Page 11
Next Page Next
Page 12:
Bullet-List Slide


 
-- END OF PAGE