SlideShare a Scribd company logo

Dive into HTML5

•
•
Karthik Nallajalla
Karthik Nallajalla

HTML5 is the latest version of HTML that replaces HTML 4 and XHTML and introduces new features for richer content without plugins. It is designed to work cross-platform on PCs, tablets, smartphones and smart TVs. HTML5 was a collaborative effort between the W3C and WHATWG to standardize new features based on HTML, CSS, DOM and JavaScript while reducing dependencies on plugins. New features include 2D drawing with <canvas>, multimedia playback with <audio> and <video>, local storage, semantic elements representing different types of content, and new form controls.

Related slideshows

Dhtml chapter2
Dhtml chapter2Dhtml chapter2
Dhtml chapter2
 
Dhtml
DhtmlDhtml
Dhtml
 
Thin Server Architecture SPA, 5 years old presentation
Thin Server Architecture SPA, 5 years old presentationThin Server Architecture SPA, 5 years old presentation
Thin Server Architecture SPA, 5 years old presentation
 
1 of 16
HyperText Markup Language
Dive into HTML5
Dive into HTML5
What is HTML5?     Latest standard for HTML Designed to replace both HTML 4, XHTML, and the HTML DOM Level 2 Previous version of HTML, HTML 4.01, came in 1999 Delivers rich content without the need for additional plugins  animation to graphics  music to movies  games  Cross-platform and designed to work with:     PC Tablet Smartphone Smart TV
How Did HTML5 Get Started?  Collaborative effort of  W3G (World Wide Web Consortium)  WHATWG (Web Hypertext Application Technology Working Group)  Formulated rules for designing HTML5:       New features should be based on HTML, CSS, DOM, and JavaScript The need for external plugins (like Flash) should be reduced Error handling should be easier than in previous versions Scripting has to be replaced by more markup Device-independent Development process should be visible to the public
<!DOCTYPE>  Only one <!doctype> declaration, and it is very simple <!DOCTYPE html> New Features  2D drawing  Media playback  Support for local storage  Content-specific elements  Form controls
<canvas>  Used to draw graphics, on the fly, via scripting (usually JavaScript)  It is a container for graphics, you must use a script to actually draw the graphics Dude, don’t waste time. Demo it!
Media Elements <audio> Defines sound or music content <video> Defines video or movie content <source> Defines sources for <video> and <audio> <track> Defines tracks for <video> and <audio> <embed> Defines containers for external applications (like plug-ins) DEMO Time
Local Storage      Web pages can store data locally within the user's browser Web Storage is more secure and faster Data is not included with every server request, but used ONLY when asked for Unlike cookies, the storage limit is far larger (around 5MB) Two new objects for storing data on the client:  window.localStorage - stores data with no expiration dateTablet  code.sessionStorage - stores data for one session (data is lost when the tab is closed) DEMO Time
Application Cache     Web site can be cached, and accessible without an internet connection Offline browsing - users can use the application when they're offline Speed - cached resources load faster Reduced server load - the browser will only download updated/changed resources from the server
Semantic Elements      Semantic elements = Elements with meaning Clearly describes the element to both the browser and the developer Non-semantic elements: <div> and <span> - Tells nothing about its content Semantic elements: <form>, <table>, and <img> - Clearly defines its content Existing sites today contains HTML code like : <div id="nav">, <div class="header">, or <div id="footer"> to indicate navigation links, header, and footer.  So some new elements were created in HTML5
Dive into HTML5
Semantic Elements in HTML5 DEMO Time!
New Input Types HTML5 has several new input types for better input control and validation.              Color Date Datetime Datetime-local Email Month Number Range Search Tel Time URL Week Not all browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields. DEMO Time!
HTML5 Games
Thank you everyone Welcome RJ

More Related Content

Dive into HTML5

  • 4. What is HTML5?     Latest standard for HTML Designed to replace both HTML 4, XHTML, and the HTML DOM Level 2 Previous version of HTML, HTML 4.01, came in 1999 Delivers rich content without the need for additional plugins  animation to graphics  music to movies  games  Cross-platform and designed to work with:     PC Tablet Smartphone Smart TV
  • 5. How Did HTML5 Get Started?  Collaborative effort of  W3G (World Wide Web Consortium)  WHATWG (Web Hypertext Application Technology Working Group)  Formulated rules for designing HTML5:       New features should be based on HTML, CSS, DOM, and JavaScript The need for external plugins (like Flash) should be reduced Error handling should be easier than in previous versions Scripting has to be replaced by more markup Device-independent Development process should be visible to the public
  • 6. <!DOCTYPE>  Only one <!doctype> declaration, and it is very simple <!DOCTYPE html> New Features  2D drawing  Media playback  Support for local storage  Content-specific elements  Form controls
  • 7. <canvas>  Used to draw graphics, on the fly, via scripting (usually JavaScript)  It is a container for graphics, you must use a script to actually draw the graphics Dude, don’t waste time. Demo it!
  • 8. Media Elements <audio> Defines sound or music content <video> Defines video or movie content <source> Defines sources for <video> and <audio> <track> Defines tracks for <video> and <audio> <embed> Defines containers for external applications (like plug-ins) DEMO Time
  • 9. Local Storage      Web pages can store data locally within the user's browser Web Storage is more secure and faster Data is not included with every server request, but used ONLY when asked for Unlike cookies, the storage limit is far larger (around 5MB) Two new objects for storing data on the client:  window.localStorage - stores data with no expiration dateTablet  code.sessionStorage - stores data for one session (data is lost when the tab is closed) DEMO Time
  • 10. Application Cache     Web site can be cached, and accessible without an internet connection Offline browsing - users can use the application when they're offline Speed - cached resources load faster Reduced server load - the browser will only download updated/changed resources from the server
  • 11. Semantic Elements      Semantic elements = Elements with meaning Clearly describes the element to both the browser and the developer Non-semantic elements: <div> and <span> - Tells nothing about its content Semantic elements: <form>, <table>, and <img> - Clearly defines its content Existing sites today contains HTML code like : <div id="nav">, <div class="header">, or <div id="footer"> to indicate navigation links, header, and footer.  So some new elements were created in HTML5
  • 13. Semantic Elements in HTML5 DEMO Time!
  • 14. New Input Types HTML5 has several new input types for better input control and validation.              Color Date Datetime Datetime-local Email Month Number Range Search Tel Time URL Week Not all browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields. DEMO Time!

Editor's Notes

  1. The first official logo of HTML. I’ll give a very quick overview of HTML before going on our today’s topicHyperText Markup Language is the markup language for creating web pages that can be rendered in a web browser. In other words, a language that a Web browsers can understand. HTML andworld wide web changed the world we live.
  2. Timeline of Universal Web TechnologiesHTML first publicly available in 1991 and developed by Tim Berners-Lee.
  3. Now comes the next level Web Development HTML 5
  4. Which means this HTML standard can work on any Modern Multimedia device.
  5. The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3).WHATWG is a community of people interested in evolving HTML and related technologies.They both worked together to design and develop next level of HTMLThey have a vision and created rules for designing HTML5Currently HTML 5.1 working draft is in progress.
  6. DOCType  is an instruction to the web browser about what version of HTML the page is written in.We already started using it in our current project.Now we shall look at some of the exciting features of HTML.
  7. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins.&quot;Detach All&quot; will stop debugging but will leave the process running.Resources: http://www.html5canvastutorials.com/All the Canvas Properties and methods listed in W3Schools.http://www.w3schools.com/tags/ref_canvas.asp
  8. With HTML5, there is no need of using third party plugins for playing Audio/Video files.AudioBefore HTML5, there was no standard for playing audio files on a web page, audio files had to be played with a plug-in (like flash).
  9. Cookies are included with every HTTP request, thereby slowing down your web application by needlessly transmitting the same data over and overCookies are included with every HTTP request, thereby sending data unencrypted over the internet (unless your entire web application is served over SSL)Cookies are limited to about 4 KB of data — enough to slow down your application (see above), but not enough to be terribly usefulWhat we really want isa lot of storage spaceon the clientthat persists beyond a page refreshand isn’t transmitted to the serverhttp://www.w3schools.com/html/html5_webstorage.asphttp://html5demos.com/storage
  10. HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
  11. http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx