Html5ppt

HTML5

The next generation of HTML

By,Kaushik Vinay T G

What is HTML5?

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.

The previous version of HTML came in 1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

New Features

The canvas element for drawing

The video and audio elements for media playback

Better support for local offline storage

New content specific elements, like article, footer, header, nav, section

New form controls, like calendar, date, time, email, url, search

HTML5 Video/AudioUntil now, there has not been a standard for showing a Video/Audio on

a web page.

HTML5 defines a new elements which specifies a standard way to embed a video/movie on a web page: the <video> element.

A standard way to embed a audio on web page: the <audio> element.

Currently, there are 3 supported video formats : MP4, WebM, and Ogg.

There are 3 supported audio formats:Mp3,Ogg, and Wav.

To show a video in HTML5, this is all you need:Code:

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video>To show a audio in HTML5 is similar to the above code,Just replace

the video tag with audio tag and use an audio format instead of video format mentioned in the code

HTML5 CanvasThe HTML5 canvas element uses JavaScript to draw graphics on a web page

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

A canvas element is added to the HTML5 page.

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript

Code:<canvas id="myCanvas" width="200" height="100"></canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>

A simple Canvas example

HTML5 Web Storage

HTML5 offers two new objects for storing data on the client:

LocalStorage - stores data with no time limit

SessionStorage - stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.

The data is stored in different areas for different websites, and a website can only access data stored by itself.

HTML5 uses JavaScript to store and access the data.

HTML5 Web storage is also called ”Cookies on Steroids”.

The localStorage Object

The localStorage object stores the data with no time limit. This means data is still available when the browser is closed and reopened, and also instantly between tabs and windows.

An example to count the number of times a user has visited a page

Code:

<script type="text/javascript">

if (localStorage.pagecount) {

localStorage.pagecount=Number(localStorage.pagecount) +1;

} else {

localStorage.pagecount=1;

}

document.write("Visits "+ localStorage.pagecount + " time(s).");

</script>

The sessionStorage ObjectThe sessionStorage object stores the data for one session. The data

is deleted when the user closes the browser window.

Data in this storage is accessible to any page from the same site opened in that window.

An similar example to count the number of times a user has visited a page, in the current session.

Code:

<script type="text/javascript">

if (sessionStorage.pagecount) {

sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

} else {

sessionStorage.pagecount=1;

} document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

</script>

HTML5 Form Input Types

HTML5 has several new input types for forms. These new features allow for better input control and validation.

The new input types:

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

HTML5 Form Input Types(Cont.)

Input Type – email

The email type is used for input fields that should contain an e-mail address.

The value of the email field is automatically validated when the form is submitted.

Code:

E-mail: <input type="email" name="user_email" />

Input Type – url

The url type is used for input fields that should contain a URL address.

The value of the url field is automatically validated when the form is submitted.

Code:

Homepage: <input type="url" name="user_url" />

HTML5 Form Input Types(Cont.)

Input Type – number

The number type is used for input fields that should contain a numeric value.

You can also set restrictions on what numbers are accepted.

Code:

Points: <input type="number" name="points" min="1" max="10" />

Opera 10.50’s rendering of <input type=number>.

HTML5 Form Input Types(Cont.)

Input Type - range

The range type is used for input fields that should contain a value from a range of numbers.The range type is displayed as a slider bar.

You can also set restrictions on what numbers are accepted.

Code:

<input type="range" name="points" min="1" max="10" />

Google Chrome’s rendering of <input type=range>.

HTML5 Form Input Types(Cont.)Input Type - search

The search type is used for search fields, like a site search, or Google search.

The search field behaves like a regular text field.

Input Type - color

The color type is used for input fields that should contain a color.

The Opera browser will allow you to select a color from a color picker, Google's Chrome will only allow hexadecimal color values to be submitted:

Code:

Color: <input type="color" name="user_color" />

<input type=color> on the BlackBerry.

HTML5 Form ElementsHTML5 has several new elements and attributes for forms.

The new form elements:

<datalist>

<keygen>

<output>

<output> Element

The <output> element is used for different types of output, like calculations or script output:

Code:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" name="a" value="50" />100

+<input type="number" name="b" value="50" />

=<output name="x" for="a b"></output>

</form>

HTML5 Form Elements(Cont.)

<datalist> Element

The <datalist> element specifies a list of options for an input field.

The list is created with <option> elements inside the <datalist>.

To bind a <datalist> to an input field, let the list attribute of the input field refer to the id of the datalist.

Code:

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3schools.com" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

HTML5 Form Elements(Cont.)

<keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public.

The private key is stored on the client, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

Code:

<form action="demo_form.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

</form>

HTML5 Form Attributes

This covers some of the new attributes for <form> and <input>.

autocomplete Attribute

The autocomplete attribute specifies that the form or input field should have an autocomplete function.

When the user starts to type in an autocomplete field, the browser should display options to fill in the field:

Code:

First name: <input type="text" name="fname" autocomplete=”on”/>

autofocus Attribute

The autofocus attribute specifies that a field should automatically get focus when a page is loaded.

Code:

User name: <input type="text" name="user_name" autofocus="autofocus" />

HTML5 Form Attributes(Cont.)form Attribute

The form attribute specifies one or more forms the input field belongs to.

The form attribute must refer to the id of the form it belongs to:

Code:

<form action="demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" /></form>

Last name: <input type="text" name="lname" form="user_form" />

height and width Attributes

The height and width attributes specifies the height and width of the image used for the input type image.

Code:

<input type="image" src="img_submit.gif" width="24" height="24" />

HTML5 Form Attributes(Cont.)

min, max and step Attributes

The min, max and step attributes are used to specify restrictions for input types containing numbers or dates.

The max attribute specifies the maximum value allowed for the input field.The min attribute specifies the minimum value allowed for the input field.The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).

Code:

Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple Attribute

The multiple attribute specifies that multiple values can be selected for an input field.

Code:

Select images: <input type="file" name="img" multiple="multiple" />

HTML5 Form Attributes(Cont.)novalidate Attribute

The novalidate attribute specifies that the form or input field should not be validated when submitted.

If this attribute is present the form will not validate form input.

placeholder Attribute

The placeholder attribute provides a hint that describes the expected value of an input field.

Code:

<input type="search" name="user_search" placeholder="Search W3Schools" />

required Attribute

The required attribute specifies that an input field must be filled out before submitting.

Code:

Name: <input type="text" name="usr_name" required="required" />

Drag And Drop

By default,all links, text nodes (or selections of), and image elements are draggable. This means that you don’t have to do anything to tell the browser they can be dragged around the page.

Our simple demo will have a drop zone and a couple of images that you can drag into the drop zone. And when you drop them,the image source will appear in the drop zone

An image being Dragged and Dropped.

Drag And Drop(Cont.)

Since there’s nothing to be done to the draggable images, you just need to hook up the drop zone, which requires the following event handlers:

Drag over: Tell the browser this is an element that accepts drop data.

On drop: Once something has been dropped on the element, do something with the dropped data.

Code:

<script>

var drop = document.getElementById(‘drop’);

drop.ondrop = function (event) {

this.innerHTML += ‘<p>’ + event.dataTransfer. getData(‘Text’) + ‘</p>’;

return false;

};

drop.ondragover = function () { return false; };

</script>

GEOLOCATIONThe geolocation API gives us a way to locate the exact position of our visitor.

The geolocation API offers two methods for getting the geo information from your user:

getCurrentPosition is a one-shot method for grabbing the user’s current location.

watchPosition keeps an eye on their position and keeps polling at regular intervals to see if their location has changed. watchPosition mirrors getCurrentPosition’s functionality, but also if the user’s position changes, it will tell your code.

Google Maps detects geolocation support and adds the “locate me” functionality

Conclusion

Despite inconsistent browser implementations of its features, HTML5 is an exciting technology for creating new and powerful browser-based applications.

Unlike previous versions, HTML5 promises better integration of multimedia and other applications inside the core of most Web pages. While HTML5 adoption started off slowly, growing evangelism from a number of leading vendors in the last six months has spurred adoption by developers everywhere.

Thank You

References

Introducing to HTML5 by Bruce Lawson and Remy Sharp.

www.w3schools.com www.codeproject.com To check the compatibility of the browser with

each element of HTML5, you can visit the site: www.html5test.com