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