html5 latest version of html

8/8/2019 html5 latest version of html

1/28

10/12/2010 ataul haque 07611 1

HTML5 & CSS3

Graceful Degradation and Progressive

Enhancement(Or: Say Good Bye! to Flash and Photoshop)


2/28

W hat is HTML5

History of HTML

Difference of HTML5 with HTML4 andXHTML

New features in HTML5W eb applications currently using HTML5

10/12/2010 ataul haque 07611 2


3/28

HTML 5 is the next version of Hyp er TextMarku p Language

It is develo ping b y World Wide Webconsortium W3C.It is a joint venture of a pple and adobe.

Html5 is a challenge to microsoftsSilverlight

10/12/2010 ataul haque 07611 3


4/28

In parallel with X HTML W3C worked on differentlanguage that is not com patible to HTML and X HTML 1.0,known as X HTML2HTML 5 was first started b y Mozilla, A pple, and O peraunder a grou p called the W HATWG(Web Hyp ertextA pplication Technolog y Working Grou p). In 2006W3C showed an interest in HTML 5 and in 2007 the y created a working grou p to work in HTML 5 project.HTML 5 is still under develo pment.

10/12/2010 ataul haque 07611 4


5/28

10/12/2010 ataul haque 07611 5


6/28

Web is the commonl y used medium to share andnetwork each other globall y. So technologies used inweb are common and platform inde pendent. But to

give more features the com panies are using their own technologies.

To give back the o penness and platforminde pendence, W3C is develo ping HTML 5

10/12/2010 ataul haque 07611 6


7/28

HTML 5 introduces new elements and its attributes like ,. The above attributes are common toall the media elements

The new content model conce pts (re placing HTML4' s block and inline conce pts)HTML 5 allows MathML and SVG elements to beinside a document

New elements are introduced for a better structure .For eg: section,article,aside, Hggrou p etc

10/12/2010ataul haque 07611

7


8/28

Other new elements in HTML 5 are

video,audio,embed,mark, progress,meter,time,rub y,rt,r p,canvas,command,details,datalist etcThere are several new global attributes. They arecontentedittable, contextmenu, draggable, hidden, s pellcheck etc

Some elements are missing for HTML 5,the y are big,center,font,u,s,strike etc. These effects can be

better handled b y CSSframes, frameset, noframes etc. Their usage affected

usabilit y and accessibilit y for the end user in anegative wa yacron ym, a pplet, isindex, dir. Their usage createsconfusion. So the y avoided

10/12/2010ataul haque 07611

8


9/28

Some attributes are not allowed in HTML 5:-Most of thestyling attributes are removed from the HTML 5. User canuse CSS for that pur pose. Exam ples of removed attributesare given below.

align attribute on ca ption, iframe, img, in put, object, legend, table,hr, div, h1, h 2, h3, h 4, h5, h6, p, col, colgrou p, tbod y, td, tfoot,th, thead and tr

background attribute on bod y.Bgcolor attribute on table, tr, td, th and bod y.Border attribute on table and object.Cell padding and cells pacing attributes on table

10/12/2010 ataul haque 07611 9


10/28

10/12/2010 ataul haque 07611 10


11/28

Another application of html5 .

10/12/2010 ataul haque 07611 11


12/28

N ew Tags

A rticleA sideA udio

CanvasCommandDatagrid

datalist

datatemplateembe d

event-source

figure f ooter

hea der

markmeter

navnest

pro gress

sourceoutput

time

video

10/12/2010ataul haque 07611 12


13/28

10/12/2010 13ataul haque 07611


14/28

< hea der>< hea der>

>

< as ide>< as ide>

< art icle>< art icle>

< f ooter>< f ooter>

10/12/2010 14ataul haque 07611


15/28

< figure>< figure>

< legen d>< legen d> < meter>< meter>

10/12/2010 15ataul haque 07611


16/28

Canvas Examples: Graphs

PlotKithttp://www.liquidx.net/plotkit/

JavaScript library

Draws graphs from anydata source, such as atable

10/12/2010 ataul haque 07611 16


17/28

Canvas Examples: A pplications

Yahoo! Pipeshttp://pipes.yahoo.com/Interactive, drag and dropinterface

10/12/2010 ataul haque 07611 17


18/28

Canvas Examples: A pplications

CanvasPainthttp://canvaspaint.org/Clone of MS Paint builtwith CanvasCould be used to build aShared W hiteboardapplication

10/12/2010 ataul haque 07611 18


19/28

Canvas Examples: Games

Canvexhttp://canvex.lazyilluminati.com/

Experimental First-Person

Shooter Game3D Graphics

10/12/2010 ataul haque 07611 19


20/28

V ideo and A udio

V ideos have become verypopularCurrently difficult to

embed videos in HTMLFlash has become the defacto standardA dding native support tobrowsers

10/12/2010 ataul haque 07611 20


21/28

U sing V ideo

...

Play

10/12/2010 ataul haque 07611 21


22/28

New features in HTML5API 's for multimedia b y using video and audio tagsAPI that allow offline web a pplicationsDrag and dro p APIAPI that ex poses the histor y and allows pages to add to it to

prevent breaking the back buttonAn API that allows a Web a pplication to register itself for certain protocols or media t ypesEditing API in combination with a new global contenteditableattribute

HTML MicrodataHTML canvas 2D contextHTML 5 web messaging

10/12/2010 ataul haque 07611 22


23/28

Form Controls: Dates and Times

< input type = "date" >< input type = "time" >A nd more

10/12/2010 ataul haque 07611 23


24/28

Form Controls: Numbers

< input type = "range" >

10/12/2010 ataul haque 07611 24


25/28

Form Controls: Email and UR Is

< input type = "url" >

10/12/2010 ataul haque 07611 25


26/28

W eb sites that using HTML5

Y ouTube uses HTML 5, www. youtube.com/ html5Google wave, a collaboration tool from Google usesseveral html5 tags

Onl y some of the browser onl y su pports HTML 5features currentl y

10/12/2010 ataul haque 07611 26


27/28

Reference

Will HTML 5 Restandardize the Web? B y s teven j

Nichola s

http://wikipedia.com /

http://htmlrock s .com/

http:// s ciru s .com/

http://miteducation.com/

10/12/2010 ataul haque 07611 27


28/28

ataul haque 0761128

10/12/2010

Documents

html5 latest version of html