Table of Contents

-1. Preface

    1. What is a Browser?
    2. Who Should Read This Book
    3. What You’ll Learn from This Book
    4. How You’ll Learn to Build Your Website
       1. HTML, Markup, CSS — Welcome to Your First Bits of Jargon!
       2. Building the Example Site
    5. What This Book Won’t Tell You
    6. What’s in This Book
    7. Where to Find Help
       1. The SitePoint Forums
       2. The Book’s Website
    8. The SitePoint Newsletters
    9. The SitePoint Podcast
    10. Your Feedback
    11. Acknowledgements
    12. Conventions Used in This Book
        1. Markup Samples
        2. Tips, Notes, and Warnings

0. 1. Setting Up Shop

   1. The Basic Tools You Need
      1. Windows Basic Tools
      2. Mac OS X Basic Tools
   2. Beyond the Basic Tools
      1. Windows Tools
      2. Mac OS X Tools
   3. Not Just Text, Text, Text
      1. Windows Tools
      2. Mac OS X Tools
   4. Online Tools
   5. Creating a Spot for Your Website
      1. Windows
      2. Mac OS X
   6. Summary

1. 2. Your First Web Pages

   1. Nice to Meet You, HTML
      1. Anatomy of a Web Page
      2. Viewing the Source
      3. Basic Requirements of a Web Page
      4. The Doctype
      5. The html Element
      6. The head Element
      7. The title Element
      8. meta Elements
      9. Other head Elements
      10. The body Element
      11. The Most Basic Web Page in the World
      12. Headings and Document Hierarchy
      13. Paragraphs
      14. For People Who Love Lists
      15. Commenting Your HTML
      16. Symbols
   2. Diving into Our Website
      1. The Home Page: the Starting Point for All Websites
      2. Splitting Up the Page
      3. Linking Between Our New Pages
      4. The blockquote (Who said that?)
      5. The cite Element
      6. strong and em
      7. Taking a Break
   3. Summary

2. 3. Adding Some Style

   1. What is CSS?
   2. Inline Styles
      1. Adding Inline Styles
      2. The span Element
   3. Embedded Styles
      1. Jargon Break
      2. Why Embedded Styles Are Better Than Inline Styles
   4. External stylesheets
      1. Why External Stylesheets Are Better Than Embedded Styles
      2. Creating an External CSS File
      3. Linking CSS to a Web Page
   5. Starting to Build Our Stylesheet
      1. Stylish Headings
      2. A Mixture of New Styles
      3. A New Look in a Flash!
      4. A Beginner’s Palette of Styling Options
      5. Recap: the Style Story so Far
      6. Looking at Elements in Context
      7. Contextual Selectors
      8. Grouping Styles
      9. Which Rule Wins?
      10. Recapping Our Progress
      11. Styling Links
      12. Class Selectors
      13. Styling Partial Text Using span
   6. Summary

3. 4. Shaping Up Using CSS

   1. Block-level Elements versus Inline Elements
      1. Block-level Elements
      2. Inline Elements
      3. Inline Begets Inline
      4. Inline Elements Can Never Contain Block-level Elements
      5. Styling Inline and Block-level Elements
   2. Sizing Up the Blocks
      1. Setting a Width
      2. Setting a Height
   3. Adding Borders to Block-level Elements
      1. Example Borders
      2. Styling Individual Sides of an Element
      3. Shorthand Border Styles
      4. Border Styles You Can Use
   4. Shaping and Sizing Our Diving Site
      1. Adding Padding
      2. Introducing Padding to the Project Site
      3. Margins
      4. The Box Model
   5. Positioning Elements Anywhere You Like!
      1. Showing the Structure
      2. Absolute Positioning
   6. Other Layout Options
      1. More Absolute Positioning
      2. Relative Positioning
      3. Floated Positioning
   7. Styling Lists
   8. Summary

4. 5. Picture This! Using Images on Your Website

   1. Inline Images
      1. Anatomy of the Image Element
      2. Web Accessibility
   2. JPEG versus GIF versus PNG
   3. Transparency
      1. PNG: King of Transparency
   4. Adding an Image Gallery to the Site
      1. Updating the Navigation
      2. Adding the New Gallery Page
      3. Adding the First Image
      4. Formatting the Picture Using CSS
      5. Captioning the Picture
   5. Basic Image Editing
      1. Image Cropping
      2. Special Effects
      3. Resizing Large Images
      4. Other Software
   6. Filling up the Gallery
   7. Sourcing Images for Your Website
   8. Background Images in CSS
      1. Repeated Patterns
      2. Nonrepeating Images
      3. Shorthand Backgrounds
      4. Fixed Heights and Widths
      5. Setting a Background for Our Navigation
   9. Summary

5. 6. Tables: Tools for Organizing Data

   1. What is a Table?
   2. Anatomy of a Table
   3. Styling the Table
      1. Borders, Spacing, and Alignment
   4. Making Your Tables Accessible
      1. Linearization
      2. summary
      3. Captioning Your Table
      4. Adding an Events Table
      5. Stylish Table Cells
   5. Advanced Tables
      1. Merging Table Cells
      2. Advanced Accessibility
   6. Summary

6. 7. Forms: Interacting with Your Audience

   1. Anatomy of a Form
   2. A Simple Form
   3. The Building Blocks of a Form
      1. The form Element
      2. The fieldset and legend Elements
      3. The label Element
      4. The input Element
      5. The select Element
      6. The textarea Element
      7. Submit Buttons
      8. The Default Control Appearance
   4. Building a Contact Page
      1. Editing the Contact Us Page
      2. Adding a form and a fieldset Element
      3. Styling fieldset and legend with CSS
      4. Adding Text Input Controls
      5. Tidying Up label Elements with CSS
      6. Adding a select Element
      7. Adding a textarea Element
      8. Adding Radio Buttons and Checkboxes
      9. Completing the Form: a Submit Button
   5. Processing the Form
      1. Signing Up for Form Processing
      2. Inserting the Form Code
      3. Feedback By Email
   6. Summary

7. 8. Interacting with Social Media

   1. But Facebook is the Internet, right?
      1. Go Where the Audience Is
      2. A Two-pronged Attack: Facebook and Twitter
   2. Setting Up a Facebook Page
      1. Adding a Like Box to Your Site
   3. Let’s Sprinkle on Some Twitter Glitter
      1. Adding Your Twitter Updates to the Site
      2. Getting a Follow Button
      3. Updating from a Twitter Client on Your Smartphone
      4. But the Page Looks Really Messy Now!
      5. Get Twitter to Update Facebook to Update Your Site
      6. Now the Training Wheels Are Off …
   4. Get Smart!
   5. Summary

8. 9. Launching Your Website

   1. The Client—Server Model
   2. Web Hosting Jargon
   3. Hosting Your Website—Finding Server Space
      1. Free Hosting—with a Catch!
      2. Free Hosting—with a Domain Name at Cost
   4. What is Web Forwarding?
      1. The Downsides of Web Forwarding
   5. Paying for Web Hosting
   6. Hosting Essentials
      1. FTP Access to Your Server
      2. Adequate Storage Space
      3. A Reasonable Bandwidth Allowance
   7. Hosting Nice-to-haves
      1. Email Accounts
      2. Server Side Includes (SSIs)
      3. Support for Scripting Languages and Databases
   8. Pre-flight Check: How Do Your Pages Look in Different Browsers?
   9. Uploading Files to Your Server
      1. FTP Settings
      2. Uploading with FileZilla for Windows
      3. Uploading with Cyberduck—Mac OS X
      4. Other Uploading Tools
   10. Where’s Your Site At?
       1. Checking Links
       2. Validating Your Web Pages
   11. Promoting Your Website
       1. Submit Your Website to Search Engines
       2. Tell Your Friends and Colleagues
       3. Craft an Email Signature with Your Website Details
       4. Post on a Related Forum
       5. Link Exchange
   12. Summary

9. 10. Enhancing the Site with HTML5 and CSS3

   1. HTML5: A Brief History
   2. CSS3 —CSS2 —what’s the difference?
      1. CSS3: Not Yet Universally Supported
      2. The Good News on CSS3
      3. Look at All Those Sharp, Pointy Corners!
      4. The Details in the Shadows
      5. From box-shadow to text-shadow
      6. We Don’t Serve Your Type Around Here!
      7. Other CSS3 Features to be Aware of
   3. IE as a Second-class Citizen
   4. Summary

10. 11. Adding Interactivity with jQuery

    1. JavaScript? jQuery? What’s the difference?
       1. Standard JavaScript versus jQuery: A Simple Example
       2. How do I get jQuery and use it?
       3. Hang On a Moment!
       4. jQuery: Primed and Ready For Action
    2. Using jQuery on the Project Site
       1. Setting Up References to jQuery
       2. Adding Default Form Value
       3. Showing the Picture Gallery’s Captions on Hover
    3. Summary

11. 12. What to Do When Things Go Wrong

    1. Prevention
       1. Keep Multiple Browsers Open While Developing
       2. Validate HTML and CSS as You Go
       3. Learn About Known Browser CSS Bugs
       4. Prepare Your Browser for Battle—with Extensions!
    2. Inspecting Problems with Firebug
    3. Web Developer Toolbar
       1. Disable CSS
       2. Disable JavaScript
       3. Outline Elements on the Page
       4. Hide Images or Reveal alt Attributes
       5. View Information about CSS and JavaScript
       6. And So Much More …
    4. How to use XRAY
    5. Summary

12. 13. Pimp My Site: Cool Stuff You Can Add for Free

    1. Getting the Low-down on Your Visitors
       1. Choosing a Statistics Service
       2. Registering a Google Account
       3. Adding the Statistics Code to Your Web Pages
    2. A Search Tool for Your Site
    3. Searching by Genre
    4. Enhancing Search Further with jQuery
    5. Discussion Forums
    6. Summary

13. 14. Where to Now? What You Could Learn Next

    1. Improving Your HTML
       1. The Official Documentation
       2. Other Useful HTML Resources
    2. Advancing Your CSS Knowledge
       1. The Official Documentation
       2. The Ultimate CSS Reference
       3. HTML Dog
       4. CSS3.info
       5. CSS Discussion Lists
       6. The CSS Discuss List’s Companion Site
    3. Learning JavaScript
       1. Becoming a jQuery Guru
    4. Improving Website Performance
    5. Learning Server-side Programming
       1. Scripting Languages in Brief
       2. Learning PHP
    6. Summary
14. Index