Your SlideShare is downloading. ×
0
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Tags and Elements Tutorial

1,378

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,378
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 Tutorial
  • 2. 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
  • 3. 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
  • 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. 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
  • 6. 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
  • 7. Progress BarTag:<progress></progress>Purpose:A bar that uses numbers to represent the progress of atask. 1. Current Progress 2. Max Progress
  • 8. TimeTag:<time></time>Purpose:Display a time using the 24:00 format or a date using theGregorian calendar.
  • 9. DetailsTag:<details></details>Purpose:Shows an interactive widget that can show and hideinformation.
  • 10. SummaryTag:<summary></summary>Purpose:Serves as a header for the content in a details tag.
  • 11. CanvasTag:<canvas></canvas>Purpose:Is a container for drawing graphics with JavaScript. Attributes to assign to the canvas
  • 12. 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
  • 13. 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
  • 14. BDI Will be available in future versions of ProdigyViewTag:<bdi></bdi>Purpose:Display text differently that how it is displayed in theparent element.
  • 15. Mark Will be available in future versions of ProdigyViewTag:<mark></mark>Purpose:Display text that is highlighted.
  • 16. 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.
  • 17. Figure Caption Will be available in future versions of ProdigyViewTag:<figcaption></figcaption>Purpose:Adds a caption to the content inside a figure tag.
  • 18. 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

×