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