Html5 Future of WEB

Html5 Future of WEB

• 1.
  HTML5 Bundelkhand Instituteof 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 • Dynamicand 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 APIis 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 HTML4and 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 • Allmajor 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 areusing 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 • HTML5is 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