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. What is HTML? • Hypertext Markup Language • HTML elements form the building blocks of all websites • Several HTML 4.01 elements are never used or never used the way they were intended
- 5. What is html5? • Latest version of html • Combines several technology • CSS3,javascript,jquery etc.. • Backward compatible • HTML5 brings new changes: which include; New elements for drawing graphics, adding media content, better page structure, better form handling, several APIs to drag/drop elements, and find Geolocation, include web storage, application cache etc.
- 6. Key features in HTML5 Semantics Video Audio Canvas Drag & Drop Local Storage Geolocation Form elements
- 7. New in HTML5 — Semantics <nav> Semantic elements: header, footer, section, article etc. replace contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">
- 8. New Markup elements <HEADER> Specifies a group of navigation elements for the document. All major browsers support <Header> Tag. How <Header> works?? <Header> <h1>Welcome to my website</h1> <p>This is just an example</p> </Header>
- 9. New Markup elements <FOOTER> All major browsers support <FOOTER> Tag. defines the footer of a section or document. contains the name of the author, the date the document was written and/or contact information.
- 10. New Markup elements How <Footer> works:- <!DOCTYPE HTML> <html> <body> <footer><p>This document was written in 2013</p> <p> all copyright reserved © shan</p> </footer> </body></html>
- 11. New Markup elements <ASIDE> Defines some content aside from the content it is placed in. The aside content should be related to the surrounding content. All major browsers support <Aside> Tag. How <Aside> works:- <p>Govt Engg college Idukki is situated in painavu,the major town in Idukki district.</p> <aside> <h4>Idukki Dam</h4> Asia’s largest arch dam. Just 3km away from GECI . </aside>
- 12. New in HTML5 — <Video> • videos can be played back on the latest mobile devices and even on older browsers that require Flash.
- 13. HTML5 VIDEO How can we use it?? <video src="C:UsersshaniDownloadsVideovideo1.mp4" width="320" height="240" controls="controls"> </video>
- 14. HTML5 Drag and Drop Drag and drop the items from one location to another location on the same webpage.
- 15. New in HTML5 — Geolocation Now visitors can choose to share their physical location with your web application
- 16. HTML5 vs HTML4 1. HTML5 uses new structures such as drag, drop and much more. 2.HTML 5 can contain embedded video and audio without using flash player. 3.HTML 5 is capable of handling inaccurate syntax 1.HTML 4 uses common structures like headers , footers. 2.HTML 4 cannot embed video or audio directly and makes use of flash player for it. 3. HTML 4 cannot handle inaccurate syntax
- 17. 4. HTML 5 introduced canvas for drawing paths of rectangle, arcs, lines,images 5. In HTML 5, new tags and new features like local storage are enhanced. 4. HTML 4 has traditional API’s which does not include canvas. 5. In HTML 4, local storage is not possible and tags that can handle only one dimension are present.
- 18. Thankyou…
- 19. 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.
- 20. 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
- 21. 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: info@baabtra.com Contact Us