Learn how about, html5 tags, the browsers that support them, and how to implement them in ProdigyView.

1. HTML5 Tutorial

2. Overview
Objective
Learn about HTML5 elements, the browsers they are
supported in, and how to use them in ProdigyView..
Requirements
 Understanding of HTML tags
Estimated Time
12 minutes
www.prodigyview.com

3. Follow Along With A Code
Example
1. Download a copy of the example code at
www.prodigyview.com/source.
2. Install the system in an environment you feel comfortable testing in.
3. Proceed to examples/template/Html5.php

4. Browser Support
Not every element is supported in very browser. In this tutorial
you will notice the following images on slides.
If the element IS NOT supported in a browser, the
element will have an X over it, like below.
Note: Any IE support is assumed to be IE9+
Support for elements in browsers will change, current support is of 1/1/2012

5. Article
Tag:
<article></article>
Purpose:
Similar to a div, the article wraps content that can be
considered independent and self contained.
1. The content to display in the article
2. Assign an id to the element

6. Aside
Tag:
<aside></aside>
Purpose:
Defines content that is aside from the parent content that
it is placed with. The content in the aside should be
related to the parent content.
1. The content to display in the aside
2.Assign a class to the aside

7. Progress Bar
Tag:
<progress></progress>
Purpose:
A bar that uses numbers to represent the progress of a
task.
1. Current Progress
2. Max Progress

8. Time
Tag:
<time></time>
Purpose:
Display a time using the 24:00 format or a date using the
Gregorian calendar.

9. Details
Tag:
<details></details>
Purpose:
Shows an interactive widget that can show and hide
information.

10. Summary
Tag:
<summary></summary>
Purpose:
Serves as a header for the content in a details tag.

11. Canvas
Tag:
<canvas></canvas>
Purpose:
Is a container for drawing graphics with JavaScript.
Attributes to assign to the canvas

12. Audio
Tag:
<audio></audio>
Purpose:
Play an audio clip without the use of 3rd party players.
Different formats should be used because not every
format is supported in every browser.
Pass in the location of the other audio formats

13. Video
Tag:
<video></video>
Purpose:
Play an video clip without the use of 3rd party players.
Different formats should be used because not every
format is supported in every browser.
Pass in the location of the other video formats

14. BDI
Will be available in future
versions of ProdigyView
Tag:
<bdi></bdi>
Purpose:
Display text differently that how it is displayed in the
parent element.

15. Mark
Will be available in future
versions of ProdigyView
Tag:
<mark></mark>
Purpose:
Display text that is highlighted.

16. Figure
Will be available in future
versions of ProdigyView
Tag:
<figure></figure>
Purpose:
Defines self contained(images, videos, etc) in which the
position of the element does not affect the layout of the
page.

17. Figure Caption
Will be available in future
versions of ProdigyView
Tag:
<figcaption></figcaption>
Purpose:
Adds a caption to the content inside a figure tag.

18. API Reference
For a better understanding of the HTML elements, check
out the api at the two links below.
PVHtml
More Tutorials
For more tutorials, please visit:
http://www.prodigyview.com/tutorials
www.prodigyview.com