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
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
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