Presented By Nanda Kumar(972789) P. Trinesh (982816) Sk. Salma (982824) K. Madhuri (982814) HTML5

26 June 2015 What is HTML? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content

26 June 2015 Why HTML5 matters? HTML5 is becoming a new standard. HTML5 is faster and cheaper. HTML5 is modern. HTML5 lets you do things which are previously impossible. HTML5 supports mobile devices.

26 June 2015 New features in HTML5 Multimedia elements(, ). Form elements(,, ). HTML API's(Geolocation,Drag/drop,local storage,app cache). Graphics(, ). Semantic elements(,, ).

26 June 2015 HTML5 Migration Typical HTML4Typical HTML5 You can migrate to HTML5 from HTML4 or XHTML, using the same recipe..

26 June 2015 HTML5 & Semantics Non- semantic elements :, Semantic elements :, Semantic elements describe their meaning and purpose clearly. Widens separation between content and style. Assist search engines. Better accessibility.

26 June 2015 HTML5 & Semantics

26 June 2015 HTML5 & Semantics Figures with captions : <img src="img.jpg" alt="Lighthouse width="304" height="228"> Fig.1 - A Lighthouse.

26 June 2015 HTML5 & Semantics Summary: Gandhinagar Gandhinagar is the capital of the state of Gujarat in Western India

26 June 2015 HTML5 & Semantics Progress : Indicate progress of a specific task. Can be either determinate or indeterminate. Meter : Defines a scalar measurement within a known range, or a fractional value

26 June 2015 GEOLOCATION HTML Geolocation API is used to get the geographical position of a user. User permission required can be used along with Google Maps API navigator.geolocation.getCurrentPosition(showPosition); function showPosition(position) { x.innerHTML = position.coords.latitude + " " + position.coords.longitude; }

26 June 2015 HTML Canvas The HTML element is used to draw graphics, on the fly, via scripting (usually JavaScript). The element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

26 June 2015 HTML5 Canvas – Translation HTML5 canvas provides translate(x, y) method which is used to move the canvas and its origin to a different point in the grid. Here argument x is the amount the canvas is moved to the left or right, and y is the amount it's moved up or down.

26 June 2015 HTML5 Canvas - Drawing Lines - beginPath() -stroke() - moveTo(x, y) - lineTo(x, y) - closePath() -fill()

26 June 2015 HTML5 Canvas - Drawing Rectangles - fillRect(x,y,width,height), - strokeRect(x,y,width,height) - clearRect(x,y,width,height)

26 June 2015 HTML5 Canvas - Drawing Paths - beginPath() - closePath() - moveTo(x,y) - stroke() - arc(x, y, radius, startAngle, endAngle, anticlockwise) - fill()

26 June 2015 HTML5 Canvas - Using Images - beginPath() - moveTo(x, y) - closePath() - fill() - stroke() - drawImage(image, dx, dy)

26 June 2015 HTML5 Canvas - Text and Fonts HTML5 canvas provides capabilities to create text using different font and text properties.

26 June 2015 HTML5 Canvas-Animations - setInterval(callback, time) - setTimeout(callback, time)

26 June 2015 HTML5 Canvas Similarly we can Draw bezier curves,quadratic curves. Create gradients,compositions. Apply styles and colors,transforms.

26 June 2015 HTML5 Local Storage With local storage, web applications can store data locally within the user's browser. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Local storage is per domain. All pages, from one domain, can store and access the same data.

26 June 2015 HTML Local Storage Objects HTML local storage provides two objects for storing data on the client: window.localStorage - stores data with no expiration date window.sessionStorage - stores data for one session (data is lost when the tab is closed)

26 June 2015 The localStorage object The localStorage object stores the data with no expirationdate. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");

26 June 2015 The sessionStorage Object 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. if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = sessionStorage.clickcount;

Thank You