HTML 5 GEOLOCATION API
- HTML5 Geolocation API
- It is used to Locate the User’s Position
- The HTML Geolocation API is used to get the geographical position of a user.
- Since this can compromise privacy,
- User will have to give permission in order to get his/her location
We use navigator.geolocation.getCurrentPosition to get the user location
2) HTML 5 Drag and Drop
- You can “grab” an object and drag it to a different location.
- Any element in HTML 5 can be drag and drop
- First make Draggable attribute to true of the html element
- <img draggable=”true”>
- There are two things :
- What to drag Where to drag
Example of Drag and Drop:
<div id=”divdrop” ondrop=”dropevtn(event)” ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>
3) HTML 5 Web Storage
- It is used to store the user data locally
- With web storage large amount of data can be stored without any performance effect and also it is more secure
- 5mb of data can be stored
- Cookies can store very less data
Two types of Web Storage:
- window.localStorage- stores data with no expiration date
- window.sessionStorage- stores data for one session (data is lost when the browser tab is closed)
- Store item in localstorage
- Retrieve items from local storage
4) Web Workers in HTML 5:
- You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
w = new Worker(“latest_workers.js”);
5) Server Side Events :
- To update the page automatically from the server
- The server sends messages automatically to update the page
- One way messaging
HTML 5 Introduction:
- HTML5 is the latest and most enhanced version of HTML.
- HTML is not a programming language, but rather a markup language.
- HTML 5 is the advanced version of HTML 4.01, XHTML 1.0, and XHTML 1.1 and has superseded all these versions.
HTML 5 Features:
- The DOCTYPE declaration for HTML5
- <!DOCTYPE html>
- The character encoding (charset) declaration is also very simple:
- <meta charset=”UTF-8″>
- HTML 5 removes extra information required and you can use simply following syntax −
- <script src = “scriptfile.js”></script>
- The type attribute is already removed from elements.
- Like from <link type=“text/css” > the type is removed from stylesheet.
HTML 5 Elements :
- New semantic elementslike <header>, <footer>, <article>, and <section>.
- New attributes of form elementslike number, date, time, calendar, and range.
- New graphic elements: <svg> and <canvas>.
- New multimedia elements: <audio> and <video>.
- aside− This tag represents a piece of content that is only slightly related to the rest of the page.
- header− This tag represents the header of a section.
- footer− This tag can contain information about the author, copyright information, et cetera.
- nav− This tag represents a section of the document intended for navigation.
- dialog− This tag can be used to mark up a conversation.
- figure− This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
- section− This tag represents application section. It can be used together with h1-h6 to indicate the document structure.
- article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article
Structure of HTML 5 Page
- <!DOCTYPE html>
- <head> <meta charset = “utf-8”> <title>…</title>
- <article> <section> … </section> </article> <aside>…</aside>
- </body> </html>
HTML 5 Compatibility with IE 8 and prior versions:
- You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.
- The HTML5Shiv is placed within the <head> tag.
- You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.
HTML 5 New Input types