2. 1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5
3. HTML is a computer language devised to allow website
creation
Firstly mentioned on the Internet by Berners-Lee in
late 1991.
HTML stands for Hyper Text Markup Language .
• An HTML file is a text file containing small markup tags .
• The markup tags tell the Web browser how to display the
page .
• An HTML file must have an htm or html file extension
Example : Simple HTML Page Example Explained The
first tag in your HTML document is <html>.
4. HTML5 ~= HTML + CSS3 + JavaScript
Written by Joshua Johnson, On 19th October 2009.
Filed in HTML, Web Standards.
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. 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 Markup Elements
<article> Defines external content
<aside> Defines some content aside from the
article it is placed in
<audio> Defines sound, such as music or other
audio streams
<canvas> Defines graphic, such as graphs or
other images
<command> Defines a command button, like a
radio button, a checkbox, or a button
7. <datagrid> Defines a list of selectable data. The
datagrid is displayed as a tree-list
<datalist> Defines a list of selectable data. Use this
element together with the input element, to make a
dropdown list for the input’s value
<details> Defines details of an element, which the
user can see, and click to hide
< dialog> Defines a dialog, such as a conversation .
8. <nav> Defines a section of navigation links
<q> Defines a short quotation
<time> - Defines a time or a date, or both
<video> - Defines video, such as a movie clip
or other video streams
<meter> - Defines the range
9. API's for multimedia by using video and audio tags
Drag and drop API
HTML canvas 2D context
HTML5 web messaging
WebSQL
Geolocation
WebWorkers
Notification
WebSockets
10. New Media Elements
◦ <video>
Now embed video in your page without requiring
any plugin like Flash or Silverlight.
Browser MP4 WebM OGG
IE9 Yes No No
FF4+ No Yes Yes
Chrome6+ Yes Yes Yes
Opera10.6+ No Yes Yes
12. New Media Elements
◦ <audio>
Extremely simple and easy way to show an
audio player in your page.
Browser MP3 WAV OGG
IE9 Yes No No
FF4+ No Yes Yes
Chrome6+ Yes Yes Yes
Opera10.6+ No Yes Yes
13. 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
Dynamic and interactive graphics
Draw images using 2D drawing API
– Lines, curves, shapes, fills, etc.
14. 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.
15. email
url
number
range
date pickers (date, month, week, time, datetime)
search
color
<input type="number"> <input type="range">
16. HTML4 HTML5
No multimedia support It has inbuilt multimedia
without third party element in html5 like
audio, video, canvas.
No Threads Support of WebWorkers
Drag and Drop with Drag and Drop without
JavaScript API any JS API Support
It was not available New tags like <header>,
<footer>, <article>
No Persistent Storage Persistent Storage with
WebStorage API
17. http://www.apple.com/html5
http://www.youtube.com/html5
GTA Game Clone in HTML5
http://www.webworks.dk/enginetest/
Web-Based Adobe Photoshop Clone in HTML5
http://www.picozu.com/
18.
19. Conclusion –
Introduced the new elements and APIs included in
HTML5.
We also got a taste of the semantic changes to come
and the new structure our web pages should take in the
future.
Finally, we learned that even though HTML5 isn’t quite
ready for the masses, we can still get our grubby
developer fingers on it and start experimenting today.
