Web standards solutions : the markup and style handbook / D. Cedarholm.

Enhanced descriptions from Syndetics:

Web standards are the standard technology specifications enforced by the World Wide Web Consortium (W3C) to make sure that web designers and browser manufacturers are using the same technology syntax. It is important that these implementations are the same throughout the Web, otherwise it becomes a messy proprietary place, and lacks consistency. These standards also allow content to be more compatible with multiple different viewing devices, such as screen readers for people with vision impairments, cell phones, PDFs, etc. HTML, XML, and CSS are all such technologies.

This book is your essential guide to understanding the advantages you can bring to your web pages by implementing web standards and precisely how to apply them.

Web standards such as XHTML and CSS are now fairly well-known technologies, and they will likely be familiar to you, the web designerindeed, they are all around you on the Web. However, within web standards still lies a challengewhile the browser's support for web standards is steadily increasing, many web developers and designers have yet to discover the real benefits of web standards and respect the need to adhere to them. The real art is in truly understanding the benefits and implementing the standards efficiently.

As a simple example of its power, you can use CSS to lay out your pages instead of nesting tables. This can make file sizes smaller, allowing pages to load faster, ultimately increasing accessibility for all browsers, devices, and web users.

Web Standards Solutions is broken down into 16 short chapters, each covering the theory and practice of different web standards concept and showing multiple solutions to given problems for easy learning. You'll learn about multi-column layouts, using image replacement techniques to your best advantage, making the best use of tables and lists, and many more. This highly modular approach allows you to rapidly digest, understand, and utilize the essentials of web standards.

Table of contents provided by Syndetics

• Foreword (p. xv)
• About the Author (p. xvi)
• About the Technical Reviewer (p. xvii)
• Acknowledgments (p. xix)
• Introduction (p. xxi)
• Part 1 Get Down with Markup
• Chapter 1 Lists (p. 1)
• Let's go shopping (p. 2)
• Quiz time (p. 2)
• Method A The [left angle bracket]br /[right angle bracket] breakdown (p. 2)
• It's a wrap (p. 3)
• Method B The bullet that bites (p. 4)
• Validation, please (p. 4)
• Method C Getting closer (p. 5)
• Method D Wrapper's delight (p. 6)
• Summary (p. 7)
• Extra credit (p. 7)
• Bite the bullet (p. 8)
• Getting fancier with custom bullets (p. 9)
• Lists that navigate (p. 10)
• Mini-tab shapes (p. 12)
• Chapter 2 Headings (p. 15)
• What is the best way to mark up the title of a document? (p. 16)
• Method A Meaningful? (p. 16)
• Method B The p and b combo (p. 17)
• Difficult to style (p. 17)
• Method C Style and substance (p. 17)
• Easily styled (p. 17)
• Default distaste (p. 18)
• Search engine friendly (p. 19)
• An aside on heading order (p. 19)
• Summary (p. 20)
• Extra credit (p. 20)
• Simple styling (p. 20)
• Adding backgrounds (p. 22)
• Backgrounds and borders (p. 22)
• Tiled backgrounds (p. 23)
• Swappable icons (p. 23)
• Easy updates (p. 24)
• The chameleon effect (p. 24)
• Aligning the [left angle bracket]img[right angle bracket] tag (p. 25)
• Wrapping up (p. 26)
• Chapter 3 Tables Are Evil? (p. 29)
• Totally tabular (p. 30)
• A table that everyone can sit at (p. 30)
• Adding a summary (p. 33)
• The head(s) of the table (p. 33)
• Header and data relationships (p. 35)
• Using the abbr attribute (p. 36)
• [left angle bracket]thead[right angle bracket], [left angle bracket]tfoot[right angle bracket], and [left angle bracket]tbody[right angle bracket] (p. 37)
• Are tables evil? (p. 39)
• Extra credit (p. 39)
• Creating a grid (p. 39)
• Collapse the gaps (p. 40)
• IE/Mac-less version (p. 41)
• Spaced out (p. 41)
• Customize those headers (p. 42)
• Headers with background images (p. 43)
• Tiny tile (p. 44)
• The CSS (p. 44)
• Assigning icons to IDs (p. 45)
• The icons (p. 45)
• The CSS (p. 45)
• Combining rules for simpler bits (p. 47)
• Wrapping up (p. 48)
• Chapter 4 Quotations (p. 51)
• Method A Lacks meaning (p. 52)
• Method B A class act? (p. 52)
• Method C [left angle bracket]blockquote[right angle bracket] is best (p. 53)
• Using a screwdriver to hammer a nail (p. 53)
• Summary (p. 54)
• Extra credit (p. 54)
• A cite for curious eyes (p. 54)
• Inline quotations (p. 55)
• No need for marks (p. 55)
• Nesting inline quotations (p. 56)
• Styling [left angle bracket]blockquote[right angle bracket] (p. 56)
• Background quote marks (p. 56)
• Three images (p. 56)
• Tagging the elements (p. 57)
• Three elements, three backgrounds (p. 57)
• The results (p. 59)
• Calling out special words (p. 60)
• How does it degrade? (p. 61)
• Wrapping up (p. 61)
• Chapter 5 Forms (p. 63)
• What are our options when marking up a form? (p. 64)
• Method A Using a table (p. 64)
• Method B Tableless, but cramped (p. 65)
• Method C Simple and more accessible (p. 66)
• The [left angle bracket]label[right angle bracket] element (p. 67)
• Why [left angle bracket]label[right angle bracket]? (p. 67)
• Method D Defining a form (p. 68)
• Defining style (p. 69)
• Summary (p. 70)
• Extra credit (p. 71)
• The fabulous tabindex (p. 71)
• Why tabindex? (p. 72)
• accesskey for frequented forms (p. 72)
• Easily accessed search (p. 73)
• Styling forms (p. 73)
• Setting the width of text inputs (p. 73)
• Using [left angle bracket]label[right angle bracket] to customize fonts (p. 74)
• No need to be redundant (p. 76)
• Use [left angle bracket]fieldset[right angle bracket] to group form sections (p. 76)
• Adding style to [left angle bracket]fieldset[right angle bracket] and [left angle bracket]legend[right angle bracket] (p. 77)
• Three-dimensional [left angle bracket]legend[right angle bracket] (p. 78)
• Wrapping up (p. 79)
• Chapter 6 [left angle bracket]strong[right angle bracket], [left angle bracket]em[right angle bracket], and Other Phrase Elements (p. 81)
• Presentational vs. structural (p. 82)
• Why are [left angle bracket]strong[right angle bracket] and [left angle bracket]em[right angle bracket] better than [left angle bracket]b[right angle bracket] and [left angle bracket]i[rightangle bracket]? (p. 82)
• Check in with the experts (p. 82)
• Method A (p. 83)
• Method B (p. 83)
• Bold and beautiful (p. 83)
• What about [left angle bracket]em[right angle bracket]? (p. 83)
• Method A (p. 83)
• Method B (p. 84)
• Emphasis mine (p. 84)
• Just bold or italic, please (p. 84)
• Worth its (font-)weight in bold (p. 85)
• That's italic! (p. 85)
• Both bold and italic (p. 85)
• Generic [left angle bracket]span[right angle bracket] (p. 86)
• Emphasis with class (p. 86)
• Summary (p. 86)
• Extra credit (p. 87)
• The phrase elements (p. 87)
• [left angle bracket]cite[right angle bracket] design (p. 87)
• The specification (p. 88)
• A change in [left angle bracket]cite[right angle bracket] style (p. 88)
• Leveraging the structure (p. 89)
• [left angle bracket]abbr[right angle bracket] and [left angle bracket]acronym[right angle bracket] (p. 90)
• Define once (p. 90)
• The presentation (p. 91)
• Compatibility issues (p. 91)
• [left angle bracket]code[right angle bracket] (p. 92)
• [left angle bracket]samp[right angle bracket] (p. 92)
• [left angle bracket]var[right angle bracket] (p. 92)
• [left angle bracket]kbd[right angle bracket] (p. 93)
• Final phrase (p. 93)
• Chapter 7 Anchors (p. 95)
• When pointing to a specific portion of a page, what is the best way to mark up an anchor? (p. 96)
• Method A An empty name (p. 96)
• Method B It's all in a name (p. 97)
• Beware of global [left angle bracket]a[right angle bracket] styling (p. 97)
• Richer name attribute (p. 98)
• Method C Lose the name (p. 98)
• Two birds with one stone (p. 99)
• Older browsers and the id attribute (p. 99)
• Method D The all-in-one (p. 100)
• Sharing names (p. 100)
• Summary (p. 100)
• Extra credit (p. 101)
• The title attribute (p. 101)
• Title in action (p. 102)
• Tooltip titles (p. 102)
• Titles are spoken (p. 103)
• Styling links (p. 103)
• Backgrounds (p. 104)
• Dotted borders (p. 104)
• Where you been? (p. 105)
• Hovering (p. 105)
• Active state (p. 106)
• LoVe/HAte your links (p. 106)
• Anchors aweigh (p. 107)
• Chapter 8 More Lists (p. 109)
• What is the best way to mark up a numbered list of items? (p. 110)
• Method A Unordered order (p. 110)
• The numbers game (p. 110)
• Rendered bullets (p. 111)
• Method B An ordered list (p. 111)
• Automatic numbering (p. 111)
• Wrapper's delight II (p. 112)
• List types (p. 112)
• What is the best way to mark up a set of terms and descriptions? (p. 113)
• Method A (p. 113)
• Method B (p. 114)
• Structure leads to style (p. 115)
• Adding icons (p. 115)
• Other applications (p. 116)
• Summary (p. 116)
• Extra credit (p. 117)
• Identify the parts (p. 117)
• Custom numbers (p. 118)
• Adding the numbers to the CSS (p. 118)
• The results (p. 119)
• Wrapping up (p. 120)
• Chapter 9 Minimizing Markup (p. 123)
• How can we minimize markup when building sites with web standards? (p. 124)
• Descendant selectors (p. 124)
• Method A Class happy (p. 124)
• Classified CSS (p. 125)
• Method B Natural selection (p. 125)
• Contextual CSS (p. 126)
• Not just for sidebars (p. 126)
• Less class means easier maintenance (p. 127)
• The unnecessary [left angle bracket]div[right angle bracket] (p. 128)
• Method A [left angle bracket]div[right angle bracket] happy (p. 128)
• Method B Lose the [left angle bracket]div[right angle bracket] (p. 129)
• Other examples (p. 129)
• Summary (p. 130)
• Extra credit (p. 130)
• The raw markup (p. 130)
• Adding style (p. 131)
• Custom bullets (p. 132)
• Adding a border (p. 133)
• Conclusion (p. 135)
• Part 2 Simplebits of Style
• Chapter 10 Applying CSS (p. 137)
• How do I apply CSS to a document? (p. 138)
• Method A The [left angle bracket]style[right angle bracket] element (p. 138)
• Partial understanding (p. 139)
• Uncached (p. 139)
• Multiple changes (p. 139)
• Good for development (p. 139)
• Method B External style sheets (p. 139)
• Separate file = easy maintenance (p. 140)
• Download once (p. 140)
• Still not completely hidden (p. 140)
• Method C import (p. 140)
• Hide and seek (p. 141)
• Styles on, styles off (p. 141)
• Combining B and C for multiple style sheets (p. 142)
• The chameleon effect (p. 142)
• How it's done (p. 142)
• Lo-fi and hi-fi styles (p. 143)
• Order is important (p. 144)
• Embrace the cascade (p. 144)
• Method D Inline styles (p. 145)
• Style tied to markup (p. 145)
• Use with caution (p. 146)
• Summary (p. 146)
• Extra credit (p. 147)
• Alternate styles (p. 147)
• Three font sizes (p. 148)
• Still cascading (p. 148)
• Getting alternate styles to work (p. 149)
• More than just font sizing (p. 150)
• Courtesy of DOM (p. 150)
• Conclusion (p. 151)
• Chapter 11 Print Styles (p. 153)
• How can we specify styles for print? (p. 154)
• Media types (p. 154)
• Two ways to target (p. 155)
• Method A The media attribute (p. 155)
• Partial support (p. 155)
• Method B @media or @import (p. 155)
• In the head or externally (p. 156)
• Multiple values allowed (p. 156)
• Separating screen and print styles (p. 157)
• Building a print style sheet (p. 157)
• Make a point (p. 158)
• Save ink by hiding unnecessary elements (p. 158)
• Expose links (p. 159)
• Link text (p. 160)
• Save ink with print preview (p. 160)
• How it looks (p. 160)
• Summary (p. 162)
• Chapter 12 CSS Layouts (p. 165)
• How can I use CSS to build a two-column layout? (p. 166)
• Method A Floating the sidebar (p. 167)
• Styling the header and footer (p. 168)
• Floating the sidebar (p. 169)
• True columns (p. 169)
• Method B The double float (p. 172)
• Clear both (p. 173)
• Method C Floating the content (p. 173)
• The CSS (p. 173)
• Background woes (p. 174)
• Plain and simple (p. 175)
• Method D Positioning (p. 176)
• Predictable height (p. 177)
• Space for the column (p. 177)
• Drop in the sidebar (p. 178)
• The footer issue (p. 178)
• Three's company (p. 180)
• Summary (p. 183)
• Extra credit (p. 183)
• The box model problem (p. 183)
• Seeing is believing (p. 184)
• Wavering widths (p. 185)
• The Box Model Hack (p. 185)
• Code by example (p. 185)
• Be nice to Opera (p. 186)
• Not just for widths (p. 186)
• Faux columns (p. 187)
• Vertical stretch (p. 187)
• The cheat (p. 188)
• The CSS (p. 188)
• Positioned columns (p. 188)
• Whatever floats your boat (p. 189)
• Wrapping up (p. 189)
• Chapter 13 Styling Text (p. 191)
• How can I make hypertext look cool? (p. 192)
• Times they are a-changing (p. 192)
• Changing line height (p. 193)
• All in the family (p. 194)
• Font names with spaces (p. 194)
• Kerning (a.k.a. letter-spacing) (p. 195)
• Drop caps (p. 196)
• Text alignment (p. 197)
• Transforming text (p. 199)
• Small caps (p. 199)
• Paragraph indentation (p. 200)
• Summary (p. 201)
• Chapter 14 Image Replacement (p. 203)
• How can I use CSS to replace text with images? (p. 204)
• No perfect solution (p. 204)
• Use, but with caution (p. 204)
• Method A Fahrner Image Replacement (FIR) (p. 204)
• The markup (p. 205)
• The extra tag (p. 205)
• The CSS (p. 205)
• Hide the text (p. 206)
• Assign a background (p. 206)
• Advantages (p. 207)
• Drawbacks (p. 207)
• Weigh the pros and cons (p. 208)
• Method B Leahy/Langridge Image Replacement (LIR) (p. 208)
• The markup and CSS (p. 208)
• Box model woes (p. 209)
• Drawbacks (p. 209)
• Method C The Phark Method (p. 209)
• The markup and CSS (p. 210)
• Still not perfect (p. 210)
• Summary (p. 211)
• Extra credit (p. 212)
• Logo swapping (p. 212)
• Hi-fi and lo-fi (p. 212)
• The example (p. 212)
• A pair of logos (p. 213)
• The CSS (p. 213)
• Regain the hyperlink (p. 214)
• The results (p. 214)
• Accessible image-tab rollovers (p. 215)
• The problem (p. 215)
• The solution (p. 216)
• The markup: One list to rule them all (p. 216)
• One image, three states (p. 217)
• The CSS: This is where the magic happens (p. 217)
• The results (p. 218)
• Why use it? (p. 219)
• But wait, the text doesn't scale! (p. 219)
• Compatibility (p. 220)
• Wrapping up (p. 220)
• Chapter 15 Styling [left angle bracket]body[right angle bracket] (p. 223)
• Two and sometimes three columns (p. 224)
• Markup and style structure (p. 225)
• Article page (p. 226)
• Index page (p. 226)
• This [left angle bracket]body[right angle bracket] has class (p. 227)
• Not just for columns (p. 227)
• "You are here" (p. 228)
• The navigation list (p. 228)
• Identify the parts (p. 229)
• The magic CSS (p. 230)
• Summary (p. 231)
• Chapter 16 Next Steps (p. 233)
• Where do you go from here? (p. 234)
• Organizations and publications (p. 234)
• W3C (p. 234)
• Web Standards Project (p. 234)
• A List Apart (p. 234)
• CSS Zen Garden (p. 235)
• Dive Into Accessibility (p. 235)
• css-discuss (p. 235)
• Web-Graphics (p. 235)
• Digital Web Magazine (p. 235)
• The Weekly Standards (p. 236)
• Influential and inspirational weblogs (p. 236)
• Jeffrey Zeldman Presents: The Daily Report (p. 236)
• Stopdesign (p. 236)
• mezzoblue (p. 236)
• meyerweb.com (p. 236)
• Tantek Celik (p. 237)
• What Do I Know? (p. 237)
• Asterisk* (p. 237)
• Superfluousbanter (p. 237)
• Simon Willison's Weblog (p. 237)
• Brainstorms and Raves (p. 237)
• Living Can Kill You (p. 237)
• Books (p. 238)
• Designing With Web Standards (p. 238)
• Cascading Style Sheets: The Definitive Guide (p. 238)
• Speed Up Your Site: Web Site Optimization (p. 238)
• Parting words (p. 238)
• Index (p. 241)