1 / 12

Discovering HTML5: The Future of Web Development

Explore the world of HTML5 and its new features like video, audio, canvas, web storage, and input types. Learn about the timeline of web technologies and the guiding principles behind HTML5 development. Dive into the evolution of web design from HTML to CSS, JavaScript, and now HTML5. Discover how HTML5 is shaping the future of web development and why it's important to adapt to this modern standard.

omana
Download Presentation

Discovering HTML5: The Future of Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. An Introduction To

  2. But before we begin… Let’s look what flash can do: http://www.drawastickman.com/ OK, that wasn’t flash! That was HTML5.

  3. Timeline of Web Technologies • 1991 HTML • 1994 HTML 2 • 1996 CSS 1 + JavaScript • 1997 HTML 4 • 1998 CSS 2 • 2000 XHTML 1 • 2002Tableless Web Design • 2005 AJAX • 2009 HTML 5

  4. So what is HTML5? • HTML5 ~= HTML + CSS3 + JavaScript • World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). • Still a work in progress. However, most modern browsers have some HTML5 support. http://HTML5Test.com

  5. Guiding Principles for HTML5 • New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plugins (like Flash) • Better error handling • More markup to replace scripting • HTML5 should be device independent • The development process should be visible to the public

  6. New Features: New Elements • New Markup Elements • <article> • <aside> • <header> • <footer> • <nav> • <figcaption> etc..

  7. New Features: Video • New Media Elements • <video> • Now embed video in your page without requiring any plugin like Flash or Silverlight.

  8. New Features: Audio • New Media Elements • <audio> • Extremely simple and easy way to show an audio player in your page.

  9. New Features: Canvas • A canvas is a rectangular area, and you control every pixel of it. <canvas id="myCanvas" width="200" height="100"></canvas> • Uses JS to draw shapes and color. • <canvas> • Entire library of JS functions for Canvas

  10. New Features: Web Storage • Two new objects to save data: • localStorage - stores data with no time limit • sessionStorage - stores data for one session • localStorage • Data stored till cleared programmatically by JS • Or browser cache cleared. • accessible only from the domain that initially stored the data. • sessionStorage • accessible only from the page that initially stored the data.

  11. New Features: New Input Types • email • url • number • range • Date pickers (date, month, week, time, datetime, datetime-local) • search • color No more need to code JS validators for input fields.

  12. More on HTML5 • W3Schools.com • HTML5Rocks.com • HTML5Test.com • And then there is Google!

More Related