You are previewing Creating Web Pages Simplified.
O'Reilly logo
Creating Web Pages Simplified

Book Description

The easiest way to learn how to create a Web page for your family or organization

Do you want to share photos and family lore with relatives far away? Have you been put in charge of communication for your neighborhood group or nonprofit organization? A Web page is the way to get the word out, and Creating Web Pages Simplified offers an easy, visual way to learn how to build one. Full-color illustrations and concise instructions take you through all phases of Web publishing, from laying out and formatting text to enlivening pages with graphics and animation.

This easy-to-follow visual guide shows you the building blocks of a Web page and how to work with images, create links and forms, generate dynamic content using JavaScript, use style sheets, and publish a page on the Web. You'll learn to use HTML, create simple yet attractive Web pages, and enhance them with frames, multimedia effects, links, and more.

  • Features full-color illustrations with step-by-step instructions

  • Covers everything you need to get started, including how to use HTML, how to lay out pages and format text, and how to add graphics and visual effects

  • Shows how to make your pages more interesting with animation and sound, add links to other sites, include e-mail addresses, and more

  • Includes a tear card with HTML tag references and a Web-safe color chart to keep handy as you build your pages

If you've ever thought about building a Web page, Creating Web Pages Simplified is simply the easiest way to make it happen.

Table of Contents

  1. Copyright
  2. Praise for Visual Books
  3. Credits
  4. About the Author
  5. Author's Acknowledgments
  6. How to Use This Book
    1. Who Needs This Book
    2. Book Organization
    3. Chapter Organization
    4. What You Need to Use This Book
    5. Using the Mouse
      1. Click
      2. Double-click
      3. Right-click
      4. Click and Drag, and Release the Mouse
    6. The Conventions in This Book
      1. Bold
      2. Italics
      3. Numbered Steps
      4. Bulleted Steps
      5. Notes
  7. 1. Getting Familiar with Web Pages
    1. 1.1. Internet Basics
    2. 1.2. An Introduction to HTML
    3. 1.3. Explore Web Browsers
    4. 1.4. Explore HTML Editors
    5. 1.5. Understanding HTML Syntax
    6. 1.6. View HTML Code in a Browser
      1. 1.6.1. View HTML Code in a Browser
        1. 1.6.1.1. VIEW THE SOURCE CODE
        2. 1.6.1.2. SAVE THE SOURCE CODE
  8. 2. Creating Your First Web Page
    1. 2.1. Understanding HTML Document Structure
    2. 2.2. Start an HTML Document
      1. 2.2.1. Start an HTML Document
    3. 2.3. Save an HTML Document
      1. 2.3.1. Save an HTML Document
    4. 2.4. Save a Microsoft Word Document as HTML
      1. 2.4.1. Save a Microsoft Word Document as HTML
    5. 2.5. View an HTML Page
      1. 2.5.1. View an HTML Page
    6. 2.6. Add a Document Declaration
      1. 2.6.1. Add a Document Declaration
    7. 2.7. Add Metadata
      1. 2.7.1. Add Metadata
        1. 2.7.1.1. ADD AN AUTHOR NAME
        2. 2.7.1.2. ADD A PAGE DESCRIPTION
        3. 2.7.1.3. SPECIFY KEYWORDS
        4. 2.7.1.4. ADD A COPYRIGHT
  9. 3. Adding Text
    1. 3.1. Create a New Paragraph
      1. 3.1.1. Create a New Paragraph
    2. 3.2. Change Paragraph Alignment
      1. 3.2.1. Change Paragraph Alignment
    3. 3.3. Add a Line Break
      1. 3.3.1. Add a Line Break
    4. 3.4. Insert a Blank Space
      1. 3.4.1. Insert a Blank Space
    5. 3.5. Insert Preformatted Text
      1. 3.5.1. Insert Preformatted Text
    6. 3.6. Insert a Heading
      1. 3.6.1. Insert a Heading
    7. 3.7. Add Block Quotes
      1. 3.7.1. Add Block Quotes
    8. 3.8. Insert a Comment
      1. 3.8.1. Insert a Comment
    9. 3.9. Create a Numbered List
      1. 3.9.1. Create a Numbered List
        1. 3.9.1.1. PLACE TEXT IN A NUMBERED LIST
        2. 3.9.1.2. SET A NUMBER STYLE
    10. 3.10. Create a Bulleted List
      1. 3.10.1. Create a Bulleted List
        1. 3.10.1.1. PLACE TEXT IN A BULLETED LIST
        2. 3.10.1.2. SET A BULLET STYLE
    11. 3.11. Create a Nested List
      1. 3.11.1. Create a Nested List
    12. 3.12. Create a Definition List
      1. 3.12.1. Create a Definition List
    13. 3.13. Insert Special Characters
      1. 3.13.1. Insert Special Characters
    14. 3.14. Special Characters
  10. 4. Formatting Text
    1. 4.1. Make Text Bold
      1. 4.1.1. Make Text Bold
    2. 4.2. Italicize Text
      1. 4.2.1. Italicize Text
    3. 4.3. Add Underlining to Text
      1. 4.3.1. Add Underlining to Text
    4. 4.4. Change Fonts
      1. 4.4.1. Change Fonts
    5. 4.5. Change Font Size
      1. 4.5.1. Change Font Size
        1. 4.5.1.1. CHANGE A SECTION OF TEXT
        2. 4.5.1.2. CHANGE ALL THE TEXT
    6. 4.6. Change the Text Color
      1. 4.6.1. Change the Text Color
        1. 4.6.1.1. CHANGE A SECTION OF TEXT
        2. 4.6.1.2. CHANGE ALL THE TEXT
    7. 4.7. Adjust Margins
      1. 4.7.1. Adjust Margins
    8. 4.8. Set a Background Page Color
      1. 4.8.1. Set a Background Page Color
    9. 4.9. Add a Horizontal Rule
      1. 4.9.1. Add a Horizontal Rule
        1. 4.9.1.1. ADD A SIMPLE LINE
        2. 4.9.1.2. SET A LINE THICKNESS AND WIDTH
  11. 5. Adding Images
    1. 5.1. Understanding Web Page Images
    2. 5.2. Insert an Image
      1. 5.2.1. Insert an Image
    3. 5.3. Specify an Image Size
      1. 5.3.1. Specify an Image Size
    4. 5.4. Add Alternative Text
      1. 5.4.1. Add Alternative Text
    5. 5.5. Create an Image Label
      1. 5.5.1. Create an Image Label
    6. 5.6. Align an Image Horizontally
      1. 5.6.1. Align an Image Horizontally
    7. 5.7. Align an Image Vertically
      1. 5.7.1. Align an Image Vertically
    8. 5.8. Center an Image
      1. 5.8.1. Center an Image
    9. 5.9. Stop Text Wrap
      1. 5.9.1. Stop Text Wrap
    10. 5.10. Add Space around an Image
      1. 5.10.1. Add Space around an Image
    11. 5.11. Add a Background Image
      1. 5.11.1. Add a Background Image
  12. 6. Adding Links
    1. 6.1. Understanding Links
    2. 6.2. Understanding URLs
    3. 6.3. Link to Another Page
      1. 6.3.1. Link to Another Page
        1. 6.3.1.1. INSERT A TEXT LINK
        2. 6.3.1.2. INSERT AN IMAGE LINK
    4. 6.4. Open a New Window with a Link
      1. 6.4.1. Open a New Window with a Link
        1. 6.4.1.1. LINK TO A NEW WINDOW
        2. 6.4.1.2. MAKE ALL LINKS OPEN NEW WINDOWS
    5. 6.5. Link to an Area on the Same Page
      1. 6.5.1. Link to an Area on the Same Page
        1. 6.5.1.1. NAME AN AREA
        2. 6.5.1.2. CREATE A LINK TO THE AREA
    6. 6.6. Link to Another File Type
      1. 6.6.1. Link to Another File Type
    7. 6.7. Link to an E-mail Address
      1. 6.7.1. Link to an E-mail Address
    8. 6.8. Change Link Colors
      1. 6.8.1. Change Link Colors
  13. 7. Working with Tables
    1. 7.1. Understanding Table Structure
    2. 7.2. Add a Table
      1. 7.2.1. Add a Table
    3. 7.3. Assign a Table Border
      1. 7.3.1. Assign a Table Border
    4. 7.4. Adjust Cell Padding and Spacing
      1. 7.4.1. Adjust Cell Padding and Spacing
        1. 7.4.1.1. SET CELL PADDING
        2. 7.4.1.2. SET CELL SPACING
    5. 7.5. Adjust Cell Width and Height
      1. 7.5.1. Adjust Cell Width and Height
        1. 7.5.1.1. SET CELL WIDTH
        2. 7.5.1.2. Set Cell HEIGHT
    6. 7.6. Add Column Labels
      1. 7.6.1. Add Column Labels
    7. 7.7. Add a Background Color to Cells
      1. 7.7.1. Add a Background Color to Cells
    8. 7.8. Insert a Background Image
      1. 7.8.1. Insert a Background Image
    9. 7.9. Create Newspaper-Style Columns
      1. 7.9.1. Create Newspaper-Style Columns
    10. 7.10. Adjust the Table Size
      1. 7.10.1. Adjust the Table Size
        1. 7.10.1.1. SET A TABLE SIZE IN PIXELS
        2. 7.10.1.2. SET A TABLE SIZE AS A PERCENTAGE
    11. 7.11. Change Cell Alignment
      1. 7.11.1. Change Cell Alignment
        1. 7.11.1.1. SET HORIZONTAL ALIGNMENT
        2. 7.11.1.2. SET VERTICAL ALIGNMENT
    12. 7.12. Extend Cells across Columns and Rows
      1. 7.12.1. Extend Cells across Columns and Rows
        1. 7.12.1.1. EXTEND CELLS ACROSS COLUMNS
        2. 7.12.1.2. EXTEND CELLS ACROSS ROWS
    13. 7.13. Change Table Alignment
      1. 7.13.1. Change Table Alignment
  14. 8. Creating Forms
    1. 8.1. Understanding Forms
    2. 8.2. Types of Form Elements
    3. 8.3. Create a Form
      1. 8.3.1. Create a Form
    4. 8.4. Send Form Data to an E-mail Address
      1. 8.4.1. Send Form Data to an E-mail Address
    5. 8.5. Add a Text Box
      1. 8.5.1. Add a Text Box
    6. 8.6. Add a Large Text Area
      1. 8.6.1. Add a Large Text Area
    7. 8.7. Add Check Boxes
      1. 8.7.1. Add Check Boxes
    8. 8.8. Add Radio Buttons
      1. 8.8.1. Add Radio Buttons
    9. 8.9. Add a Menu
      1. 8.9.1. Add a Menu
    10. 8.10. Add a Submit Button
      1. 8.10.1. Add a Submit Button
    11. 8.11. Add a Reset Button
      1. 8.11.1. Add a Reset Button
  15. 9. Creating Style Sheets
    1. 9.1. Understanding Style Sheets
    2. 9.2. Create an Internal Style Sheet
      1. 9.2.1. Create an Internal Style Sheet
    3. 9.3. Create an External Style Sheet
      1. 9.3.1. Create an External Style Sheet
    4. 9.4. Link to a Style Sheet
      1. 9.4.1. Link to a Style Sheet
    5. 9.5. Apply a Style Locally
      1. 9.5.1. Apply a Style Locally
    6. 9.6. Apply a Style Class
      1. 9.6.1. Apply a Style Class
        1. 9.6.1.1. DEFINE A CLASS
        2. 9.6.1.2. ASSIGN A CLASS
    7. 9.7. Apply Styles with DIV and SPAN Tags
      1. 9.7.1. Apply Styles with DIV and SPAN Tags
        1. 9.7.1.1. SET UP THE CLASSES
        2. 9.7.1.2. APPLY THE TAGS
  16. 10. Formatting Text with Style Sheets
    1. 10.1. Add Bold to Text
      1. 10.1.1. Add Bold to Text
    2. 10.2. Italicize Text
      1. 10.2.1. Italicize Text
    3. 10.3. Indent Text
      1. 10.3.1. Indent Text
    4. 10.4. Change the Font Size
      1. 10.4.1. Change the Font Size
    5. 10.5. Change the Font
      1. 10.5.1. Change the Font
    6. 10.6. Change the Text Case
      1. 10.6.1. Change the Text Case
    7. 10.7. Change Text Alignment
      1. 10.7.1. Change Text Alignment
    8. 10.8. Control Line Spacing
      1. 10.8.1. Control Line Spacing
    9. 10.9. Control Letter Spacing
      1. 10.9.1. Control Letter Spacing
    10. 10.10. Add Color to Text
      1. 10.10.1. Add Color to Text
    11. 10.11. Add a Background Color to Text
      1. 10.11.1. Add a Background Color to Text
    12. 10.12. Add a Background Image to Text
      1. 10.12.1. Add a Background Image to Text
    13. 10.13. Add a Border
      1. 10.13.1. Add a Border
    14. 10.14. Change Link Colors
      1. 10.14.1. Change Link Colors
    15. 10.15. Change Link Hover Effects
      1. 10.15.1. Change Link Hover Effects
  17. 11. Controlling Layout with Style Sheets
    1. 11.1. Control Layout
    2. 11.2. Set Width and Height for an Element
      1. 11.2.1. Set Width and Height for an Element
        1. 11.2.1.1. DEFINE AN ABSOLUTE SIZE
        2. 11.2.1.2. DEFINE A RELATIVE SIZE
    3. 11.3. Use Relative Positioning
      1. 11.3.1. Use Relative Positioning
        1. 11.3.1.1. APPLY RELATIVE POSITIONING
        2. 11.3.1.2. APPLY AN OFFSET
    4. 11.4. Use Absolute Positioning
      1. 11.4.1. Use Absolute Positioning
    5. 11.5. Use Fixed Positioning
      1. 11.5.1. Use Fixed Positioning
    6. 11.6. Set Margins
      1. 11.6.1. Set Margins
    7. 11.7. Add Padding
      1. 11.7.1. Add Padding
    8. 11.8. Wrap Text around Elements
      1. 11.8.1. Wrap Text around Elements
    9. 11.9. Change Vertical Alignment
      1. 11.9.1. Change Vertical Alignment
    10. 11.10. Control the Overlap of Elements
      1. 11.10.1. Control the Overlap of Elements
    11. 11.11. Customize a Background Image
      1. 11.11.1. Customize a Background Image
  18. 12. Adding Multimedia and Other Features
    1. 12.1. Understanding Multimedia Elements
    2. 12.2. Link to Audio or Video Files
      1. 12.2.1. Link to Audio or Video Files
    3. 12.3. Embed a Video File
      1. 12.3.1. Embed a Video File
    4. 12.4. Embed an Audio File
      1. 12.4.1. Embed an Audio File
    5. 12.5. Embed a Flash Movie
      1. 12.5.1. Embed a Flash Movie
    6. 12.6. Add a Java Applet
      1. 12.6.1. Add a Java Applet
  19. 13. Publishing Your Web Pages
    1. 13.1. Understanding Web Page Publishing
    2. 13.2. Look Up a Domain Name
      1. 13.2.1. Look Up a Domain Name
        1. 13.2.1.1. CHECK AVAILABILITY
        2. 13.2.1.2. CHECK REGISTRATION INFORMATION
    3. 13.3. Transfer Pages to a Web Server with WS_FTP
      1. 13.3.1. Transfer Pages to a Web Server with WS_FTP
        1. 13.3.1.1. SET UP YOUR CONNECTION
        2. 13.4.1.1. TRANSFER FILES
    4. 13.5. Troubleshoot Your Web Pages
  20. 14. Creating a Google Site
    1. 14.1. Understanding Google Sites
    2. 14.2. A Google Sites Page
    3. 14.3. Create a Google Account
      1. 14.3.1. Create a Google Account
    4. 14.4. Set Up a Google Site
      1. 14.4.1. Set Up a Google Site
    5. 14.5. Create a Page
      1. 14.5.1. Create a Page
    6. 14.6. Edit a Page
      1. 14.6.1. Edit a Page
        1. 14.6.1.1. SELECT A PAGE TO EDIT
        2. 14.6.1.2. EDIT TEXT
        3. 14.6.1.3. INSERT A TABLE
    7. 14.7. Create a Link
      1. 14.7.1. Create a Link
    8. 14.8. Insert an Image
      1. 14.8.1. Insert an Image
    9. 14.9. Manage Navigation
      1. 14.9.1. Manage Navigation
    10. 14.10. Share Your Site
      1. 14.10.1. Share Your Site
  21. 15. Creating a Blog on Blogger
    1. 15.1. Understanding Blogs
    2. 15.2. A Blogger Page
    3. 15.3. Set Up a Blog on Blogger
      1. 15.3.1. Set Up a Blog on Blogger
    4. 15.4. Create a Post
      1. 15.4.1. Create a Post
    5. 15.5. Edit a Post
      1. 15.5.1. Edit a Post
    6. 15.6. Change the Layout
      1. 15.6.1. Change the Layout
    7. 15.7. Add a Gadget
      1. 15.7.1. Add a Gadget
    8. 15.8. Manage Comments
      1. 15.8.1. Manage Comments
  22. 16. Creating a Facebook Page
    1. 16.1. Understanding Social Networks
    2. 16.2. Set Up a Facebook Account
      1. 16.2.1. Set Up a Facebook Account
    3. 16.3. View and Edit Your Profile
      1. 16.3.1. View and Edit Your Profile
        1. 16.3.1.1. VIEW YOUR PROFILE
        2. 16.3.1.2. EDIT YOUR PROFILE
    4. 16.4. Add a Profile Picture
      1. 16.4.1. Add a Profile Picture
    5. 16.5. Update Your Status
      1. 16.5.1. Update Your Status
    6. 16.6. Add a Friend
      1. 16.6.1. Add a Friend
    7. 16.7. Share to a Wall
      1. 16.7.1. Share to a Wall
        1. 16.7.1.1. SHARE A TEXT MESSAGE
        2. 16.7.1.2. SHARE A LINK