Creating a Website: The Missing Manual, 4th Edition

Book description

You can easily create a professional-looking website with nothing more than an ordinary computer and some raw ambition. Want to build a blog, sell products, create forums, or promote an event? No problem! This friendly, jargon-free book gives you the techniques, tools, and advice you need to build a site and get it up on the Web.

The important stuff you need to know:

  • Master the basics. Learn HTML5, the language of the Web.
  • Design good-looking pages. Use styles to build polished layouts.
  • Get it online. Find a reliable web host and pick a good web address.
  • Use time-saving tools. Learn free tools for creating web pages and tracking your visitors.
  • Attract visitors. Make sure people can find your site through popular search engines like Google.
  • Build a community. Encourage repeat visits with social media.
  • Bring in the cash. Host Google ads, sell Amazon’s wares, or push your own products that people can buy via PayPal.
  • Add pizzazz. Include audio, video, interactive menus, and a pinch of JavaScript.

Publisher resources

View/Submit Errata

Table of contents

  1. A Note Regarding Supplemental Files
  2. The Missing Credits
    1. About the Author
    2. About the Creative Team
    3. Acknowledgements
    4. The Missing Manual Series
  3. Introduction
    1. The Glory of Building a Website from Scratch
      1. Types of Sites
    2. About This Book
      1. What You Need to Get Started
      2. About the Outline
      3. Of Windows and Macintosh PCs
      4. About→These→Arrows
    3. About the Online Resources
      1. The Missing CD
      2. Registration
      3. Contact Us
      4. Errata
    4. Safari® Books Online
  4. 1. Building Basic Web Pages
    1. 1. Creating Your First Page
      1. HTML: The Language of the Web
        1. Cracking Open an HTML File
        2. Your Text Editor
        3. Your Web Browser
      2. Tutorial: Creating an HTML File
      3. Seeing the HTML of a Live Web Page
      4. A Closer Look at HTML Tags
        1. What’s in a Tag
        2. Understanding Elements
        3. Nesting Elements
      5. Understanding HTML Documents
        1. The Document Type Definition
        2. The Basic Skeleton
      6. Tutorial: Building a Complete HTML Document
        1. Adding Your Content
        2. Structuring Your Text
        3. Where Are All the Pictures?
        4. The 10 Most Important Elements (and a Few More)
      7. Checking Your Pages for Errors
    2. 2. Becoming Fluent in HTML
      1. Types of Elements
      2. HTML Elements for Basic Text
        1. Paragraphs
        2. Line Breaks
        3. Headings
        4. Horizontal Lines
        5. Preformatted Text
        6. Quotes
        7. Divisions and Spans
      3. Tutorial: Converting Raw Text to HTML
      4. HTML Elements for Lists
        1. Ordered Lists
        2. Unordered Lists
        3. Definition Lists
        4. Nesting Lists
      5. HTML Elements for Tables
        1. A Basic Table
        2. Spanning Cells
      6. Inline Formatting
        1. Formatting Text: Italics and Bold
        2. A Few More Formatting Elements
        3. Special Characters
        4. Non-English Languages
    3. 3. Building a Style Sheet
      1. Graphic Design on the Web
        1. Logical Structure vs. Physical Formatting
        2. CSS (Cascading Style Sheets)
      2. Style Sheet Basics
        1. The Three Types of Style Sheets
        2. The Anatomy of a Rule
      3. Tutorial: Attaching a Style Sheet to a Page
        1. Using an Internal Style Sheet
        2. Using Inline Styles
      4. When Styles Overlap
        1. The Cascade
        2. Inheritance
      5. Class Selectors
        1. id Selectors
      6. Colors
        1. Specifying a Color
          1. Hexadecimal Color Values
          2. RGB Color Values
        2. Finding the Right Color
      7. Text Alignment and Spacing
        1. Alignment
        2. Spacing
        3. White Space
      8. Basic Fonts
        1. Finding the Right Font
        2. Specifying a Font
        3. Font Sizes
          1. Keyword Sizing
          2. Relative Sizing
          3. Pixel Sizing
      9. Web Fonts with Google
      10. Borders
        1. Basic Borders
        2. Making Better Borders
        3. Rounded Corners
        4. Using Borders with Tables
    4. 4. Adding Graphics
      1. Introducing the <img> Element
        1. Alternate Text
        2. Picture Size
        3. Picture Placement
      2. Tutorial: Storing Images in a Subfolder
      3. File Formats for Web Graphics
        1. Compression
        2. Choosing the Right Format
        3. Putting Pictures on Colored Backgrounds
      4. Tutorial: Wrapping Text Around an Image
        1. Adding a Border
        2. Adding a Caption
        3. Clearing a Float
      5. Background Images
        1. Background Watermarks
        2. Backgrounds for Other Elements
        3. Graphical Bullets in a List
      6. Finding Free Art
    5. 5. Working with a Web Editor
      1. The Benefits of a Web Editor
        1. Types of Web Page Editors
      2. Choosing Your Web Editor
        1. Dreamweaver: The Best Choice if You’re Not on a Budget
        2. Expression Web: A Solid Free Alternative (Windows Only)
        3. Brackets: A Good Choice for Text Lovers and Techies
      3. Getting Started with Dreamweaver
        1. Editing a Page
        2. Creating a New Page
        3. Working with Several Pages at Once
        4. Defining a Dreamweaver Site
      4. Setting Up Shop with Expression Web
        1. Choosing Your View
        2. Configuring Expression Web for HTML5
        3. Opening Multiple Pages
        4. Defining a Site in Expression Web
      5. Trying Out Brackets
        1. Working with a Set of Files
    6. 6. Linking Pages
      1. Understanding the Anchor
        1. Internal and External Links
          1. Relative URLs
          2. Absolute URLs
      2. Tutorial: Linking the Pages in a Site
        1. The Starter Site
        2. Linking to Pages Within the Same Folder
        3. Moving Down into a Subfolder
        4. Moving Up into a Parent Folder
        5. Moving to the Root Folder
        6. Making Image Links
      3. More Tricks with Links
        1. “Mailto” Links
        2. Image Maps: Links Inside Pictures
        3. Changing Link Colors and Underlining
      4. Links That Lead to Bookmarks
      5. When Good Links Go Bad
        1. Checking Your Links in a Web Editor
        2. Checking Your Links Online
        3. Using Redirects
    7. 7. Designing Better Style Sheets
      1. Planning a Style Sheet
        1. Identifying the Main Ingredients
      2. Building a Complete Style Sheet
        1. Setting the Ground Rules
        2. Formatting Elements with Type Selectors
        3. Creating Classes
      3. Improving Your Style Sheet
        1. Grouping Content with the <div> Element
        2. Saving Work with the <div> Element
        3. Saving Work with Contextual Selectors
        4. Creating a Style Sheet for an Entire Site
      4. Tutorial: Becoming a Style Detective
  5. 2. From Web Page to Website
    1. 8. Page Layout
      1. Understanding Style-Based Layout
        1. Structuring Pages with the <div> Element
        2. Floating Boxes
        3. Fixed Boxes
      2. Choosing Your Layout
        1. The 1,000-Pixel Rule of Thumb
      3. Tutorial: Creating a Layout with Multiple Columns
        1. Laying the Groundwork
        2. Attaching Your Style Sheet
        3. Building a Fixed-Width Layout
        4. Switching to a Resizable Layout
        5. Maximum Width: The Safety Net
      4. A Few More Layout Techniques
        1. Stretching Column Height
        2. Sticky Headers
        3. Layered Elements
        4. Combining Absolute and Relative Positioning
        5. Sizing Tables
          1. Sizing an Entire Table
          2. Sizing a Column
          3. Sizing a Row
      5. Putting the Same Content on Multiple Pages
        1. Using Server-Side Includes
        2. PHP Includes
        3. Web Templates
          1. Creating a Web Template
          2. Adding Editable Regions to Your Template
          3. Using Your Web Template
    2. 9. Getting Your Site Online
      1. How Web Hosting Works
        1. Understanding Web Servers
        2. Understanding URLs
        3. How Browsers Analyze a URL
      2. Domain Names
        1. Choosing the Right Domain Name
        2. More Choices for Top-Level Domains
          1. The Originals
          2. Country-Specific Domains
          3. The New Kids on the Block
        3. Searching for a Name
        4. Registering Your Name
      3. Getting Web Space
        1. Assessing Your Needs
        2. Choosing Your Host
        3. A Web Host Walkthrough
        4. What to Expect after You Sign Up
        5. Free Web Hosts: Just Say No
      4. Transferring Files to Your Site
        1. Uploading with Windows Explorer
        2. Uploading with an FTP Program
        3. Uploading in Dreamweaver
          1. Adding Your FTP Information
          2. Copying Files to Your Website
          3. Copying Files to Your Computer
        4. Uploading in Expression Web
  6. 3. Connecting with Your Audience
    1. 10. Introducing Your Site to the World
      1. Your Website Promotion Plan
      2. Making Your Site Search-Engine Friendly
        1. Choose Meaningful Page Titles
        2. Include a Page Description
        3. Supply Alternate Text for All Your Images
        4. Use Descriptive Link Text
        5. Don’t Try to Cheat
      3. Registering with Search Engines
        1. Submitting Your Site to Google
        2. Submitting Your Site to the Open Directory Project
        3. Rising Up in the Search Rankings
        4. Hiding from Search Engines
        5. The Google Webmaster Tools
      4. Tracking Visitors
        1. Understanding Google Analytics
        2. Signing Up for Google Analytics
        3. The Google Analytics Dashboard
        4. Examining Your Web Traffic
          1. Sessions Graph
          2. Site Usage
          3. Map Overlay
          4. Traffic Sources Overview
          5. Content Overview
    2. 11. Website Promotion
      1. Spreading the Word
        1. Shameless Self-Promotion
        2. Cultivating Links
        3. Google Places
        4. Google AdWords
        5. Return Visitors
      2. Transforming a Site into a Community
        1. Fostering a Web Community
        2. Website Community Tools
      3. Email Newsletters
      4. Twitter
        1. Sharing Your Tweets on Your Site
      5. Facebook
        1. Creating a Facebook Page
        2. Promoting Your Facebook Page on Your Website
      6. Groups
        1. Creating a Google+ Community
    3. 12. Adding a Blog
      1. Understanding Blogs
        1. Syndication
        2. Blog Hosting Options
      2. Getting Started with Blogger
        1. Creating a Blog
        2. Formatting Your Posts
      3. Blog Management
        1. Managing Posts
        2. Tweaking Common Settings
        3. Customizing Your Template
          1. Reformatting a Template
          2. Adding, Deleting, and Rearranging Gadgets
          3. Editing the HTML in a Template
      4. Reviewing Comments
        1. Deleting the Junk
        2. Moderating Comments
    4. 13. Making Money with Your Site
      1. Money-Making the Web Way
      2. Google AdSense
        1. Signing Up for AdSense
        2. The AdSense Window
        3. Creating an Ad
        4. Placing Ads in Your Web Pages
        5. Google-Powered Searches
      3. Amazon Associates
        1. Signing Up as an Associate
        2. Generating Associate Links
          1. Product Links
          2. Advanced Links
      4. PayPal Merchant Tools
        1. Signing Up with PayPal
        2. Accepting Payments
        3. Building a Shopping Cart
          1. Creating a Custom Page Style
          2. Building the Shopping Cart Buttons
        4. Withdrawing Your Money
  7. 4. Interactivity and Multimedia
    1. 14. JavaScript: Adding Interactivity
      1. Understanding JavaScript
        1. Server-Side and Client-Side Programming
        2. The Evolution of JavaScript
      2. JavaScript 101
        1. The <script> Element
          1. Browsers that Don’t Support Javascript
        2. Variables
          1. Declaring Variables
          2. Modifying Variables
          3. An Example with Variables
        3. Functions
          1. Declaring a Function
          2. Calling a Function
          3. Functions that Receive Information
          4. Functions that Return Information
        4. External Script Files
      3. Dynamic HTML
        1. HTML Objects
          1. Using HTML Objects in a Script
        2. Events
        3. Image Rollovers
        4. Collapsible Text
        5. Interactive Forms
          1. Form Elements
          2. A Basic Form
      4. Scripts on the Web
        1. Finding a Simple Script
        2. JavaScript Libraries
    2. 15. Dynamic Buttons and Menus
      1. Fancy Buttons
        1. Ordinary Picture Buttons
        2. Dynamic Picture Buttons
      2. Choosing Your Approach
      3. Tutorial: Creating a Rollover Button
        1. The Starter Page
        2. Preparing the Button Pictures
        3. Making the Rollover Effect
        4. Picture-with-Text Buttons
        5. Picture-less Buttons
      4. Fancy Menus
        1. Do-It-Yourself Collapsible Menus
          1. The Menu Markup
          2. The Code that Shows the Submenus
        2. Third-Party Menus
          1. Getting the Script
          2. Creating the Menu
    3. 16. Audio and Video
      1. Understanding Multimedia
        1. Linking and Embedding
        2. Hosted Multimedia
      2. Playing Audio Files
        1. Automatic Playback
        2. Preloading Media Files
        3. Looping Playback
      3. Showing Video Clips
        1. Configuring the Video Window
        2. Preparing Video for the Web
      4. Fallbacks for Old Browsers
        1. Adding a Flash Fallback
      5. Uploading Videos to YouTube
        1. Preparing a Video for YouTube
        2. Uploading a Video
        3. Showing a YouTube Video in a Web Page
  8. 5. Appendixes
    1. A. Where to Go from Here
    2. B. HTML Quick Reference
      1. HTML Elements
        1. <a> (Anchor Element)
        2. <address> (Contact Information)
        3. <area> (Image Map)
        4. <audio> (Sound Player)
        5. <b> (Bold Text)
        6. <base> (Base URL)
        7. <blockquote> (Block Quotation)
        8. <body> (Document Body)
        9. <br> (Line Break)
        10. <button> (Button)
        11. <caption> (Table Caption)
        12. <cite> (Citation)
        13. <code> (Code Listing)
        14. <dd> (Dictionary Description)
        15. <del> (Deleted Text)
        16. <dfn> (Defined Term)
        17. <div> (Generic Block Container)
        18. <dl> (Dictionary List)
        19. <dt> (Dictionary Term)
        20. <em> (Emphasis)
        21. <form> (Interactive Form)
        22. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (Headings)
        23. <head> (Document Head)
        24. <hr> (Horizontal Rule)
        25. <html> (Document)
        26. <i> (Italic Text)
        27. <iframe> (Inline Frame)
        28. <img> (Image)
        29. <input> (Input Control)
        30. <ins> (Inserted Text)
        31. <li> (List Item)
        32. <link> (Document Relationship)
        33. <map> (Image Map)
        34. <meta> (Metadata)
        35. <noscript> (Alternate Script Content)
        36. <object> (Embedded Object)
        37. <ol> (Ordered List)
        38. <option> (Menu Option)
        39. <p> (Paragraph)
        40. <param> (Object Parameter)
        41. <pre> (Preformatted Text)
        42. <q> (Short Quotation)
        43. <samp> (Sample Output)
        44. <script> (Client-Side Script)
        45. <select> (Selectable List)
        46. <small> (Small Print)
        47. <source> (Audio or Video File)
        48. <span> (Generic Inline Container)
        49. <strong> (Strong Importance)
        50. <style> (Internal Style Sheet)
        51. <sub> (Subscript)
        52. <sup> (Superscript)
        53. <table> (Table)
        54. <td> (Table Data Cell)
        55. <textarea> (Multiline Text Input)
        56. <th> (Table Header Cell)
        57. <title> (Document Title)
        58. <tr> (Table Row)
        59. <ul> (Unordered List)
        60. <video> (Video Player)
      2. HTML5 Semantic Elements
        1. <article> (Article)
        2. <aside> (Sidebar)
        3. <figcaption> (Figure Caption)
        4. <figure> (Figure)
        5. <footer> (Footer)
        6. <header> (Header)
        7. <mark> (Highlighted Text)
        8. <nav> (Navigation Links)
        9. <section> (Section)
        10. <time> (Date or Time)
      3. HTML Character Entities
        1. HTML Color Names
  9. Index
  10. About the Author
  11. Copyright

Product information

  • Title: Creating a Website: The Missing Manual, 4th Edition
  • Author(s): Matthew MacDonald
  • Release date: June 2015
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491918074