OverviewObjectiveLearn about HTML5 elements, the browsers they aresupported in, and how to use them in ProdigyView..Requirements Understanding of HTML tagsEstimated Time12 minutes www.prodigyview.com
Follow Along With A Code Example1. 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
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
ArticleTag:<article></article>Purpose:Similar to a div, the article wraps content that can beconsidered independent and self contained.1. The content to display in the article 2. Assign an id to the element
AsideTag:<aside></aside>Purpose:Defines content that is aside from the parent content thatit is placed with. The content in the aside should berelated to the parent content. 1. The content to display in the aside 2.Assign a class to the aside
Progress BarTag:<progress></progress>Purpose:A bar that uses numbers to represent the progress of atask. 1. Current Progress 2. Max Progress
TimeTag:<time></time>Purpose:Display a time using the 24:00 format or a date using theGregorian calendar.
DetailsTag:<details></details>Purpose:Shows an interactive widget that can show and hideinformation.
SummaryTag:<summary></summary>Purpose:Serves as a header for the content in a details tag.
AudioTag:<audio></audio>Purpose:Play an audio clip without the use of 3rd party players.Different formats should be used because not everyformat is supported in every browser. Pass in the location of the other audio formats
VideoTag:<video></video>Purpose:Play an video clip without the use of 3rd party players.Different formats should be used because not everyformat is supported in every browser. Pass in the location of the other video formats
BDI Will be available in future versions of ProdigyViewTag:<bdi></bdi>Purpose:Display text differently that how it is displayed in theparent element.
Mark Will be available in future versions of ProdigyViewTag:<mark></mark>Purpose:Display text that is highlighted.
Figure Will be available in future versions of ProdigyViewTag:<figure></figure>Purpose:Defines self contained(images, videos, etc) in which theposition of the element does not affect the layout of thepage.
Figure Caption Will be available in future versions of ProdigyViewTag:<figcaption></figcaption>Purpose:Adds a caption to the content inside a figure tag.
API ReferenceFor a better understanding of the HTML elements, checkout the api at the two links below.PVHtml More TutorialsFor more tutorials, please visit:http://www.prodigyview.com/tutorials www.prodigyview.com
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.