HTML 5

1,668 views

Published on

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

No Downloads
Views
Total views
1,668
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
139
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • As many conceive it, its not a programming language. It’s a markup language. *Slidecontecnt* I’m coming to tags. Its on the next slide.
  • Common tags you’ll find in an html source code are And <p>,<h1> etc<head> includes the external files which u may include in ur html doc such as a css or a javascript file<div> divides the page into sections upon ur need<body> defines the main body of ur division, it consists of several sub tags such as <a> <p> etc etcI think that’s all the basics you need to know to understand further.
  • The most reason version html4, has been on for over a decade now. And, it hasn't really seen a major update. Sure there's XHTML, but that did little more than make things slightly stricter - making you write better quality code if you were at all concerned with compliance. The main area that was not been addressed yet was web application. To give authors more flexibility and enable more interactive websites, html5 was introduced.Critics say that html5 could actually kill flash and silverlight.
  • HTML 5

    1. 1. HTML 5<br />Karthik Madhavan<br />S7, CS (2006-2010)<br />
    2. 2. Contents<br /><ul><li>Introduction to HTML.
    3. 3. Why HTML5?
    4. 4. HTML 5 an overview
    5. 5. HTML5 features
    6. 6. Difference between HTML4 and HTML5
    7. 7. Future scope
    8. 8. Conclusion</li></ul>2<br />
    9. 9. HTML : An Outline<br />Stands for Hyper Text Markup Language.<br />Not a programming language, it is a markup language.<br />A markup language is a set of markup tags.<br />Markup tags are used to describe web pages.<br />3<br />
    10. 10. TAGS<br />Keywords surrounded by angle brackets < > like <html><br />They come in pairs like <b> and </b><br />Common tags are :-<br /><html><br /><head><br /><div><br /><body><br /><a><br /><p><br /><h1><br />4<br />
    11. 11. 5<br />
    12. 12. Document Object Model<br />Cross platform, language independent model<br />Represents and interacts with objects in HTML documents<br />6<br />
    13. 13. Why HTML5 ?<br />HTML4 hasn’t been updated for about 10 years.<br />XHTML was introduced but it made things stricter and not easier.<br />Embedding audio/video was dependent on flash etc.<br />New websites have to be interactive.<br />7<br />
    14. 14. HTML4 - drawbacks<br />It does not adequately support web applications.<br />Complex structuring of web pages.<br />Complex DTDs<br />Need plug-ins to embed audio and video.<br />Does not support drag and drop features, editing, drawing, error handling etc<br />8<br />
    15. 15. An Overview<br /><ul><li>HTML5 (referred to as Web Applications 1.0) is an improvement of HTML4.0 and XHTML1.0
    16. 16. Work started in 2003 by W3C and WHATWG
    17. 17. Released a draft version in 2008.
    18. 18. A change from document markup language to a web application language.
    19. 19. An attempt to enhance the functionality and flexibility of the web.</li></ul>9<br />
    20. 20. …contd.<br /><ul><li>Provides interoperability.
    21. 21. Backward compatible
    22. 22. New features like form control, APIs, multimedia, structure semantics , local storage etc.
    23. 23. Consistent and defined error handling
    24. 24. Internal data storage.</li></ul>10<br />
    25. 25. 11<br />HTML5 FEATURES<br /><ul><li>New elements</li></ul>Structural elements<br /> Multi-media elements<br /> Inline elements<br /><ul><li>New input types
    26. 26. New attributes
    27. 27. Local Storage
    28. 28. New APIs</li></li></ul><li>Structural elements<br />12<br />Structuring in HTML4<br />
    29. 29. 13<br />Structuring in HTML5;<br />
    30. 30. 14<br />
    31. 31. 15<br />
    32. 32. 16<br />Structural Tags<br /><ul><li><section>
    33. 33. <article>
    34. 34. <aside>
    35. 35. <header>
    36. 36. <footer>
    37. 37. <nav>
    38. 38. <dialog></li></li></ul><li>Multimedia Elements<br />17<br /><ul><li><canvas></li></ul> a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.<br /> 2D drawing area controlled by JS.<br />set of functions in ‘canvas API’ for drawing shapes, defining paths, transformations etc<br /> Scripting enabled environment.<br />
    39. 39. 18<br />
    40. 40. <video><br />Embed video in web pages<br /> Does not require 3rd party plug-ins like Apple QuickTime or Adobe Flash Player.<br /> No detection script required<br /> Attributes like src, autoplay, loop etc<br /> JS to fall back to plug-ins if browser does not support <video><br />19<br />
    41. 41. 20<br />
    42. 42. 21<br />
    43. 43. <audio><br />sound or audio stream<br /> attributes like src, auto buffer, loop, controls etc<br /> audio = new audio( [ url ] ) <br /> creates an audio element ,assigns arc=url<br />22<br />
    44. 44. Inline Elements<br />23<br /><ul><li><mark> -denoted a bit of text that is marked in someway
    45. 45. <time> - denoted time or date in a block
    46. 46. <meter> - to indicate the measure or count. Multiple attributes like min, max, low, high etc possible.
    47. 47. <progress> - progress bar</li></li></ul><li>24<br />New Form Input Types<br /><ul><li>datetime
    48. 48. date
    49. 49. month
    50. 50. week
    51. 51. time
    52. 52. number
    53. 53. range
    54. 54. email
    55. 55. url </li></li></ul><li>25<br />auto focus and omission of attributes<br /><form action="" method="get"> <br /> <p><label>Search: <input name=search type="text“ id="search"></label></p> <br /> <script> document.getElementById('search').focus() </script> <br /><!-- the rest of the form --></form><br />can be replaced by<br /><form> <br /> <p><label>Search: <input name=search autofocus></label><br /> </p> <br /> <!-- the rest of the form --><br />
    56. 56. Form Validation<br />26<br />
    57. 57. 27<br />
    58. 58. 28<br />Attributes<br /><ul><li> contenteditable attribute indicates that the element is an editable area.
    59. 59.  contextmenu attribute can be used to point to a context menu provided by the author.
    60. 60.  draggable attribute can be used together with the new drag & drop API.
    61. 61.  hidden attribute indicates that an element is not yet, or is no longer, relevant.
    62. 62.  spellcheck attribute allows for hinting whether content can be checked for spelling or not.</li></li></ul><li>29<br />Local Storage<br /><ul><li>A mechanism for websites to store data locally and retrieve them.
    63. 63. Like cookies, but for larger data.
    64. 64. Data stays in the local system and can access using JS after page load.
    65. 65. Provides offline capabilities (Google Gears) in the browser.</li></li></ul><li>APIs<br />30<br /><ul><li>2D drawing API that can be using with the canvas element.
    66. 66. API for playing of video and audio which can be used with the new video and audio elements.
    67. 67. An API that enables offline Web applications.
    68. 68. Editing API in combination with a new global contenteditableattribute.</li></li></ul><li>31<br />
    69. 69. 32<br />
    70. 70. 33<br />HTML5 vs. HTML4<br /><ul><li>Support of multimedia
    71. 71. Language for web applications rather than document markup language
    72. 72. Localized data speeding up caching .searching etc
    73. 73. <canvas> tag for 2D graphics
    74. 74. APIs for in-browser application allowing editing, drag and drop etc</li></li></ul><li>34<br />Future Scope<br /><ul><li>Can get rid of proprietary add-ons (like Flash/Silverlight/JAVAFX)
    75. 75. Web apps faster with better user experience
    76. 76. Difference between desktop and web apps blurred.
    77. 77. Standard for web applications</li></li></ul><li>35<br />
    78. 78. 36<br />References<br /><ul><li>A preview of HTML5, Lachlan Hunt, (2007) ‘A LIST APART’.
    79. 79. HTML5 Introduction, Richard Keyes (2009) ‘An introduction to HTML5 and its features; The Code Project’
    80. 80. Difference b/w HTML5 and HTML4, Anne van Keesteren (2008); Opera Software OSA
    81. 81. HTML5 Reference, Lachlan Hunt (2009), W3C
    82. 82. HTML5 and After, Paul Krill (2009), InfoWorld</li></li></ul><li>Thank you..<br />Queries !!<br />37<br />

    ×