Sams Teach Yourself HTML and CSS in 24 Hours
Eighth Edition
800 East 96th Street, Indianapolis, Indiana, 46240 USA
Sams Teach Yourself HTML and CSS in 24 Hours, Eighth Edition
Copyright © 2010 by Sams Publishing
All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein.
International Standard Book Number: 0-672-33097-0
Library of Congress Cataloging-in-Publication Data
Meloni, Julie C.
Sams teach yourself HTML and CSS 24 hours / Julie Meloni, Michael
Morrison. -- 8th ed.
p. cm.
Rev. ed. of: Sams teach yourself HTML and CSS in 24 hours / Dick
Oliver, 7th ed., 2006.
ISBN 978-0-672-33097-1 (pbk.)
1. HTML (Document markup language) 2. XHTML (Document markup
language) 3. Cascading style sheets. I. Morrison, Michael, 1970- II.
Oliver, Dick. Sams teach yourself HTML and CSS in 24 hours. III. Title.
QA76.76.H94O4526 2010
006.7’4--dc22
2009046100
Printed in the United States of America
First Printing: December 2009
Trademarks
All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.
Warning and Disclaimer
Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book or from the use of the CD or programs accompanying it.
Bulk Sales
Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales. For more information, please contact
U.S. Corporate and Government Sales
1-800-382-3419
[email protected]
For sales outside of the U.S., please contact
International Sales
[email protected]
Acquisitions Editor
Mark Taber
Development Editor
Michael Thurston
Managing Editor
Patrick Kanouse
Project Editor
Jennifer Gallant
Indexer
Ken Johnson
Proofreader
Dan Knott
Technical Editor
William Wolff
Publishing Coordinator
Vanessa Evans
Composition
Mark Shirar
Book Designer
Gary Adair
Contents
PART I: Getting Started on the Web
HOUR 1: Understanding How the Web Works
A Brief History of HTML and the World Wide Web
Understanding Web Content Delivery
Selecting a Web Hosting Provider
Testing with Multiple Web Browsers
HOUR 2: Publishing Web Content
Creating the Sample File for this Hour
Understanding Where to Place Files on the Web Server
Distributing Content without a Web Server
HOUR 3: Understanding HTML and XHTML Connections
Getting Started with a Simple Web Page
HTML Tags Every XHTML Web Page Must Have
Organizing a Page with Paragraphs and Line Breaks
Organizing Your Content with Headings
The Scoop on HTML, XML, XHTML, and HTML 5
HOUR 4: Understanding Cascading Style Sheets
Internal Style Sheets and Inline Styles
PART II: Building Blocks of Practical Web Design
HOUR 5: Working with Text Blocks and Lists
Boldface, Italics, and Special Text Formatting
Working with Special Characters
HOUR 7: Using Tables to Display Information
Alignment and Spanning Within Tables
HOUR 8: Using External and Internal Links
Linking Within a Page Using Anchors
Linking Between Your Own Web Content
Linking to External Web Content
Opening a Link in a New Browser Window
Best Practices for Choosing Colors
Using Hexadecimal Values for Colors
Using CSS to Set Background, Text, and Border Colors
HOUR 10: Creating Images for Use on the Web
The Least You Need to Know About Graphics
Reducing the Number of Colors in an Image
Working with Transparent Images
Creating Animated Web Graphics
HOUR 11: Using Images in Your Web Site
Specifying Image Height and Width
HOUR 12: Using Multimedia in Your Web Site
Additional Tips for Using Multimedia
Linking Between Frames and Windows
PART III: Advanced Web Page Design with CSS
HOUR 14: Working with Margins, Padding, Alignment, and Floating
Understanding the Float Property
HOUR 15: Understanding the CSS Box Model and Positioning
The Whole Scoop on Positioning
Controlling the Way Things Stack Up
HOUR 16: Using CSS to Do More with Lists
How the CSS Box Model Affects Lists
Creating Image Maps with List Items and CSS
HOUR 17: Using CSS to Design Navigation
How Navigation Lists Differ from Regular Lists
Creating Vertical Navigation with CSS
Creating Horizontal Navigation with CSS
HOUR 18: Using Mouse Actions to Modify Text Display
Displaying Additional Rollover Text with CSS
Using onclick to Change <div> Appearance
HOUR 19: Creating Fixed or Liquid Layouts
Creating a Fixed/Liquid Hybrid Layout
PART IV: Advanced Web Site Functionality and Management
HOUR 20: Creating Print-Friendly Web Pages
What Makes a Page Print-Friendly?
Applying a Media-Specific Style Sheet
Designing a Style Sheet for Print Pages
Viewing a Web Page in Print Preview
HOUR 21: Understanding Dynamic Web Sites
Understanding the Different Types of Scripting
Understanding the Document Object Model
Changing Images Based on User Interaction
HOUR 22: Working with Web-Based Forms
Naming Each Piece of Form Data
Including Hidden Data in Forms
HOUR 23: Organizing and Managing a Web Site
Writing Maintainable HTML Code
HOUR 24: Helping People Find Your Web Pages
Listing Your Pages with the Major Search Sites
Providing Hints for Search Engines
Additional Tips for Search Engine Optimization
APPENDIX A: HTML and CSS Resources on the Internet
General HTML, XHTML, and CSS Information
APPENDIX B: HTML and CSS Quick Reference
HTML Text Phrases and Paragraphs
XHTML Text Formatting Elements
CSS Dimension Style Properties
CSS Text and Font Style Properties
CSS Background Style Properties
CSS Layout and Display Style Properties
CSS List and Marker Style Properties
About the Authors
Julie C. Meloni is both the technical director for i2i Interactive, a multimedia company located in Los Altos, CA, and a scholar working in the field of Digital Humanities. She has written several books and articles on Web-based programming languages and database topics, including the bestselling Sams Teach Yourself PHP, MySQL, and Apache All in One.
Michael Morrison is a writer, developer, toy inventor, and author of a variety of computer technology books and interactive web-based courses. In addition to his primary profession as a writer and freelance nerd for hire, Michael is the creative lead at Stalefish Labs, an entertainment company he co-founded with his wife, Masheed.
We Want to Hear from You!
As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.
You can email or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books stronger.
Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message.
When you write, please be sure to include this book’s title and author as well as your name and phone or email address. I will carefully review your comments and share them with the author and editors who worked on the book.
Email: [email protected]
Mail: Mark Taber
Associate Publisher
Sams Publishing
800 East 96th Street
Indianapolis, IN 46240 USA
Reader Services
Visit our web site and register this book at informit.com/register for convenient access to any updates, downloads, troubleshooting hints, or errata that might be available for this book.
Introduction
In 2009, it is estimated that more than 1.5 billion people have access to the Internet, including 220 million in the U.S. alone. Throw in 338 million Chinese users, 55 million German users, 48 million British users, 38 million Russian users, and 67 million Brazilians, and you can see the meaning of the word “world” in the term World Wide Web. Many of these Internet users are also creating content for the Web—you can be one of them! Although accurate measurements of the total number of web pages are difficult to come by, Google’s most recent data indicates they hit the 1 trillion mark of indexed pages in the middle of 2008.
In the next 24 hours, hundreds of millions of new pages will appear in accessible areas of the Internet. At least as many pages will be placed on private intranets, where they will be viewed by businesspeople connected via their local networks. Every one of those pages—like the more than 1 trillion pages already online—will use Hypertext Markup Language (HTML).
As you complete the 24 one-hour lessons in this book, your web pages will be among those that appear on the Internet. These lessons will also help you develop one of the most valuable skills in the world today: mastery of HTML.
Can you really learn to create top-quality web pages yourself, without any specialized software, in less time than it takes to schedule and wait for an appointment with a highly paid HTML wizard? Can this relatively short, easy-to-read book really enable you to teach yourself state-of-the-art web page publishing?
Yes. In fact, within the first two lessons in this book, someone with no previous HTML experience at all can have a web page ready to place on the web.
How can you learn the language of the Web so fast? By example. This book organizes HTML into simple steps and then shows you exactly how to tackle each step. Every HTML code example is listed directly before a picture of the web page it produces. You see how it’s done, you read a clear, concise explanation of how it works, and then you immediately do the same thing with your own page. Ten minutes later, you’re on to the next step.
After 24 hours of work, you’re marveling at your own impressive pages on the Internet.
Beyond HTML
This book covers more than just HTML because HTML isn’t the only thing you need to know to create web content today. The goal of this book is to give you all the skills you need to create a modern, standards-compliant web site in just 24 short, easy lessons. This book covers the following key skills and technologies:
• XHTML (eXstensible Hypertext Markup Language) is the current standard for web page creation. Every example in this book is fully XHTML-compatible. Where applicable, HTML 5 is also covered.
• All the examples in the book have been tested for compatibility with the latest version of every major web browser. That includes Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. You’ll learn from the start to be compatible with the past, yet ready for the future.
• There is extensive coverage of Cascading Style Sheets (CSS), which allows you to carefully control the layout, fonts, colors, and formatting of every aspect of your web pages, including both text and images. When it comes to creating eye-popping web pages, CSS goes far beyond what traditional HTML pages could do by themselves. For example, did you know that CSS allows you to specifically tailor the information on a page just for printing, in addition to normal web viewing?
• Hours 10 through 12 introduce you to multimedia applications and their use, including where to find industry-standard software you can download and try free.
• The technical stuff is not enough, so this book also includes the advice you need when setting up a web site to achieve your goals. Key details—designing an effective page layout, posting your page to the Internet with FTP software, organizing and managing multiple pages, and getting your pages to appear high on the query lists at all the major Internet search sites—are all covered in enough depth to get you beyond the snags that often frustrate beginners.
Attention to many of these essentials are what made the first seven editions of this book bestsellers, and this updated edition—the first for this title since 2005—is no different. All of the examples have been updated and a significant portion of the content has been revised to match new examples and new technologies.
Visual Examples
Every example in this book is illustrated in two parts:
• The text you type to make an HTML page is shown first, with all HTML and CSS code highlighted.
• The resulting web page is shown as it will appear to users who view it with the world’s most popular web browsers.
You’ll often be able to adapt the example to your own pages without reading any of the accompanying text at all.
All the examples in this book are standards-compliant and work with Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. While all of the screenshots are taken in Firefox, rest assured that all of the code has been tested in all other browsers.
You will also find the use of colors within code examples and when elements of code appear in the explanatory text. These colors highlight the different bits and pieces of code both to enhance your familiarity with them and to call attention to their use.
• HTML tags are displayed in dark blue.
• HTML comments are displayed in brown.
• CSS elements are displayed in green.
• HTML attribute names are displayed in light blue.
• HTML attribute values are displayed in magenta.
Be aware that the colors of certain terms change depending on their context. For instance, when CSS elements are used within the style attribute of an HTML tag, they will be color-coded as HTML attribute values (magenta) rather than CSS elements (green).
Special Elements
As you complete each hour, margin notes help you immediately apply what you just learned to your own web pages.
Tip
Tips and tricks to save you precious time are set aside in “Tip” boxes so that you can spot them quickly.
Note
“Note” boxes provide additional information about the topics being discussed.
Warning
When there’s something you need to watch out for, you’ll be warned about it in “Warning” boxes.
Q&A, Quiz, and Exercises
Every hour ends with a short question-and-answer session that addresses the kind of “dumb questions” everyone wishes they dared to ask. A brief but complete quiz lets you test yourself to be sure you understand everything presented in the hour. Finally, one or two optional exercises give you a chance to practice your new skills before you move on.