Thông tin tài liệu
ptg
www.it-ebooks.info
ptg
800 East 96th Street, Indianapolis, Indiana, 46240 USA
Julie Meloni
Michael Morrison
24
in
Hours
SamsTeach Yourself
HTML
and CSS
Eighth Edition
www.it-ebooks.info
ptg
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 other-
wise, 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 responsi-
bility 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
corpsales@pearsontechgroup.com
For sales outside of the U.S., please contact
International Sales
international@pearson.com
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
www.it-ebooks.info
ptg
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 1
Creating Web Content 2
Understanding Web Content Delivery 3
Selecting a Web Hosting Provider 6
Testing with Multiple Web Browsers 8
HOUR 2: Publishing Web Content
Creating the Sample File for this Hour 13
Using FTP to Transfer Files 14
Understanding Where to Place
Files on the Web Server 18
Distributing Content without a Web Server 22
Testing Web Content 24
HOUR 3: Understanding HTML and XHTML
Connections
Getting Started with a Simple Web Page 28
HTML Tags Every XHTML Web
Page Must Have 32
Organizing a Page with Paragraphs
and Line Breaks 34
Organizing Your Content with Headings 36
Validating Your Web Content 39
The Scoop on HTML, XML, XHTML,
and HTML 5 41
HOUR 4: Understanding Cascading Style Sheets
How CSS Works 48
A Basic Style Sheet 49
A CSS Style Primer 54
Using Style Classes 58
Using Style IDs 61
Internal Style Sheets and Inline Styles 62
PART II: Building Blocks of Practical
Web Design
HOUR 5: Working with Text Blocks and Lists
Aligning Text on a Page 68
The Three Types of HTML Lists 71
Placing Lists Within Lists 73
HOUR 6: Working with Fonts
Boldface, Italics, and Special Text Formatting 82
Tweaking the Font 85
Working with Special Characters 89
HOUR 7: Using Tables to Display Information
Creating a Simple Table 96
Controlling Table Sizes 99
Alignment and Spanning Within Tables 102
Page Layout with Tables 105
HOUR 8: Using External and Internal Links
Using Web Addresses 111
Linking Within a Page Using Anchors 114
Linking Between Your Own Web Content 117
Linking to External Web Content 120
Linking to an Email Address 120
Opening a Link in a New Browser Window 122
Using CSS to Style Hyperlinks 123
HOUR 9: Working with Colors
Best Practices for Choosing Colors 131
Understanding Web Colors 133
Using Hexadecimal Values for Colors 135
Using CSS to Set Background,
Text, and Border Colors 136
HOUR 10: Creating Images for Use on the Web
Choosing Graphics Software 143
The Least You Need to Know About Graphics 144
Preparing Photographic Images 145
Creating Banners and Buttons 151
Reducing the Number of Colors in an Image 153
Working with Transparent Images 154
Creating Tiled Backgrounds 154
Creating Animated Web Graphics 156
HOUR 11: Using Images in Your Web Site
Placing Images on a Web Page 162
Describing Images with Text 163
Specifying Image Height and Width 165
Aligning Images 165
Turning Images into Links 169
Using Background Images 172
Using Imagemaps 173
HOUR 12: Using Multimedia in Your Web Site
Linking to Multimedia Files 184
Embedding Multimedia Files 187
Additional Tips for Using Multimedia 190
HOUR 13: Working with Frames
What Are Frames? 197
Building a Frameset 199
Linking Between Frames and Windows 202
Using Inline Frames 204
www.it-ebooks.info
ptg
iv
PART III: Advanced Web Page Design
with CSS
HOUR 14: Working with Margins, Padding,
Alignment, and Floating
Using Margins 212
Padding Elements 219
Keeping Everything Aligned 223
Understanding the Float Property 224
HOUR 15: Understanding the CSS Box Model
and Positioning
The CSS Box Model 231
The Whole Scoop on Positioning 235
Controlling the Way Things Stack Up 239
Managing the Flow of Text 242
HOUR 16: Using CSS to Do More with Lists
HTML List Refresher 245
How the CSS Box Model Affects Lists 246
Placing List Item Indicators 249
Creating Image Maps with List
Items and CSS 251
HOUR 17: Using CSS to Design Navigation
How Navigation Lists Differ
from Regular Lists 259
Creating Vertical Navigation with CSS 260
Creating Horizontal Navigation with CSS 270
HOUR 18: Using Mouse Actions to Modify
Text Display
Creating a Tool Tip with CSS 277
Displaying Additional Rollover Text with CSS 281
Accessing Events 283
Using onclick to Change <div> Appearance 284
HOUR 19: Creating Fixed or Liquid Layouts
Understanding Fixed Layouts 294
Understanding Liquid Layouts 295
Creating a Fixed/Liquid Hybrid Layout 298
PART IV: Advanced Web Site
Functionality and Management
HOUR 20: Creating Print-Friendly Web Pages
What Makes a Page Print-Friendly? 312
Applying a Media-Specific Style Sheet 315
Designing a Style Sheet for Print Pages 317
Viewing a Web Page in Print Preview 320
HOUR 21: Understanding Dynamic Web Sites
Understanding the Different
Types of Scripting 325
Including JavaScript in HTML 326
Displaying Random Content 328
Understanding the Document Object Model 332
Changing Images Based on User Interaction 333
HOUR 22: Working with Web-Based Forms
How HTML Forms Work 339
Creating a Form 340
Accepting Text Input 344
Naming Each Piece of Form Data 345
Including Hidden Data in Forms 345
Exploring Form Input Controls 346
Submitting Form Data 349
HOUR 23: Organizing and Managing a Web Site
When One Page Is Enough 356
Organizing a Simple Site 357
Organizing a Larger Site 360
Writing Maintainable HTML Code 364
HOUR 24: Helping People Find Your Web Pages
Publicizing Your Web Site 371
Listing Your Pages with the
Major Search Sites 373
Providing Hints for Search Engines 374
Additional Tips for Search
Engine Optimization 379
www.it-ebooks.info
ptg
v
PART V: Appendixes
APPENDIX A: HTML and CSS Resources on
the Internet
General HTML, XHTML, and CSS Information 385
Web Browsers 386
Web Page Design 386
Software 386
Colors and Graphics 387
Multimedia 388
Advanced Developer Resources 388
Web Site Hosting 389
Web Site Services 389
APPENDIX B: HTML and CSS Quick Reference
HTML Structure 392
HTML Text Phrases and Paragraphs 395
XHTML Text Formatting Elements 398
XHTML Lists 399
XHTML Links 400
XHTML Tables 402
XHTML Embedded Content 407
XHTML Style 410
XHTML Forms 410
XHTML Scripts 413
XHTML Common Attributes 414
CSS Dimension Style Properties 415
CSS Text and Font Style Properties 416
CSS Background Style Properties 419
CSS Border Style Properties 420
CSS Margin Style Properties 423
CSS Padding Style Properties 424
CSS Layout and Display Style Properties 424
CSS List and Marker Style Properties 427
CSS Table Style Properties 428
www.it-ebooks.info
ptg
vi
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 best-
selling 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 technolo-
gy 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 opin-
ion 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: webdev@samspublishing.com
Mail: Mark Taber
Associate Publisher
Sams Publishing
800 East 96
th
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.
www.it-ebooks.info
ptg
vii
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 cre-
ate web content today. The goal of this book is to give you all the skills you need to create a mod-
ern, 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 cre-
ation. Every example in this book is fully XHTML-compatible. Where applicable, HTML 5 is
also covered.
www.it-ebooks.info
ptg
viii
. 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 set-
ting 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 best-
sellers, 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 high-
lighted.
. 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 accompany-
ing 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.
www.it-ebooks.info
ptg
ix
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.
Q&A, Quiz, and Exercises
Every hour ends with a short question-and-answer session that addresses the kind of “dumb ques-
tions” 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.
TIP
Tips and tricks to save you
precious time are set aside in
“Tip” boxes so that you can
spot them quickly.
WARNING
When there’s something you
need to watch out for, you’ll be
warned about it in “Warning”
boxes.
NOTE
“Note” boxes provide addition-
al information about the topics
being discussed.
www.it-ebooks.info
[...]...This page intentionally left blank www.it-ebooks.info HOUR 1 Understanding How the Web Works Before learning the intricacies of HTML and CSS, it is important that you gain a solid understanding of the technologies that help transform these plain-text files to the rich multimedia displays you see on your computer or handheld device when browsing the World Wide Web A file containing HTML and CSS is useless... other words, while we might think all we are doing is opening a web browser, typing in a web address, and instantaneously seeing the content we requested, technology in the background is working hard on our behalf Figure 1.1 shows the basic interaction between a browser and a server www.it-ebooks.info 3 4 HOUR 1: Understanding How the Web Works FIGURE 1.1 A browser request and a server response However,... online documentation for common issues Server space—does the hosting package include enough server space to hold all the multimedia files (images, audio, video) you plan to include in your web site (if any)? Bandwidth—does the hosting package include enough bandwidth so that all the people visiting your site and downloading files can do so without you having to pay extra? Domain name purchase and. .. they can get away with charging people A good rule of thumb is that if you are paying more than $75 per year for a basic hosting package and domain name, you are probably paying too much www.it-ebooks.info Selecting a Web Hosting Provider 7 Here are three reliable web hosting providers whose basic packages contain plenty of server space and bandwidth (as well as domain names and extra benefits) at a relatively... certain circumstances—as opposed to being hand-coded, in which you are completely in control of the resulting markup In this book, you are taught fundamental coding from the ground up, which typically results in clean, easy-to-read source code Visual web design tools have a knack for making code difficult to read, and also for producing code that is convoluted and non-standards compliant www.it-ebooks.info... subdirectory using Classic FTP, click the Remote menu and then click New Folder Different FTP clients will have different interface options to achieve the same goal Understanding Where to Place Files on the Web Server An important aspect of maintaining web content is determining how you will organize that content—not only for the user to find, but also for you to maintain on your server Putting files in directories... creating an HTML file and uploading it via FTP to your own dedicated web server, but I would be remiss if I did not note that blogging is, in fact, a form of web publishing www.it-ebooks.info NOTE Distributing a web browser isn’t required when creating and distributing a local site, although it’s a nice touch You can reasonably assume that users have their own web browsers and will open the index .html. .. lessons in this book by viewing files locally on your own computer, or are you going to use a web hosting provider? Note that most web hosting providers will have you up and running the same day you purchase your hosting plan www.it-ebooks.info 11 This page intentionally left blank www.it-ebooks.info HOUR 2 Publishing Web Content In the previous hour, you learned about the process of requesting web... for Mac, Windows, and Linux Microsoft Internet Explorer (http://www.microsoft.com/ie) for Windows Opera (http://www.opera.com/) for Mac, Windows, and Linux/UNIX Summary This hour introduced you to the concept of using HTML to mark-up text files in order to produce web content You also learned that there is more to web content than just the “page”—web content also includes image, audio, and video... root and put the sample .html file in that directory, then the file would be accessed at this URL: http://www.yourdomain.com/newdirectory/sample .html www.it-ebooks.info 20 HOUR 2: Publishing Web Content If you put the sample .html file in the directory you originally saw upon connecting to your server—that is, you did not change directories and place the file in the document root—then the sample.html . ptg www.it-ebooks.info ptg 800 East 96th Street, Indianapolis, Indiana, 4 6240 USA Julie Meloni Michael Morrison 24 in Hours SamsTeach Yourself HTML and CSS Eighth Edition www.it-ebooks.info ptg Sams Teach Yourself. Padding, Alignment, and Floating Using Margins 212 Padding Elements 219 Keeping Everything Aligned 223 Understanding the Float Property 224 HOUR 15: Understanding the CSS Box Model and Positioning The CSS Box. 105 HOUR 8: Using External and Internal Links Using Web Addresses 111 Linking Within a Page Using Anchors 114 Linking Between Your Own Web Content 117 Linking to External Web Content 120 Linking to
Ngày đăng: 31/03/2014, 16:50
Xem thêm: sams teach yourself html and css in 24 hours 8th edition, sams teach yourself html and css in 24 hours 8th edition