Top Banner
HTML5 the whole new era of web development Nitish K. Sharma (@Nitish_KSharma Microsoft Certified Specialist fo Programming in HTML5 with JavaScript and CSS
22
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Html5

HTML5the whole new era of web development

Nitish K. Sharma (@Nitish_KSharma)Microsoft Certified Specialist for

Programming in HTML5 with JavaScript and CSS3

Page 2: Html5

Contents What is HTML What is XHTML HTML5 A brief history HTML5 - New Features Minimum HTML5 Document Browser Support for HTML5 Standardization process HTML5 development timeline Main features of HTML5 HTML5 in mobile devices

Page 3: Html5

What is HTML?

HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.

HTML was proposed by Tim Berners-Lee at CERN in 1989. It was first shown as HTML in late 1990. It was made publicly available in late 1991 through a document “HTML

Tags” by CERN.

The classic HTML logo

HTML was proposed by “Tim Berners-Lee”

Page 4: Html5

What is XHTML?

XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.

While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML.

XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001. XHTML5 is undergoing development as of September 2009, as part of the HTML5 specification.

Page 5: Html5

HTML5

HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The web has

changed a lot since then. HTML5 is still a work in progress. However, the major browsers support many

of the new HTML5 elements and APIs. It is the fifth revision of the HTML standard and, as of December 2012, is a

W3C Candidate Recommendation. Its core aims have been to improve the language with support for the latest

multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.).

HTML5 is also intended for “Cross-platform” programming.

Page 6: Html5

A brief history

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:•New features should be based on HTML, CSS, DOM, and JavaScript•Reduce the need for external plugins (like Flash)•Better error handling•More markup to replace scripting•HTML5 should be device independent•The development process should be visible to the public

Page 7: Html5

HTML5 - New Features

Some of the most interesting new features in HTML5:•The <canvas> element for 2D drawing•The <video> and <audio> elements for media playback•Support for local storage•New content-specific elements, like <article>, <footer>,

<header>, <nav>, <section>•New form controls, like calendar, date, time, email, url, search

Page 8: Html5

Minimum HTML5 Document

<!DOCTYPE html>< html>< head>< title>Title of the document</title>< /head>

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

< /html>

Page 9: Html5

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.

According to a report released on 30 September 2011, 34 of the world's top 100 Web sites were using HTML5 – the adoption led by search engines and social networks.

Page 10: Html5

Standardization process

2008 – First Public Working DraftWHATWG published the First Public Working Draft of the specification on 22 January 2008. Parts of HTML5 have been implemented in browsers despite the whole specification not yet having reached final Recommendation

status.

2011 – Last CallOn 14 February 2011, the W3C extended the charter of its HTML Working Group with clear milestones for HTML5. In May 2011, the working group advanced HTML5 to "Last Call", an invitation to communities inside and outside W3C to confirm the technical soundness of the specification.

Page 11: Html5

Standardization process (contd.)

2012 – Working DraftAs of May 2012, the specification is back to Working Draft state at

the W3C. Ian Hickson of Google is the editor of HTML5. The criterion for the specification becoming a W3C Recommendation is "two 100% complete and fully interoperable implementations".Many parts of the

specification are stable and may be implemented in products. Plan 2014

In September 2012, the W3C proposed a plan to release a stable HTML5 Recommendation by the end of 2014 and an HTML 5.1

specification Recommendation by the end of 2016.

Page 12: Html5

HTML5 development timeline

2012 2013 2014 2015 2016HTML 5.0 Candidate

RecCall for Review

Recommendation

HTML 5.1 1st Working Draft

Last Call Candidate Rec

Recommendation

HTML5.2 1st Working Draft

Page 13: Html5

Main features of

Page 14: Html5

Markup

HTML5 introduces elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements

Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and <center>, whose effects have long been superseded by the much more powerful Cascading Style Sheets.

There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior.

The HTML5 syntax is no longer based on SGML despite the similarity of its markup.

Page 15: Html5

New APIs In addition to specifying markup, HTML5 specifies scripting application programming

interfaces (APIs) that can be used with JavaScript. Existing document object model (DOM) interfaces are extended and de facto features documented. There are also new APIs, such as:o HTML5 related APIs. The canvas element for immediate mode 2D drawing. See

Canvas 2D API Specification 1.0 specificationo Timed media playbacko Offline Web Applicationso Document editingo Drag-and-dropo Cross-document messagingo Browser history managemento MIME type and protocol handler registrationo Microdatao Web Storage, a key-value pair storage framework that provides behaviour similar

to cookies but with larger storage capacity and improved API.

Page 16: Html5

HTML5 related APIs

Page 17: Html5

XHTML5

XHTML5 is the XML serialization of HTML5. XML documents must be served with an XML Internet media type such as application/xhtml+xml or application/xml.

XHTML5 requires XML's strict, well-formed syntax. The choice between HTML5 and XHTML5 boils down to the choice of a MIME/content type: the media type one chooses determines what type of document should be used.

In XHTML5, the HTML5 doctype html is optional and may simply be omitted. HTML that has been written to conform to both the HTML and XHTML specifications—and which will therefore produce the same DOM tree whether parsed as HTML or XML—is termed "polyglot markup".

Page 18: Html5

Differences from HTML 4.01 and XHTML 1.x

New parsing rules: oriented towards flexible parsing and compatibility; not based on SGML Ability to use inline SVG and MathML in text/html New elements: article, aside, audio, bdi, canvas, command, data, datalist, details, embed,

figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr

New types of form controls: dates and times, email, url, search, number, range, tel, color New attributes: charset (on meta), async (on script) Global attributes (that can be applied for every element): id, tabindex, hidden, data-*

(custom data attributes) Deprecated elements will be dropped altogether: acronym, applet, basefont, big, center,

dir, font, frame, frameset, isindex, noframes, strike, tt dev.w3.org provides the latest Editors Draft of "HTML5 differences from HTML 4", which

provides a complete outline of additions, removals and changes between HTML5 and HTML 4.

Page 19: Html5

HTML5 in mobile devicesCross-platform programming capabilities and off-line support of HTML5

Page 20: Html5

HTML5 in app-development

HTML5 provides developers with tools such as Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, and many more.

HTML5 applications run on Tizen, Firefox OS and WebOS without a browser.

In Windows 8, developers can build metro style apps using HTML5.

Windows 8 is first to bring HTML5 on client side app-development.

HTML5 along with JavaScript and CSS3 is as capable as C# or JAVA to run Metro-Style Apps on Windows 8.

Page 21: Html5

HTML5 app-development supported platforms

Page 22: Html5

A presentation byNitish K. Sharma