HTML 5 Features and Front-end Tools
•Transferir como PPT, PDF•
0 gostou•339 visualizações
The document discusses HTML5 including its features, changes from HTML4, new elements, forms, multimedia capabilities, additional features like geolocation and local storage, front-end frameworks, and testing and automation tools. It provides examples of HTML5 code and lists resources for learning more about HTML5 on the web.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (18)
Semelhante a HTML 5 Features and Front-end Tools
Semelhante a HTML 5 Features and Front-end Tools (20)
HTML 5 Features and Front-end Tools
- 1. Topics for today - HTML 5 - Front-end frameworks - Testing and Automation Tools
- 2. HTML 5 – What is HTML5? HTML 5 is the latest HTML specification which brings many new features to ease the work of Web developers and Web-page authors. It is still a work in progress but many of the specifications have been implemented in the major Browsers already. Some features are unsupported but would be coming up in newer versions of Browsers.
- 3. HTML 5 – Feature Set - New semantic elements/tags - New attributes for existing elements - Geolocation API - Video support - Drawing API - Offline Browsing - Local Storage
- 4. HTML 5 – Changes from HTML 4 - The character encoding <meta charset="UTF-8"> - <!DOCTYPE html> - Attributes with an empty value may be written as just the attribute name omitting the equals sign and the value - basefont, big, center, font, strike, frame, frameset, noframe, background, bgcolor are deprecated or not part of HTML 5. Use CSS instead to achieve many of the same effects
- 5. HTML 5 – New elements - section - article - aside - header - footer - nav - figure - time - keygen - output - datalist
- 6. HTML 5 – An example <!DOCTYPE html> <html> <meta charset="UTF-8" /> <body> <header> <hgroup> <h1 id="site-title"> <a href="http://html5examples.org/">HTML5 Examples</a> </h1> </hgroup> <nav id="access" role="navigation"> <h3 class="assistive-text">Main menu</h3> <div class="skip-link"> <a class="assistive-text" href="#secondary"> Skip to secondary content</a> </div> </nav> </header> </body> </html>
- 7. HTML 5 – Forms The following type attributes are new for the input element - - tel - url - search - email - datetime - time - date - month - week - number - range - colour
- 8. HTML 5 – Forms II The new attributes for form inputs are - - autofocus - autocomplete - placeholder - required - pattern - readonly
- 9. HTML 5 – Multimedia <audio controls> <source src="/home/ashish/Music/mehndi_ki_raat.mp3" type="audio/mpeg"> </audio> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
- 10. HTML 5 – Additional Features - GeoLocation API - Local Storage - Offline Browsing - Web Sockets
- 11. HTML 5 – Front-end Frameworks - jQuery - Bootstrap from Twitter - Bootbox (enhancement to Bootstrap) - Backbone.js
- 12. HTML 5 – Testing & Quality Tools - W3C Link Checker - W3C HTML Validator - HTML Tidy - W3C Spell Checker - BrowserStack - Collection of tools on softwareqatest
- 13. HTML 5 – Resources on the Web - http://www.w3.org - http://w3schools.com - http://www.w3.org/QA/Tools/ - http://www.softwareqatest.com/ - http://www.browserstack.com/ - http://tidy.sourceforge.net/