HTML5 Tags and Elements Tutorial

HTML5 Tags and Elements Tutorial

• 1.
  HTML5 Tutorial
• 2.
  Overview Objective Learn about HTML5elements, 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 WithA 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 adiv, 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 thatis 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 barthat uses numbers to represent the progress of a task. 1. Current Progress 2. Max Progress
• 8.
  Time Tag: <time></time> Purpose: Display a timeusing the 24:00 format or a date using the Gregorian calendar.
• 9.
  Details Tag: <details></details> Purpose: Shows an interactivewidget that can show and hide information.
• 10.
  Summary Tag: <summary></summary> Purpose: Serves as aheader for the content in a details tag.
• 11.
  Canvas Tag: <canvas></canvas> Purpose: Is a containerfor drawing graphics with JavaScript. Attributes to assign to the canvas
• 12.
  Audio Tag: <audio></audio> Purpose: Play an audioclip 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 videoclip 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 abetter 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