More Related Content
What's hot (20)
Similar to Html5 (20)
Recently uploaded (20)
Html5
- 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
- 4. CONTENTS • HTML5 • New Elements • New Features • Comparison with Old Versions
- 5. HTML5 • HTML5 is the latest and most enhanced version of HTML. • HTML5 is a markup language. • It is used for structuring and presenting content for the World Wide Web. • Its core aims have been to improve the language with support for the latest multimedia.
- 6. HTML5 • HTML5 is a cooperation between the W3C and the Web Hypertext Application Technology Working Group(WHATWG). • Google Chrome ,Opera ,Mozilla Firefox ,Safari and Internet Explorer supports many HTML5 features.
- 7. HTML5 • HTML5 is flexible • HTML5 is device independent • HTML5 support the following: – Uppercase tag names – Quotes are optional for attributes – Attribute values are optional – Closing empty elements are optional
- 8. New Features • Semantic Elements - like <header> <footer> and <section>. • Persistent Local Storage – to achieve without resorting to third-party plug-ins. • WebSocket – a next generation bidirectional communication technology for web applications.
- 9. New Features • <Audio> & <Video> – can embed audio or video on your web pages without resorting to third-party plugins. • Geolocation – visitors can choose to share their physical location with your web application.
- 10. New Features • <Canvas> for two-dimensional drawing. • Drag and Drop - Drag and Drop the items from one location to another location on the same web page.
- 11. CANVAS • <canvas> tag is used to draw graphics on a web page. • The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. • All major browsers support <canvas> tag .
- 12. CANVAS • A canvas is a rectangular area on an HTML page. It has no border and no content. • How can we use it? <canvas id="myCanvas" width="200" height="100"></canvas>
- 13. VIDEO • HTML5 <video> element specifies a standard way to embed a video in a web page. • MP4, WebM and Ogg formats supports.
- 14. VIDEO • How can we use it? • <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" > <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
- 15. New Input Types • color • date • datetime • email • month • Number • week
- 16. New Input Types • range • search • tel • url
- 17. HTML5 Documents • Elements used for better structure: header : This tag represents the header of a section. section :This tag represents a generic document or application section.. article : This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.
- 18. HTML5 Documents Footer : This tag represents a footer for a section and can contain information about the author, copyright information etc. nav : Defines navigation link. Figure : This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
- 19. HTML5 & HTML4 HTML5 HTML4 Audio and video can be embedded. e.g. <audio> and <video> tags Audio or video can not be embedded without an external plug-in. Vector graphics is possible e.g. canvas Vector graphics is possible only if we use Flash or Silverlight. JS GeoLocation API helps to identify location of user browsing any website. Finding GeoLocation of user browsing any website is difficult. Especially if it comes to mobile devices. Allow JavaScript to run in background. Does not allow JavaScript to run in browser.JS run in same thread as browser interface.
- 20. HTML5 & HTML4 HTML5 HTML4 HTML5 uses new structures such as drag, drop and much more. HTML 4 uses common structures like headers , footers. HTML 5 introduced many new API’s which facilitate flexibility of web pages. HTML 4 has traditional API’s which does not include canvas and GeoLocation APIs.
- 21. Example
- 22. Example Output
- 23. Thankyou…
- 24. Want to learn more about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
- 25. Follow us @ twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com
- 26. Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: [email protected] Contact Us