HTML 5

•History of HTML
•What is HTML5?
•MIME types
•Detection
•Video
•Audio
•Canvas
•Web storage
•Geolocation
•forms
•Elements

History of HTML
HTML first published1991
2012
2002
-2009
2000
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 2.0
HTML5
1995
1997
1999
HTML5 is much more tolerant and can handle
markup from all the prior versions.
Though HTML5 was published officially in 2012, it has
been in development since 2004.
After HTML 4.01 was released, focus shifted to
XHTML and its stricter standards.
XHTML 2.0 had even stricter standards than 1.0,
rejecting web pages that did not comply. It fell
out of favor gradually and was abandoned
completely in 2009.

What is HTML5?
• HTML5 is the newest version of HTML, only recently gaining
• partial support by the makers of web browsers.
• It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
• It adds a diverse set of new tools for the web developer to
use.
• It is still a work in progress. No browsers have full HTML5
support. It will be many years – perhaps not until 2018 or
later - before being fully defined and supported.

• New Areas of HTML5 vs HTML 4.01
• New Semantic tags
• header, footer, section…etc…
• New Form tags
• date, range, email…etc…
• New APIs
• Canvas, Web Storage, Drag and Drop,
Full screen…etc…
• Native support of SVG inline

MIME types
Every time your web browser requests a page,
the web server sends “headers” before it sends
the actual page mark-up. Headers are important,
because they tell your browser how to interpret
the page mark-up that follows.
MIME = Multipurpose Internet Mail Extensions

HTML5: MIME types
The most important header is
called Content-Type, and it looks
like this:
Content-Type: text/html
“text/html” is called the “content
type” or “MIME type” of the page.

MIME types
This header is the only thing that determines
what a particular resource truly is, and therefore
how it should be rendered. Images have their own
MIME types (image/jpeg for JPEG images,
image/png for PNG images, and so on). JavaScript
files have their own MIME type. CSS stylesheets
have their own MIME type. Everything has its own
MIME type. The web runs on MIME types.

Detection
When your browser renders a web page, it
constructs a Document Object Model, a collection
of objects that represent the HTML elements on
the page. Every element is represented in the
DOM by a different object.
In browsers that support HTML5 features, certain
objects will have unique properties. A quick peek
at the DOM will tell you which features are
supported.

HTML5: Detection
Modernizr is an open source, MIT-licensed
JavaScript library that detects support for many
HTML5 & CSS3 features. To use it, include the
following <script> element at the top of your
page...

HTML5: Detection
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 sure is fun</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

HTML5: What's New
The internet has changed a lot since HTML 4.01 became a
standard in 1999.
Today, some elements in HTML 4.01 are obsolete, never
used, or not used the way they were intended to be.
These elements are deleted or re-written in HTML5.
HTML5 also includes new elements for better structure,
drawing, media content, form handling.

HTML5: Video
Until now, there hasn't been a standard for
showing video on a web page.
Today, most videos are shown through a plugin
(like Flash). However, not all browsers have the
same plugins.
HTML5 specifies a standard way to include video
with the video element.

HTML5: Video
Currently, there are 3 supported video formats for
the video element:

HTML5: Video
<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240"
controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>

HTML5: Audio
Until now, there has never been a standard for playing
audio on a web page.
Today, most audio is played through a plugin (like Flash).
However, not all browsers have the same plugins.
HTML5 specifies a standard way to include audio, with
the audio element. The audio element can play sound
files, or an audio stream.

HTML5: Audio
Currently, there are 3 supported formats for the
audio element:

HTML5: Audio
<!DOCTYPE HTML>
<html>
<body>
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>

HTML5: Audio
The last example uses an Ogg file, and will work in
Firefox, Opera and Chrome.
To make the audio work in Safari, the audio file
must be of type MP3 or Wav.
The audio element allows multiple source
elements. Source elements can link to different
audio files. The browser will use the first
recognized format.

HTML5: Canvas
The 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.

HTML5: Canvas
Adding a canvas element to the HTML5 page.
Specify the id, width, height of the element:
<canvas id="myCanvas" width="200"
height="100"></canvas>

HTML5: Canvas
The canvas element has no drawing abilities of its own.
All drawing must be done inside a JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

Web storage
Introduction
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.

Web storage
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"));

Local Storage
• Beyond cookies- local storage
– Manipulated by JavaScript
– Persistent
– 5MB storage per “origin”
– Secure (no communication out of the browser)
• Session storage
– Lasts as long as the browser is open
– Each page and tab is a new session

Local Storage
• Web storage
• window.localStorage[‘value’] = ‘Save this!’;
• Session storage
• sessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’);
• alert(“Hello ” + sessionStorage.fullname);
• Database storage
• var database = openDatabase(“Database Name”, “Database Version”);
• database.executeSql(“SELECT * FROM test”, function(result1) {
• …
• });

Geolocation
Introducton
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 shows what
this prompt looks like in Chrome.

Geolocation
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

Geolocation
Using geolocation
The example below is a simple Geolocation example returning the latitude and longitude of the user's position:
 Check if Geolocation is supported
 If supported, run the getCurrentPosition() method. If not, display a message to the user
 If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in
the parameter ( showPosition )
 The showPosition() function gets the displays the Latitude and Longitude


Geolocation
Using geolocation
Displaying results in a MAP
Example: geolocation/map.html

HTML5: Input types
HTML5 has several new input types for forms.
> email
> url
> number
> range
> date pickers (date, month, week, time,
datetime, datetime-local)
> search
> color

HTML5: Input - e-mail
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.
E-mail: <input type="email" name="user_email" />
Tip: Safari on the iPhone recognizes the email input
type, and changes the on-screen keyboard to match
it (adds @ and .com options).

HTML5: Input - 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.
Homepage: <input type="url" name="user_url" />
Tip: Safari on the iPhone recognizes the url input
type, and changes the on-screen keyboard to match
it (adds .com option).

HTML5: Input – date pickers
HTML5 has several new input types for selecting
date and time:
> date - Selects date, month and year
> month - Selects month and year
> week - Selects week and year
> time - Selects time (hour and minute)
> datetime - Selects time, date, month and year
> datetime-local - Selects time, date, month and
year (local time)

HTML5: Input - form
HTML5 has several new elements and attributes for forms.
> datalist
> keygen
> output

HTML5: Form elements
The datalist element specifies a list of options for an
input field. The list is created with option elements
inside the datalist.
The purpose of the keygen element is to provide a
secure way to authenticate users.
The output element is used for different types of
output, like calculations or script output:

New attributes
autofocus: – It provides a declarative way to focus a form control when a page
is loaded – Previously, a developer had to write JavaScript that triggered the
control’s focus() method onload
There should be only one such input field on a page
•placeholder: – It places text in an input field as a hint for the user, removing the
text when the user focuses on the field, and restoring the text when focus
leaves the field
•required: – Browsers will not allow the user to submit the form if required fields
are empty and report an error
• pattern: – It allows you to specify a custom regular expression that the input
must match

HTML: DOCTYPE
Previous versions of HTML defined a lot of
doctypes, and choosing the right one could be
tricky. In HTML5, there is only one doctype:
<!DOCTYPE html>

Structure of Web page
3.2. 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 Elements in HTML5
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<nav>
<progress>
<section>
<source>
<svg>
<time>
<video>
These are just some of the new elements introduced in HTML5. We will be
exploring each of these during this course.
<article>
<aside>
<audio>
<canvas>
<datalist>
<figure>

New and Updated HTML5 Elements
HTML5 introduces 28 new elements:
<section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <figu
re>, <figcaption>, <video>, <audio>, <source>, <embed>, <mark>,<progr
ess>, <meter>, <time>, <ruby>, <rt>, <rp>,<wbr>, <canvas>, <command>
, <details>,<summary>, <datalist>, <keygen> and <output>
An HTML page first starts with the DOCTYPE declaration
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 phrasing
content
• 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 now representing importance rather than strong
emphasis

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

<Header>: tag specifies a header for a document or section.

However, we mustn't think that "header" is only for masthead of a website. "header" can be use as a heading
of an blog entry or news article as every article has its title and published date and time

<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 andfooter 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.
The progress can be either determinate OR interderminate. Which means,
you can use "progress" element to indicate a progress that you do not even
know how much more work is to be done yet.
Progress of Task A : <progress value="60" max="100">60%</progress>

<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.
One example is score of rating. I would rate this movie <meter min="0"
max="10" value="8">8 of 10</meter>.

<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

HTML 5

Recommended

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to HTML 5 (20)

Recently uploaded (20)

HTML 5