HTML5
5 likes1,096 views
The document discusses HTML5 as the latest web standard, emphasizing its simplicity, ease of adoption, and mobile readiness. It outlines the benefits of transitioning to HTML5, which include improved code clarity, cross-browser support, and enhanced security features. The document also details how to convert existing websites to HTML5 by introducing new elements and removing outdated ones.
HTML5
- 1. Webinar The Ideal Web Platform Cygnet Infotech Pvt. Ltd.
- 2. HTML 5 – The Ideal Web Platform • What is HTML 5? • Why to move to HTML 5 Right now? • How to convert current websites to HTML5? • What are New/Removed elements? • Additional Highlights • Q&A
- 3. What is HTML 5? • New developed HTML Standard • Fifth revision of the HTML Markup Language • Simple Technology • Collection of advanced features, technologies and APIs • Increasing strength of interactivity and connectivity
- 4. What is HTML 5? - History
- 5. Why to move to HTML 5 Right now ? • Easy to adopt • Simple & Cleaner code • Impossible to possible • Most mobile ready tool • Cross Browser support • Modern Trend • Lower Cost and Easier maintenance • Security • Its THE future!
- 6. Easy to adopt • HTML 5 is very easy to understand, especially for those who have already worked on html, it is a small upgrade to get the power of HTML 5.
- 7. Simple & Cleaner code • HTML5 allows us to write clear, descriptive and semantic code that allows a reader to easily separate meaning from style and content. • Example
- 8. Impossible to possible • Accessible video/audio using HTML tag only • More faster than before • No Nasty coding • See Example
- 9. Most mobile ready tool • All Mobile browsers have fully adopted HTML5 • Create fully responsive website • Uses of mobile devices continue to grow very rapidly • Using media queries can make one website for web browser, tablet, and mobile • Reduced cost & efforts, Less maintenance • Example
- 10. Cross Browser support • All modern & popular browsers i.e.: Chrome, Firefox, Safari, IE9 and Opera • For older IE add java script allow to recognized browser to new HTML elements. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> • Major element support • Let’s see the browser support chart for well known browsers
- 12. Modern Trend • No one would like to be left behind the current trends • Multiple benefits of HTML5 to adopt • It’s fad..! • Start to Use and fall in love with it!
- 13. Lower Cost and Easier maintenance • HTML5 applications are cheaper to run across multiple platforms • Improve the productivity • No need to create special applications for mobile too
- 14. Security • Many HTML5 standards made the web safer • Many of the powerful new APIs unrelated to providing security are designed to be safer. • Browser vendors have adopted APIs and policies that protect the user, such as the Safe Browsing API, the Content Security Policy, and XSS filters.
- 15. Its future! Let's walk with it! • HTML5 help us to build modern, faster applications/sites • More and more companies and development teams have started to deliver in HTML5
- 16. Convert current websites to HTML5 • Add / replace tags • E.g. doctype, header, section, article, embed tag, footer etc… • Example
- 17. New Elements • <article> Defines an article • <aside> Defines content aside from the page content • <bdi> Isolates a part of text formatted in a different direction from other text outside it • <command> Defines a command button that a user can invoke • <details> Defines additional details that the user can view or hide • <dialog> Defines a dialog box or window • <summary> Defines a visible heading for a <details> element • <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. • <figcaption> Defines a caption for a <figure> element • <footer> Defines a footer for a document or section • <header> Defines a header for a document or section • <hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels • <mark> Defines marked/highlighted text • <meter> Defines a scalar measurement within a known range (a gauge)
- 18. New Elements • <nav> Defines navigation links • <progress> Represents the progress of a task • <ruby> Defines a ruby annotation (for East Asian typography) • <rt> Defines an explanation/pronunciation of characters (for East Asian typography) • <rp> Defines what to show in browsers that do not support ruby annotations • <section> Defines a section in a document • <time> Defines a date/time • <wbr> Defines a possible line-break • <audio> Defines sound content • <video> Defines a video or movie • <source> Defines multiple media resources for <video> and <audio> • <embed> Defines a container for an external application or interactive content (a plug-in) • <track> Defines text tracks for <video> and <audio> • <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
- 19. Removed Elements • <acronym> • <font> • <applet> • <frame> • <basefont> • <frameset> • <big> • <noframes> • <center> • <strike> • <dir> • <tt>
- 20. Additional highlights • Storage • Connectivity • File Access • Performance • Graphics
- 21. Questions…?
- 22. Thank You Engage with us: www.cygnet-infotech.com inquiry@cygnet-infotech.com Twitter: @cygnetinfotech Skype: cygnet.infotech-pvt-ltd INDIA - 2A, Manikyam, Opp Samudra Annexe, Navrangpura, Ahmedabad 380009 Tel: +91-79-30487400; Fax: +91-79-30487422 USA - Mack-Cali Centre III, 140 East Ridgewood Avenue, Suite 415 ST, Paramus, NJ 07652 Tel: +1-201-995-7444; Fax: +1-201-221-8516