You are previewing Teach Yourself VISUALLY™ HTML and CSS.
O'Reilly logo
Teach Yourself VISUALLY™ HTML and CSS

Book Description

Are you a visual learner? Do you prefer instructions that show you how to do something - and skip the long-winded explanations? If so, then this book is for you. Open it up and you'll find clear, step-by-step screen shots that show you how to tackle more than 175 tasks involving HTML and CSS. Each task-based spread covers a single technique, sure to help you get up and running with HTML and CSS in no time.

You'll learn to:

  • View HTML code in a browser

  • Add and format text

  • Prepare images for the Web

  • Insert links to other pages

  • Control layout with style sheets

  • Add JavaScript to a Web page

  • Helpful sidebars offer practical tips and tricks

  • Succinct explanations walk you through step by step

  • Full-color screen shots demonstrate each task

  • Two-page lessons break big topics into bite-sized modules

Table of Contents

  1. Copyright
  2. Praise for Visual Books
  3. Credits
  4. About the Authors
  5. Authors' Acknowledgements
  6. 1. Getting Familiar with HTML and Web Page Basics
    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
    7. 1.7. Plan a Web Site
  7. 2. Creating Your First HTML Page
    1. 2.1. Understanding HTML Document Structure
    2. 2.2. Start an HTML Document
    3. 2.3. Save an HTML Document
    4. 2.4. View an HTML Page
    5. 2.5. Add a Document Declaration
    6. 2.6. Add Metadata
  8. 3. Adding Text
    1. 3.1. Create a New Paragraph
    2. 3.2. Change Paragraph Alignment
    3. 3.3. Add a Line Break
    4. 3.4. Insert a Blank Space
    5. 3.5. Insert Preformatted Text
    6. 3.6. Insert a Heading
    7. 3.7. Add Block Quotes
    8. 3.8. Insert a Comment
    9. 3.9. Create a Numbered List
    10. 3.10. Create a Bulleted List
    11. 3.11. Create a Nested List
    12. 3.12. Create a Definition List
    13. 3.13. Insert Special Characters
    14. 3.14. Special Characters
  9. 4. Formatting Text
    1. 4.1. Make Text Bold
    2. 4.2. Italicize Text
    3. 4.3. Add Underlining to Text
    4. 4.4. Change Fonts
    5. 4.5. Change Font Size
    6. 4.6. Change the Text Color
    7. 4.7. Adjust Margins
    8. 4.8. Set a Background Page Color
    9. 4.9. Add a Horizontal Line
  10. 5. Adding Images
    1. 5.1. Understanding Web Page Images
    2. 5.2. Prepare Your Images for the Web
    3. 5.3. Insert an Image
    4. 5.4. Specify an Image Size
    5. 5.5. Add Alternative Text
    6. 5.6. Create an Image Label
    7. 5.7. Add Copyright Text to Images
    8. 5.8. Align an Image Horizontally
    9. 5.9. Align an Image Vertically
    10. 5.10. Center an Image
    11. 5.11. Wrap Text Between Images
    12. 5.12. Stop Text Wrap
    13. 5.13. Set an Image Border
    14. 5.14. Add Space Around an Image
    15. 5.15. Add a Background Image
    16. 5.16. Create an Image Banner
  11. 6. Adding Links
    1. 6.1. Understanding Links
    2. 6.2. Understanding URLs
    3. 6.3. Link to Another Page
    4. 6.4. Open a Linked Page in a New Window
    5. 6.5. Link to an Area on the Same Page
    6. 6.6. Link to Another File Type
    7. 6.7. Link to an E-mail Address
    8. 6.8. Change Link Colors
  12. 7. Working with Tables
    1. 7.1. Understanding Table Structure
    2. 7.2. Add a Table
    3. 7.3. Assign a Table Border
    4. 7.4. Adjust Cell Padding and Spacing
    5. 7.5. Adjust Cell Width and Height
    6. 7.6. Add Column Labels
    7. 7.7. Create Newspaper-Style Columns
    8. 7.8. Create Side Navigation
    9. 7.9. Add a Table Caption
    10. 7.10. Control which Borders to Display
    11. 7.11. Adjust the Table Size
    12. 7.12. Change Cell Alignment
    13. 7.13. Extend Cells across Columns and Rows
    14. 7.14. Create Column and Row Groups
    15. 7.15. Add a Background Color to Cells
    16. 7.16. Add a Background Color to a Table
    17. 7.17. Insert an Image in a Cell
    18. 7.18. Insert a Background Image
    19. 7.19. Change Table Alignment
    20. 7.20. Control Text Wrapping in Cells
    21. 7.21. Nest a Table within a Table
  13. 8. Working with Frames
    1. 8.1. Understanding Frames
    2. 8.2. Create Frames
    3. 8.3. Customize Frame Borders
    4. 8.4. Control Frame Margins
    5. 8.5. Add Alternative Text
    6. 8.6. Prevent Frame Resizing
    7. 8.7. Hide or Display Frame Scroll Bars
    8. 8.8. Target a Link
    9. 8.9. Create a Nested Frameset
    10. 8.10. Create an Inline Frame
  14. 9. Creating Forms
    1. 9.1. Understanding Forms
    2. 9.2. Types of Form Elements
    3. 9.3. Gather Form Data
    4. 9.4. Create a Form
    5. 9.5. Send Form Data to an E-mail Address
    6. 9.6. Add a Text Box
    7. 9.7. Add a Large Text Area
    8. 9.8. Add Check Boxes
    9. 9.9. Add Radio Buttons
    10. 9.10. Add a Menu List
    11. 9.11. Add a Submit Button
    12. 9.12. Add a Reset Button
    13. 9.13. Add Active Labels
    14. 9.14. Change the Tab Order
    15. 9.15. Add a File Upload Element
    16. 9.16. Group Form Elements
  15. 10. Creating Style Sheets
    1. 10.1. Understanding Style Sheets
    2. 10.2. Create an External Style Sheet
    3. 10.3. Link to a Style Sheet
    4. 10.4. Add Comments to a Style Sheet
    5. 10.5. Create an Internal Style Sheet
    6. 10.6. Create a Class
    7. 10.7. Apply a Style with the DIV Tag
    8. 10.8. Apply a Style Locally
    9. 10.9. Apply a Style Using the ID Attribute
  16. 11. Formatting Text with Style Sheets
    1. 11.1. Add Bold to Text
    2. 11.2. Italicize Text
    3. 11.3. Indent Text
    4. 11.4. Change the Font Size
    5. 11.5. Change the Font
    6. 11.6. Change the Text Case
    7. 11.7. Change Text Alignment
    8. 11.8. Control Line Spacing
    9. 11.9. Control Letter Spacing
    10. 11.10. Add Color to Text
    11. 11.11. Add a Background Color to an Element
    12. 11.12. Add a Background Image to an Element
    13. 11.13. Add a Border
    14. 11.14. Change Link Colors
    15. 11.15. Change Link Hover Effects
    16. 11.16. Change Bullet or Number Styles
    17. 11.17. Customize Form Elements
  17. 12. Controlling Layout with Style Sheets
    1. 12.1. Control Layout
    2. 12.2. Set Width and Height for an Element
    3. 12.3. Use Relative Positioning
    4. 12.4. Use Absolute Positioning
    5. 12.5. Use Fixed Positioning
    6. 12.6. Set Margins
    7. 12.7. Add Padding
    8. 12.8. Wrap Text around Elements
    9. 12.9. Change Vertical Alignment
    10. 12.10. Create a Centered Layout
    11. 12.11. Control the Overlap of Elements
    12. 12.12. Hide an Element
    13. 12.13. Customize a Background Image
  18. 13. Working with JavaScript
    1. 13.1. Understanding JavaScript
    2. 13.2. Understanding Script Events and Handlers
    3. 13.3. Add JavaScript to a Web Page
    4. 13.4. Create a JavaScript File
    5. 13.5. Hide JavaScript
    6. 13.6. Add Alternative Text
    7. 13.7. Insert the Current Date and Time
    8. 13.8. Display an Alert Message Box
    9. 13.9. Display a Pop-Up Window
    10. 13.10. Customize the Status Bar Message for a Link
    11. 13.11. Create an Image Rollover Effect
    12. 13.12. Validate Form Data
    13. 13.13. Show a Hidden Element
  19. 14. Adding Multimedia and Extra Touches
    1. 14.1. Understanding Multimedia Elements
    2. 14.2. Understanding Plug-Ins and Players
    3. 14.3. Link to Audio or Video Files
    4. 14.4. Embed a Video File
    5. 14.5. Embed an Audio File
    6. 14.6. Embed a Flash Movie
    7. 14.7. Add a Java Applet
    8. 14.8. Embed a Video Clip from YouTube
    9. 14.9. Embed an Image from Flickr
    10. 14.10. Add a Google Search Box to Your Page
    11. 14.11. Add a Digg Link to Your Page
    12. 14.12. Automatically Load another Web Page
    13. 14.13. Create an Image Map
  20. 15. Publishing Your Web Pages
    1. 15.1. Understanding Web Page Publishing
    2. 15.2. Transfer Files to a Web Server with WS_FTP
    3. 15.3. Troubleshoot Your Web Pages
    4. 15.4. Promote Your Web Site
  21. A. HTML Tags