SlideShare une entreprise Scribd logo
1  sur  22
HTML5
the whole new era of web development

Nitish K. Sharma (@Nitish_KSharma)
Microsoft Certified Specialist for
Programming in HTML5 with JavaScript and CSS3
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
What is HTML?
The classic HTML logo

 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.

HTML was proposed by ―Tim Berners-Lee‖
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.
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.
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
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
Minimum HTML5 Document
<!DOCTYPE html>
< html>
< head>
< title>Title of the document</title>
< /head>
< body>
The content of the document......
< /body>
< /html>
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.
Standardization process
 2008 – First Public Working Draft
WHATWG 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 Call
On 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.
Standardization process (contd.)
 2012 – Working Draft
As 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.
HTML5 development timeline
2012

2013

2014

HTML 5.0

Candidate
Rec

Call for
Review

Recommend
ation

HTML 5.1

1st Working
Draft

HTML5.2

Last Call

2015

2016

Candidat
e Rec

Recommen
dation

1st Working
Draft
Main features of
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.
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 specification

o

Timed media playback

o

Offline Web Applications

o

Document editing

o

Drag-and-drop

o

Cross-document messaging

o

Browser history management

o

MIME type and protocol handler registration

o

Microdata

o

Web Storage, a key-value pair storage framework that provides behaviour similar to
cookies but with larger storage capacity and improved API.
HTML5 related APIs
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".
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.
HTML5 in mobile devices
Cross-platform programming capabilities and off-line support of 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.
HTML5 app-development supported
platforms
A presentation by
Nitish K. Sharma

Contenu connexe

Tendances

Korea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimKorea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimSang Seok Lim
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)Performics.Convonix
 
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentIncremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentAkihiro Ikezoe
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtmlsagaroceanic11
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohanballychohanuk
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialProdigyView
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New FeaturesAta Ebrahimi
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
HTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web DevelopmentHTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web DevelopmentMobilePundits
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
70-480 - Programming in HTML5 with JavaScript and CSS3
 70-480 - Programming in HTML5 with JavaScript and CSS3 70-480 - Programming in HTML5 with JavaScript and CSS3
70-480 - Programming in HTML5 with JavaScript and CSS3Roxycodone Pills
 
MTA html5 text_graphics_media
MTA html5 text_graphics_mediaMTA html5 text_graphics_media
MTA html5 text_graphics_mediaDhairya Joshi
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3Darren Wood
 

Tendances (20)

Korea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimKorea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklim
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Html5 CSS3 jQuery Basic
Html5 CSS3 jQuery BasicHtml5 CSS3 jQuery Basic
Html5 CSS3 jQuery Basic
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)
 
web designing course bangalore
web designing course bangaloreweb designing course bangalore
web designing course bangalore
 
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentIncremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtml
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
HTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web DevelopmentHTML5- The Boosting Era of Web Development
HTML5- The Boosting Era of Web Development
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
70-480 - Programming in HTML5 with JavaScript and CSS3
 70-480 - Programming in HTML5 with JavaScript and CSS3 70-480 - Programming in HTML5 with JavaScript and CSS3
70-480 - Programming in HTML5 with JavaScript and CSS3
 
MTA html5 text_graphics_media
MTA html5 text_graphics_mediaMTA html5 text_graphics_media
MTA html5 text_graphics_media
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
 

Similaire à Html5

IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...ijceronline
 
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT KharagpurHTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT KharagpurKanishka Chakraborty
 
Developing with HTML5
Developing with HTML5Developing with HTML5
Developing with HTML5Ray Wong
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEdgar Parada
 
HTML5: The next disruptive technology
HTML5:  The next disruptive technologyHTML5:  The next disruptive technology
HTML5: The next disruptive technologyLinda Jacobson
 
MOHAN ppt.pptx
MOHAN ppt.pptxMOHAN ppt.pptx
MOHAN ppt.pptxLoki218382
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...webre24h
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Paxcel Technologies
 
ITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.pptITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.pptDowntownWannabe
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5JayjZens
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...Shahzad
 

Similaire à Html5 (20)

IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT KharagpurHTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
 
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
 
Developing with HTML5
Developing with HTML5Developing with HTML5
Developing with HTML5
 
Html 5
Html 5Html 5
Html 5
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
Report html5
Report html5Report html5
Report html5
 
Html
HtmlHtml
Html
 
HTML5 and DHTML
HTML5 and DHTMLHTML5 and DHTML
HTML5 and DHTML
 
HTML5: The next disruptive technology
HTML5:  The next disruptive technologyHTML5:  The next disruptive technology
HTML5: The next disruptive technology
 
MOHAN ppt.pptx
MOHAN ppt.pptxMOHAN ppt.pptx
MOHAN ppt.pptx
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
ITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.pptITEC229_Chapter2_new.ppt
ITEC229_Chapter2_new.ppt
 
HTML5 and XHTML2
HTML5 and XHTML2HTML5 and XHTML2
HTML5 and XHTML2
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...
 
Qnx html5 hmi
Qnx html5 hmiQnx html5 hmi
Qnx html5 hmi
 

Dernier

From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 

Dernier (20)

From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 

Html5

  • 1. HTML5 the whole new era of web development Nitish K. Sharma (@Nitish_KSharma) Microsoft Certified Specialist for Programming in HTML5 with JavaScript and CSS3
  • 2. 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
  • 3. What is HTML? The classic HTML logo  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. HTML was proposed by ―Tim Berners-Lee‖
  • 4. 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.
  • 5. 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.
  • 6. 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
  • 7. 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
  • 8. Minimum HTML5 Document <!DOCTYPE html> < html> < head> < title>Title of the document</title> < /head> < body> The content of the document...... < /body> < /html>
  • 9. 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.
  • 10. Standardization process  2008 – First Public Working Draft WHATWG 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 Call On 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.
  • 11. Standardization process (contd.)  2012 – Working Draft As 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.
  • 12. HTML5 development timeline 2012 2013 2014 HTML 5.0 Candidate Rec Call for Review Recommend ation HTML 5.1 1st Working Draft HTML5.2 Last Call 2015 2016 Candidat e Rec Recommen dation 1st Working Draft
  • 14. 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.
  • 15. 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 specification o Timed media playback o Offline Web Applications o Document editing o Drag-and-drop o Cross-document messaging o Browser history management o MIME type and protocol handler registration o Microdata o Web Storage, a key-value pair storage framework that provides behaviour similar to cookies but with larger storage capacity and improved API.
  • 17. 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".
  • 18. 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.
  • 19. HTML5 in mobile devices Cross-platform programming capabilities and off-line support of HTML5
  • 20. 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.

Notes de l'éditeur

  1. SGML= Standard Generalized Markup Language. An ISO standard markup language.