Published on

This presentation will give you a general idea about the best web page designing language that is HTML5.

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Name :-Mohit RanaBranch :- CSE(N1)Roll no. :- 115306 Submitted To:- Mr. Jagdeep Singh
  2. 2. Add all new web technology into a box labeledHTML 5 SVG (Scalable Vector Graphics) 6 years old. Web Forms 2.0 XMLHttp-Request (XHR) HTML5
  3. 3.  <audio> and <video> tags <canvas> element SVG WebGL Touch APIFlash has been replaced
  4. 4.  W3C has been adding features to HTML Major browsers support the standards Latest version is HTML5  Has all of the power of native applications  Plus more!
  5. 5. ?The Web Hypertext Application Technology Working Group
  6. 6.  Document real-world browser behaviour Document and standardise useful extensions Develop practical new features Ensure backwards compatibility Define robust error handling
  7. 7.  Foundation of Design and Development Organised into 3 Categories  Compatibility  Utility  Interoperability
  8. 8.  Support Existing Content Degrade Gracefully Dont Reinvent the Wheel Pave the Cowpaths Evolution, not Revolution
  9. 9.  Solve Real Problems Priority of Constituencies Media Independence Universal Access Support World Languages Secure By Design Separation of Concerns
  10. 10.  Well-Defined Behaviour Avoid Needless Complexity Handle Errors
  11. 11. HTML XHTML 5 5text/html application/xhtml+xml Document DOM
  12. 12.  Backwards compatible with legacy UAs Author familiarity Lenient and forgiving syntax  No User-Hostile Yellow Screen of Death! Convenient shorthand syntax  Can omit some tags and attribute values
  13. 13.  Strict XML Syntax Integrate directly with other XML vocabularies  SVG, MathML Use XML Processing
  14. 14.  No need for software updates  Everyone sees the latest version Development can be done anywhere  No need for special software  Just a terminal and Firefox/Firebug
  15. 15.  HTML5 and javascript are interpreted  No compilation  Can test UI changes with a console window Firebug extension for Firefox
  16. 16.  Cross-platform  Most browsers (read: not IE) conform to the W3C standards  The same code works on PC, Mac, Linux
  17. 17.  Mobile device support
  18. 18.  <header>  <hgroup> : groups a set of h1-h6 elements when the heading has multiple levels <nav> <section>  <article>  <header> <aside> <footer> <time> <mark>
  19. 19.  Structure and Semantics Embedded Content and Multimedia DOM APIs Forms Repetition Model
  20. 20. <div <header> id="header"> <div class="article"> <article><div <div <nav> <div <section> id="content"> <aside>id="nav"> id="right"> <div <footer> id="footer">
  21. 21.  Microformats datetime-design-pattern  <abbr class="datetime" title="2007-08-02T23:30Z"> Fri, Aug 03 2007 at 09:30 </abbr> Misusing the abbr element Accessibility Issues
  22. 22.  The time Element  <timedatetime="2007-08-02T23:30Z"> Fri, Aug 03 2007 at 09:30 </time> Solves Accessibility Issue Can be used in Microformats like hCalendar
  23. 23.  Representing scalar measurements or fractional values Useful for:  User Ratings (e.g. YouTube Videos)  Seach Result Relevance  Disk Quota Usage
  24. 24.  <meter>60%</meter> <meter>3/5</meter> <meter>6 blocks used (out of 10 total)</meter> <meter value="0.6">Medium</meter>
  25. 25.  Show completion progress of a task Progress bars are widely used in other applications Works with scripted applications Useful for:  Indicateloading progress of an AJAX application  Show user progress through a series of forms  Making impatient users wait
  26. 26.  <progress>Step 3 of 6</progress> <progress>50% Complete</progress> <progress value="0.5"> Half way! </progress>
  27. 27.  Interactive tree, list or tabular data Extensive DOM API Allows User Input  Editing  Sorting Useful for:  File or folder lists  Web mail applications
  28. 28.  <datagrid> <table> <!-- Insert tabular data here... --> </table> </datagrid>
  29. 29.  Dynamic and interactive graphics Draw images using 2D drawing API  Lines, curves, shapes, fills, etc. Useful for:  Graphs  Applications  Games and Puzzles  And more…
  30. 30.  PlotKit JavaScript library Draws graphs from any data source, such as a table
  31. 31.  Yahoo! Pipes Interactive, drag and drop interface
  32. 32.  CanvasPaint Clone of MS Paint built with Canvas Could be used to build a Shared Whiteboard application
  33. 33.  Canvex Experimental First- Person Shooter Game 3D Graphics
  34. 34.  Videos have become very popular Currently difficult to embed videos in HTML Flash has become the de facto standard Adding native support to browsers
  35. 35.  <video src="movie.ogg" id="video">...</video> <button onclick=";"> Play </button>
  36. 36.  Allows immediate update notification from server to client Send any arbitrary data to the client, intended to be processed by a script Update content without reloading page Useful for:  Real-time chat or gaming  Stock ticker updates
  37. 37.  HTML 4 controls are too limited Several new types added
  38. 38.  <input type="datetime"> <input type="date"> <input type="time"> And more…
  39. 39.  <input type="number"> <input type="range">
  40. 40.  <input type="email"> <input type="url">
  41. 41.  <input list="title-list"> <datalist id="title-list"> <option value="..."> </datalist>
  42. 42.  New attributes to describe validity constraints for the expected input  required, pattern, min, max, etc. New DOM APIs allow scripts to detect and deal with user input errors more easily
  43. 43.  Allows client side processing to repeat sections based on templates Traditionally required scripts or server side interaction to add additional sections Useful for:  Adding multiple players to a game  Adding multiple, alternative contact details (e.g. home phone, work phone, mobile phone, etc.)
  44. 44. Team Members<tr repeat-template="member" repeat="0"> id="member" repeat="template" repeat-start="2"> <td><input type="text" name="member0.rank"></td> name="member[member].rank"></td> Rank Name <td><input type="text" name=""></td> name="member[member].name"></td> <td><button type="remove">Remove</button></td> Colonel</tr> Jack ONeill Remove<tr repeat-template="member" repeat="1"> <td><input type="text" name="member1.rank"></td> Major Sam Carter Remove <td><input type="text" name=""></td> <td><button type="remove">Remove</button></td> Civilian</tr> Daniel Jackson Remove Remove<tr id="member" repeat="template" repeat-start="2"> Alien Team Member Teal’c Add Continue Remove <td><input type="text" name="member[member].rank"></td> <td><input type="text" name="member[member].name"></td> <td><button type="remove">Remove</button></td></tr><button type="add" template="member">Add TeamMember</button>
  45. 45.  Native 3D rendering in the browser Makes use of the same <canvas> element Syntax is like OpenGL
  46. 46.  Works with iPad/iPhone/iPod and Windows 7 with Chrome & Firefox
  47. 47.  Can store relational data locally in the browser Especially useful for offline apps (more later)
  48. 48.  Using Files in Web Applications
  49. 49.  Lots of stuff that HTML5 leaves out for us: Font metrics Bitmap manipulation Audio manipulation More flexible security model (cross-domain). However new browsers support some of this in XmlHttpRequest 3D support – hardware acceleration Actionscript language Desktop client support (AIR) Totally cross-browser/cross-platform. With HTML5
  50. 50.  Let the web browser developers do all the hard work Applications have never been more easy with HTML5 Great features at a great price Develop without the need for bulky IDEs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.