HTML5 introduction for beginners

HTML5
web development to the next level

By
Vineeth N K

What is HTML5 ?
HTML5 is a specification that describes some new tags and markup, as well
as some JavaScript APIs.

HTML5 includes the fifth revision of the HTML markup language, CSS3, and
a series of JavaScript APIs. Together, these technologies enable you to create
complex applications that previously could be created only for desktop
platforms.
HTML5 does not belong to a company or a specific browser. It has been
forged by a community of people interested in evolving the web and a
consortium of technological leaders that includes Google, Microsoft, Apple,
Mozilla, Facebook, IBM, HP, Adobe, and many others.

What is HTML5 ?
Evolution of HTML 4.0 and DOM level-2.
Removal or redefinition of presentational markup
language.
Formalized foundation-level APIs
The evolution of browser into a programming platform.

TIMELINE
 HTML 2.0

1995

 Formalized the syntax and many
of the rules that were already
implemented

 HTML 3.2

1997

 Legally ignored by browser
Manufactures who began to
implement their own tags.
 Web Standard Project

1998

 Pushed for std. adoption added
weight to the W3C
recommendations & promoted
standard based browsers

 HTML 4.0

1999

 Stabilized syntax and structure
of HTML becomes the standard for
web authoring.
 Major milestone.

 XHTML 1.0

2000

 Designed to move HTML towards
XML DTDs often caused it to
render as HTML.
 More Structured XML based
approach.
 Strict rules.

2000

 The Growth of the Web
 High bandwidth connections
increase, as does the demand for
multimedia & applications driven
by technologies such as Flash,
AJAX...
 Work on XHTML 2.0 begins.

2004

2004

 Focusing on strictly structural
language.

 The

Rise of HTML5

HTML5 TIMELINE
 2004 : The Rise of HTML5.

 2004 : WHATWG (Web Hypertext Application
Technology Working Group) begins what
will become HTML5.
2007 : W3C charters new working group adopts
WHATWG’s work, renamed HTML5
2009 : W3C does not renew the XHTML 2.0
charter.
2010 : Driven in large part by Apple, Google &
public interest in HTML5
grows.

Microsoft,

WHY DO WE NEED HTML5?
 Backward compatibility.
 Error Handling.
 New Structure And Syntax.
 Multimedia with less reliance on Plug-ins
 Integrated APIs
 Associated APIs

Backward Compatibility
 Any user agent that support HTML5 also support
documents written in previous versions of HTML.
 One of the best reasons for you to embrace
HTML5 today is that it works in most existing
browsers.

ERROR HANDLING
 Previous specifications left error handling up to the
user agents.
 XHTML 2.0 featured draconian error handling.

 Pages would stop rendering if an error was found.
 HTML5 features detailed algorithms for parsing errors.

New Structure And Syntax
 DOCTYPE has been simplified.

PRIOR
DOCTYPES
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

NEW DOCTYPE
HTML 5
<!DOCTYPE html >

 Deprecated Tags


HTML5 has introduced a lot of new elements,
but the specification also deprecates quite a
few common elements

basefont
big
center
font
s
strike
tt
u

 Aside from the presentational elements, support
for frames has been removed.
 Despite the widespread use, frames caused so
many usability and accessibility issues
frame
frameset
noframes

 A few other elements are gone because there are
better options are available.
 acronym gets replaced by abbr.
 applet gets replaced by object.
 dir gets replaced by ul.

 In addition to deprecated elements, there are many
attributes that are no longer valid.
align
link, vlink, alink, and text attributes on the body tag
bgcolor
height and width
scrolling on the iframe element
valign
hspace and vspace
cellpadding, cellspacing, and border on table
 New Structural tags and attributes.

 developers to wrap elements with extra div tags
with IDs such as banner, sidebar, article, and
footer
 As nesting depth of the div tag
increases, more will be the confusion.

 HTML5 specification introduces new tags specifically
designed to divide a page into logical regions.
 <header>
Defines a header region of a page or section.
 <footer>
Defines a footer region of a page or section.
 <nav>
Defines a navigation region of a page or section.
 <section>
Defines a logical region of a page or a grouping of
content.
 <article>
Defines an article or complete piece of content.
 <aside>
Defines secondary or related content.

Custom data attributes
Allows addition of custom attributes to any
elements using the data- pattern. [All browsers
support reading these via JavaScript’s
getAttribute() method.]
<meter>
Describes an amount within a range. [C5, F3.5, S4, O10]
<progress>
Control that shows real-time progress toward
goal. [Unsupported at publication time.]

 NEW FORM ELEMENTS
 Email field [<input type="email">]
Displays a form field for email addresses.
 URL field [<input type="url">]
Displays a form field for URLs.
 Telephone field [<input type="tel">]
Displays a form field for telephone numbers.

 Search field [<input type="search">]
Displays a form field for search keywords.
 Slider (range) [<input type="range">]
Displays a slider control.

Number [<input type="number">]
Displays a form field for numbers, often as a
spinbox.

 Date fields [<input type="date">]
Displays a form field for dates. Supports date,
month, or week.
 Dates with Times [<input type="datetime">]
Displays a form field for dates with times.
Supports datetime, datetime-local, or time.
 Color [<input type="color">]
Displays a field for specifying colors.
 Autofocus support [<input type="text" autofocus>]
Support for placing the focus on a specific
form element.
 Placeholder support [<input type="email"
placeholder="me@example.com">]
Support for displaying placeholder text inside of a form field.
 In-place editing support [<p contenteditable></p>]
Support for in-place editing of content via the browser.

MULTIMEDIA
 You don’t need Flash or Silverlight for video, audio,
and vector graphics anymore.
 Embedding videos
<video src=” controls>
Your browser does not support the video element.
</video>
 Multiple Files & Scripting
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
Your browser does not support the video element.
</video>

 Embedding audio
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg" type="audio/ogg">
<source src="sounds/mp3/drums.mp3" type="audio/mpeg">
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</audio>
 Scalable Vector Graphics
<svg width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>

 The canvas element lets us create vector images
within the HTML document using JavaScript.
<canvas id="myCanvas" width="150" height="150">
</canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);

 Canvas can be used to create simple or complex
shapes or even create graphs and charts without
resorting to server-side libraries, Flash, or other
plugins.

INTEGRATED APIs
 Video and audio API
This provides multimedia plug-in within the browser.
 Inline editing API
Editing of contents in a web documents directly through the
web browser.
 Offline Application API
• Allows Applications to run without internet
connection.
• Content renewed when connection restored.
• Can store 5MB of data.
• Application cache stores the offline details.
• Options in HTML5 to store data.
i. Web SQL Database or IndexedDB.
ii. Web storage (localStorage, sessionStorage)

 History API
Enables Applications to access to the browser
history.
 Web Protocol API
Allows Applications to register themselves to the handlers of url
scheme.
Eg: Mail Applications could register themselves to handle mail
protocols. File upload applications to FTP and so on.
 Drag & Drop API
Allows Application to enable, control and
respond to the dragging and dropping of page
elements.

ASSOSCIATED APIs
 Geolocation API
Geolocation determines a person’s whereabouts
by looking at their computer’s IP address, MAC
address, Wi-Fi hotspot location, or even GPS
coordinates if available.
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat, lon);
}
);

 2D Canvas Drawing API
 Local Storage API
 Web Workers API
Allows you to do things like fire up long-running scripts to handle
computationally intensive tasks, but without blocking the UI or other
scripts to handle user interactions.

 Web Socket API
Creates a stateful connection between a browser and a server.

 Messaging API
Sends messages between windows with content loaded on
different domains.

What is CSS3?
 Cascading Style Sheets (CSS) is a style sheet
language used to describe the presentation semantics
(the look and formatting) of a document written in
markup.
 Visual enhancement like
rounded corners
gradients
shadows.
•

•

•

 Your design can be as simple as a text transformation
to something as rich as full-blown animations with 3D
transformations.

EXPLORING PRIOR VERSIONS
 CSS1
•

•

•

CSS LEVEL 1.
Published in December 1996.
Support for,
Font properties such as typeface and emphasis

Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and
lines of text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements

 CSS2
CSS level 2 specification was developed by the W3C
and published as a Recommendation in May 1998.
•

•

•

•

Absolute, relative, and fixed positioning of
elements
New font properties such as shadows.
The W3C no longer maintains the CSS2 recommendation.

 CSS2.1
•

•

•

•

First Become a Candidate recommendation on 2004,
Later reverted to Working draft on 2005
Returned to Candidate recommendation in 2007 and
updated twice in 2009
Fixes errors in CSS2, removes poorly-supported or
not fully interoperable features and adds alreadyimplemented browser extensions to the specification.
finally published as a W3C Recommendation on 2011

CSS3 Features
 Selectors : For selecting specific elements from

documents for formating.
•

General Sibling Selector : This selector matches
and targets all the siblings of a given element. It
is not necessary however that the elements be
adjacent siblings.
Example:
h1 ~ pre represents a pre element following an h1.

Children Selector : This Selector shows the relationship between two
elements and targets those elements which are children of a particular
element.
•

Example:

body > p
This selector represents a p element that is child of body:

•

Attribute Selector : Unlike CSS 2.1 where one has to
make match on a complete string of an attribute, CSS
offers the flexibility to make matches anywhere within
an attribute, be it beginning or end.
Example:
i.
[attr^=val] –- matches a Document object model element (DOM) with
the attribute attr and a value starting with val

ii.
[attr$=val] –- matches a DOM element with the attribute attr
and a value ending with the suffix val
iii.
[attr*=val] –- matches a DOM element with the attribute attr and
a value containing the substring val

 Border Radius :
Used to create round corner for
boxes without hard code.
Example:
#ex3 {
border-top-left-radius: 1em;

}
#ex3 {
border-top-right-radius: 1em;
}
#ex3 {

border-bottom-right-radius: 1em;
}
#ex3 {
border-bottom-left-radius: 1em;
}

 Border Image :

It allows using an image as a border
for an element. One can set values for Border Image
and border-corner-image.
Example:
.border-image-example {
-webkit-border-image: url(border-image.jpg) 45 20 45 30
repeat;
-moz-border-image: url(border-image.jpg) 45 20 45 30
repeat;
border-image: url(border-image.jpg) 45 20 45 30 repeat;
}
border-image: url(bg-border.jpg) 45 20 45 20 repeat;
}
border-image: url(bg-border.jpg) 45 20 repeat;

 Multiple Background :

This has been made possible and one may
use multiple background images for one element.
Example:

#banner{
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
} Colors and Opacity:

CSS 3 comes with an ability to add
transparency to an element and its color schemes have been
enhanced to add this factor as well.
Example:

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;opacity:1.0;
Opacity 0.8.

 Multi Column layout:
This property allows creating the desired
number of columns by making the required specifications regarding
column width, separator, column gap width, etc.
Example:
Column width:
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

Column count:
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

 BOX Shadow:
Prior to CSS 3, JavaScript was used for creating shadow to an
image but now with BOX Shadow feature, one can add shadow
to any element on the website.
•

Example:

#example1{
box-shadow:10px 10px 5px #888;
}

However it is currently supported by Firefox 3.1+, Safari and
Chrome only.
•

HTML5 introduction for beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5 introduction for beginners

Similar to HTML5 introduction for beginners (20)

Recently uploaded

Recently uploaded (20)

HTML5 introduction for beginners