Put the 5 in HTML
1 like528 views
The document discusses HTML5 and its new features, providing an overview of HTML5 structure tags, multimedia capabilities using video and audio tags, and responsive design using CSS media queries. It also lists several resources for learning more about HTML5 and encourages attendees to experiment with HTML5.
Put the 5 in HTML
- 1. SC2011 - Software Developers' Haven 2011-08-27 Frédéric Harper – Microsoft Canada
- 2. • A quick overview • A focus on some new features • Law of two feets • And it will be all about…
- 3. 7 tracks with: 6 Agile sessions, 6 Software Architecture sessions, 6 Web Dev sessions and 28 more!
- 4. A. You know HTML5 and use it now B. You know what is HTML5 and don’t use it C. You don’t know what I am talking about
- 5. • Web Standard • Next version of HTML4 (I know, I’m so brilliant) • Draft • New structure tags/elements/input types • A combinaison of HTML, CSS and Javascript
- 7. <div id=“header”> <div id=“nav”> “sidebar”> <div id=“section”> <div id= <div id=“article”> <div id=“article”> <div id=“media”> <div id=“footer”>
- 8. <header> <nav> <section> <aside> <article> <article> <figure> <footer>
- 12. <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <a href="http://videolink.com/"> Sorry, your browser doesn’t support HTML5 video tag </a> <!– Flash/Silverlight video here --> </video>
- 13. Web Open Font Format
- 16. <link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" /> <link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" /> <link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />
- 17. YES and NO
- 19. Try it
- 20. Read on it
- 21. Do cool project
- 22. Have fun!
- 24. Frederic Harper Developer Evangelist @ Microsoft fredh@microsoft.com http://webnotwar.ca http://outofcomfortzone.net http://linkedin.com/in/fredericharper http://twitter.com/fharper http://facebook.com/fharper