Html5 tutorial for beginners

HTML5
Gaurav Jaiswal
Singsys Pte. Ltd.

What is HTML5?
HTML5 is the new standard for HTML.
The previous version of HTML was – HTML 4.01, came in 1999.
HTML5 is designed to deliver almost everything you want to do
online without requiring additional plugins. It does everything
from animation to apps, music to movies, and can also be used
to build complicated applications that run in your browser.
HTML5 is also cross-platform (it does not care whether you are
using a tablet or a smartphone, a notebook, notebook or a
Smart TV).

Differences Between
HTML4 and HTML5

Differences Between HTML4 &
HTML5
1.
2.
3.
4.
5.
6.
7.
8.
9.

HTML5 is a work in progress
Simplified Syntax
The New <canvas> Element for 2D drawings
New content-specific elements, like
<article>, <header>, <footer>, <nav>, <section>
New <menu> and <figure> Elements
New <audio> and <video> Elements
New form controls, like
calendar, date, time, email, url, search
No More <frame>, <center>, <big>, and <b>, <font>
Support for local storage

Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers have full
HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet
Explorer) continue to add new HTML5 features to their latest
versions.

The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype> declaration, and it is very
simple:
<!DOCTYPE html>

Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of
required tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

The New <canvas> Element
The <canvas> element is used to draw graphics, on the fly, via
scripting (usually JavaScript).

New Media Elements
Tag

Description

<audio>

Defines sound content

<video>

Defines a video or movie

<source>

Defines multiple media resources for <video> and <audio>

<embed>

Defines a container for an external application or
interactive content (a plug-in)

<track>

Defines text tracks for <video> and <audio>

New Form Elements
Tag

Description

<datalist>

Specifies a list of pre-defined option for input controls

<keygen>

Defines a key-pair generator field (for forms)

<output>

Defines the result of a calculation

New Semantic/Structural
Elements
Tag

Description

<article>

Defines an article

<aside>

Defines content aside from the page
content

<bdi>

Isolates a part of text that might be
formatted in a different direction from
other text outside it

<command>

Defines a command button that a user
can invoke

<details>

Defines additional details that the user
can view or hide

<dialog>

Defines a dialog box or window

<summary>

Defines a visible heading for a
<details> element

Elements
Tag

Description

<figure>

Specifies self-contained content, like
illustrations, diagrams, photos, code
listings, etc.

<figcaption>

Defines a caption for a <figure>
element

<footer>

Defines a footer for a document or
section

<header>

Defines a header for a document or
section

<mark>

Defines marked/highlighted text

<meter>

Defines a scalar measurement within a
known range (a gauge)

<nav>

Defines navigation links

Elements
Tag

Description

<progress>

Represents the progress of a task

<ruby>

Defines a ruby annotation (for East
Asian typography)

<rt>

Defines an explanation/pronunciation
of characters (for East Asian
typography)

<rp>

Defines what to show in browsers that
do not support ruby annotations

<section>

Defines a section in a document

<time>

Defines a date/time

<wbr>

Defines a possible line-break

Removed Elements
The following HTML 4.01 elements are removed from HTML5:
 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>

HTML5 Canvas
The HTML5 <canvas> element is used to draw graphics, on the
fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You
must use a script to actually draw the graphics.
Canvas has several methods for drawing
paths, boxes, circles, text, and adding images.

HTML5 Inline SVG
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or
resized
Every element and every attribute in SVG files can be
animated
SVG is a W3C recommendation

SVG Advantages
Advantages of using SVG over other image formats (like JPEG
and GIF) are:
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and
compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed
without degradation)

Difference Between SVG &
Canvas
Canvas

SVG

Resolution dependent

Resolution independent

No support for event handlers

Support for event handlers

Poor text rendering capabilities

Best suited for applications with large
rendering areas (Google Maps)

You can save the resulting image as
.png or .jpg

Slow rendering if complex (anything
that uses the DOM a lot will be slow)

Well suited for graphic-intensive
games

Not suited for game applications

HTML5 Geolocation
The HTML5 Geolocation API is used to get the geographical
position of a user.
Since this can compromise user privacy, the position is not
available unless the user approves it.

Information you get from
Geolocation API
Property

Description

coords.latitude

The latitude as a decimal number

coords.longitude

The longitude as a decimal number

coords.accuracy

The accuracy of position

coords.altitude

The altitude in meters above the mean
sea level

coords.altitudeAccuracy

The altitude accuracy of position

coords.heading

The heading as degrees clockwise
from North

coords.speed

The speed in meters per second

timestamp

The date/time of the response

HTML5 Video
Many modern websites show videos. HTML5 provides a
standard for showing them.

Video Formats and Browser
Support
Browser

MP4

WebM

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

NO
Update: Firefox 21
running on
Windows 7,
YES
Windows 8,
Windows Vista,
and Android now
supports MP4

YES

Safari

YES

NO

NO

Opera

NO

YES

YES

HTML5 Audio
HTML5 provides a standard for playing audio files.

Audio Formats and Browser
Support
Browser

MP3

Wav

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

NO
Update: Firefox 21
running on
Windows 7,
YES
Windows 8,
Windows Vista,
and Android now
supports MP3

YES

Safari

YES

YES

NO

Opera

NO

YES

YES

HTML5 Input Types
HTML5 has several new input types for forms. These new features
allow better input control and validation.
 color
 Date
 datetime
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

HTML5 Form Elements
HTML5 has the following new form elements:
<datalist>
<keygen>
<output>

HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.
The <datalist> element is used to provide an "autocomplete"
feature on <input> elements. Users will see a drop-down list of
pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with
a <datalist> element.

HTML5 <keygen> Element
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.

HTML5 <output> Element
The <output> element represents the result of a calculation (like
one performed by a script).

HTML5 Semantic Elements
A semantic element clearly describes its meaning to both the
browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells
nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> Clearly defines its content.

HTML5 Semantic Elements
HTML5 offers new semantic elements to clearly define
different parts of a web page:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 Web Storage
With HTML5, web pages can store data locally within the
user's browser.
Earlier, this was done with cookies. However, Web Storage is
more secure and faster. The data is not included with every
server request, but used ONLY when asked for. It is also
possible to store large amounts of data, without affecting the
website's performance.
The data is stored in key/value pairs, and a web page can only
access data stored by itself.

HTML5 Web Storage
There are two new objects for storing data on the client:
 localStorage - stores data with no expiration date
 sessionStorage - stores data for one session

The sessionStorage object is equal to the localStorage
object, except that it stores the data for only one session. The
data is deleted when the user closes the browser window.

HTML5 Application Cache
HTML5 introduces application cache, which means that a web
application is cached, and accessible without an internet
connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're
offline
Speed - cached resources load faster
Reduced server load - the browser will only download
updated/changed resources from the server

HTML5 Cache Manifest
Example
The example below shows an HTML document with a cache
manifest (for offline browsing):
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>
</html>

Cache Manifest Basics
To enable application cache, include the manifest attribute in
the document's <html> tag.
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Every page with the manifest attribute specified will be cached
when the user visits it. If the manifest attribute is not specified,
the page will not be cached (unless the page is specified directly
in the manifest file).
The recommended file extension for manifest files is:
".appcache”

The Manifest File
The manifest file is a simple text file, which tells the browser
what to cache (and what to never cache).
The manifest file has three sections:
CACHE MANIFEST - Files listed under this header will be
cached after they are downloaded for the first time
NETWORK - Files listed under this header require a connection
to the server, and will never be cached
FALLBACK - Files listed under this header specifies fallback
pages if a page is inaccessible

CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
The manifest file above lists three resources: a CSS file, a GIF
image, and a JavaScript file. When the manifest file is loaded,
the browser will download the three files from the root
directory of the web site. Then, whenever the user is not
connected to the internet, the resources will still be available.

NETWORK
The NETWORK section below specifies that the file "login.asp"
should never be cached, and will not be available offline.
NETWORK:
login.asp
An asterisk can be used to indicate that all other resources/files
require an internet connection:
NETWORK:
*

FALLBACK
The FALLBACK section below specifies that "offline.html" will be
served in place of all files in the /html/ catalog, in case an
internet connection cannot be established:
FALLBACK:
/html/ /offline.html

Updating the Cache
Once an application is cached, it remains cached until one of the
following happens:
The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically updated

Html5 tutorial for beginners

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to Html5 tutorial for beginners

Similar to Html5 tutorial for beginners (20)

More from Singsys Pte Ltd

More from Singsys Pte Ltd (20)

Recently uploaded

Recently uploaded (20)

Html5 tutorial for beginners

Editor's Notes