Bundelkhand Institute of Engineering & Technology, Jhansi

HTML5

Under the guidance of:

Dr. Yash Pal Singh

(Head of Department IT )1

Presented by:

Amit Choudhary1104313003Dept. of IT

OVERVIEW

Introduction

History

New features in HTML5

Difference of HTML5 with HTML4

Web applications currently using HTML5

Browser Compatibility of HTML5

02/22

INTRODUCTION

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

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

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

New Semantic Elements

• <section>

• <nav>

• <article>

• <hgroup>

• <aside>

• <header>

• <footer>

• <legend>

• <figure>

6

06/22

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

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

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

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

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

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

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

Required Attribute

14

14/22

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

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

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

Difference between HTML4 and HTML5

HTML4 HTML5Elements 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

Browser Compatibility • All major browser support HTML5.

• 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

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

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