1 / 15

HTML5

PRACTICAL. HTML5. WHAT. Standard. A NEW. Web. footer. article. t ime. websockets. video. boxshadow. audio. validation. s ection. keyframes. hgroup. aside. storage. header. footer. article. t ime. websockets. video. boxshadow. audio. validation. s ection. keyframes.

yamka
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PRACTICAL HTML5

  2. WHAT

  3. Standard A NEW Web

  4. footer article time websockets video boxshadow audio validation section keyframes hgroup aside storage header

  5. footer article time websockets video boxshadow audio validation section keyframes hgroup aside storage header

  6. footer article time websockets video boxshadow audio validation section keyframes hgroup aside storage header

  7. WHY

  8. s maller s impler s emantic

  9. <style> .rounded { padding: 10px; position: relative; } .rounded-top-left, .rounded-top-right, .rounded-bottom-left, .rounded-bottom-right { height: 10px; position: absolute; width: 10px; } .rounded-top-left { background-image: url(../images/topleft.gif); left: 0; top: 0; } .rounded-top-right { background-image: url(../images/topright.gif); right: 0; top: 0; } .rounded-bottom-left { background-image: url(../images/bottomleft.gif); bottom: 0; left: 0; } .rounded-bottom-left { background-image: url(../images/bottomright.gif); bottom: 0; left: 0; } </style> <div> <div class="rounded-top-left"></div> <div class="rounded-top-right"></div> <p>Rounded Corners</p> <div class="rounded-bottom-left"></div> <div class="rounded-bottom-right"></div> </div> 47 lines 9 lines <style> .rounded { border-radius: 10px; } </style> <p class="rounded"> Rounded corners </p>

  10. 5 paths <script> $(function () { $("input[type=text]").each(function () { $(this).val(this.title); $(this).addClass("placeholder"); }); $("input[type=text]").focus(function () { if ($(this).val() === this.title) { $(this).val = ""; $(this).removeClass("placeholder"); } }); $("input[type=text]").blur(function () { if ($(this).val() === "") { $(this).val(this.title); $(this).addClass("placeholder"); } }); }); </script> <form action="/stuff" method="post"> <input type="text" name="value" title="Value" /> <input type="submit" value="Submit" /> </form> 1 path <form action="/stuff" method="post"> <input type="text" name="value" placeholder="Value" /> <input type="submit" value="Submit" /> </form>

  11. mixed <div class="header"> <div id="nav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> <div class="page-body"> <div class="post"> <p>Some Content</p> </div> <div id="ads">Ad</div> </div> <div id="footer"> &copy; </div> self contained not related

  12. fixed <header> <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </header> <section> <article> <p>Some Content</p> </article> <aside>Ad</aside> </section> <footer> &copy; </footer> portable separated

  13. DEMO

  14. Resources http://modernizr.com http://html5test.com http://dev.w3.org/html5/spec http://www.html5labs.com

  15. OSBORNM .com twitter github codeplex

More Related