Learning Web Design, 4th Edition

Learning Web Design, 4th Edition

by Jennifer Robbins
Released August 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449319274

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.

Buy on Amazon
Start your free trial

Book description

Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices.

Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts.

This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels, whether you’re a beginner or brushing up on existing skills.

  • Build HTML pages with text, links, images, tables, and forms
  • Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects
  • Learn about the new HTML5 elements, APIs, and CSS3 properties that are changing what you can do with web pages
  • Make your pages display well on mobile devices by creating a responsive web design
  • Learn how JavaScript works—and why the language is so important in web design
  • Create and optimize web graphics so they’ll download as quickly as possible

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. How This Book Is Organized
    2. Acknowledgments
    3. About the Author
    4. Using Code Examples
    5. We’d Like to Hear from You
  2. I. Getting Started
    1. 1. Where Do I Start?
      1. Where Do I Start?
      2. What Does a Web Designer Do?
        1. Design
          1. User Experience, Interaction, and User Interface design
          2. Visual (graphic) design
        2. Development
          1. Authoring/markup
          2. Styling
          3. Scripting and programming
        3. Content strategy and creation
        4. Multimedia
      3. What Languages Do I Need to Learn?
        1. Hypertext Markup Language (HTML)
        2. Cascading Style Sheets (CSS)
        3. JavaScript/DOM scripting
        4. Server-side programming
      4. What Do I Need to Buy?
        1. Equipment
        2. Software
          1. Web page authoring
          2. HTML editors
          3. Image-editing and drawing software
          4. Internet tools
      5. What You’ve Learned
      6. Test Yourself
    2. 2. How the Web Works
      1. The Internet Versus the Web
      2. Serving Up Your Information
      3. A Word About Browsers
      4. Web Page Addresses (URLs)
        1. The parts of a URL
        2. Default files
      5. The Anatomy of a Web Page
        1. HTML documents
        2. A quick introduction to HTML markup
        3. But where are the pictures?
        4. Adding a little style
      6. Putting It All Together
      7. Test Yourself
    3. 3. Some Big Concepts You Need to Know
      1. A Dizzying Multitude of Devices
        1. For further reading
      2. Sticking with the Standards
        1. For further reading
      3. Progressive Enhancement
        1. For further reading
      4. Responsive Web Design
        1. For further reading
      5. One Web for All (Accessibility)
        1. For further reading
      6. The Need for Speed (Site Performance)
        1. For further reading
      7. Test Yourself
  3. II. HTML Markup for Structure
    1. 4. Creating a Simple Page: (HTML Overview)
      1. A Web Page, Step by Step
      2. Before We Begin, Launch a Text Editor
        1. Creating a new document in Notepad (Windows)
        2. Creating a new document in TextEdit (Mac OS X)
      3. Step 1: Start with Content
        1. Learning from step 1
      4. Step 2: Give the Document Structure
        1. Introducing...HTML elements
        2. Basic document structure
      5. Step 3: Identify Text Elements
        1. Introducing...semantic markup
        2. Block and inline elements
        3. Default styles
      6. Step 4: Add an Image
        1. Empty elements
        2. Attributes
      7. Step 5: Change the Look with a Style Sheet
      8. When Good Pages Go Bad
      9. Validating Your Documents
      10. Test Yourself
      11. Element Review: Document Structure
    2. 5. Marking Up Text
      1. Paragraphs
      2. Headings
        1. Heading groups
      3. Lists
        1. Unordered lists
        2. Ordered lists
        3. Description lists
      4. More Content Elements
        1. Long quotations
        2. Preformatted text
        3. Figures
      5. Organizing Page Content
        1. Sections and articles
        2. Aside (sidebars)
        3. Navigation
        4. Headers and footers
          1. Headers
          2. Footers
        5. Addresses
      6. The Inline Element Roundup
        1. Text-level (inline) elements
          1. Emphasized text
          2. Important text
          3. The previously presentational elements that are sticking around in HTML5 with fancy new semantic definitions
            1. b
            2. i
            3. s
            4. u
            5. small
          4. Short quotations
          5. Abbreviations and acronyms
          6. Citations
          7. Defining terms
          8. Program code elements
          9. Subscript and superscript
          10. Highlighted text
          11. Times and machine-readable information
          12. Inserted and deleted text
        2. Adding Breaks
          1. Line breaks
          2. Word breaks
      7. Generic Elements (div and span)
        1. Divide it up with a div
        2. Get inline with span
        3. id and class attributes
          1. Identification with id
          2. Classification with class
      8. Some Special Characters
      9. Putting It All Together
      10. Test Yourself
      11. Element Review: Text
    3. 6. Adding Links
      1. The href Attribute
      2. Linking to Pages on the Web
      3. Linking Within Your Own Site
        1. Linking within a directory
        2. Linking to a lower directory
        3. Linking to a higher directory
        4. Site root relative pathnames
        5. It’s the same for images
        6. Linking to a specific point in a page
          1. Step 1: Identifying the destination
          2. Step 2: Linking to the destination
        7. Linking to a fragment in another document
      4. Targeting a New Browser Window
        1. A new window with markup
        2. Pop-up windows
      5. Mail Links
      6. Telephone Links
      7. Test Yourself
      8. Element Review: Links
    4. 7. Adding Images
      1. First, a Word on Image Formats
      2. The img Element
        1. Providing the location with src
        2. Providing alternate text with alt
        3. Providing width and height dimensions
          1. Match values with actual pixel size
      3. A Window in a Window
      4. Test Yourself
      5. Element Review: Images
    5. 8. Table Markup
      1. How Tables Are Used
      2. Minimal Table Structure
      3. Table Headers
      4. Spanning Cells
        1. Column spans
        2. Row spans
      5. Table Accessibility
        1. Describing table content
        2. Connecting cells and headers
      6. Wrapping Up Tables
      7. Test Yourself
      8. Element Review: Tables
    6. 9. Forms
      1. How Forms Work
        1. From data entry to response
      2. The form Element
        1. The action attribute
        2. The method attribute
          1. The POST method
          2. The GET method
      3. Variables and Content
        1. The name attribute
        2. Naming your variables
      4. The Great Form Control Roundup
        1. Text entry controls
          1. Single-line text field
          2. Multiline text entry field
        2. Specialized text entry fields
          1. Password entry field
          2. HTML5 text inputs
        3. Submit and reset buttons
        4. Radio and checkbox buttons
          1. Radio buttons
          2. Checkbox buttons
        5. Menus
          1. Drop-down menus
          2. Scrolling menus
          3. Grouping menu options
        6. File selection control
        7. Hidden controls
        8. Date and time controls (HTML5)
        9. Numerical inputs (HTML5)
        10. Color selector (HTML5)
      5. Form Accessibility Features
        1. Labels
        2. fieldset and legend
      6. Form Layout and Design
        1. Usable forms
        2. Styling Forms
      7. Test Yourself
      8. Element Review: Forms
    7. 10. What’s Up, HTML5?
      1. A Funny Thing Happened on the Way to XHTML 2
        1. A “don’t blink or you’ll miss it” history of HTML
        2. Enter XHTML
        3. Hello HTML5!
      2. In the Markup Department
        1. A minimal DOCTYPE
        2. Elements and attributes
          1. New form input types
          2. New global attributes
          3. Obsolete HTML 4.01 Markup
      3. Meet the APIs
      4. Video and Audio
        1. The good news and the bad news
        2. How media formats work
          1. Meet the video formats
          2. Meet the audio formats
        3. Adding a video to a page
          1. Video for all!
        4. Adding audio to a page
      5. Canvas
        1. The canvas element
        2. Drawing with JavaScript
      6. Final Word
      7. Test Yourself
  4. III. CSS for Presentation
    1. 11. Cascading Style Sheets Orientation
      1. The Benefits of CSS
        1. The power of CSS
      2. How Style Sheets Work
        1. 1. Marking up the document
        2. 2. Writing the rules
          1. Selectors
          2. Declarations
        3. 3. Attaching the styles to the document
      3. The Big Concepts
        1. Inheritance
          1. Document structure
          2. Parents and children
          3. Pass it on
        2. Conflicting styles: the cascade
          1. Specificity
          2. Rule order
        3. The box model
        4. Grouped selectors
      4. Moving Forward with CSS
        1. Books
        2. Online resources
        3. CSS tools
      5. Test Yourself
    2. 12. Formatting Text: (Plus More selectors)
      1. The Font Properties
        1. Specifying the font name
          1. Font limitations
          2. Generic font families
          3. Font stack strategies
        2. Specifying font size
          1. Percentage values
          2. Em measurements
          3. Em best practices
          4. Pixels and absolute measurements
          5. Working with keywords
        3. Font weight (boldness)
        4. Font style (italics)
        5. Font variant (small caps)
        6. The shortcut font property
      2. Changing Text Color
      3. A Few More Selector Types
        1. Descendant selectors
        2. ID selectors
        3. Class selectors
        4. Specificity 101
      4. Text Line Adjustments
        1. Line height
        2. Indents
        3. Horizontal alignment
      5. Underlines and Other “Decorations”
      6. Changing Capitalization
      7. Spaced Out
      8. Text Shadow
      9. Changing List Bullets and Numbers
        1. Choosing a Marker
        2. Marker position
        3. Make your own bullets
      10. Test Yourself
      11. CSS Review: Font and Text Properties
    3. 13. Colors and Backgrounds: (Plus Even More Selectors and External Style Sheets)
      1. Specifying Color Values
        1. Color names
        2. RGB color values
          1. A word about RGB color
          2. Picking a color
          3. Writing RGB values in style sheets
          4. About hexadecimal values
        3. RGBa color
        4. Summing up color values
      2. Foreground Color
      3. Background Color
      4. Playing with Opacity
      5. Introducing...Pseudo-Class Selectors
        1. Link pseudo-classes
        2. User action pseudo-classes
          1. Focus state
          2. Hover state
          3. Active state
        3. Putting it all together
        4. Other pseudo-class selectors
      6. Pseudo-Element Selectors
        1. First letter and line
        2. Generated content with :before and :after
      7. Attribute Selectors
      8. Background Images
        1. Adding a background image
        2. Controlling tiling direction
        3. Background position
        4. Background attachment
      9. The Shorthand background Property
        1. Multiple backgrounds
      10. Like a Rainbow (Gradients)
        1. Linear gradients
        2. Radial gradients
        3. Introducing vendor prefixes
        4. Designing gradients
      11. Finally, External Style Sheets
        1. Using the link element
        2. Importing with @import
        3. Modular Style Sheets
      12. Test Yourself
      13. CSS Review: Color and Background Properties
    4. 14. Thinking Inside the Box: (Padding, Borders, and Margins)
      1. The Element Box
      2. Specifying Box Dimensions
        1. Sizing the content box (default)
        2. The border-box model
        3. Specifying height
        4. Handling overflow
      3. Padding
        1. The shorthand padding property
      4. Borders
        1. Border style
        2. Border width (thickness)
        3. Border color
        4. Combining style, width, and color
        5. Rounded corners with border-radius
          1. Elliptical corners
          2. Browser support
        6. Picture-perfect borders
      5. Margins
        1. Margin behavior
          1. Collapsing margins
          2. Margins on inline elements
          3. Negative margins
      6. Assigning Display Roles
      7. Adding Drop Shadows to Boxes
      8. Test Yourself
      9. CSS Review: Basic Box Properties
    5. 15. Floating and Positioning
      1. Normal Flow
      2. Floating
        1. Floating inline and block elements
          1. Floating an inline text element
          2. Floating block elements
        2. Clearing floated elements
        3. Floating multiple elements
        4. Containing floats
        5. Using floats to create columns
      3. Positioning Basics
        1. Types of positioning
        2. Specifying position
      4. Relative Positioning
      5. Absolute Positioning
        1. Containing blocks
        2. Specifying position
          1. Pixel measurements
          2. Percentage values
        3. Stacking order
      6. Fixed Positioning
      7. Test Yourself
      8. CSS Review: Floating and Positioning Properties
    6. 16. Page Layout with CSS
      1. Page Layout Strategies
        1. Fixed layouts
          1. How to create fixed-width layouts
        2. Fluid page design
          1. How to create fluid layouts
        3. Elastic layouts
          1. How to create elastic layouts
        4. Hybrid layouts
        5. Which one should I use?
      2. Page Layout Techniques
        1. Using the examples
      3. Multicolumn Layouts Using Floats
        1. Two columns, fluid layout
        2. Two columns, fixed-width layout
        3. Two columns, fixed width, centered
        4. Three columns, fluid layout
        5. Any order columns using negative margins
      4. Positioned Layout
        1. Three columns, positioned, fluid layout
        2. Three columns, positioned, fixed
      5. Top-to-Bottom Column Backgrounds
        1. Faux columns for fluid layouts
        2. Three faux columns
      6. Test Yourself
    7. 17. Transitions, Transforms, and Animation
      1. Ease-y Does It (CSS Transitions)
        1. Transition basics
          1. Specifying the property
          2. How long should it take?
        2. Timing functions
        3. Setting a delay
        4. The shorthand transition property
        5. Applying multiple transitions
        6. A transition for all occasions
      2. CSS Transforms
        1. Transforming the angle (rotate)
        2. Transforming the position (translate)
        3. Transforming the size (scale)
        4. Making it slanty (skew)
        5. Applying multiple transforms
        6. Smooooooth transforms
        7. 3-D transforms
      3. Keyframe Animation
        1. Establishing the keyframes
        2. Adding animation properties
      4. Test Yourself
      5. CSS Review: Transitions, Transforms, and Animation
    8. 18. CSS Techniques
      1. A Clean Slate (CSS Reset)
      2. Image Replacement Techniques
      3. CSS Sprites
      4. Styling Forms
        1. The markup
        2. Step 1: Adding basic styles
        3. Step 2: Aligning labels and inputs
        4. Step 3: Fixing fieldsets and minor labels
        5. Step 4: Adjusting the buttons
      5. Styling Tables
        1. Separated and collapsed borders
          1. Separated border model
          2. Collapsed border model
        2. Empty cells
      6. Basic Responsive Web Design
        1. A simple example
        2. How it works
        3. Setting the viewport
        4. Fluid layouts
        5. Making images flexible
        6. Media query magic
          1. Media queries in the document head
          2. “Mobile first” media queries
        7. The tricky bits
          1. Choosing breakpoints
          2. Responsive images
          3. One size doesn’t fit all
          4. Responsive limitations
      7. Wrapping Up Style Sheets
      8. Test Yourself
      9. CSS Review: Table Properties
  5. IV. JavaScript for Behaviors
    1. 19. Introduction to JavaScript
      1. What Is JavaScript?
        1. What it isn’t
        2. What it is
        3. What JavaScript can do
      2. Adding JavaScript to a Page
        1. Embedded script
        2. External scripts
        3. Script placement
      3. The Anatomy of a Script
        1. The basics
          1. Statements
          2. Comments
        2. Variables
          1. Data types
          2. Arrays
        3. Comparison operators
          1. Equal versus identical
          2. Mathematical operators
        4. If/else statements
          1. That covers “if,” but what about “else”?
        5. Loops
        6. Functions
          1. Native functions
          2. Custom functions
          3. Arguments
          4. Returning a value
        7. Variable scope and the var keyword
      4. The Browser Object
      5. Events
        1. As an HTML attribute
        2. As a method
        3. addEventListener
      6. Putting It All Together
        1. Example 1: A tale of two arguments
        2. Example 2: The longest word
      7. Test Yourself
    2. 20. Using JavaScript
      1. Meet the DOM
        1. The node tree
        2. Accessing DOM nodes
          1. By element name
          2. By id attribute value
          3. By class attribute value
          4. By selector
          5. Accessing an attribute value
        3. Manipulating nodes
        4. Adding and removing elements
        5. For further reading
      2. Polyfills
        1. HTML5 shiv (or shim)
        2. Modernizr
        3. Selectivizr
        4. Respond.js
      3. JavaScript Libraries
        1. A few libraries you ought to know
        2. How to use a JS library (jQuery)
          1. Download the jQuery .js file
          2. Add it to your document
          3. Get “ready”
        3. Scripting with jQuery
        4. But what if I don’t know how to write scripts?
      4. Big Finish
      5. Test Yourself
  6. V. Creating Web Graphics
    1. 21. Web Graphics Basics
      1. Image Sources
        1. Creating your own images
        2. Stock photography and illustrations
        3. Clip art and icons
        4. Hire a designer
      2. Meet the Formats
        1. The ubiquitous GIF
          1. 8-bit indexed color
          2. GIF compression
          3. Transparency
          4. Interlacing
          5. Animation
        2. The photogenic JPEG
          1. 24-bit Truecolor images
          2. Lossy compression
          3. Progressive JPEGs
          4. Decompression
        3. The powerful PNG
          1. Multiple image formats
          2. Transparency
          3. Progressive display (interlacing)
          4. Gamma correction
          5. Embedded text
          6. When to use PNGs
        4. Choosing the best format
        5. Saving an image in your chosen format
      3. Image Size and Resolution
        1. Goodbye inches, hello pixels!
        2. Pixel madness
        3. Resizing images
      4. Working with Transparency
        1. How binary transparency works
        2. How alpha transparency works
        3. Making transparent GIFs and PNGs
          1. Avoiding “halos”
          2. Adding transparency to flattened images
      5. Introduction to SVG
        1. Drawing with XML
        2. SVG tools
        3. Adding SVG to a page
        4. But wait...there’s more!
        5. Browser support
        6. For further reading
      6. Summing Up Images
      7. Test Yourself
    2. 22. Lean and Mean Web Graphics
      1. General Image Optimization Strategies
      2. Optimizing GIFs
        1. Reducing the number of colors
        2. Reducing dithering
        3. Using the Lossy filter
        4. Designing for GIF compression
          1. Keep it flat
          2. Horizontal stripes
        5. Summing up GIF optimization
      3. Optimizing JPEGs
        1. Getting to know JPEG compression
          1. Avoid detail
          2. Avoid flat colors
        2. Be aggressive with compression
        3. Choose optimized JPEGs
        4. Blurring or smoothing the image
        5. Selective quality (Fireworks)
        6. Summing up JPEG optimization
      4. Optimizing PNGs
        1. PNG-24
        2. PNG-8
      5. Optimize to File Size
      6. Optimization in Review
      7. Test Yourself
  7. A. Answers
    1. Chapter 1: Where Do I Start?
    2. Chapter 2: How the Web Works
    3. Chapter 3: Some Big Concepts You Need to Know
    4. Chapter 4: Creating a Simple Page (HTML Overview)
    5. Chapter 5: Marking Up Text
      1. Exercise 5-1
      2. Exercise 5-2
      3. Exercise 5-3
    6. Chapter 6: Adding Links
      1. Exercise 6-1
      2. Exercise 6-2
      3. Exercise 6-3
      4. Exercise 6-4
      5. Exercise 6-5
      6. Exercise 6-6
      7. Exercise 6-7
    7. Chapter 7: Adding Images
      1. Exercise 7-1
    8. Chapter 8: Basic Table Markup
      1. Exercise 8-1
      2. Exercise 8-2
      3. Exercise 8-3
      4. Exercise 8-4
    9. Chapter 9: Forms
      1. Exercises 9-1 through 9-4: Final source document
    10. Chapter 10: What’s Up, HTML5?
    11. Chapter 11: CSS Orientation
      1. Exercise 11-1
    12. Chapter 12: Formatting Text
      1. Exercises 12-1 through 12-3
    13. Chapter 13: Colors and Backgrounds
      1. Exercise 13-1
      2. Exercise 13-2
      3. Exercise 13-3
      4. Exercise 13-4
      5. Exercise 13-5
      6. Exercise 13-6
      7. Exercise 13-7
      8. Exercise 13-8
    14. Chapter 14: Thinking Inside the Box
      1. Exercise 14-1
      2. Exercise 14-2
      3. Exercise 14-3
    15. Chapter 15: Floating and Positioning
      1. Exercise 15-1
      2. Exercise 15-2
      3. Exercise 15-3
      4. Exercise 15-4
      5. Exercise 15-5
    16. Chapter 16: Page Layout with CSS
      1. Exercise 16-1
      2. Exercise 16-2
    17. Chapter 17: Transitions, Transforms, and Animation
      1. Exercise 17-1
      2. Exercise 17-2
    18. Chapter 18: CSS Techniques
      1. Exercises 18-1 through 18-3
    19. Chapter 19: Introduction to JavaScript
      1. Exercise 19-1
      2. Exercise 19-2
    20. Chapter 20: Using JavaScript
    21. Chapter 21: Web Graphics Basics
    22. Chapter 22: Lean and Mean Web Graphics
  8. B. CSS3 Selectors
  9. Index
  10. About the Author
  11. Colophon
  12. Copyright

Product information

  • Title: Learning Web Design, 4th Edition
  • Author(s): Jennifer Robbins
  • Release date: August 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449319274