HTML5 Tags and Elements Tutorial
Download as PPTX, PDF2 likes851 views
This tutorial provides an overview of HTML5 elements, their purposes, and browser support, focusing on practical usage in ProdigyView. Key elements discussed include <article>, <aside>, <progress>, <time>, <details>, <canvas>, <audio>, and <video>, along with their intended functions and attributes. Additional resources and tutorials are available on the ProdigyView website for further learning.
HTML5 Tags and Elements 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