html5 tags and elements tutorial
DESCRIPTION
Learn how about, html5 tags, the browsers that support them, and how to implement them in ProdigyView.TRANSCRIPT
HTML5 Tutorial
OverviewObjective
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
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
Browser SupportNot 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
Article
Tag:
<article></article>
Purpose:
Similar to a div, the article wraps content that can be considered independent and self contained.
2. Assign an id to the element
1. The content to display in the article
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
Progress Bar
Tag:
<progress></progress>
Purpose:
A bar that uses numbers to represent the progress of a task.
1. Current Progress
2. Max Progress
Time
Tag:
<time></time>
Purpose:
Display a time using the 24:00 format or a date using the Gregorian calendar.
Details
Tag:
<details></details>
Purpose:
Shows an interactive widget that can show and hide information.
Summary
Tag:
<summary></summary>
Purpose:
Serves as a header for the content in a details tag.
Canvas
Tag:
<canvas></canvas>
Purpose:
Is a container for drawing graphics with JavaScript.
Attributes to assign to the canvas
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
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
BDI
Tag:
<bdi></bdi>
Purpose:
Display text differently that how it is displayed in the parent element.
Will be available in future versions of ProdigyView
Mark
Tag:
<mark></mark>
Purpose:
Display text that is highlighted.
Will be available in future versions of ProdigyView
Figure
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.
Will be available in future versions of ProdigyView
Figure Caption
Tag:
<figcaption></figcaption>
Purpose:
Adds a caption to the content inside a figure tag.
Will be available in future versions of ProdigyView
API ReferenceFor a better understanding of the HTML elements, check out the api at the two links below.
PVHtml
www.prodigyview.com
More Tutorials
For more tutorials, please visit:
http://www.prodigyview.com/tutorials