Adding Bullet-List Slide to Webpage Template

The previous page discussed how to convert a Title Slide when using 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. Lists are the mainstay of PowerPoint, almost every presentation contains at least one slide with a bullet-list or a multilevel bullet-list slide.

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

Converting a Bullet-List Slide to 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 thirteen steps demonstrate how to convert a Bullet-List Slide.

To convert a Bullet-List Slide into webpage content:

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

For this example, after the slide 1 horizontal line (<hr>) , add a comment for slide 5, which will be created from converting slide 5 of the sample PowerPoint (HCI.ppt).
Provide the image (<img>) of the original PowerPoint slide by adding this code:
<img src="location/name of image file" alt="text describing the image">.

For this example, slide 5 of the sample PowerPoint presentation (HCI.ppt) is the Bullet-List Slide (see Image 8).

Image 8: Bullet-List Slide of sample PowerPoint (slide 5)

The source (src) of the slide image is located in the images folder "images" with the name of "Slide5.JPG" and the alternative text (alt) should be "Slide 5."

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.

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 "Syllabus Information."

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.
Start the information of a Bullet-List Slide by adding this code for an unordered list: <ul>.

Tip: To create a list that has numbers instead of bullets add the code for an ordered list: <ol>. For an ordered list using letters, add the code: <ol type="a">.
Provide each of the points in a Bullet-List Slide as a separate list item (<li>) by adding this code:
<li>Text of item in list</li> .

For this example, the information in slide 5 of the sample PowerPoint (HCI.ppt) has five points in the bullet-list that each need to be a list item: "Instructor contact information", "Textbook information and readings", "Assignments", "Grading policy", and "Academic misconduct and appropriate collaboration."
Close the information of a Bullet-List Slide by adding this code for ending an unordered list: </ul>.
(If an ordered list with numbers or letters is used, add this code. </ol>).
Provide a horizontal line to separate this slide from the next slide by adding this code: <hr>
Save the file. For this example, "presentation.html" should be the filename.
Verify the code for converting a Bullet-List Slide resembles the following:
Code sample of a Bullet-List Slide converted into webpage content:
 <img src="Slide5.JPG" alt="Slide 5"> <h1>Syllabus Information</h1> <ul> <li>Instructor contact information</li> <li>Textbook information and readings</li> <li>Assignments</li> <li>Grading policy</li> <li>Academic misconduct and appropriate collaboration</li> </ul> <hr>

Verify the web browser view of converting a Bullet-List 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 9 ).

Image 9: Bullet-List Slide of sample PowerPoint converted into webpage content (slide 5)

Browser view of converted Bullet-List Slide has:
- The title of the presentation (i.e. Human Computer Interaction) in the title bar of the web browser.
- The image of the Bullet-List Slide from the original PowerPoint.
- The slide title of the slide (i.e. Syllabus Information).
- The slide information in a bullet-list.
- A horizontal line to separate this slide and its information from the next slide.

Check the template file progress and view the context of the Bullet-List Slide in the complete conversion of the sample PowerPoint to one webpage (, 520 KB).

Converting a Multilevel Bullet-List Slide to 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. Sometimes a bullet-list in a PowerPoint slide will have one or more embedded "sub-lists". The following thirteen steps demonstrate how to convert a Multilevel Bullet-List Slide.

To convert a Multilevel Bullet-List Slide into webpage content:

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."
Go to the <BODY> section of the file.
Create a comment for the Multilevel Bullet-List Slide to be converted by adding this code:
.

For this example, after the slide 1 horizontal line (<hr>) and before the slide 5 comment (), add a comment for slide 2 which will be created from converting slide 2 of the sample PowerPoint (HCI.ppt).
Provide the image (<img>) of the original PowerPoint slide by adding this code:
<img src="location/name of image file" alt="text describing the image">.

For this example, slide 2 of the sample PowerPoint presentation (HCI.ppt) is the Multilevel Bullet-List Slide (see Image 10).

Image 10: Multilevel Bullet-List Slide of sample PowerPoint (slide 2)

The source (src) of the slide image is located in the images folder "images" with the name of "Slide2.JPG" and the alternative text (alt) should be "Slide 2."

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.

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 "Welcome!"

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.
Start the outer or main list of a Multilevel Bullet-List Slide by adding this code for an unordered list: <ul>.

Tip: To create a list that has numbers instead of bullets add the code for an ordered list: <ol>. For an ordered list using letters, add the code: <ol type="a">.
Construct the "parent" points of the outer or main list in the Multilevel Bullet-List Slide as a separate list item (<li>) by adding this code:
<li>Text of item in list</li> .

For this example, slide 2 of the sample PowerPoint (HCI.ppt) has an outer or main list with three "parent" points that each need to be a list item: "I'm glad you're here", "This is a Senior-level course", and "We'll have lots of fun."
Close the outer or main list of a Multilevel Bullet-List Slide by adding this code for ending an unordered list: </ul>.
(If an ordered list with numbers or letters is used, add this code. </ol>).
Construct each inner or sub-list of the "parent" point that it "lives under". Before the end of the parent point (</li>), start the sub-list as a bullet-list (<ul>) or an numbered list (<ol>) and then create each point of the sub-list as a separate list item (<li>Item in sub-list.</li>). When the sub-list is complete, end the sub-list (</ul> or </ol>). The code should be as follows:
<li>This is the "parent" point. <ul> <li>The first item in the sub-list.</li> <li>The second item in the sub-list.</li> </ul> </li> For this example, sub-lists will be constructed for the second and third "parent" points in slide 2 of the sample PowerPoint (HCI.ppt).
1. The second "parent" point (This is a Senior-level course) has an inner or sub-list that contains two items: "Expect you to have study skills" and "Expect you to have time management skills".
2. The third "parent" point (We'll have lots of fun) has an inner or sub-list that contains one item: "It's always fun to critique! Smile :)"
  
  Tip: In the original PowerPoint slide, this sub-list item ended in a smiley face. When converting to webpage content, the textual equivalent could be ":)". These text-based icons are often referred to as "emoticons" (a combination of the phrase "emotional icons") and have been commonly used in computing for over a decade. However, screenreader technology literally reads the emoticon smile as "colon close parenthesis". Thus, to ensure all users receive the same message, the word "Smile" in conjunction with the emoticon representing a smile :) would be better suited as the textual equivalent.
After the slide information is complete, provide a horizontal line to separate this slide from the next slide by adding this code: <hr>
Save the file. For this example, "presentation.html" should be the filename.
Verify the code for converting a Multilevel Bullet-List Slide resembles the following:
Code sample of a Multilevel Bullet List Slide converted into webpage content
 <img src="Slide2.JPG" alt="Slide 2"> <h1>Welcome!</h1> <ul> <li>I'm glad you're here</li> <li>This is a Senior-level course <ul> <li>Expect you have study skills</li> <li>Expect you have time-management skills</li> </ul> </li> <li>We'll have lots of fun <ul> <li>It's always fun to critique! Smile :)</li> </ul> </li> </ul> <hr>

Verify the web browser view of converting a Multilevel Bullet-List 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 11).

Image 11: Multilevel Bullet-List Slide of sample PowerPoint converted into webpage content (slide 2)

Browser view of converted Multilevel Bullet-List Slide has:
- The title of the presentation (i.e. Human Computer Interaction) in the title bar of the web browser.
- The image of the Multilevel Bullet-List Slide from the original PowerPoint.
- The slide title on one line (i.e. Welcome).
- The slide information in a multilevel bullet-list (i.e. three "parent" points; the second point has a two item sub-lists and the third point has a one item sub-list).
- A horizontal line to separate this slide and its information from the next slide.