WDIM268 Week 2 (Summer 2010)

426 views
363 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
426
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WDIM268 Week 2 (Summer 2010)

  1. 1. WDIM268WEEK2
  2. 2. Get to know your doctype
  3. 3. HyperText Markup Language HTML ≈ SGML Standard Generalized Markup Language
  4. 4. Extensible HyperText Markup Language XHTML ≈ XML Extensible Markup Language
  5. 5. Why XML?
  6. 6. Simpler than SGML.
  7. 7. Closer to HTML than SGML.
  8. 8. Designed for extensibility.
  9. 9. Encourages “well-formed” content.
  10. 10. How does it work?
  11. 11. Almost exactly like HTML 4.
  12. 12. Be sure to include a W3C DTD Document Type De nition and a couple other things.
  13. 13. <!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> </head> <body> (Page content) </body> </html>
  14. 14. Follow these rules.
  15. 15. <br> <br/> If a tag is empty and requires no closing tag, end it with a self closing slash.
  16. 16. <STRONG> <strong> XHTML is case-sensitive. Go easy on the CAPSLOCK key.
  17. 17. selected selected=selected selected=′selected′ selected=″selected″ Attribute values must be provided, with the value enclosed in quotes.
  18. 18. font s frameset iframe frame menu u dir applet basefont noframes isindex strike center Don’t use these tags anymore.
  19. 19. Block vs Inline
  20. 20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla est, ullamcorper nec semper ac, bibendum at elit. Nulla dapibus facilisis sapien, quis feugiat tortor accumsan eu. Cras porttitor, nisl nec tempor luctus, ligula metus luctus ante, in malesuada justo massa eu velit. Block
  21. 21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla est, ullamcorper nec semper ac, bibendum at elit. Nulla dapibus facilisis sapien, quis feugiat tortor accumsan eu. Cras porttitor, nisl nec tempor luctus, ligula metus luctus ante, in malesuada justo massa eu velit. Inline
  22. 22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla est, ullamcorper nec semper ac, bibendum at elit. Nulla dapibus facilisis sapien, quis feugiat tortor accumsan eu. Cras porttitor, nisl nec tempor luctus, ligula metus luctus ante, in malesuada justo massa eu velit. Inline-Block (Yeah, I know...)
  23. 23. Semantic vs Structural
  24. 24. Semantic tags add context.
  25. 25. <em>Dagnabbit!</em>
  26. 26. <acronym title=″North Atlantic Treaty Organization″>NATO</acronym>
  27. 27. <ol> <li>Thing 1</li> <li>Thing 2</li> </ol>
  28. 28. Sometimes, additional tags may be needed if there is no appropriate semantic tag or additional divisions of content are required.
  29. 29. div is your default block tag
  30. 30. span is your default inline tag
  31. 31. Meet the Web Stack
  32. 32. The Web is multi-layered.
  33. 33. The foundational layer is HTML, your text and markup. Ideally, your content (and accompanying annotations and hierarchy) should be able to stand alone. <html />
  34. 34. User agents capable of applying presentational rules to your HTML will then apply CSS, if provided. css { }
  35. 35. If the user agent is sophisticated enough to handle JavaScript (and doing so makes sense for the agent’s context), your client-side scripts can affect your markup and styles. javaScript();
  36. 36. In cases where typical web technologies lack functionality your experience needs, plugins (Flash, Silverlight) may be applied.
  37. 37. Your goal: Make each layer as functional as possible even when subsequent layers are unavailable.
  38. 38. If you succeed
  39. 39. Easier to debug.
  40. 40. Updates more swiftly.
  41. 41. No failure is utter failure.
  42. 42. Information is accessible.
  43. 43. If you fail
  44. 44. Updates will always impact multiple layers.
  45. 45. Fallbacks won’t always be graceful.
  46. 46. Your information will be bound by your own site’s requirements.
  47. 47. And this will happen.
  48. 48. This, too.

×