This ppt contains a laconic description of HTML history and development and application of HTML5. Some of most frequent and useful tags are also covered.

1. HTML5
Bundelkhand Institute of Engineering &
Technology, Jhansi
Under the guidance of:
Dr. Yash Pal Singh
(Head of Department IT )
Presented by:
Amit Choudhary
1104313003
Dept. of IT
1

2. OVERVIEW
 Introduction
 History
 New features in HTML5
 Difference of HTML5 with HTML4
 Web applications currently using HTML5
 Browser Compatibility of HTML5
02/22

3. INTRODUCTIO
N
 HTML5 is a markup language used for structuring and presenting
content for the World Wide Web.
 It is the fifth revision of the HTML standard (created in 1990 and
standardized as HTML 4 as of 1997)
 HTML5 is a cooperation between the World Wide Web Consortium (W3C)
and the Web Hypertext Application Technology Working Group
(WHATWG).
 New features of HTML5 are based on HTML, CSS, DOM, and JavaScript
3
03/22

4. HISTORY OF HTML5
• HTML 1.0 was developed in 1990
• HTML 3.0 was developed in 1995
• HTML 3.2 was completed by 1996
• HTML 4 was developed in the year 1997
• The Web Hypertext Application Technology Working Group
(WHATWG) began work on the new standard in 2004
• In 2006 W3C showed an interest in HTML5 and in 2007 they created a
working group to work in HTML5 project.
• HTML5 is still under development. 4
04/22

5. NEW FEATURES IN
HTML5
 API's for multimedia by using video and audio tags
 Drag and drop API
 HTML canvas 2D context
 HTML5 Geo location
 New Input types
 Web storage
5
05/22

6. New Semantic Elements
• <section>
• <nav>
• <article>
• <hgroup>
• <aside>
• <header>
• <footer>
• <legend>
• <figure>
6
06/22

7. NEW INPUT TYPE
Syntax: E-mail: <input type="email" name="usremail" />
•color (in hexadecimal like #FF8800)
• date
• datetime
• email
• month
• number
• range
• search
• tel
• time
•url 7
07/22

8. Canvas
• Dynamic and interactive graphics
• Draw images using 2D drawing API
• Lines, curves, shapes, fills, etc.
<canvas width="300" height="225"></canvas>
 You can display Text, Image, Gradient etc.
 You can make games without using flash.
8
08/22

9. Video & Audio
• <video>
• Allows to embed a video on a web page - width, height,
controls are the attributes.
• Very useful feature in todays web scenario.
• <source>,<track> are the tags which can be used along with
<video>.
• <audio>
• Allows to embed a audio on a web page.
• Text displayed between <audio> and </audio> will be shown
as an error if browser does not support audio.
• autoplay, controls, src, loop, preload ares some of its
attributes.
9
09/22

10. Video
<video width="320" height="240" controls="controls"><source
src="movie.mp4" type="video/mp4" /></video>
New Attributes
•Autoplay
•Controls (play,pause.seeking,volume,caption,track)
•Height
•Loop
•Muted
•Width
•src
10
10/22

11. Drag and Drop
• In HTML5 any element is draggable .
• To make an element draggable, set the draggable attribute to true
< img draggable=”true”/>
• What to drag?- ondragstart attribute calls a function, drag(event)
which has a method dataTransfer.setData() method sets the data type
and the value of the dragged data.
• Where to drag?-ondragover event tells about where to drop dragged
element.
• Do the drop: When the dragged data is dropped, a drop event
occurs. drop(event) function we implement things which will occur
on release of drag operation.
11
11/22

12. Progress bar
• Useful for:
• Indicate loading progress
• Show user progress through a series of forms
The <progress> tag represents the progress of a task.
The <progress> tag is currently supported in Firefox, Opera, and Chrome.
<progress value="22" max="100"></progress>
Attributes:-
1) max:- Specifies how much work the task requires in total.2)
2) value:- Specifies how much of the task has been completed.
12
12/22

13. Place Holder
• The placeholder attribute provides a hint that describes the
expected value of an input field.
• Note: The placeholder attribute works with the following <input>
types: text, search, url, telephone, email, and password
• The hint is displayed in the input field when it is empty, and
disappears when the field gets focus:
<input type=“text" name=“username" placeholder=“First name" /> 13
13/22

14. Required Attribute
14
14/22

15. HTML5 Web Storage
HTML5, web pages can store data locally within the users browser.
Web Storage in HTML5 can be viewed as improvement over cookies.
Provides 5-10 MB storage space compared to 4 KB in cookies.
Web Storage is more secure and faster than cookies.
Data is stored in key/value pairs, and a web page can only access
data stored by itself.
Web server can not access web storage data directly. Store large
amounts of data, without affecting the websites performance.
Two new objects for storing data on the client:
(a) localStorage - stores data with no expiration date
(b) sessionStorage - stores data for one session
15
15/22

16. localStorage &
sessionStorage
The localStorage object stores the data with no expiration date. The data
will not be deleted when the browser is closed, and will be available the
next day, week, or year. localStorage.setItem(myKey, myValue);
var myVar = localStorage.getItem(myKey);
The sessionStorage object is equal to the localStorage object, except that it
stores the data for only one session. The data is deleted when the user closes
the browser window. sessionStorage.setItem(myKey, myValue);
var myVar = sessionStorage.getItem(myKey);
16
16/22

17. Geo-location
Geo-location API is used to get the geographical position of a web
site user.
getCurrentPosition() method to get the users position.
If the getCurrentPosition() method is successful, it returns a
coordinates object to the function specified in the
parameter(showPosition)
showPosition() function gets the displays the Latitude and
Longitude.
watchPosition() - Returns the current position of the user.
17
17/22

18. Difference between
HTML4 and HTML5
HTML4 HTML5
Elements like nav , header were not
present.
It brought new element for web
structure like nav, header etc
It was lack of rules of parsing so it is
difficult to handle error.
Strictly parsing rules introduced in
html5 so handle the error.
No multimedia supported without
third party
It inbuilt multimedia element in
html5 like Audio , video, canvas
It was not available It contains attributes like control
menu, spell check etc.
18
18/22

19. Browser
• All major bCrowoser msuppoprt HaTMtL5i.bility
• Though no browser fully supports HTML5, most of the
browsers keep releasing their new version to support
various new features of HTML5.
• Following Browsers supports HTML5.
• We can check how much our browser supports HTML5 by
visiting tofollowing link through our
browser.http://www.html5test.com
19
19/22

20. Websites that are using
HTML5
 www.youtube.com
 www.w3c.com
 www.facebook.com
 www.techzion.org
 www.thewildernessdowntown.com
 play.google.com/about/music/tour/
20
20/22

21. Conclusion
• HTML5 is still a work in progress
• Only a handful of major brands, including Mozilla Firefox
and Google Chrome currently support HTML5 elements.
• Microsoft’s Internet Explorer is the most widely used
browser and currently has the least amount of support for
HTML5.
• Reduce the use of external plugins (flash player).
• HTML5 will replace the majority of native apps over the
next 3 to 5years.
• HTML5 allows offline storage .
• HTML5 is Future of websites.
21
21/22

22. 22
22/22