Date post: | 10-Apr-2018 |
Category: |
Documents |
Upload: | ataul-haque |
View: | 227 times |
Download: | 0 times |
of 28
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)
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
5/28
10/12/2010 ataul haque 07611 5
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
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/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
10/28
10/12/2010 ataul haque 07611 10
8/8/2019 html5 latest version of html
11/28
Another application of html5 .
10/12/2010 ataul haque 07611 11
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
13/28
10/12/2010 13ataul haque 07611
8/8/2019 html5 latest version of html
14/28
< hea der>< hea der>
>
< as ide>< as ide>
< art icle>< art icle>
< f ooter>< f ooter>
10/12/2010 14ataul haque 07611
8/8/2019 html5 latest version of html
15/28
< figure>< figure>
< legen d>< legen d> < meter>< meter>
10/12/2010 15ataul haque 07611
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
17/28
Canvas Examples: A pplications
Yahoo! Pipeshttp://pipes.yahoo.com/Interactive, drag and dropinterface
10/12/2010 ataul haque 07611 17
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
19/28
Canvas Examples: Games
Canvexhttp://canvex.lazyilluminati.com/
Experimental First-Person
Shooter Game3D Graphics
10/12/2010 ataul haque 07611 19
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
21/28
U sing V ideo
...
Play
10/12/2010 ataul haque 07611 21
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
23/28
Form Controls: Dates and Times
< input type = "date" >< input type = "time" >A nd more
10/12/2010 ataul haque 07611 23
8/8/2019 html5 latest version of html
24/28
Form Controls: Numbers
< input type = "range" >
10/12/2010 ataul haque 07611 24
8/8/2019 html5 latest version of html
25/28
Form Controls: Email and UR Is
< input type = "url" >
10/12/2010 ataul haque 07611 25
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
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
8/8/2019 html5 latest version of html
28/28
ataul haque 0761128
10/12/2010