Uploaded byTripad M
HTML5 - A Brief Introduction
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.
More Related Content
Similar to HTML5 - A Brief Introduction
![Governance, Deployment & Methodologies for Agentic Automation [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day2-251112135038-a386476d-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 - A Brief Introduction
- 1. A Brief Introduction By: TripadMishra Mozilla Student Rep Sinhgad Institute of Management, Pune Twitter: @_Tripad
- 3.
- 4.
- 6.
- 8.
- 9. …I guess theonly changed was the new IPv6 link :P
- 10. So .. Whatis HTML5?
- 11. o HTML5 includesthe 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 .. WhyHTML5?
- 13. But .. WhyHTML5? •REACH • PORTABILITY • FREEDOM • RICH Graphics • PERFORMANCE • SEMANTICS • INTERACTIVITY • OFFLINE ACCESS • REAL-TIME • Security • And a whole bunch more of features ……
- 14. Making Web Beautiful • Demoof 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.
- 18. Web Freedom • Problemswith 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 5way 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 & SleekForms
- 22. HTML5 Forms • Fasterand better forms. • “Content-Aware” • Many new input types: – Email,phone,url – Date,time – range • Browser Validation without any extra code! • Demo
- 25. CSS3 – WebStyled
- 26. CSS3 – Effects •Text Shadow – Create photoshop like effects • @font-face • Box Shadow • Gradients
- 27. CSS3 – BorderRadius
- 28. CSS3 – AnimationDemo 3D clock demo Solar System Demo
- 29. Much More toHTML5 • 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 • MozillaDeveloper Network – https://developer.mozilla.org/en- US/docs/HTML/HTML5 – DemoStudio • HTML5Rocks.com