WDIM268 Week 6 (Summer 2010)

678 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
678
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WDIM268 Week 6 (Summer 2010)

  1. 1. WDIM268WEEK6
  2. 2. Why HTML5?
  3. 3. Pave the cow paths! Photo Credit: Lovro67
  4. 4. Backwards compatibility.
  5. 5. Web applications.
  6. 6. Rich media.
  7. 7. More semantic tags.
  8. 8. Ease-of-use.
  9. 9. How do I start?
  10. 10. Remember this?
  11. 11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> <script type="text/javascript" src="scripts.js"></script> </head> <body> (Page content) </body> </html>
  12. 12. Ta-da!
  13. 13. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script> </head> <body> (Page content) </body> </html>
  14. 14. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script> </head> <body> (Page content) </body> </html>
  15. 15. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script> </head> <body> (Page content) </body> </html>
  16. 16. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script> </head> <body> (Page content) </body> </html>
  17. 17. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script> </head> <body> (Page content) </body> </html>
  18. 18. Writing markup...
  19. 19. <br> <br/> If a tag is empty and requires no closing tag, slash or no slash is okay.
  20. 20. alt alt=Ham alt=′Ham′ alt=″Ham″ Attribute values must be provided, with the value enclosed in quotes.
  21. 21. selected selected=selected selected=′selected′ selected=″selected″ Boolean (on/off) attributes can omit the redundant value (but they don’t have to).
  22. 22. Deprecated vs Obsolete
  23. 23. font big Use abbr instead frame frameset noframes acronym strike center These are obsolete in HTML5.
  24. 24. small now means “small print,” legalese, etc.
  25. 25. b means stylisticially offset without conveying extra importance Continue using strong when the text has extra importance.
  26. 26. i means the text is in “an alternate voice or mood” Continue using em when the text has extra emphasis.
  27. 27. <a href=""> <h1>Post Title</h1> <p>Short description.</h1> </a> Anchor tags can now be inline or block.
  28. 28. These exciting developments and more in this week’s demo!

×