HTML5web development to the next level
By Vineeth N K
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.
What is HTML5 ?
EXPLORING PRIOR STANDARDS
TIMELINE HTML 2.0
Formalized the syntax and many of the rules that were already implemented
1995
1997
HTML 3.2
Legally ignored by browser Manufactures who began to implement their own tags.
1998
Web Standard Project
Pushed for std. adoption added weight to the W3C recommendations & promoted standard based browsers
HTML 4.0
Stabilized syntax and structure of HTML becomes the standard for web authoring.
Major milestone.
1999
2000
XHTML 1.0
Designed to move HTML towards XML DTDs often caused it to render as HTML.
More Structured XML based approach.
Strict rules.
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.
Focusing on strictly structural language.
2000
2004
2004
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 & Microsoft, public interest in HTML5
grows.
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01
<!DOCTYPE html >
HTML 5
NEW DOCTYPE
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="[email protected]">]
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
Your design can be as simple as a text transformation to something as rich as full-blown animations with 3D transformations.
• rounded corners• gradients• shadows.
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 already- implemented browser extensions to the specification. • finally published as a W3C Recommendation on 2011
CSS3
• CSS3 is divided into several separate documents called "modules".
• Each module adds new capabilities or extends features defined in CSS2, over preserving backward compatibility.
• Work on CSS level 3 started around the time of publication of the original CSS2 recommendation.
• As of November 2011, there are over fifty CSS modules published from the CSS Working Group.
• Became W3C Recommendation in 2011
CSS4:W3C has started drafting CSS4 in Sep 29,2009. However, it is currently not supported by any of the web browsers.
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-example {border-image: url(bg-border.jpg) 45 20 45 20 repeat;} .border-image-example {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.background-color:#30f;color:#fff;width:100%;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:
Example:
#example1{box-shadow:10px 10px 5px #888;
}
• 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.
• However it is currently supported by Firefox 3.1+, Safari and Chrome only.
Recommended
