You are previewing HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition.
O'Reilly logo
HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition

Book Description

Want to learn how to build Web sites fast? This best-selling guide’s visual format and step-by-step, task-based instructions will have you up and running with HTML5 and CSS3 in no time. This Seventh Edition is a major revision, with approximately 125 pages added and substantial updates to (or complete rewrites of) nearly every page from the preceding edition. Authors Elizabeth Castro and Bruce Hyslop use clear instructions, friendly prose, and real-world code samples to teach you HTML and CSS from the ground up. Over the course of 21 chapters you will learn how to:

  • Write semantic HTML, both with elements that have been around for years and ones that are new in HTML5.

  • Prepare images for the Web and add them to your pages.

  • Use CSS to style text, add background colors and images, and implement a multicolumn layout.

  • Build a single site for all users—whether they are using a mobile phone, tablet, laptop, desktop computer, or other Web-enabled device—based on many of the components of responsive Web design, including CSS3 media queries.

  • Leverage new selectors in CSS3, add Web fonts to your pages with @font-face, and use CSS3 effects such as opacity, background alpha transparency, gradients, rounded corners, drop shadows, shadows inside elements, text shadows, and multiple background images.

  • Improve your site’s accessibility with ARIA landmark roles and other good coding practices.

  • Build forms to solicit input from your visitors.

  • Include media in your pages with the HTML5 audio and video elements.

  • Test and debug your Web pages.

  • Secure a domain name and publish your site.

 And much more! All book code samples and more are available on the companion web site.

Table of Contents

  1. Title Page
  2. Copyright Page
  3. Dedication
  4. Acknowledgments
  5. Contents at a Glance
  6. Table of Contents
  7. Introduction
    1. HTML and CSS in Brief
    2. Progressive Enhancement: A Best Practice
    3. Is This Book for You?
    4. How This Book Works
    5. Companion Web Site
  8. 1. Web Page Building Blocks
    1. A Basic HTML Page
    2. Semantic HTML: Markup with Meaning
    3. Markup: Elements, Attributes, and Values
    4. A Web Page’s Text Content
    5. Links, Images, and Other Non-Text Content
    6. File Names
    7. URLs
    8. Key Takeaways
  9. 2. Working with Web Page Files
    1. Planning Your Site
    2. Creating a New Web Page
    3. Saving Your Web Page
    4. Specifying a Default Page or Homepage
    5. Editing Web Pages
    6. Organizing Files
    7. Viewing Your Page in a Browser
    8. The Inspiration of Others
  10. 3. Basic HTML Structure
    1. Starting Your Web Page
    2. Creating a Title
    3. Creating Headings
    4. Understanding HTML5’s Document Outline
    5. Grouping Headings
    6. Common Page Constructs
    7. Creating a Header
    8. Marking Navigation
    9. Creating an Article
    10. Defining a Section
    11. Specifying an Aside
    12. Creating a Footer
    13. Creating Generic Containers
    14. Improving Accessibility with ARIA
    15. Naming Elements with a Class or ID
    16. Adding the Title Attribute to Elements
    17. Adding Comments
  11. 4. Text
    1. Starting a New Paragraph
    2. Adding Author Contact Information
    3. Creating a Figure
    4. Specifying Time
    5. Marking Important and Emphasized Text
    6. Indicating a Citation or Reference
    7. Quoting Text
    8. Highlighting Text
    9. Explaining Abbreviations
    10. Defining a Term
    11. Creating Superscripts and Subscripts
    12. Noting Edits and Inaccurate Text
    13. Marking Up Code
    14. Using Preformatted Text
    15. Specifying Fine Print
    16. Creating a Line Break
    17. Creating Spans
    18. Other Elements
  12. 5. Images
    1. About Images for the Web
    2. Getting Images
    3. Choosing an Image Editor
    4. Saving Your Images
    5. Inserting Images on a Page
    6. Offering Alternate Text
    7. Specifying Image Size
    8. Scaling Images with the Browser
    9. Scaling Images with an Image Editor
    10. Adding Icons for Your Web Site
  13. 6. Links
    1. The Anatomy of a Link
    2. Creating a Link to Another Web Page
    3. Creating Anchors
    4. Linking to a Specific Anchor
    5. Creating Other Kinds of Links
  14. 7. CSS Building Blocks
    1. Constructing a Style Rule
    2. Adding Comments to Style Rules
    3. The Cascade: When Rules Collide
    4. A Property’s Value
  15. 8. Working with Style Sheets
    1. Creating an External Style Sheet
    2. Linking to External Style Sheets
    3. Creating an Embedded Style Sheet
    4. Applying Inline Styles
    5. The Importance of Location
    6. Using Media-Specific Style Sheets
    7. Offering Alternate Style Sheets
    8. The Inspiration of Others: CSS
  16. 9. Defining Selectors
    1. Constructing Selectors
    2. Selecting Elements by Name
    3. Selecting Elements by Class or ID
    4. Selecting Elements by Context
    5. Selecting Part of an Element
    6. Selecting Links Based on Their State
    7. Selecting Elements Based on Attributes
    8. Specifying Groups of Elements
    9. Combining Selectors
    10. Selectors Recap
  17. 10. Formatting Text with Styles
    1. Choosing a Font Family
    2. Specifying Alternate Fonts
    3. Creating Italics
    4. Applying Bold Formatting
    5. Setting the Font Size
    6. Setting the Line Height
    7. Setting All Font Values at Once
    8. Setting the Color
    9. Changing the Text’s Background
    10. Controlling Spacing
    11. Adding Indents
    12. Setting White Space Properties
    13. Aligning Text
    14. Changing the Text Case
    15. Using Small Caps
    16. Decorating Text
  18. 11. Layout with Styles
    1. Considerations When Beginning a Layout
    2. Structuring Your Pages
    3. Styling HTML5 Elements in Older Browsers
    4. Resetting or Normalizing Default Styles
    5. The Box Model
    6. Changing the Background
    7. Setting the Height or Width for an Element
    8. Setting the Margins around an Element
    9. Adding Padding around an Element
    10. Making Elements Float
    11. Controlling Where Elements Float
    12. Setting the Border
    13. Offsetting Elements in the Natural Flow
    14. Positioning Elements Absolutely
    15. Positioning Elements in 3D
    16. Determining How to Treat Overflow
    17. Aligning Elements Vertically
    18. Changing the Cursor
    19. Displaying and Hiding Elements
  19. 12. Style Sheets for Mobile to Desktop
    1. Mobile Strategies and Considerations
    2. Understanding and Implementing Media Queries
    3. Building a Page that Adapts with Media Queries
  20. 13. Working with Web Fonts
    1. What Is a Web Font?
    2. Where to Find Web Fonts
    3. Downloading Your First Web Font
    4. Working with @font-face
    5. Styling Web Fonts and Managing File Size
  21. 14. Enhancements with CSS3
    1. Understanding Vendor Prefixes
    2. A Quick Look at Browser Compatibility
    3. Using Polyfills for Progressive Enhancement
    4. Rounding the Corners of Elements
    5. Adding Drop Shadows to Text
    6. Adding Drop Shadows to Other Elements
    7. Applying Multiple Backgrounds
    8. Using Gradient Backgrounds
    9. Setting the Opacity of Elements
  22. 15. Lists
    1. Creating Ordered and Unordered Lists
    2. Choosing Your Markers
    3. Choosing Where to Start List Numbering
    4. Using Custom Markers
    5. Controlling Where Markers Hang
    6. Setting All List-Style Properties at Once
    7. Styling Nested Lists
    8. Creating Description Lists
  23. 16. Forms
    1. Creating Forms
    2. Processing Forms
    3. Sending Form Data via Email
    4. Organizing the Form Elements
    5. Creating Text Boxes
    6. Creating Password Boxes
    7. Creating Email, Telephone, and URL Boxes
    8. Labeling Form Parts
    9. Creating Radio Buttons
    10. Creating Select Boxes
    11. Creating Checkboxes
    12. Creating Text Areas
    13. Allowing Visitors to Upload Files
    14. Creating Hidden Fields
    15. Creating a Submit Button
    16. Using an Image to Submit a Form
    17. Disabling Form Elements
    18. New HTML5 Features and Browser Support
  24. 17. Video, Audio, and Other Multimedia
    1. Third-Party Plugins and Going Native
    2. Video File Formats
    3. Adding a Single Video to Your Web Page
    4. Exploring Video Attributes
    5. Adding Controls and Autoplay to Your Video
    6. Looping a Video and Specifying a Poster Image
    7. Preventing a Video from Preloading
    8. Using Video with Multiple Sources
    9. Multiple Media Sources and the Source Element
    10. Adding Video with Hyperlink Fallbacks
    11. Adding Video with Flash Fallbacks
    12. Providing Accessibility
    13. Adding Audio File Formats
    14. Adding a Single Audio File to Your Web Page
    15. Adding a Single Audio File with Controls to Your Web Page
    16. Exploring Audio Attributes
    17. Adding Controls and Autoplay to Audio in a Loop
    18. Preloading an Audio File
    19. Providing Multiple Audio Sources
    20. Adding Audio with Hyperlink Fallbacks
    21. Adding Audio with Flash Fallbacks
    22. Adding Audio with Flash and a Hyperlink Fallback
    23. Getting Multimedia Files
    24. Considering Digital Rights Management (DRM)
    25. Embedding Flash Animation
    26. Embedding YouTube Video
    27. Using Video with Canvas
    28. Coupling Video with SVG
    29. Further Resources
  25. 18. Tables
    1. Structuring Tables
    2. Spanning Columns and Rows
  26. 19. Working with Scripts
    1. Loading an External Script
    2. Adding an Embedded Script
    3. JavaScript Events
  27. 20. Testing & Debugging Web Pages
    1. Trying Some Debugging Techniques
    2. Checking the Easy Stuff: General
    3. Checking the Easy Stuff: HTML
    4. Checking the Easy Stuff: CSS
    5. Validating Your Code
    6. Testing Your Page
    7. When Images Don’t Appear
    8. Still Stuck?
  28. 21. Publishing Your Pages on the Web
    1. Getting Your Own Domain Name
    2. Finding a Host for Your Site
    3. Transferring Files to the Server
  29. A. HTML Reference
  30. B. CSS Properties and Values
    1. CSS Properties and Values
    2. CSS Selectors
    3. CSS Color Values
    4. Gradients
    5. Media Queries
    6. CSS Font Embedding
  31. Index