xHTML/CSS: The right way to do it

1,980 views
1,868 views

Published on

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

No Downloads
Views
Total views
1,980
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • xHTML is well-formed (no <habba> tag) and properly nested Strict: no markup whatsoever (center, font, iframe, u, strike / align, bgcolor, border, …) -> the way it should be Transitional: created for the handover from HTML 4.0.1 to xHTML, markup elements allowed but code restrictions Frameset: Strict with frames 12/13/09
  • Why not b and I to use? Ordering important - Position of certain tags important 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • 12/13/09
  • xHTML/CSS: The right way to do it

    1. 1. xHTML - CSS The right way to do it! by Nils De Moor
    2. 2. Overview <ul><li>The early days </li></ul><ul><li>The coming of the Internet </li></ul><ul><li>The present </li></ul><ul><ul><li>xHTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Advanced techniques </li></ul></ul><ul><li>The future </li></ul><ul><ul><li>HTML 5 </li></ul></ul>
    3. 3. The early days <ul><li>HTML 1.0 </li></ul><ul><li>Just markup for boring texts </li></ul><ul><ul><li><title> </li></ul></ul><ul><ul><li><h1> </li></ul></ul><ul><ul><li><a> </li></ul></ul><ul><ul><li><li> </li></ul></ul><ul><li>No attributes </li></ul><ul><li>No design or layout possible </li></ul>
    4. 4. The coming of the internet <ul><li>Need for more possibilities to markup text </li></ul><ul><ul><li><tables> </li></ul></ul><ul><ul><li><B>, <i>, <u> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Various attributes </li></ul><ul><ul><li>Width, height </li></ul></ul><ul><ul><li>Bgcolor </li></ul></ul><ul><ul><li>Cellspacing, cellpadding </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Images </li></ul>
    5. 5. The coming of the internet <ul><li>Everything was possible now! </li></ul><ul><ul><li>Colorful texts in every possible form </li></ul></ul><ul><ul><li>Pages packed with wonderfull layouts full of <tables>’s </li></ul></ul><ul><ul><li>Images all over the place </li></ul></ul><ul><ul><li>Frames with different scrollbars everywhere </li></ul></ul><ul><ul><li>Tags were used for no reason at all! </li></ul></ul>
    6. 6. Then there came…
    7. 7. Searchbots get lost
    8. 8. Coding is for programmers Layout for designers
    9. 9. Disabled people use the internet too
    10. 10. What about mobile phones?
    11. 11. The present <ul><li>One solution: xHTML 1.0 </li></ul><ul><ul><li>Approved by the W3C in 2000 </li></ul></ul><ul><ul><li>xHTML = XML + HTML </li></ul></ul><ul><ul><li>Strict rules for your code </li></ul></ul><ul><ul><li>Treat textual data as textual data </li></ul></ul><ul><ul><li>Treat design elements as design elements </li></ul></ul><ul><ul><li>No more free-wheeling... </li></ul></ul>
    12. 12. Doctype <ul><li>Start every document with a doctype </li></ul><ul><ul><li>Defines the definition for your document DTD </li></ul></ul><ul><ul><li>Well formed and properly nested </li></ul></ul><ul><ul><li>3 types: </li></ul></ul><ul><ul><ul><li>Strict <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul></ul></ul><ul><ul><ul><li>Transitional <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul></ul></ul><ul><ul><ul><li>Frameset <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> </li></ul></ul></ul>
    13. 13. To be precise <ul><li>Organize content (tags) </li></ul><ul><ul><li><html></html>, <body></body> </li></ul></ul><ul><ul><li><h1></h1>, <a></a> </li></ul></ul><ul><ul><li><strong></strong>, <em></em> </li></ul></ul><ul><ul><li><p></p>, <div></div> </li></ul></ul><ul><ul><li><table></table> </li></ul></ul><ul><ul><li><img />, <br /> </li></ul></ul><ul><ul><li><link />, <meta />, <script></script> </li></ul></ul><ul><li>Hierarchy (semantic, dtd) </li></ul><ul><ul><li><p><a></p></a> , but <p><a></a></p> </li></ul></ul><ul><ul><li><a><body></body></a> </li></ul></ul><ul><li>Navigation (links) </li></ul><ul><ul><li>href, target </li></ul></ul><ul><ul><li>frames </li></ul></ul>
    14. 14. To be precise (cont’d) <ul><li>Well-formed </li></ul><ul><ul><li>Every tag in lowercase </li></ul></ul><ul><ul><li>Indent </li></ul></ul><ul><ul><ul><li><html> <head> <title></title> </head> ... </html> </li></ul></ul></ul><ul><ul><li>Empty tags with slashes </li></ul></ul><ul><ul><ul><li><br />, <img />, ... </li></ul></ul></ul><ul><ul><li>Correct use of attributes </li></ul></ul><ul><ul><ul><li>HTML: <input type=“checkbox” checked> </li></ul></ul></ul><ul><ul><ul><li>xHTML: <input type=“checkbox” checked=“checked”> </li></ul></ul></ul>
    15. 15. To be precise (cont’d) <ul><li>Attributes for every element </li></ul><ul><ul><li>class, id, style </li></ul></ul><ul><ul><li>title </li></ul></ul><ul><ul><li>dir, lang, acceskey, tabindex </li></ul></ul><ul><li>Specific attributes </li></ul><ul><ul><li>a: href, target </li></ul></ul><ul><ul><li>img: src, alt, longdesc </li></ul></ul><ul><ul><li>input, button: type, name, value </li></ul></ul><ul><ul><li>label: for </li></ul></ul><ul><ul><li>select: size, multiple, disabled </li></ul></ul><ul><ul><li>form: action, method, enctype </li></ul></ul><ul><ul><li>map: name </li></ul></ul><ul><ul><li>area: shape, coords, href </li></ul></ul>
    16. 16. Problem solved! <ul><li>Searchbots love it (SEO) </li></ul><ul><ul><li>Title on links and images </li></ul></ul><ul><ul><li>Highlighted text will have a higher weight as keyword </li></ul></ul><ul><li>Accessibility is improved </li></ul><ul><ul><li>Page is read like a book </li></ul></ul><ul><ul><li>Put titles on links and images, and maybe long description </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>Techniques: http://www.w3.org/TR/WCAG20-TECHS/ </li></ul></ul><ul><li>Mobile devices will have no problem reading and rendering your code </li></ul>
    17. 17. Validation <ul><li>Does your code meet all these standards? </li></ul><ul><li>http://validator.w3.org/ </li></ul>
    18. 18. <ul><li>But what about our layout... </li></ul>
    19. 19. CSS joins the party <ul><ul><li>background-* </li></ul></ul><ul><ul><li>border-* </li></ul></ul><ul><ul><li>clear, cursor, display, float, position, visibility </li></ul></ul><ul><ul><li>height, line-height, width </li></ul></ul><ul><ul><li>font-* </li></ul></ul><ul><ul><li>list-* </li></ul></ul><ul><ul><li>margin-*, padding-* </li></ul></ul><ul><ul><li>bottom, clip, left, overflow, right, top, vertical-align, z-index </li></ul></ul><ul><ul><li>border-collapse, border-spacing, caption-side, empty-cells, table-layout </li></ul></ul><ul><ul><li>color, direction, letter-spacing, text-*, white-space, word-spacing </li></ul></ul>
    20. 20. CSS joins the party (cont’d) <ul><ul><li>background-* </li></ul></ul><ul><ul><li>border-* </li></ul></ul><ul><ul><li>clear, cursor, display, float, position, visibility </li></ul></ul><ul><ul><li>height, line-height, width </li></ul></ul><ul><ul><li>font-* </li></ul></ul><ul><ul><li>list-* </li></ul></ul><ul><ul><li>margin-*, padding-* </li></ul></ul><ul><ul><li>bottom, clip, left, overflow, right, top, vertical-align, z-index </li></ul></ul><ul><ul><li>border-collapse, border-spacing, caption-side, empty-cells, table-layout </li></ul></ul><ul><ul><li>color, direction, letter-spacing, text-*, white-space, word-spacing </li></ul></ul>
    21. 21. CSS: How to use <ul><ul><li>Use a seperate CSS file to define your design <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; ref=&quot;css/mystyle.css&quot;  media=&quot;?&quot; /> </li></ul></ul><ul><li>Use id(#element), class (.element) or style(inline) attributes </li></ul><ul><li>Example: <body> <div id=“navigation”> <ul style=“margin: 10px”> <li class=“list_item”>Home</li> <li class=“list_item”>Contact</li> </ul> </div> </body> </li></ul>
    22. 22. Tables are bad karma <ul><li>Lose tables, they constrain flexibility </li></ul><ul><ul><li>Tables are for data listings </li></ul></ul><ul><li>Use <div>’s instead </li></ul><ul><ul><li>www.csszengarden.com </li></ul></ul><ul><li>Position elements with: </li></ul><ul><ul><li>Position: relative, absolute, fixed </li></ul></ul><ul><ul><li>Float: left, right </li></ul></ul><ul><li>Use ‘em’ metric for font-sizes </li></ul><ul><ul><li>Remember the disabled! </li></ul></ul>
    23. 23. Browser compatibility <ul><li>Not every browser treats your code alike </li></ul><ul><li>Reset every element to box model: * { margin: 0; padding: 0; border: 0; } </li></ul><ul><li>Use a reset.css to reset every tag </li></ul><ul><ul><li>http://meyerweb.com/eric/tools/css/reset/ </li></ul></ul><ul><li>Even then... <!--[if lte IE 6]> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css“ href=&quot;css/ie.css&quot; title=&quot;iehack&quot; media=&quot;screen&quot; /> </li></ul><ul><li><![endif]--> </li></ul>
    24. 24. Useful tools <ul><li>Firefox </li></ul><ul><ul><li>Firebug (+YSlow) </li></ul></ul><ul><ul><li>Developer toolbar </li></ul></ul><ul><ul><li>Ietab </li></ul></ul><ul><ul><li>GridFox </li></ul></ul><ul><li>W3C Validators </li></ul><ul><li>CSS Frameworks </li></ul><ul><ul><li>YAML </li></ul></ul><ul><ul><li>960.gs </li></ul></ul><ul><ul><li>Blueprint </li></ul></ul>
    25. 25. The Future: HTML 5 <ul><li>Media interfaces: <video>, <audio>, ... </li></ul><ul><li>Generic tags: <navigation>, <content>,... </li></ul><ul><li>Extended DOM API’s </li></ul><ul><ul><li>Offline storage database </li></ul></ul><ul><ul><li>Native drag and drop </li></ul></ul><ul><ul><li>Real-time events from server </li></ul></ul><ul><ul><li>Drawing panes </li></ul></ul><ul><ul><li>Document editing </li></ul></ul><ul><li>The future is bright... But still far away </li></ul><ul><ul><li>expected W3C Candidate: 2012 </li></ul></ul><ul><ul><li>expected W3C recommondation: 2022 or later </li></ul></ul>
    26. 26. Questions?

    ×