Post on 12-May-2015
description
WebProgrammingThe Awesomeness of HTML5
Mark Cedrick C. AntoninoFaculty, USJR - CICCT
What up awesome?
• HTML Chronological Development
• How awesome is HTML5
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
1995: HTML 2.0Formalized the syntax and many of theRules that were already implemented.
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
1997: HTML 3.2Largely ignored by browser manufacturersWho began to implement their own tags.
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
1998: Web Standards Project Pushed for standards adoption, added weight to the W3C recommendations and promoted standards-based browsers.
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
1999: HTML 4.0Stabilized the syntax and structure of HTML,became the standard for web authoring.
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
2000: XHTML 1.0Designed to move HTML towards XMLDTDs often caused it to render as HTML
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
The growth of the webHigh bandwidth connections increase, as doesthe demand for multimedia and applicationsdriven by technology such as Flash and AJAXwork on XHTML 2.0 begins.
HTML Timeline
1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010
The rise of HTML5
2004: WHATWG begins what will become HTML52007: W3C charters new working group and adopts WHATWG’s work, renamed HTML52009: W3C does not renew the XHTML 2.0 charter2010: Driven in large part by Apple and Google, public interest in HTML5 grows
HTML5 is theFUTURE
NCSA MosaicWhat is the First-everWEB BROWSER?
CERNWhat is the First-everWESITE?
Conseil Européen pour la Recherche Nucléaire
(European Council for Nuclear Research)
http://info.cern.cn
HTML
XHTML
HTML5 is an EVOLUTION, not a REVOLUTION
HTML5HTML4HTML3.2
XHTML2.0
Error Handling
• Previous specifications left error handling up to user agents
• XHTML 2.0 featured draconian error handling
• Pages would stop rendering if an error was found
• HTML5 features detailed algorithms for parsing error
New Features
• New semantic elements and attributes
• Built-in APIs to assist in building web applications
• Added support for audio and video
• HTML5 will reduce the need for plus-ins
DOCTYPEHTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPEHTML5
<!DOCTYPE HTML >
Character Encoding
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5
<meta charset="utf-8">
New Elements
<canvas>, <audio>, <video>, <source>,
<track>, <embed>, <header>, <nav>, <section>,
<article>, <aside>, <footer>, <details>,
<summary> and many others.
HTML4 Tagging
<div id=“header”>
<div id=“headerGroup”>
<div id=“section”>
<div id=“header”>
<div id=“article”>
<div id=“footer”>
<div id=“nav”>
<div id=“aside”>
<div id=“footer”>
<div id=“address”>
HTML5 Semantic
Tagging