Html 5

CONTENTS
 Introduction
 New Features
 New Elements
 Comparison With Older Versions
 Getting Started With HTML5
 Structure of a Web Page
 Forms
 Audio and Video
 HTML5 Canvas
 Introduction to Data Storage
 Introduction to Geo location

INTRODUCTION
• HTML 5 is the new version of
o HyperText Markup Language (HTML): text with tags for content
o JavaScript: scripting/programming language for interactivity, dynamic presentation
o Cascading Style Sheets: formatting
• Many new features, for support of semantic web, dynamic/interactive
websites
• CAUTION: definition not official.
• Browser support evolving.

• Successor of HTML 4.01 and XHTML 1.1
• It comes with new tags, features and APIs
• 84% of Developers Plan to Adopt Key HTML5 Features
• The key to understanding HTML5 is that it is not one, but a group of
technologies. Within HTML5, developers have a tremendous amount of
choice regarding what they use and what they don’t use
• The power of HTML5 being ready for prime-time can be seen in
Microsoft’s choice to utilize it in Windows 8

NEW FEATURES
• Semantic elements: header, footer, section, article, others.
• canvas for drawing
 paths of rectangles, arcs, lines, images
 mouse events
• localStorage (variation of cookies)
• audio & video elements
 including drawing video on canvas

• New structural elements (<header>, <footer>, <nav> and more)
• Forms 2.0 and client-side validation
• Native browser support for audio and video (<video>, <audio>)
• Canvas API and SVG
• Web storage
• Offline applications
• Geolocation
• Drag & Drop
• Web Workers
• New communications API (Server Sent Events, Web Sockets, …)

NEW ELEMENTS
An HTML page first starts with the DOCTYPE declaration
<section> <article> <aside> <hgroup>
<header> <audio> <time> <command>
<footer> <source> <ruby> <details>
<nav> <embed> <rt> <summary>
<figure> <mark> <rp> <datalist>
<figcaption> <progress> <wbr> <keygen>
<video> <meter> <canvas> <output>

• HTML5 also update some of the previous existing elements to better reflect
how they are used on the Web or to make them more useful such as:
 The <a> element can now also contain flow content instead of just content mouse
events
 The <hr> element is now representing a paragraph-level thematic break
 The <cite> element only represent the title of a work
 The <strong> element is representing importance rather than strong emphasis

COMPARISON WITH OLDER VERSIONS
HTML HTML5
• DOCTYPE is much longer as HTML4 is based on
SGML-based.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd”>
• DOCTYPE is required to enable standards
mode for HTML documents.
<!DOCTYPE html>
• Audio and Video are not part of HTML4
specification.
• Audio and Videos are integral part of
HTML5 specifications
e.g. <audio> and<video> tags.
• Vector Graphics is possible with the help of
technologies such as VML, Silverlight etc
• Vector graphics is integral part of HTML5
e.g. SVG and canvas
• Works with all old browsers • Most of modern browser have started
supporting HTML5 specification e.g.
Firefox, Mozilla, Opera, Chrome, Safari etc.

• It is almost impossible to get true
GeoLocation of user browsing any website
especially if it comes to mobile devices.
• JS GeoLocation API in HTML5 helps identify
location of user browsing any website
(provided user allows it)
• Browser cache can be used as temporary
storage.
• Application Cache, Web SQL database and
Web storage is available as client side storage.
Accessible using JavaScript interface in
HTML5 compliant browsers.
• Web Sockets are not available. Generally used
mechanisms are long polling and streaming.
• Full duplex communication channels can be
established with Server using Web Sockets.
Accessible using JavaScript interface in
HTML5 compliant browsers.
• Does not allow JavaScript to run in browser.
JS runs in same thread as browser interface.
• Allows JavaScript to run in background. This
is possible due to JS Web worker API in
HTML5

GETTING STARTED WITH HTML5
• Any Text editor such as Notepad++, Editplus,
Textmate, Dream weaver
• Modern browsers such as Firefox 3.5 +, IE9, chrome,
safari

STRUCTURE OF WEB PAGE
• New and Updated HTML5 Elements
• First HTML5 webpage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
That’s all I need to create my first HTML5 page
</body>
</html>

• New Semantic Elements
<nav>: Represents a major navigation block. It groups links to other pages or to parts
of the current page.
<nav> does not have to be used in every place you can find links. For instance, footers
often contains links to terms of service, copyright page and such, the <footer> element
would be sufficient in that case
<nav>
<ul>
<li><a href=“/”>Home</a></li>
<li><a href=“/events”>Current events</a></li >
<li><a href=“/Contact”>Contact us</a></li >
</ul>
</nav>

<header> tag specifies a header for a document or section.
<article> The web today contains a ocean of news articles and blog entries. That gives W3C a good reason
to define an element for article instead of <div class="article">.
We should use article for content that we think it can be distributable. Just like news or blog entry
can we can share in RSS feed
"article" element can be nested in another "article" element.
An article element doesn't just mean article content. You can have header and footer element in an
article. In fact, it is very common to have header as each article should have a title.
<aside> The "aside" element is a section that somehow related to main content, but it can be separate from
that content
<footer> Similarly to "header" element, "footer" element is often referred to the footer of a web page. Well,
most of the time, footer can be used as what we thought.
Please don't think you can only have one footer per web document, you can have a footer in every
section, or every article.

<progress> The new "progress" element appears to be very similar to the "meter" element. It is created to
indicate progress of a specific task.
<meter> "Meter" is a new element in HTML5 which represenet value of a known range as a gauge. The
keyword here is "known range". That means, you are only allowed to use it when you are clearly
aware of its minimum value and maximum value.
<mark> The mark <mark> element represents a run of text in one document marked or highlighted for
reference purposes, due to its relevance in another context.
Basically, it is used to bring the reader's attention to a part of the text that might not have been
<figure> The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent
of the main flow, and if removed it should not affect the flow of the document

FORMS
HTML5 web forms have introduced new form elements, input types,
attributes, and other features. Many of these features we’ve been using in our
interfaces for years: form validation, combo boxes, placeholder text, and the
like. The difference is that where before we had to resort to JavaScript to
create these behaviors, they’re now available directly in the browser; all you
need to do is set an attribute in your markup to make them available.
• HTML5 Form Attributes
• HTML5 Input Types
• HTML5 Form Elements

• HTML5 FORM ATTRIBUTES
 <form> / <input> autocomplete Attribute
The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off. When autocomplete is on, the browser automatically complete
values based on values that the user has entered before.
Example: ../forms/autocomplete.html
 <input> autofocus Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when
the page loads. Only one form element can have autofocus in a given page.
Example: ../forms/autofocus.html

 <input> formaction Attribute
The formaction attribute specifies the URL of a file that will process the input control when
the form is submitted.The formaction attribute overrides the action attribute of the <form>
element.The formaction attribute is used with type="submit" and type="image"
Example: ../forms/formaction.html
 <input> formmethod Attribute
The formmethod attribute defines the HTTP method for sending form-data to the action
URL.The formmethod attribute overrides the method attribute of the <form> element.
The formmethod attribute can be used with type="submit" and type="image".
Example: ../forms/formmethod.html

 <input> formnovalidate Attribute
The novalidate attribute is a boolean attribute. When present, it specifies that the <input>
element should not be validated when submitted. The formnovalidate attribute overrides the
novalidate attribute of the <form> element.
Example: ../forms/formnovalidate.html
 <input> formtarget Attribute
When present, it specifies that the <input> element should not be validated when submitted.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
Note: The formnovalidate attribute can be used with type="submit".
Example: ../forms/formtarget.html

 <input> list Attribute
Datalists are currently only supported in Firefox and Opera, but they are very cool.
They fulfill a common requirement: a text field with a set of predefined autocomplete
options.
Example: ../forms/datalist.html
 <input> required Attribute
The Boolean required attribute tells the browser to only submit the form if the field
in question is filled out correctly. Obviously, this means that the field can’t be left
empty, but it also means that, depending on other attributes or the field’s type, only
certain types of values will be accepted.
The required attribute can be set on any input type except button, range, color,
and hidden, all of which generally have a default value.
Example: ../forms/required.html

 <input> placeholder Attribute
The placeholder attribute allows a short hint to be displayed inside the form element,
space permitting, telling the user what data should be entered in that field.
The placeholder text disappears when the field gains focus, and reappears on blur
if no data was entered.
Example: ../forms/placeholder.html
 <input> readonly Attribute
The readonly attribute is similar to the disabled attribute: it makes it impossible
for the user to edit the form field. Unlike disabled, however, the field can receive
focus, and its value is submitted with the form.

 <input> multiple Attribute
The multiple attribute, if present, indicates that multiple values can be entered in
a form control. While it has been available in previous versions of HTML, it only applied to
the select element. In HTML5, it can be added to email and file input types as well.
Select images: <input type="file" name="img" multiple="multiple" />
 <input> formtarget Attribute
When present, it specifies that the <input> element should not be validated when submitted.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
Example: ../forms/formtarget.html

• INPUT TYPES
 search  week
 email  time
 ur  datetime-local
 tel  number
 datetime  range
 date  color
 month

 <input type> search
The search type is used for search fields
Search type is only supported in Chrome, Opera, and
safari.
 <input type> email
The email type (type="email") is, unsurprisingly, used for specifying one or more email
addresses.
It supports the Boolean multiple attribute, allowing for multiple, comma-separated email
addresses.
Search type is only supported in Chrome, Opera, firefox and safari.
E-mail: <input type="email" name="usermail" />

 <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.
Search type is only supported in Chrome, Opera, firefox
Add your homepage: <input type="url" name="homepage" />
 <input type> tel
For telephone numbers, use the tel input type (type="tel"). Unlike the url and email types,
the tel type doesn’t enforce a particular syntax or pattern. Letters and numbers—indeed, any
characters other than new lines or carriage returns—are valid.
Telephone: <input type="tel" name="usrtel" />

 <input type> range
The range input type (type="range") displays a slider control in browsers that
support it (currently Opera and WebKit). As with the number type, it allows the
min, max, and step attributes.
Define a control for entering a number whose exact value is not important
<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>
<input type="range" min="1" max="10" name="rating" type="range">
 <input type> color
The color input type (type="color") provides the user with a color picker
Supported only in Opera
Select your favorite color: <input type="color" name="favcolor" />

• HTML5 FORM ELEMENTS
 <input type> keygen
The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.When the form is
submitted, two keys are generated, one private and one public.
The private key is stored locally, 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.
 <input type> output
The <output> element represents the result of a calculation (like one performed by a
script).

HTML 5 AUDIO & VIDEO
 <audio>
Until now, there has not been a standard for playing audio files on a web page. Today,
most audio files are played through a plug-in (like flash). However, different browsers
may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed an audio
file on a web page: the <audio> element.
Example: ../audioVideo/audio.html
Browser support :: IE9,FireFox,Opera,Chrome, Safari

 <video>
Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers
may have different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on
a web page: the <video> element.
Browser support :: IE9,FireFox,Opera,Chrome, Safari

CANVAS
With HTML5’s Canvas API, we’re no longer limited to drawing rectangles on our sites.
We can draw anything we can imagine, all through JavaScript. This can improve
the performance of our websites by avoiding the need to download images off the
network.With canvas, we can draw shapes and lines, arcs and text, gradients and patterns.
In addition, canvas gives us the power to manipulate pixels in images and even video.
The Canvas 2D Context spec is supported in:
■ Safari 2.0+ ■ Chrome 3.0+ ■ Firefox 3.0+ ■ Internet Explorer 9.0+
■ Opera 10.0+ ■ iOS (Mobile Safari) 1.0+ ■ Android 1.0+

 Creating a canvas Element
The first step to using canvas is to add a canvas element to the page
<canvas id=“mycanvas”>sorry!!!</canvas>
Onload of the page we triggering draw(); method
 Drawing a canvas element
We will add the function to our script elemenr. The first step is to grab hold of the canvas
element on our page:
<script>
..
function draw( ) {
var canvas = document.getElementById(“myCanvas”);
</script>

 Filling brush with color
<script>
Function draw() {
var canvas=document.getElementById(“mycanvas”);
var context=canvas.getContext(“2d”);
context.strokeStyle =“red”;
context.fillStyle=“blue”
context.fillRect=(10,10,100,100);
context.strokeRect(10,10,100,100);
}
</script>

 Create circle using canvas
<script type=“text/javascript”>
Function draw() {
var canvas=document.getElementById(“mycanvas”);
var context=canvas.getContext(“2d”);
context.fillStyle=“blue”
context.beginPath();
context.arc=(70,18,15,0,Math.PI*2,true);
context.closePath();
context.fill();
}
</script>

GEOLOCATION
The first new API we’ll cover is geolocation. Geolocation allows your visitors to share
their current location.
Depending on how they’re visiting your site, their location may be determined by any of
the following:
■ IP address ■ wireless network connection ■ cell tower■ GPS hardware on the device
Privacy Concerns
Not everyone will want to share their location with you, as there are privacy concerns
inherent to this information. Thus, your visitors must opt in to share their location.
Nothing will be passed along to your site or web application unless the user agrees.
The decision is made via a prompt at the top of the browser. Figure 10.1 shows what
this prompt looks like in Chrome.

 Using geolocation
With geolocation, you can determine the user’s current position. You can also be notified of
changes to their position, which could be used, for example, in a web application that
provided real-time driving directions.
Geolocation: methods
These different tasks are controlled through the three methods currently available
in the Geolocation API:
■ getCurrentPosition
■ watchPosition
■ clearPosition

WEB STORAGE
The Web Storage API defines a standard for how we can save simple data locally on a
user’s computer or device. Before the emergence of the Web Storage standard, web
developers often stored user information in cookies, or by using plugins. With Web
Storage, we now have a standardized definition for how to store up to 5MB of simple data
created by our websites or web applications. Better still, Web Storage already works in
Internet Explorer 8.0!
Web Storage is a great complement to Offline Web Applications, because you need
somewhere to store all that user data while you’re working offline, andWeb Storage
provides it.

 Two kinds of storage
Session Storage
Session storage lets us keep track of data specific to one window or tab. It allows us to
isolate information in each window. Even if the user is visiting the same site in two
windows, each window will have its own individual session storage object and thus have
separate, distinct data.
Session storage is not persistent—it only lasts for the duration of a user’s session
on a specific site (in other words, for the time that a browser window or tab is open
and viewing that site).
Local Storage
Unlike session storage, local storage allows us to save persistent data to the user’s computer,
via the browser. When a user revisits a site at a later date, any data saved to local storage can
be retrieved.

 Local storage v/s Cookies
Local storage can at first glance seem to play a similar role to HTTP cookies, but there
are a few key differences. First of all, cookies are intended to be read on the server side,
whereas local storage is only available on the client side.
If you need your server-side code to react differently based on some saved values,
cookies are the way to go. Yet, cookies are sent along with each HTTP request to your
server and this can result in significant overhead in terms of bandwidth.
Local storage, on the other hand, just sits on the user’s hard drive waiting to be read, so it
costs nothing to use.
In addition, we have significantly more size to store things using local storage. With
cookies, we could only store 4KB of information in total.
With local storage, the maximum is 5MB.

 getItem and setItem methods
We store a key/value pair in either local or session storage by calling setItem, and
we retrieve the value from a key by calling getItem. If we want to store the data in or retrieve
it from session storage, we simply call setItem or getItem on the sessionStorage global
object.
If we want to use local storage instead, we’d call setItem or getItem on the localStorage
global object.
For example, if we’d like to save the value "6“ under the key "size", we’d call setItem
like this:
localStorage.setItem("size", "6");
To retrieve the value we stored to the "size" key, we’d use the getItem method, specifying
only the key:
var size = localStorage.getItem("size");
ShortCut
var size = localStorage["size"];
Convert stored data using var size = parseInt(localStorage.getItem("size"));

Remember me functionality using local storage
We can use Web Storage to add a “Remember me on this computer” checkbox to
our registration page. This way, once the user has registered, any other forms they
may need to fill out on the site in the future would already have this information.
onready 2 methods are called
1. Loading stored details
2. On checkbox check trigger save data method

 viewing localstorage values with web inspector
We can use the Safari or ChromeWeb Inspector to look at, or even change, the values
of our local storage. In Safari, we can view the stored data under the Storage tab, as
shown in Figure

Html 5

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Html 5

Similaire à Html 5 (20)

Dernier

Dernier (20)

Html 5