HTML5 Tutorial
OverviewObjectiveLearn about HTML5 elements, the browsers they aresupported in, and how to use them in ProdigyView..Requir...
Follow Along With A Code               Example1. Download a copy of the example code at  www.prodigyview.com/source.2. Ins...
Browser Support   Not every element is supported in very browser. In this tutorial   you will notice the following images ...
ArticleTag:<article></article>Purpose:Similar to a div, the article wraps content that can beconsidered independent and se...
AsideTag:<aside></aside>Purpose:Defines content that is aside from the parent content thatit is placed with. The content i...
Progress BarTag:<progress></progress>Purpose:A bar that uses numbers to represent the progress of atask.       1. Current ...
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.
CanvasTag:<canvas></canvas>Purpose:Is a container for drawing graphics with JavaScript.                        Attributes ...
AudioTag:<audio></audio>Purpose:Play an audio clip without the use of 3rd party players.Different formats should be used b...
VideoTag:<video></video>Purpose:Play an video clip without the use of 3rd party players.Different formats should be used b...
BDI                                            Will be available in future                                            vers...
Mark                                    Will be available in future                                    versions of Prodigy...
Figure                                         Will be available in future                                         version...
Figure Caption                                         Will be available in future                                        ...
API ReferenceFor a better understanding of the HTML elements, checkout the api at the two links below.PVHtml              ...
Upcoming SlideShare
Loading in...5
×

HTML5 Tags and Elements Tutorial

1,419

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,419
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 Tags and Elements Tutorial

  1. 1. HTML5 Tutorial
  2. 2. 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
  3. 3. 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
  4. 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. 5. 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
  6. 6. 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
  7. 7. Progress BarTag:<progress></progress>Purpose:A bar that uses numbers to represent the progress of atask. 1. Current Progress 2. Max Progress
  8. 8. TimeTag:<time></time>Purpose:Display a time using the 24:00 format or a date using theGregorian calendar.
  9. 9. DetailsTag:<details></details>Purpose:Shows an interactive widget that can show and hideinformation.
  10. 10. SummaryTag:<summary></summary>Purpose:Serves as a header for the content in a details tag.
  11. 11. CanvasTag:<canvas></canvas>Purpose:Is a container for drawing graphics with JavaScript. Attributes to assign to the canvas
  12. 12. 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
  13. 13. 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
  14. 14. BDI Will be available in future versions of ProdigyViewTag:<bdi></bdi>Purpose:Display text differently that how it is displayed in theparent element.
  15. 15. Mark Will be available in future versions of ProdigyViewTag:<mark></mark>Purpose:Display text that is highlighted.
  16. 16. 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.
  17. 17. Figure Caption Will be available in future versions of ProdigyViewTag:<figcaption></figcaption>Purpose:Adds a caption to the content inside a figure tag.
  18. 18. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×