You are previewing HTML and CSS: Visual QuickStart Guide, Eighth Edition.
O'Reilly logo
HTML and CSS: Visual QuickStart Guide, Eighth Edition

Book Description

Need to learn HTML and CSS fast? This best-selling reference's visual format and step-by-step, task-based instructions will have you up and running with HTML in no time. In this updated edition author Bruce Hyslop uses crystal-clear instructions and friendly prose to introduce you to all of today's HTML and CSS essentials. The book has been refreshed to feature current web design best practices. You'll learn how to design, structure, and format your website. You'll learn about the new elements and form input types in HTML5. You'll create and use images, links, styles, and forms; and you'll add video, audio, and other multimedia to your site. You'll learn how to add visual effects with CSS3. You'll understand web standards and learn from code examples that reflect today's best practices. Finally, you will test and debug your site, and publish it to the web. Throughout the book, the author covers all of HTML and offers essential coverage of HTML5 and CSS techniques.

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. Web Browsers
    3. Web Standards and Specifications
    4. Progressive Enhancement: A Best Practice
    5. Is This Book for You?
    6. How This Book Works
    7. Companion Website
  8. 1. Webpage Building Blocks
    1. Thinking in HTML
    2. A Basic HTML Page
    3. Markup: Elements, Attributes, Values, and More
    4. A Webpage’s Text Content
    5. Links, Images, and Other Non-Text Content
    6. File and Folder Names
    7. URLs
    8. HTML: Markup with Meaning
    9. A Browser’s Default Display of Webpages
    10. Key Takeaways
  9. 2. Working with Webpage Files
    1. Planning Your Site
    2. Creating a New Webpage
    3. Saving Your Webpage
    4. Specifying a Default Page or Homepage
    5. Editing Webpages
    6. Organizing Files
    7. Viewing Your Page in a Browser
    8. The Inspiration of Others
  10. 3. Basic HTML Structure
    1. Starting Your Webpage
    2. Creating a Title
    3. Creating Headings
    4. Common Page Constructs
    5. Creating a Header
    6. Marking Navigation
    7. Marking the Main Area of a Webpage
    8. Creating an Article
    9. Defining a Section
    10. Specifying an Aside
    11. Creating a Footer
    12. Creating Generic Containers
    13. Improving Accessibility with ARIA
    14. Naming Elements with a Class or ID
    15. Adding the Title Attribute to Elements
    16. Adding Comments
  11. 4. Text
    1. Adding a Paragraph
    2. Specifying Fine Print
    3. Marking Important and Emphasized Text
    4. Creating a Figure
    5. Indicating a Citation or Reference
    6. Quoting Text
    7. Specifying Time
    8. Explaining Abbreviations
    9. Defining a Term
    10. Creating Superscripts and Subscripts
    11. Adding Author Contact Information
    12. Noting Edits and Inaccurate Text
    13. Marking Up Code
    14. Using Preformatted Text
    15. Highlighting Text
    16. Creating a Line Break
    17. Creating Spans
    18. Other Elements
  12. 5. Images
    1. Images for the Web
    2. Getting Images
    3. Choosing an Image Editor
    4. Saving Your Images
    5. Inserting Images on a Page
    6. Offering Alternative Text
    7. Specifying Image Sizes
    8. Scaling Images with the Browser
    9. Scaling Images with an Image Editor
    10. Adding Icons for Your Website
  13. 6. Links
    1. Creating a Link to Another Webpage (and Other Link Basics)
    2. Creating and Linking to Anchors
    3. Creating Other Kinds of Links
  14. 7. CSS Building Blocks
    1. Constructing a Style Rule
    2. Adding Comments to Style Rules
    3. Understanding Inheritance
    4. The Cascade: When Rules Collide
    5. 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 Cascade and the Order of Styles
    6. Using Media-Specific Style Sheets
    7. 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 an Element That Is the First or Last Child
    6. Selecting the First Letter or First Line of an Element
    7. Selecting Links Based on Their State
    8. Selecting Elements Based on Attributes
    9. Specifying Groups of Elements
    10. Combining Selectors
  17. 10. Formatting Text with Styles
    1. Before and After
    2. Choosing a Font Family
    3. Specifying Alternate Fonts
    4. Creating Italics
    5. Applying Bold Formatting
    6. Setting the Font Size
    7. Setting the Line Height
    8. Setting All Font Values at Once
    9. Setting the Color
    10. Setting the Background
    11. Controlling Spacing
    12. Adding Indents
    13. Aligning Text
    14. Changing the Text Case
    15. Using Small Caps
    16. Decorating Text
    17. Setting Whitespace Properties
  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. Controlling the Display Type and Visibility of Elements
    7. Setting the Height or Width for an Element
    8. Adding Padding Around an Element
    9. Setting the Border
    10. Setting the Margins Around an Element
    11. Making Elements Float
    12. Controlling Where Elements Float
    13. Positioning Elements Relatively
    14. Positioning Elements Absolutely
    15. Positioning Elements in a Stack
    16. Determining How to Treat Overflow
    17. Aligning Elements Vertically
    18. Changing the Cursor
  19. 12. Building Responsive Webpages
    1. Responsive Web Design: An Overview
    2. Making Images Flexible
    3. Creating a Flexible Layout Grid
    4. Understanding and Implementing Media Queries
    5. Putting It All Together
    6. Accommodating Older Versions of Internet Explorer
  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. Understanding the @font-face Rule
    5. Styling Text with a Web Font
    6. Applying Italics and Bold with a Web Font
    7. Using Web Fonts from Google Fonts
  21. 14. Enhancements and Effects with CSS
    1. Browser Compatibility, Progressive Enhancement, and Polyfills
    2. Understanding Vendor Prefixes
    3. Rounding the Corners of Elements
    4. Adding Drop Shadows to Text
    5. Adding Drop Shadows to Elements
    6. Applying Multiple Backgrounds
    7. Using Gradient Backgrounds
    8. Setting the Opacity of Elements
    9. Effects with Generated Content
    10. Combining Images with Sprites
  22. 15. Lists
    1. Creating Ordered and Unordered Lists
    2. Choosing Your Markers
    3. Using Custom Markers
    4. Choosing Where to Start List Numbering
    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. Improvements to Forms in HTML5
    2. Creating Forms
    3. Processing Forms
    4. Organizing the Form Elements
    5. Creating Text Boxes
    6. Labeling Form Parts
    7. Creating Password Boxes
    8. Creating Email, Search, Telephone, and URL Boxes
    9. Creating Radio Buttons
    10. Creating Checkboxes
    11. Creating Text Areas
    12. Creating Select Boxes
    13. Allowing Visitors to Upload Files
    14. Creating Hidden Fields
    15. Creating a Submit Button
    16. Disabling Form Elements
    17. Styling Forms Based on Their State
  24. 17. Video, Audio, and Other Multimedia
    1. Third-Party Plugins and Going Native
    2. Video File Formats
    3. Adding a Video to Your Webpage
    4. Adding Controls and Autoplay to Your Video
    5. Looping a Video and Specifying a Poster Image
    6. Preventing a Video from Preloading
    7. Using Video with Multiple Sources and a Text Fallback
    8. Providing Accessibility
    9. Audio File Formats
    10. Adding an Audio File with Controls to Your Webpage
    11. Autoplaying, Looping, and Preloading Audio
    12. Providing Multiple Audio Sources with a Fallback
    13. Adding Video and Audio with a Flash Fallback
    14. Advanced Multimedia
    15. Further Resources
  25. 18. Tables
    1. Structuring Tables
    2. Spanning Columns and Rows
  26. 19. Adding JavaScript
    1. Loading an External Script
    2. Adding an Embedded Script
    3. JavaScript Events
  27. 20. Testing & Debugging Webpages
    1. Validating Your Code
    2. Testing Your Pages
    3. Trying Some Debugging Techniques
    4. Checking the Easy Stuff: General
    5. Checking the Easy Stuff: HTML
    6. Checking the Easy Stuff: CSS
    7. When Images Don’t Display
  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. Index