HTML5 - A Brief Introduction
•
1 like•872 views
This document provides an introduction and overview of HTML5. It discusses that HTML5 includes the 5th revision of HTML, CSS3, and JavaScript APIs. It is developed by a consortium including Mozilla, Opera, Apple, and Google. Key features of HTML5 mentioned include reach, portability, freedom from plugins, rich graphics, performance improvements, semantics, interactivity, offline access, real-time capabilities, and security. Examples are given of HTML5 capabilities like canvas drawing, 3D rendering with WebGL, smarter forms, CSS3 effects, and geolocation. Resources for learning more about HTML5 are also provided.
Report
Share
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (16)
Similar to HTML5 - A Brief Introduction
Similar to HTML5 - A Brief Introduction (20)
Recently uploaded
Recently uploaded (20)
HTML5 - A Brief Introduction
- 1. A Brief Introduction By: Tripad Mishra Mozilla Student Rep Sinhgad Institute of Management, Pune Twitter: @_Tripad
- 9. …I guess the only changed was the new IPv6 link :P
- 10. So .. What is HTML5?
- 11. o HTML5 includes the 5th revision of the HTML markup language, CSS3, and a series of JavaScript APIs. o Not owned by any particular company or a specific browser. o Developed by a consortium of companies like Mozilla, Opera, Apple, Google and many other – WHATWG & W3C
- 12. But .. Why HTML5?
- 13. But .. Why HTML5? •REACH • PORTABILITY • FREEDOM • RICH Graphics • PERFORMANCE • SEMANTICS • INTERACTIVITY • OFFLINE ACCESS • REAL-TIME • Security • And a whole bunch more of features ……
- 14. Making Web Beautiful • Demo of FLUID Canvas, WebGL & JS – https://developer.mozilla.org/en-US/demos/detail/fluid
- 15. Making Web Beautiful • HTML5 is a full-fledged platform for graphic based applications – 3D Rendering – Shadows & Lighting – Vectors and much more. • Making browser your CANVAS – Canvas element provides an API for 2D drawing – Support for Mobile Devices – Ball Code Example • WebGL – Web Graphics Library – JS Library to render 3D/2D Graphics without any plugins – Can directly communicate with GPU
- 16. Web Freedom
- 18. Web Freedom • Problems with Proprietary Plug-ins – Control transfer from browser to 3rd party application – “Another Piece” for the users to find – Major cause of browser instability and security issue – Mostly closed-source and paid
- 19. • Old school <embed> <object width=”425” height=”344”> <param name=”movie” value=”http://www.youtube.com/9sEI1AUFJKw&h l=en_GB&fs=1&”></param> ... <embed src=”http://www.youtube.com/v/9sEI1AUFJKw&h l=en_GB&fs=1&” type=”application/x- shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425” height=”344”></embed> </object> HTML5 Video & Audio
- 20. • HTML 5 way of doing it : <video> <source src=“MyVideo.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> • Fully integrated with all other aspects of the document – CSS/JS/Canvas etc • Demo HTML5 Video & Audio
- 21. Smarter & Sleek Forms
- 22. HTML5 Forms • Faster and better forms. • “Content-Aware” • Many new input types: – Email,phone,url – Date,time – range • Browser Validation without any extra code! • Demo
- 25. CSS3 – Web Styled
- 26. CSS3 – Effects • Text Shadow – Create photoshop like effects • @font-face • Box Shadow • Gradients
- 27. CSS3 – Border Radius
- 28. CSS3 – Animation Demo 3D clock demo Solar System Demo
- 29. Much More to HTML5 • Cleaner & Semantic Code • Data Storage & Offline data access • Web Workers • Drag & Drop and File System Access • Direct Hardware Support • Geolocation Capabilities • Notifications • Much more!
- 30. HTML5 Resources • Mozilla Developer Network – https://developer.mozilla.org/en- US/docs/HTML/HTML5 – DemoStudio • HTML5Rocks.com