The Good The Bad And The Ugly of HTML 5

5,903 views

Published on

Overview of HTML5

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,903
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The Good The Bad And The Ugly of HTML 5

  1. 1. The Good, the Bad, the Ugly - HTML 5 Gary Barber radharc.com.au manwithnoblog.com
  2. 2. AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  3. 3. AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  4. 4. AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  5. 5. HTML 4 - Old in the Tooth AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  6. 6. HTML 5 - New Kid on the Block AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  7. 7. The Syntax <!doctype html> <html> <head> <meta charset=quot;UTF-8quot;> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  8. 8. <section> <section> <h6>Clint and the Girl Next</h6> <p>The urban myth of Clint as a vacuum sales man have been widely exaggerated </p> <p>He was in fact a well know local lemonade stand attendant.</p> </section> AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  9. 9. <article> <article> <h2>The Death of Clint</h2> <p>The death of the legend and all time good guy Clint Eastwood from eating too many tacos has been reported by local New Mexican sources.</p> <p>A Spokesman for taco Bell is reported to have denied these rumours.</p> </ article > AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  10. 10. <aside> <aside> <p>Something that Clint did that wasn’t that important. Maybe he took his hat off. Narh! </p> </aside> AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  11. 11. <header> <header> <h1>Life and Times of Clint</h1> <p>The street gossip from the tumbleweeds</p><div>.. Navigational features in here.. </div> </header> AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  12. 12. <footer> <footer class=”vcard”> <p class=”copyright”>Copyright The Life and Times of Clint Inc 2007<p> <p class=”designer”>Site by: <a href=http:// clintsmates.com class=”url”>Clint’s Mates</a></p> </footer> AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  13. 13. Nav & Menu <nav> <menu> <li> Navigational Item One</li> <li> Navigational Item Two</li> <li> Navigational Item Three</li> </menu> </nav> AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  14. 14. <input> Gets a Little Help datetime datetime-local date month type = week time number range email url AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  15. 15. <input> <input required type=”email” name=”your-email”> input: required {border 1px solid #FF0000;} AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  16. 16. <input> and patterns min, max and range <input required min=”12” max=”999” type=”range”> pattern <input type=quot;urlquot; pattern=quot;[^:]+quot; required name=quot;testquot;> autocomplete <input name=quot;accountquot; autocomplete=quot;offquot; > AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  17. 17. Rest In Peace basefont frame acronym big frameset applet center noframes isindex font dir s strike u AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5
  18. 18. Questions? Liberate a spacer.gif today! Distributed under Creative Commons License Gary Barber gary@manwithnoblog.com radharc.com.au manwithnoblog.com AWIA / Port 80 Mini Talks - 5 March 2008 The Good , the bad , and the ugly - HTML 5

×