HTML and CSS Web Standards Solutions: A Web Standardistas' Approach

HTML and CSS Web Standards Solutions: A Web Standardistas' Approach

Released December 2008
Publisher(s): Apress
ISBN: 9781430216063

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

This book will teach you how to build hand-crafted web pages the Web Standardistas way: using well-structured XHTML for content and CSS for presentation.

By embracing a web standards approach, you will hold the key to creating web sites that not only look great in all modern browsers, but also are accessible to a wide variety of audiences across a range of platforms—from those browsing on everyday computers, to those accessing the Web on the latest emerging mobile devices.

Even if you're an absolute beginner in web design, this book will teach you how to build future-proof web pages the right way using easy-to-master tools which are, in most cases, free. Through 14 easy-to-follow chapters, we introduce you to the fundamentals of contemporary web design practice. Step by step we'll assemble well-structured XHTML webpages, which we'll then style using handcrafted CSS.

By the end of the book, you'll have a firm knowledge of the essentials of web design: everything you need to know to move forward in your lifelong journey as a Web Standardista.

To equip you on this noble quest, we've included enjoyable practical assignments at the end of each chapter. Embracing these challenges will not only teach you how to create great looking web sites that are the envy of your peers, but also equip you with an unrivaled knowledge of monkeys that journeyed to space and apes that starred in the movies—the real stars of this book.

On completion of this book not only will you be able to create well-crafted web sites, but you will have earned the badge of a Web Standardista, proving your worth as a good citizen of the Web.

Table of contents

  1. Copyright
  2. About the Authors
    1. About the Technical Reviewer
  3. Acknowledgments
  4. Introduction
    1. A little background
    2. Who is this book aimed at?
    3. What you'll achieve
    4. Conventions used in this book
    5. Accessing the code
  5. 1. A Solid XHTML Foundation
    1. 1. Are You a Web Standardista?
      1. 1.1. A brief history of the World Wide Web
        1. 1.1.1. The Web is born
          1. 1.1.1.1. The perfect Web
          2. 1.1.1.1.2. The chaotic Web
        2. 1.1.2. HTML rewind
        3. 1.1.3. HTML evolved
          1. 1.1.3.1. The X in XHTML
      2. 1.2. A web standards approach
        1. 1.2.1. What are standards?
        2. 1.2.2. So, web standards?
      3. 1.3. Why use web standards?
        1. 1.3.1. Separating content and presentation
        2. 1.3.2. Efficiency through reduced markup
        3. 1.3.3. Increased accessibility
        4. 1.3.4. Cross-browser compatibility
        5. 1.3.5. Nonbrowser compatibility
        6. 1.3.6. Forward compatibility
      4. 1.4. The Web Standardistas' approach
        1. 1.4.1. Wax on . . . wax off
        2. 1.4.2. Why use XHTML?
        3. 1.4.3. The benefits of CSS
      5. 1.5. The Web Standardistas' toolbox
        1. 1.5.1. We're not WYSIWYG
        2. 1.5.2. What's your favorite plain text editor?
        3. 1.5.3. Mac OS X, Windows, or Linux?
      6. 1.6. Summary
      7. 1.7. Homework: Set up your work environment
        1. 1.7.1.
          1. 1.7.1.1.
            1. 1.7.1.1.1. 1. Research
            2. 1.7.1.1.2. 2. Select, download, and install a text editor
    2. 2. Building Basic Web Pages
      1. 2.1. HTML: Tags in action
        1. 2.1.1. What are tags?
        2. 2.1.2. Tags come in pairs, usually
        3. 2.1.3. It's an element, my dear Watson
      2. 2.2. Your first web page: Hello World!
      3. 2.3. To mark up a web page, you just type
        1. 2.3.1. The markup makes the web page
        2. 2.3.2. Learning from others: How to view source
      4. 2.4. Every page has a <head> and a <body>
        1. 2.4.1. The importance of using the title element
      5. 2.5. Defining your document type
        1. 2.5.1. It all starts with a DOCTYPE
          1. 2.5.1. A short Quirks Mode interlude
          2. 2.5.2. It's all in a namespace
          3. 2.5.3. Just one more thing
        2. 2.5.2. You don't have to memorize all this
          1. 2.5.2.1. Hello World!: DOCTYPE edition
      6. 2.6. Tags have structure too: Nested elements
      7. 2.7. Making your markup easier to follow
        1. 2.7.1. Commenting your markup
        2. 2.7.2. White space
      8. 2.8. Summary
      9. 2.9. Homework: Create your first space-monkey-themed XHTML page
        1. 2.9.1.
          1. 2.9.1.1.
            1. 2.9.1.1.1. 1. Get started
            2. 2.9.1.1.2. 2. A basic web page
            3. 2.9.1.1.3. 3. Find out about Albert I
            4. 2.9.1.1.4. 4. Add a title
            5. 2.9.1.1.5. 5. Mark up the content
            6. 2.9.1.1.6. 6. Add a comment
            7. 2.9.1.1.7. 7. Test your page
    3. 3. Structured Markup
      1. 3.1. Adding structure and meaning
      2. 3.2. What is structured markup?
        1. 3.2.1. What is semantic markup?
        2. 3.2.2. Making markup meaningful
        3. 3.2.3. POSH and proud
      3. 3.3. Signposts for reading
        1. 3.3.1. Creating structure with headings and paragraphs
        2. 3.3.2. Applying information hierarchy
        3. 3.3.3. Case study: The Guardian
      4. 3.4. An introduction to phrase elements
        1. 3.4.1. What is an element?
        2. 3.4.2. Adding meaning to fragments of text
        3. 3.4.3. Adding emphasis: <em> and <strong>
        4. 3.4.4. Other phrase elements
      5. 3.5. Block-level and inline-level elements
        1. 3.5.1. Imagine a box
        2. 3.5.2. The difference between block-level and inline-level elements
      6. 3.6. Valid code is browser-friendly markup
        1. 3.6.1. The W3C Markup Validation Service
        2. 3.6.2. Valid code is not necessarily well-structured code
      7. 3.7. Getting the search mix right
      8. 3.8. Summary
      9. 3.9. Homework: Introducing Miss Baker
        1. 3.9.1.
          1. 3.9.1.1.
            1. 3.9.1.1.1. 1. Establish an information hierarchy
            2. 3.9.1.1.2. 2. Add <h1>–<h4> and <p> tags
            3. 3.9.1.1.3. 3. Add <em> and <strong>
            4. 3.9.1.1.4. 4. Validate your page
    4. 4. Markup That Adds Meaning
      1. 4.1. Lists: First-level organizers
        1. 4.1.1. Why use lists?
        2. 4.1.2. Unordered and ordered lists
        3. 4.1.3. Enter the ordered list
        4. 4.1.4. Nesting lists
        5. 4.1.5. Definition lists
      2. 4.2. Tables: The good, the bad, and the alternatives
        1. 4.2.1. What is tabular data?
        2. 4.2.2. <table>, <tr>, and <td>
        3. 4.2.3. Improving table accessibility
        4. 4.2.4. Adding a descriptive summary to a table
      3. 4.3. Quoting text
        1. 4.3.1. What's a <blockquote>?
        2. 4.3.2. Citations (or <cite>)
        3. 4.3.3. Quotations (or <q>)
      4. 4.4. Other tags in the Standardistas' toolbox
        1. 4.4.1. Abbreviations
        2. 4.4.2. Making a case for rules: <hr />
        3. 4.4.3. A note on self-closing tags
        4. 4.4.4. <code> and <pre>
        5. 4.4.5. Marking up changes with <del> and <ins>
        6. 4.4.6. <sup> and <sub>
      5. 4.5. Summary
      6. 4.6. Homework: Gordo's Adventure
        1. 4.6.1.
          1. 4.6.1.1.
            1. 4.6.1.1.1. 1. Explore the content
            2. 4.6.1.1.2. 2. Adding unordered lists
            3. 4.6.1.1.3. 3. Structuring the references
            4. 4.6.1.1.4. 4. Marking up a block quote
            5. 4.6.1.1.5. 5. Check for errors
    5. 5. Including Images
      1. 5.1. Introducing the <img /> tag
        1. 5.1.1. An <img /> tag in action
        2. 5.1.2. Adding width, height, and title attributes to images
      2. 5.2. Working with images
        1. 5.2.1. Which image editor? (Or how long is a piece of string?)
          1. 5.2.1.1. Photoshop
          2. 5.2.1.2. Fireworks
          3. 5.2.1.3. Photoshop Express
          4. 5.2.1.4. Bring out the GIMP (and its friends)
      3. 5.3. Image optimization
        1. 5.3.1. Why compressing your files is important
        2. 5.3.2. Save for Web
      4. 5.4. Image formats for the Web
        1. 5.4.1. JPG: Photographs
        2. 5.4.2. GIF: Graphics and type
        3. 5.4.3. PNG: The new (old) kid on the block
          1. 5.4.3.1. PNG-8
          2. 5.4.3.2. PNG-24
      5. 5.5. A pixel is a pixel is a pixel
        1. 5.5.1. Size matters
        2. 5.5.2. The limitations of bitmaps
        3. 5.5.3. Vector graphics
      6. 5.6. Finding the right image
        1. 5.6.1. Low-cost images
        2. 5.6.2. Flickr and Creative Commons
      7. 5.7. Summary
      8. 5.8. Homework: A picture is worth a thousand words
        1. 5.8.1.
          1. 5.8.1.1.
            1. 5.8.1.1.1. 1. Get the images
            2. 5.8.1.1.2. 2. Add your img elements
            3. 5.8.1.1.3. 3. Test!
            4. 5.8.1.1.4. 4. Research
    6. 6. Creating Links with Anchors
      1. 6.1. Meet <a>
        1. 6.1.1. Using descriptive link text
        2. 6.1.2. The title attribute
      2. 6.2. Let's create some links!
        1. 6.2.1. External links
          1. 6.2.1.1. The dreaded ampersand and the validator
          2. 6.2.1.2. Checking your links
          3. 6.2.1.3. The (evil) target attribute
        2. 6.2.2. Local links
        3. 6.2.3. Internal links
        4. 6.2.4. E-mail links
        5. 6.2.5. Wrapping up
      3. 6.3. Absolute vs. relative links
      4. 6.4. Structuring your site
        1. 6.4.1. Organizing your files and folders
        2. 6.4.2. The magic index file
      5. 6.5. Linking between different folders in our site
        1. 6.5.1. Linking within a folder
        2. 6.5.2. Linking down into a subfolder
        3. 6.5.3. Linking up into a "parent" folder
        4. 6.5.4. Linking up and then linking down
      6. 6.6. Summary
      7. 6.7. Homework: Housekeeping first; links second
        1. 6.7.1.
          1. 6.7.1.1.
            1. 6.7.1.1.1. 1. The content audit
            2. 6.7.1.1.2. 2. Here's one we prepared earlier
            3. 6.7.1.1.3. 3. Move your images into the images folder
            4. 6.7.1.1.4. 4. Move your monkey pages into the pioneers folder
            5. 6.7.1.1.5. 5. Fix the image references
            6. 6.7.1.1.6. 6. Add links to the references
            7. 6.7.1.1.7. 7. Link your pages together
    7. 7. Getting Your Site Online
      1. 7.1. Your address on the Web
        1. 7.1.1. What is a domain name?
        2. 7.1.2. What's a TLD?
        3. 7.1.3. Think of a name!
        4. 7.1.4. Registering a domain name
      2. 7.2. Web hosting
        1. 7.2.1. Free web hosting?
        2. 7.2.2. Getting the balance right
        3. 7.2.3. Things to look for in a hosting company
          1. 7.2.3.1. Disk space
          2. 7.2.3.2. Bandwidth
          3. 7.2.3.3. E-mail
          4. 7.2.3.4. A control panel
          5. 7.2.3.5. Support
        4. 7.2.4. Moving web hosts
      3. 7.3. Uploading your files
        1. 7.3.1. Local vs. remote
        2. 7.3.2. File Transfer Protocol
        3. 7.3.3. Propagation
      4. 7.4. Tools we're using
        1. 7.4.1. Which FTP client?
        2. 7.4.2. Transferring files to the server: A walkthrough
        3. 7.4.3. What you need
          1. 7.4.3.1. The address of the server
          2. 7.4.3.2. Your username
          3. 7.4.3.3. Your password
        4. 7.4.4. Let's get started
        5. 7.4.5. Online walkthrough
      5. 7.5. Summary
      6. 7.6. Homework: Getting your site online
        1. 7.6.1.
          1. 7.6.1.1.
            1. 7.6.1.1.1. 1. Research
            2. 7.6.1.1.2. 2. Download and install an FTP client
            3. 7.6.1.1.3. 3. Register a domain name
            4. 7.6.1.1.4. 4. Purchase some web space
            5. 7.6.1.1.5. 5. Connect to your server
            6. 7.6.1.1.6. 6. Upload your files
            7. 7.6.1.1.7. 7. Check your web site
            8. 7.6.1.1.8. 8. Invite your friends
  6. 2. Adding Style with CSS
    1. 8. CSS 101
      1. 8.1. Adding some style
        1. 8.1.1. HTML: A brief refresher
        2. 8.1.2. CSS isn't new
        3. 8.1.3. Tag soup or lean and mean?
        4. 8.1.4. CSS to the rescue
      2. 8.2. Meet CSS
        1. 8.2.1. Anatomy of a CSS rule
        2. 8.2.2. A note on formatting
        3. 8.2.3. A slightly more complex rule
      3. 8.3. Adding CSS to a web page
        1. 8.3.1. Adding an embedded style sheet
      4. 8.4. A simple walkthrough
        1. 8.4.1. Getting colorful
        2. 8.4.2. Styling the <body>
        3. 8.4.3. Styling the headings: <h1> and <h2>
        4. 8.4.4. Styling the <p>
        5. 8.4.5. Commenting your CSS
      5. 8.5. Summary
      6. 8.6. Homework: Adding some CSS to Gordo's web page
        1. 8.6.1.
          1. 8.6.1.1.
            1. 8.6.1.1.1. 1. Add your <style> tags
            2. 8.6.1.1.2. 2. Style the <body>
            3. 8.6.1.1.3. 3. Style the headings
            4. 8.6.1.1.4. 4. Style the paragraphs
            5. 8.6.1.1.5. 5. Add a comment
            6. 8.6.1.1.6. 6. Validate
    2. 9. Styling Text
      1. 9.1. Typography on the Web
        1. 9.1.1. What is typography?
        2. 9.1.2. CSS: Our flexible friend
        3. 9.1.3. Making your text accessible
      2. 9.2. Inheritance and specificity
        1. 9.2.1. Inheritance
        2. 9.2.2. Meet specificity
      3. 9.3. Specifying type on the Web
        1. 9.3.1. Core Web Fonts
        2. 9.3.2. Writing more reliable CSS rules to specify fonts
          1. 9.3.2.1. Serif
          2. 9.3.2.2. Sans serif
          3. 9.3.2.3. Monospace
          4. 9.3.2.4. Cursive
          5. 9.3.2.5. Fantasy
      4. 9.4. Size matters
        1. 9.4.1. Sizing text with pixels
        2. 9.4.2. Sizing text with ems
      5. 9.5. Writing more efficient rules
      6. 9.6. Show and tell: Adding a few more rules
        1. 9.6.1. Specifying a typeface
        2. 9.6.2. Let's lose some weight
        3. 9.6.3. Text transform
        4. 9.6.4. Letter spacing
        5. 9.6.5. Styling paragraphs
          1. 9.6.5.1. Setting a line height
          2. 9.6.5.2. Adding paragraph indents
          3. 9.6.5.3. Aligning text using text-align
      7. 9.7. Styling links
        1. 9.7.1. Using pseudo-classes to style links
        2. 9.7.2. LoVe HAte your links
      8. 9.8. Summary
      9. 9.9. Homework: Improving Gordo's typography
        1. 9.9.1.
          1. 9.9.1.1.
            1. 9.9.1.1.1. 1. Change your font-family
            2. 9.9.1.1.2. 2. Use grouped selectors
            3. 9.9.1.1.3. 3. Style the <h4>
            4. 9.9.1.1.4. 4. Style the paragraphs
            5. 9.9.1.1.5. 5. Style your links
    3. 10. A One-Column CSS Layout
      1. 10.1. The Cascade in Cascading Style Sheets
        1. 10.1.1. So what exactly is the cascade?
        2. 10.1.2. The order of your CSS rules is important
      2. 10.2. Introducing margins, borders, and padding
        1. 10.2.1. Meet the box model
        2. 10.2.2. Applying margins, borders, and padding
        3. 10.2.3. Using CSS shorthand for margins, borders, and padding
        4. 10.2.4. Styling our <blockquote>
      3. 10.3. Dividing up your document
        1. 10.3.1. Identifying your document's sections
        2. 10.3.2. Using div and span elements with id and class attributes
          1. 10.3.2.1. div and span elements
          2. 10.3.2.2. id and class attributes
        3. 10.3.3. It's all in a name
      4. 10.4. Using div elements to create CSS layouts
        1. 10.4.1. A one-column CSS layout
        2. 10.4.2. Using descendant selectors to minimize markup
      5. 10.5. Styling details with the span element
        1. 10.5.1. Using a span to style inline content
        2. 10.5.2. Dan Cederholm's illustrious ampersand
      6. 10.6. Styling with class attributes
      7. 10.7. Enhancing your design by adding background images with CSS
        1. 10.7.1. Adding a background image to the body
        2. 10.7.2. Using background images with other elements
      8. 00.8. Summary
      9. 10.9. Homework: Creating a one-column CSS layout
        1. 10.9.1.
          1. 10.9.1.1.
            1. 10.9.1.1.1. 1. Add the div tags
            2. 10.9.1.1.2. 2. Write the CSS
            3. 10.9.1.1.3. 3. Upgrade the Famous Primates brand
            4. 10.9.1.1.4. 4. Style the blockquote
            5. 10.9.1.1.5. 5. Style Gordo's image
            6. 10.9.1.1.6. 6. Add a background-image
    4. 11. A Two-Column CSS Layout
      1. 11.1. A float-based CSS layout
        1. 11.1.1. Floating divs
        2. 11.1.2. Applying floats to layouts
        3. 11.1.3. Creating our two-column CSS layout
      2. 11.2. Calculating the width of your elements
        1. 11.2.1. A short box model recap
        2. 11.2.2. What happens when your elements are too wide?
      3. 11.3. Collapsing margins
      4. 11.4. Applying a float to an image
        1. 11.4.1. Faux Columns
      5. 11.5. Wrapping up with King Kong
      6. 11.6. Summary
      7. 11.7. Homework: Adding a second column to Gordo's web page
        1. 11.7.1.
          1. 11.7.1.1.
            1. 11.7.1.1.1. 1. Add a sidebar div
            2. 11.7.1.1.2. 2. Add a sidebar rule to your style sheet
            3. 11.7.1.1.3. 3. Measure up the divs
            4. 11.7.1.1.4. 4. Add the floats
            5. 11.7.1.1.5. 5. Add padding to your sidebar
            6. 11.7.1.1.6. 6. Add the Faux Columns
    5. 12. List-O-Matic
      1. 12.1. Styling lists
        1. 12.1.1. Styling a simple list
        2. 12.1.2. Styling a navigation list
      2. 12.2. Creating horizontal lists
      3. 12.3. Styling nested lists
        1. 12.3.1. Styling a site map with a nested list
      4. 12.4. Styling an ordered list
      5. 12.5. Summary
      6. 12.6. Homework: Adding the Famous Primates web site's navigation
        1. 12.6.1.
          1. 12.6.1.1.
            1. 12.6.1.1.1. 1. Add the ul to the sidebar
            2. 12.6.1.1.2. 2. Add the custom bullets to your sidebar list
            3. 12.6.1.1.3. 3. Add the links to the nav ul in the sidebar
            4. 12.6.1.1.4. 4. Style the ordered list in the references section
    6. 13. Harnessing the Power of External Style Sheets
      1. 13.1. The head elements that make it all happen
      2. 13.2. The importance of meta tags
        1. 13.2.1. It's all in a name
        2. 13.2.2. Speaking a foreign language
      3. 13.3. External Style Sheets
        1. 13.3.1. Embedded vs. linked style sheets
        2. 13.3.2. Linking to an external style sheet
          1. 13.3.2.1. Media types
        3. 13.3.3. Using @import
        4. 13.3.4. Creating our external CSS file
        5. 13.3.5. The real power of CSS
        6. 13.3.6. Adding a print style sheet
        7. 13.3.7. Building the print style sheet
          1. 13.3.7.1. Style the body
          2. 13.3.7.2. Hide unnecessary content
          3. 13.3.7.3. Style the headings
          4. 13.3.7.4. Style the links
          5. 13.3.7.5. Click Print and check the results
        8. 13.3.8. Conditional comments for Internet Explorer
        9. 13.3.9. A conditional comment in action
        10. 13.3.10. Adding a favicon
      4. 13.4. Adding scripts
      5. 13.5. Testing and troubleshooting
        1. 13.5.1. Testing
          1. 13.5.1.1. Web-based browser test services
          2. 13.5.1.2. Building a guerilla testing suite
          3. 13.5.1.3. Graded browser support
        2. 13.5.2. Troubleshooting
          1. 13.5.2.1. Validate, validate, validate!
          2. 13.5.2.2. Leanr to spel
          3. 13.5.2.3. Adopt a lurid palette
          4. 13.5.2.4. Check for repetition
          5. 13.5.2.5. Reduce to deduce
          6. 13.5.2.6. XHTML rule reference
      6. 13.6. Summary
      7. 13.7. Homework: Linking to external style sheets
        1. 13.7.1.
          1. 13.7.1.1.
            1. 13.7.1.1.1. 1. Add some <meta> tags
            2. 13.7.1.1.2. 2. Create an external style sheet
            3. 13.7.1.1.3. 3. Link to a print style sheet
            4. 13.7.1.1.4. 4. Add a favicon
            5. 13.7.1.1.5. 5. Test and troubleshoot
    7. 14. Where to from Here?
      1. 14.1. But really, where to from here?
        1. 14.1.1. JavaScript libraries
        2. 14.1.2. Database-driven sites
        3. 14.1.3. AJAX and Rich Internet Applications
      2. 14.2. www.webstandardistas.com
        1. 14.2.1. The Web Standardistas' periodical
        2. 14.2.2. Book reviews
        3. 14.2.3. Resources
        4. 14.2.4. Tools
        5. 14.2.5. Badges
        6. 14.2.6. Tea
      3. 14.3. Tools to make your life easier
        1. 14.3.1. Firefox Web Developer Add-on
        2. 14.3.2. Firebug
        3. 14.3.3. Tools for other browsers
        4. 14.3.4. Basecamp
        5. 14.3.5. What else is out there?
      4. 14.4. Recommended books
        1. 14.4.1. Bulletproof Web Design
        2. 14.4.2. CSS Artistry
        3. 14.4.3. The Zen of CSS Design
        4. 14.4.4. CSS Mastery
        5. 14.4.5. HTML Mastery
        6. 14.4.6. Other books we recommend
      5. 14.5. Recommended sites
        1. 14.5.1. Organizations and publications
          1. 14.5.1.1. W3C
          2. 14.5.1.2. Web Standards Project
          3. 14.5.1.3. A List Apart
          4. 14.5.1.4. Digital Web Magazine
        2. 14.5.2. Design and inspiration
          1. 14.5.2.1. Design Observer
          2. 14.5.2.2. The Elements of Typographic Style Applied to the Web
          3. 14.5.2.3. Stylegala
          4. 14.5.2.4. CSS Zen Garden
        3. 14.5.3. Accessibility
          1. 14.5.3.1. 456 Berea Street
          2. 14.5.3.2. Dive Into Accessibility
          3. 14.5.3.3. Joe Clark
          4. 14.5.3.4. North Temple Journal of Design
        4. 14.5.4. People
          1. 14.5.4.1. Dan Cederholm
          2. 14.5.4.2. John Gruber
          3. 14.5.4.3. Jon Hicks
          4. 14.5.4.4. Jeffrey Zeldman
      6. 14.6. A fond farewell
      7. 14.7. Summary
      8. 14.8. Homework: You've earned the badges—now use them!
        1. 14.8.1.
          1. 14.8.1.1.
            1. 14.8.1.1.1. 1. Get a badge

Product information

  • Title: HTML and CSS Web Standards Solutions: A Web Standardistas' Approach
  • Author(s):
  • Release date: December 2008
  • Publisher(s): Apress
  • ISBN: 9781430216063