HTML5 Tutorial


The new features and applications of HTML5 Overview

The new forms

Even with HTML5 forms has interesting features implemented. Ease of use is enhanced by the new functions, although they were available through JavaScript libraries already, But now finally can be used without javascript enabled. These privileges are required for almost all the new features.

number

With a one-form input of type number, is it possible to retrieve numbers from users easier, as well as a range of values, and a minimum distance between the possible choice values ​​without reference to the user with complicated rules to overtax.
Currently, only Opera represent this type. <input type="number" min="18" max="65" step="1">

 

Display in Opera 11.01:html5 number opera
Your current browser:

range

The range element creates a slider with the same functions as the form number.
Currently, only Opera, Safari and Chrome represent this type. <input type="range" min="18" max="65" step="10">

 

Display in Opera 11.01:html5 range opera
Your current browser:

url, telephone und email

The <url> Element is used to enter URLs and is especially recommended on the iPhone, because there will be displayed when entering a special keyboard.
There are also specific entries for phone numbers, Email addresses and search fields. <input type="url">

datetime

The <datetime> Element is used to enter dates. It is particularly, to be read when users input valid, For example, when. Data to be written into a database or order calculations are to be performed.
Currently, only Opera represent this type. <input type="datetime">

 

Display in Opera 11.01:html5 datetime opera
html5 datetime opera
Your current browser:

 

 

Die Geolocation-API

Using the GPS interface, it should now be possible, to determine the position of the user, if it agrees(!) its geo-data release. Here, the x and y coordinate on the 2 dimensional surface of the respective device (Pc,Laptop, Mobile) read about operating system services. Currently, only Firefox, Safari, Opera, Chrome, these data. You are welcome to test the programmed side of me where I am jetzt.de visit and to locate themselves there with your browser.

 

The <time> Element

With the new <time> Element it is now possible to define a search engine readable timestamp for articles or parts of a Web page.
It is foreseeable, that such content will be preferred by search engines, because in the fourth dimension
is enabled for Google and. This tag is especially important for content providers.
<time datetime="2010-07-06T14:18:00Z" pubdate>06.07.2010 um 14:18 Uhr </time>

The <mark> Element

The <mark> Element stands for the user and
particularly important for search engine priorities indicates. Keywords can not only the header but also in the text are marked, to provide more information about the content of a web page.
When the background color is not specified, serves this new HTML tag in developing the content of Web pages by search engines.
<mark style="background-color:yellow;">Element</mark> Element

The <canvas> Element

The <canvas> Element is one of the most interesting, most powerful and most surprising way also on the
implementierte HMTL5 Feature. All popular browsers and even the Internet Explorer Version 6 support this feature.

In principle, it is programmable image-element can be used to create videos and animations, as
it is currently only possible with the Flash format. Since Flash is not supported by the iPhone and also for the development
not purchase an extremely expensive license must, will prevail in the long run canvas element.

The dynamics of this item is possible mintUpdate, that the content can be changed with Javascript pixel accuracy as they wish in 2D, 3D and 4D. Physicists are still working on the 5D.
<canvas&gt </canvas>

Ein Canvas (white), which a rectangular houses Balue. first of all draws not particularly spetakulär, I admit:

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser

A coordinate system, which through the canvas functions moveTo() and lineTo() is generated:

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser

A rotation of the entire system of signs:

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser

A scaling of the sign system. In this case, the x- and y-axis by a factor of 1,5 scaled (increases):

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser

Manipulating images

Of course, images are added in Canvas objects and manipulated. In the example, the image is displayed at a reduced:

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser

Here is a picture cut out of the canvas pixel and displayed at the bottom right:

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser

Gradient

It can be the simplest means without Bildbearbeitunsgprogramme, wie Photoshop oder Gimp, Create a complicated Farberverlauf:

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser

It can also be produced circular curves, However, it is like in different browsers usually produce different results:

html5 canavas operaYour browser can not display this video unfortunately.
Display in Opera 11.01Your browser
html5 canavas operahtml5 canavas opera
Representation in Chrome 8.1Representation in Firefox 3.6.1
html5 canavas operahtml5 canavas opera
Representation in Safari 4.1Presentation in Internet Explorer 8.1

According to the book: