Your SlideShare is downloading. ×
Introduction To HTML5<br />SARANSH KATARIA<br />AKSHAY KATYAL<br />26/Aug/2011<br />
           	      Topics to be discussed<br />				 Brief review of tags<br />				 What Is HTML5?<br />				 Why The Shift? ...
HTML4 Tags Revisited<br /><!--...--> A comment<br /><!DOCTYPE> The document type (only one in HTML5)<br /><a> Hyperlink to...
<div> Demarcation of division in a document<br /><em> Emphasized text<br /><form> Container for a form typically with inpu...
<iframe> Frame an inline sub window<br /><img> Image container<br /><input> User-input field within a form container<br />...
<mark> Text in one context marked for text in different context<br /><menu> Container for a list of commands<br /><meta> C...
<tr> Demarcation of a table row<br /><q> Enclosed text with quotation marks<br /><script> Container for script for CSS, Ja...
<sub> Subscripted text<br /><sup> Superscripted text<br /><table> A table definition<br /><tbody> Demarcation for a block ...
What Is HTML5?<br />
Why HTML5?<br />Reduces the use of JavaScript<br />Good replacement for adobe apps<br />No extra plug-in’s required<br />R...
Getting started<br />The doctype<br />XHTML 1.0 Transitional<br /><!DOCTYPE  html PUBLIC “-//w3c//DTD XHTML 1.0 Transition...
The Head Section<br /><title><br /><title>Title goes here</title><br /><meta><br /><meta http-equiv=”Content-Type” content...
Structural Tags<br />
The <br />Latest <br />Additions<br />
Web Forms Demo<br />
Inserting Audio<br /><audio src=”jazz.mp3”></audio><br /><audio src=“x.mp3” autoplay controls></audio><br />
Inserting Videos<br /><video src=”mbAux1small.mp4” controls preload=”auto”></video><br />
Browser Support<br />
Flash Vs HTML5<br />
New Features<br />
Professional HTML5 in use<br />
Tags used in HTML5<br /><article> Self-contained composition in document<br /><aside> Content tangentially related to cont...
<footer> Container for a footer for a section or page<br /><header> Container for header for a section or page<br /><hgrou...
<progress> Representation of the progress made in a task (such as percentage complete in a download operation)<br /><secti...
Discontinued Tags<br /><acronym> Replaced by <abbr><br /><applet> Replaced by <object><br /><basefont> Better handled by C...
<multicol> Removed in HTML5<br /><nobr> Removed in HTML5<br /><noframes> Removed in HTML5<br /><noscript> Only conforming ...
A Brief Glimpse Of The Next Session<br />
SVG<br />
CANVAS<br />
Q & A<br />Any questions?<br /> <br />Any questions?<br />
Upcoming SlideShare
Loading in...5
×

Html5 final

1,338

Published on

bvp gtug html5 presentation held on 26 August 2011

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

  • Be the first to like this

No Downloads
Views
Total Views
1,338
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 final"

  1. 1.
  2. 2. Introduction To HTML5<br />SARANSH KATARIA<br />AKSHAY KATYAL<br />26/Aug/2011<br />
  3. 3. Topics to be discussed<br /> Brief review of tags<br /> What Is HTML5?<br /> Why The Shift? <br /> Getting Started<br /> New Features<br /> New Additions<br /> The Forms<br /> Media Elements<br /> Flash or HTML5<br />
  4. 4. HTML4 Tags Revisited<br /><!--...--> A comment<br /><!DOCTYPE> The document type (only one in HTML5)<br /><a> Hyperlink to a page or page area<br /><abbr> An abbreviation<br /><address> Container for an address<br /><b> Bold text<br /><base> A base URL for all the links in a page<br /><blockquote> A block of text<br /><body> Beginning a body element<br /><br> A single line break<br /><button> A clickable button<br />
  5. 5. <div> Demarcation of division in a document<br /><em> Emphasized text<br /><form> Container for a form typically with input elements<br /><h1> to <h6> Text header 1 to header 6<br /><head> Container for the first code to be interpreted by browser<br /><hr> Horizontal rule (line)<br /><html> Container for an HTML document<br /><i> Italic text<br /><colgroup> Container for groups of table columns<br />
  6. 6. <iframe> Frame an inline sub window<br /><img> Image container<br /><input> User-input field within a form container<br /><label> Representation of a caption in a user interface<br /><li> List item indicator<br /><link> A resource reference (for example, CSS)<br /><col> Defines attributes for table columns<br /><cite> Container for a citation<br /><caption> A table caption<br />
  7. 7. <mark> Text in one context marked for text in different context<br /><menu> Container for a list of commands<br /><meta> Container for meta information<br /><ol> A numbered (ordered) list<br /><optgroup> An option grouping header in an options list<br /><option> Container for individual options in a drop-down list<br /><p> A paragraph block<br /><pre> Preformatted text format<br />
  8. 8. <tr> Demarcation of a table row<br /><q> Enclosed text with quotation marks<br /><script> Container for script for CSS, JavaScript, or another recognized script<br /><select> A selectable list<br /><small> Small text<br /><span> Inline section in a document<br /><strong> Strong text that looks like bold<br /><style> Container for a style definition<br /><var> Variable style in formula<br /><ul> An unordered list (a bullet list)<br />
  9. 9. <sub> Subscripted text<br /><sup> Superscripted text<br /><table> A table definition<br /><tbody> Demarcation for a block of rows for a table’s body<br /><td> A table cell<br /><textarea> A text area container<br /><tfoot> Representation for a block of rows of column summaries for a table<br /><th> Table header format<br /><thead> Representation of a block of rows of column summaries for a table header<br /><title> The document title<br />
  10. 10. What Is HTML5?<br />
  11. 11. Why HTML5?<br />Reduces the use of JavaScript<br />Good replacement for adobe apps<br />No extra plug-in’s required<br />Redundant tags removed<br />Exciting new media elements<br />Employs a lot of HTML4 elements<br />
  12. 12. Getting started<br />The doctype<br />XHTML 1.0 Transitional<br /><!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional // EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />HTML5<br /><!DOCTYPE html><br />
  13. 13. The Head Section<br /><title><br /><title>Title goes here</title><br /><meta><br /><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”><br /><meta name=”keywords” content=”kennels, dog fences, pet containment”><br /><meta http-equiv=”Refresh” content=”30”><br />Example<br />
  14. 14. Structural Tags<br />
  15. 15. The <br />Latest <br />Additions<br />
  16. 16. Web Forms Demo<br />
  17. 17. Inserting Audio<br /><audio src=”jazz.mp3”></audio><br /><audio src=“x.mp3” autoplay controls></audio><br />
  18. 18. Inserting Videos<br /><video src=”mbAux1small.mp4” controls preload=”auto”></video><br />
  19. 19. Browser Support<br />
  20. 20. Flash Vs HTML5<br />
  21. 21.
  22. 22. New Features<br />
  23. 23. Professional HTML5 in use<br />
  24. 24. Tags used in HTML5<br /><article> Self-contained composition in document<br /><aside> Content tangentially related to content of the article<br /><audio> Sound content container<br /><canvas> Graphic development container<br /><command> A command that the user can invoke<br /><datalist> List generator when used with the <input> element and its new list attribute<br /><details> Discloses details of an element<br /><embed> External interactive plug-in or content<br /><figcaption> Caption tag for the figure element<br /><figure> Contains a group of media content and their caption<br />
  25. 25. <footer> Container for a footer for a section or page<br /><header> Container for header for a section or page<br /><hgroup> A heading of a section with multiple h1 to h6 elements in a document<br /><mark> A string of text in one document, marked or highlighted for reference in another document<br /><meter> Container for a known range of values (for example, disk use)<br /><nav> Representation of a section of a document intended for navigation<br /><output> Defines the progress of a task of any kind<br />
  26. 26. <progress> Representation of the progress made in a task (such as percentage complete in a download operation)<br /><section> Theme identifier for content grouping<br /><source> Container for multiple specification of media resources<br /><summary> Information on a <details> element<br /><time> Container for a date/time<br /><video> Element for linking to a video file<br /><keygen> The key pair generator control representation.<br />
  27. 27. Discontinued Tags<br /><acronym> Replaced by <abbr><br /><applet> Replaced by <object><br /><basefont> Better handled by CSS<br /><bgsound> Replaced by <audio><br /><big> Better handled by CSS<br /><dir> Replaced by <ul><br /><font> Removed in HTML5<br /><frame> Removed in HTML5<br /><frameset> Removed in HTML5<br /><isindex> Replaced by explicit <form><br />
  28. 28. <multicol> Removed in HTML5<br /><nobr> Removed in HTML5<br /><noframes> Removed in HTML5<br /><noscript> Only conforming to HTML syntax<br /><strike> Better handled by CSS<br /><u> Better handled by CSS<br /><marquee> Removed in HTML5<br /><blink> Removed in HTML5<br /><center> Better handled by CSS<br />
  29. 29. A Brief Glimpse Of The Next Session<br />
  30. 30. SVG<br />
  31. 31. CANVAS<br />
  32. 32. Q & A<br />Any questions?<br /> <br />Any questions?<br />

×