HTML5

@HatemMahmoud ExpressionLab.com April 21, 2011

With HTML, authors describe the structure of Web pages using markup <tags> *HyperText Markup Language

Introduces markup and APIs for Web applications

1989 ,[object Object],*Conseil Européen pour la Recherche Nucléaire

Tim wrote the first Web browser

Tim wrote the first Web server

1991 ,[object Object],*Internet Engineering Task Force

1994 ,[object Object],*World Wide Web Consortium

HTML 4.0 was published as a W3C Recommendation

Because XHTML is an XML application, other XML tools can be used (for example, XSLT for transforming XML content)

Most major browser vendors were unwilling to implement the new features

2004 ,[object Object],*Web Hypertext Application Technology Working Group

Since then, both groups have been working together on the development of the HTML5 specification

2009 “ While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it”

Backward compatible with common parsing of older versions of HTML *Standard Generalized Markup Language

SGML-based DOCTYPE required a reference to a DTD* *Document Type Definition

HTML 4.01 Strict ,[object Object]

Framesets are not allowed <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional ,[object Object]

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

HTML 4.01 Frameset ,[object Object]

Framesets are allowed <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Quirks Mode DOCTYPE doesn't exists or invalid

HTML5 DOCTYPE ,[object Object],<!DOCTYPE html>

Example <!doctype html> <html> <head> <meta charset="UTF-8"> <title> Example document </title> </head> <body> <p> Example paragraph </p> </body> </html>

Authors must not use elements, attributes, or attribute values for purposes other than their intended semantic purpose

Absent Elements basefont big center font strike tt u frame frameset noframes acronym applet isindex

Audio <audio id="audio" src="sound.mp3" controls> </audio> <script> document.getElementById("audio").muted=false; </script>

Video <video id="video" src="movie.webm" autoplay controls> </video> <script> document.getElementById("video").play(); </script>

2D Canvas <canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document. getElementById("canvas"). getContext ("2d"); canvasContext. fillRect (250, 25, 150, 100); canvasContext. beginPath (); canvasContext. arc (450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext. lineWidth = 15; canvasContext. lineCap = 'round'; canvasContext. strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext. stroke (); </script>

3D Canvas (Web GL) <canvas id="canvas" width="838" height="220"></canvas> <script> var gl = document. getElementById("canvas"). getContext ("experimental-webgl"); gl. viewport (0, 0, canvas.width, canvas.height); ... </script>

SVG <svg> <circle id="myCircle" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg>

Web Storage <script> storagesaveButton.addEventListener('click', function (){ window. localStorage.setItem ('value', area.value); window. localStorage.setItem ('timestamp', (new Date()).getTime()); }, false); textarea.value = window. localStorage.getItem ('value'); </script>

Web Storage <script> sessionStorage .firstname="Hatem"; document.write( sessionStorage .firstname); </script>

Web SQL Database var db = window. openDatabase ("DBName", "1.0", "description", 5*1024*1024); db. transaction (function(tx) { tx. executeSql ("SELECT * FROM test", [], successCallback, errorCallback); }); Deprecated! “ All interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardization path.”

Indexed Database API ,[object Object]

Each object store has a list of records

Each record consists of a key and a value

Indexes allows looking up records in an object store using properties of the values

Cursors used to iterate on records of an index or object store

Indexed Database API var idbRequest = window. indexedDB . open ('Database Name'); idbRequest.onsuccess = function(event) { var db = event.result ; var transaction = db. transaction ([], IDBTransaction.READ_ONLY ); var curRequest = transaction. objectStore ('ObjectStore Name'). openCursor (); curRequest. onsuccess = ...; };

Offline Web applications ,[object Object]

Only download resources that have changed

Offline Web applications <html manifest="cache.appcache" > window. applicationCache .addEventListener ('updateready', function(e) { if (window.applicationCache. status == window.applicationCache. UPDATEREADY ) { window.applicationCache. swapCache() ; if (confirm( 'A new version of this site is available. Load it?' )) { window.location.reload(); } } }, false);

HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML5

Similar to HTML5 (20)

Recently uploaded

Recently uploaded (20)

HTML5