• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Tags and Elements Tutorial
 

HTML5 Tags and Elements Tutorial

on

  • 1,644 views

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

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

Statistics

Views

Total Views
1,644
Views on SlideShare
1,586
Embed Views
58

Actions

Likes
1
Downloads
35
Comments
0

4 Embeds 58

http://localhost 21
http://www.prodigyview.com 19
http://127.0.0.1 17
https://home.jolicloud.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Tags and Elements Tutorial HTML5 Tags and Elements Tutorial Presentation Transcript

    • HTML5 Tutorial
    • 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
    • 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
    • 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
    • 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
    • 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
    • Progress BarTag:<progress></progress>Purpose:A bar that uses numbers to represent the progress of atask. 1. Current Progress 2. Max Progress
    • 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 to assign to the canvas
    • 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
    • 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
    • BDI Will be available in future versions of ProdigyViewTag:<bdi></bdi>Purpose:Display text differently that how it is displayed in theparent element.
    • Mark Will be available in future versions of ProdigyViewTag:<mark></mark>Purpose:Display text that is highlighted.
    • 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.
    • Figure Caption Will be available in future versions of ProdigyViewTag:<figcaption></figcaption>Purpose:Adds a caption to the content inside a figure tag.
    • 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