1 / 60

HTML

HTML. Seriously. Are you fricken’ kidding me?. We think we know HTML but... Wither Web Standards HTML XHTML Strict HTML 5. Structural Markup. Sandra Clark. Semantic / Structural Markup. Using (X)HTML to describe what the content means , n ot what we want it to look like. After all.

iago
Download Presentation

HTML

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. HTML Seriously

  2. Are you fricken’ kidding me? • We think we know HTML but... • Wither Web Standards • HTML • XHTML Strict • HTML 5

  3. Structural Markup Sandra Clark

  4. Semantic / Structural Markup Using (X)HTML to describe what the content means, not what we want it to look like

  5. After all... • (X)HTML – markup • CSS – presentation • DOM – behavior • JavaScript

  6. Benefits of Semantic Markup • Reduces file size • Reduces bandwidth • Better Search Engine Results • Easier Maintenance • One site can serve many types of users • Accessibility!

  7. Need Proof?

  8. Problems with Tables • Large page weight • Presentation and content are mixed • Must be downloaded with each page • Redesigns are expensive • Visual consistency is harder to maintain • Harder on cell phones, PDAs • Inaccessible

  9. <!DOCTYPE...>

  10. <!DOCTYPE ...> • First line of a page • Tells the browser what version of HTML is being used and dictates how the page should be rendered • Required for CSS

  11. <!DOCTYPE ...> and Rendering Modes • Most browsers still have to support their past mistakes • Standards Mode • Render according to WC3 standards, more or less the same accross browsers • “Quirks mode” • Render according to it’s old proprietary methods, not the same on all browsers!

  12. <!DOCTYPE...> sniffing • Determines rendering mode • Only two trigger standards-compliance in all browsers: • HTML 4.01 Strict • XHTML 1.0 Strict (minus XML prolog) • XML prolog throws IE6 back into quirks mode

  13. HTML or XHTML? • XHTML requires XML standards • Easier to validate against WC3 validator • Reduced errors • All elements must be closed • Easier to fix problems with CSS, JavaScript

  14. XHTML Performance? • Can’t serve as XML (IE) • Browsers still treat as “tag soup” • No (noticeable) performance gain vs. HTML 4.01

  15. Validation • Tools • http://validator.w3c.org/ • HTML Validator Firefox extension • Why validate? • Verifies clean document before styling it, adding DOM behavior • 1st step when fixing problems

  16. Both are valid HTML 4.01 Strict XHTML 1.0 Strict <p>Below is a list.</p> <p><img src=“m.gif” alt=“” /></p> <ul> <li>Lorem ipsum...</li> <li>Lorem ipsum...</li> <li>Lorem ipsum...</li> </ul> <p>Below is a list. <p><img src=“m.gif” alt=“”> <ul> <li>Lorem ipsum... <li>Lorem ipsum... <li>Lorem ipsum... </ul>

  17. Text Must always be enclosed in an XHTML element (other than <html>,<body>)

  18. Text Wrong <!DOCTYPE...> <html> <head>....</head> <body>This is some text<br><br>This is more text </body> <html>

  19. Text Wrong Right <!DOCTYPE...> <html> <head>....</head> <body><p>This is some text</p><p>This is more text</p> </body> <html> <!DOCTYPE...> <html> <head>....</head> <body>This is some text<br><br>This is more text </body> <html>

  20. Text • Text always needs to be within an xHTML element. • Text outside of an element is referred to as “anonymous text”. • Text that is only contained within table cells that is not tabular data is considered anonymous text.

  21. Deprecated Elements • <applet></applet> • <basefont /> • <center></center> • <dir></dir> • <font></font> • <isindex /> • <menu></menu> • <s></s> • <strike></strike> • <u></u> All are presentational elements

  22. Deprecated Attributes • align (table, td, etc.) • background • bgcolor • color • compact (lists) • face (fonts) • height (td, th) • hspace • link (body) • noshade (hr) • nowrap (td) • size (font) • start (ol) • text (body)

  23. Deprecated Attributes • type (lists) • value (li) • vlink (body) • width (except for <col /> and <colgroup />) All are presentational elements

  24. Getting Semantic

  25. Headings • Create topic structure; break document into more easily understood sections • Order is important: <h1>Primary heading</h1> (only 1 per page) <h2>Secondary heading</h2> <h3>Tertiary heading</h3> <h2>Secondary heading II</h2>

  26. Headings • Never use them for font size, only for meaning • We can always style them with CSS

  27. Paragraphs W3C says: • “The P element represents a paragraph. It cannot contain block-level elements (including P itself). • “We discourage authors from using empty P elements. User agents should ignore empty P elements.” • 9.3.1 Paragraphs: the P element

  28. Line Breaks <br /> <body><font size=“+2”>Main Heading</font><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br> Aliquam mollis eros a diam. Cras rutrum sollicitudin metus. Nam dictum sem vel turpis.</p> </body>

  29. Line Breaks <br /> <body><h1>Main Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Aliquam mollis eros a diam. Cras rutrum sollicitudin metus. Nam dictum sem vel turpis.</p> </body>

  30. Line Breaks <br /> • Line breaks are probably the most overused element (besides tables) • Use paragraphs <p> instead of using <br /> to separate paragraph elements • Use list elements to mark up groupings of elements rather than separating those items with <br /> • Use CSS to set margins, paddings instead of a series of <br />’s.

  31. Emphasis • <em>...</em> • Content is emphasized • Itaicization is just the browser’s default style • <strong>...</strong> • Content is strongly emphasized • Bold is just the browser’s defualt style • Do not use these elements for their visual impact, use CSS for the visual

  32. Cite • Use when containing citation or reference to other sources. <p>The book, <cite>Designing with Web Standards</cite>, is a must read for web designers.</p>

  33. Quotations - <blockquote> • Used for containing long quotations (block level content) • Include the citation within the <blockquote> in the cite attribute.

  34. <blockquote cite=“...”> example <blockquote cite="http://mycom.com/tolkien/twotowers.htm"> <p>They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.</p> </blockquote>

  35. Quotations - <q> • Used for short, inline quotations • Not supported by browsers at the moment. <p>John said, <q>I saw Lucy at lunch, she told me <q>Mary wants you to get some ice cream on your way home.</q> I think I will get some at Ben and Jerry's, on Gloucester Road.</q></p>

  36. Lists, Ordered <ol> • Information grouped in a specific order <p>The OODA loop is the cycle of the decision-making process:</p> <ol><li>Observation</li><li>Orientation</li><li>Decision</li><li>Action</li> </ol> • Don’t want to see numbers? Use CSS.

  37. Lists, Unordered <ul> • Information grouped in no particular order <p>Main Menu:</p> <ul><li><a href=“#”>Home</a></li><li><a href=“#”>News</a></li><li><a href=“#”>Calendar</a></li><li><a href=“#”>Contact</a></li> </ul> • Don’t want to see bullets? Use CSS.

  38. Lists, Definition <dt> • Terms and Definition • Display Information (Caption & Description) <dl><dt>Name</dt><dd>Christian Ready</dd><dt>E-mail</dt><dd>chris@christianready.com</dd><dt>Message</dt><dd>Can you tell me how to get to Sesame Street?</dd> </dt>

  39. Tables • Tables are still used for tabular data. • We are all familiar with • <table></table> • <tr></tr> • <td></td>

  40. Table Summary • <table summary=“”> • Describes the table’s purpose • Never displayed <table summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> tablesumcap.html

  41. Table Caption • <caption></caption> • Displays a caption describing the table • Must be placed directly after the <table> tag <table summary="This table charts the number of..."> <caption>Cups of coffee consumed by each senator</caption> tablesumcap.html

  42. Tables - Columns • <colgroup> • defines a group of columns in the table and allows you to set properties of those columns • Used directly after <table> and before any other tags. <colgroup span=“30” width=“20”> </colgroup> • Creates a row of 30 cells each 20px in width. tablecolgroup.html

  43. Tables - Columns • <col /> • Used within <colgroup> to set properties for a specific column • After the <table> tag and before any of the other table elements <colgroup> <col /> </colgroup> <colgroup span="2"> tablecol.html

  44. Tables - Groupings • <thead></thead> • <tfoot></tfoot> • <tbody></tbody> • Allow rows <tr> to be grouped into header, footer and body groupings. tablethead.html

  45. Tables – Associating Cells & Headings (Simple) • “scope” attribute • Express relationship of header cells to other elements in the table • Used in simple tables

More Related