introdution to html 5
TRANSCRIPT
![Page 1: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/1.jpg)
Introduction of
Presented by
Rakesh Vadnal
![Page 2: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/2.jpg)
Overview
What is HTML5 History of HTML5 New features in HTML5 Difference of HTML5 with HTML4 Web applications currently using HTML5
![Page 3: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/3.jpg)
What is
HTML 5 is the next version of Hyper Text Markup Language(HTML4)
It is developing by World Wide Web consortium W3C.
Defined error handling
![Page 4: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/4.jpg)
History of HTML5
• HTML 3.0 was developed in 1995
• HTML 3.2 was completed by 1997
• HTML 4 was developed in the year 1998
• HTML5 was first started by Mozilla, Apple, and Opera under a group called the WHATWG(Web Hypertext Application Technology Working Group). In 2006 W3C showed an interest in HTML5 and in 2007 they created a working group to work in HTML5 project. HTML5 is still under development.
![Page 5: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/5.jpg)
New features in HTML5
Video and audio tags Header and Footer Nav, Section, article, aside, Drag and drop HTML canvas 2D context Article and aside HTML5 web messaging
![Page 6: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/6.jpg)
Video and Audio• HTML5 include video with
video element
• HTML5 specifies a standard way to include audio, with the audio element.
• The audio element can play sound files, or an audio
stream.• Adding native support to
browsers
![Page 7: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/7.jpg)
Audio+Video=magic
<video src="movie.ogg" controls="controls"></video> <audio src=" song.ogg " controls="controls"></audio>
![Page 8: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/8.jpg)
Video and Audio Implementations
Native video support in browsers
1. Opera
2. Safari 3.1
3. Firefox 3.1
![Page 9: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/9.jpg)
Header and Footer
<header> </header>
<foooter>www.techanveshan.com</footer>
![Page 10: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/10.jpg)
Canvas
• Dynamic and interactive graphics• Draw images using 2D drawing API
– Lines, curves, shapes, fills, etc.• Useful for:Graphs Applications Games and Puzzles.
![Page 11: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/11.jpg)
Canvas Examples: Games
Canvexhttp://canvex.lazyilluminati.com/
Experimental First-Person
Shooter Game 3D Graphics
![Page 12: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/12.jpg)
Form Controls: Numbers
<input type="number"><input type="range">
Supports(safari3.0.3,Opera)
![Page 13: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/13.jpg)
Form Controls: Combo Boxes
<input list="title-list"><datalist id="title-list"> <option value="..."></datalist>
Supports(Opera))
![Page 14: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/14.jpg)
Difference between HTML4 and HTML5
HTML4 HTML5
Elements like nav, header were not present.
It brought new element for web structure like nav, header etc
It was lack of rules of parsing so it is difficult to handle error.
Strictly parsing rules introduced in html5 so handle the error.
No multimedia supported without third party
It inbuilt multimedia element in html5 like Audio,video,canvas
It was not available It contains attributes like control menu, spell check etc.
![Page 15: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/15.jpg)
Web sites that using HTML5
YouTube uses HTML5, www.youtube.com/html5
Google wave, a collaboration tool from Google uses several html5 tags
Only some of the browser only supports HTML5 features currently
![Page 16: Introdution to HTML 5](https://reader036.vdocuments.site/reader036/viewer/2022062307/554f8c22b4c9052a518b5182/html5/thumbnails/16.jpg)