Tự học HTML và CSS trong 1 giờ - part 1 pptx

ptg
Download from www.wowebook.com
ptg
in One Hour aDay
Web Publishing with
HTML and CSS
Sams Teach Yourself
Laura Lemay
Rafe Colburn
800 East 96th Street, Indianapolis, Indiana 46240
Download from www.wowebook.com
ptg
Sams Teach Yourself Web Publishing with HTML
and CSS in One Hour a Day
Copyright © 2011 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 authors assume no responsibility for
errors or omissions. Nor is any liability assumed for damages resulting from the use of the
information contained herein.
ISBN-13: 978-0-672-33096-4
ISBN-10: 0-672-33096-2
Library of Congress Catalog-in-Publication data is on file.
First Printing: August 2010
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 infor-
mation. 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
authors 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
Pearson offers excellent discounts on this book when ordered in quantity for bulk pur-
chases or special sales. For more information, please contact
U.S. Corporate and Government Sales
1-800-382-3419

For sales outside of the U.S., please contact
International Sales

Acquisitions Editor
Mark Taber
Development Editor
Songlin Qiu
Managing Editor
Sandra Schroeder
Project Editor
Seth Kerney
Copy Editor
Keith Cline
Indexer
Brad Herriman
Proofreader
Apostrophe Editing
Services, Inc.

Technical Editor
Julie Meloni
Publishing
Coordinator
Vanessa Evans
Multimedia
Developer
Dan Scherf
Book Designer
Gary Adair
Page Layout
Studio Galou, LLC
Download from www.wowebook.com
ptg
Contents at a Glance
PART I: Getting Started
1 Navigating the World Wide Web 7
2 Preparing to Publish on the Web 25
3 Introducing HTML and XHTML 49
PART II: Creating Web Pages
4 Learning the Basics of HTML 67
5 Organizing Information with Lists 81
6 Adding Links to Your Web Pages 99
7 Formatting Text with HTML and CSS 131
PART III: Doing More with HTML and CSS
8 Using CSS to Style a Site 173
9 Adding Images, Color, and Backgrounds 211
10 Building Tables 259
11 Designing Forms 311
12 Integrating Multimedia: Sound, Video, and More 355

13 Advanced CSS: Page Layout in CSS 389
PART IV: Using JavaScript and Ajax
14 Introducing JavaScript 411
15 Using JavaScript in Your Pages 435
16 Using JavaScript Libraries 459
17 Working with Frames and Linked Windows 489
PART V: Designing Effective Web Pages
18 Writing Good Web Pages: Do's and Don'ts 531
19 Designing for the Real World 567
PART VI: Going Live on the Web
20 Putting Your Site Online 593
21 Taking Advantage of the Server 619
22 Content Management Systems and Publishing Platforms 657
PART VII: Appendix
A Sources for Further Information 691
Download from www.wowebook.com
ptg
Table of Contents
Introduction 1
Who Should Read This Book 2
What This Book Contains
2
What You Need Before You Start
3
Conventions Used in This Book
4
Special Elements
4
HTML Input and Output Examples
5

Special Fonts
5
Workshop
5
PART I: Getting Started
LESSON 1: Navigating the World Wide Web 7
How the World Wide Web Works 8
The Web Is a Hypertext Information System
8
The Web Is Graphical and Easy to Navigate
9
The Web Is Cross-Platform
10
The Web Is Distributed
10
The Web Is Dynamic
11
The Web Is Interactive
13
Web Browsers
15
What the Browser Does
15
An Overview of Some Popular Browsers
16
Using the Browser to Access Other Services
18
Web Servers
19
Uniform Resource Locators

20
Summary
21
Workshop
21
Q&A
21
Quiz
22
Quiz Answers
22
Exercises
23
Download from www.wowebook.com
ptg
LESSON 2: Preparing to Publish on the Web 25
Anatomy of a Website 26
What Do You Want to Do on the Web?
28
Setting Your Goals
30
Breaking Up Your Content into Main Topics
31
Ideas for Organization and Navigation
32
Hierarchies
33
Linear
35
Linear with Alternatives

36
Combination of Linear and Hierarchical
38
Web
39
Storyboarding Your Website
42
What’s Storyboarding and Why Do I Need It?
42
Hints for Storyboarding
43
Web Hosting
44
Using a Content-Management Application
44
Setting Up Your Own Web Hosting
45
Summary
46
Workshop
47
Q&A
47
Quiz
48
Quiz Answers
48
Exercises
48
LESSON 3: Introducing HTML and XHTML 49

What HTML Is (And What It Isn’t) 50
HTML Describes the Structure of a Page
50
HTML Does Not Describe Page Layout
51
Why It Works This Way
52
How Markup Works
53
A Brief History of HTML Tags
53
The Current Standard: XHTML 1.1
54
The Future Standard: HTML5
55
What HTML Files Look Like
55
Text Formatting and HTML
60
Using Cascading Style Sheets
61
Including Styles in Tags
62
Download from www.wowebook.com
ptg
Programs to Help You Write HTML 62
Summary
64
Workshop
64

Q&A
64
Quiz
65
Quiz Answers
65
Exercises
65
PART II: Creating Web Pages
LESSON 4: Learning the Basics of HTML 67
Structuring Your HTML 68
The <html> Tag
68
The <head> Tag
69
The <body> Tag
69
The Title
70
Headings
72
Paragraphs
75
Comments
75
Summary
78
Workshop
78
Q&A

78
Quiz
79
Quiz Answers
79
Exercises
80
LESSON 5: Organizing Information with Lists 81
Lists: An Overview 82
Numbered Lists
83
Customizing Ordered Lists
84
Unordered Lists
87
Customizing Unordered Lists
88
Glossary Lists
90
Nesting Lists
92
Other Uses for Lists
94
Summary
95
Workshop
96
vi
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Download from www.wowebook.com

ptg
Q&A 96
Quiz
97
Quiz Answers
97
Exercises
98
LESSON 6: Adding Links to Your Web Pages 99
Creating Links 100
The Link Tag: <a>
100
Linking Local Pages Using Relative and Absolute Pathnames
105
Absolute Pathnames
106
Using Relative or Absolute Pathnames?
107
Links to Other Documents on the Web
108
Linking to Specific Places Within Documents
113
Creating Links and Anchors
113
Linking to Anchors in the Same Document
120
Anatomy of a URL
120
Parts of URLs
121

Special Characters in URLs
122
Additional Attributes for the <a> Tag
123
Kinds of URLs
123
HTTP
123
Anonymous FTP
124
Non-Anonymous FTP
125
Mailto
125
File
126
Summary
127
Workshop
128
Q&A
128
Quiz
130
Quiz Answers
130
Exercises
130
LESSON 7: Formatting Text with HTML and CSS 131
Character-Level Elements 132

Logical Styles
132
Physical Styles
135
Contents
vii
Download from www.wowebook.com
ptg
Character Formatting Using CSS 137
The Text Decoration Property
137
Font Properties
138
Preformatted Text
139
Horizontal Rules
142
Attributes of the <hr> Tag
143
Line Break
145
Addresses
147
Quotations
147
Special Characters
149
Character Entities for Special Characters
150
Specifying Character Encoding

151
Character Entities for Reserved Characters
152
Text Alignment
153
Aligning Individual Elements
153
Aligning Blocks of Elements
153
Fonts and Font Sizes
155
Summary
167
Workshop
171
Q&A
171
Quiz
172
Quiz Answers
172
Exercises
172
PART III: Doing More with HTML and CSS
LESSON 8: Using CSS to Style a Site 173
Including Style Sheets in a Page 174
Creating Page-Level Styles
174
Creating Sitewide Style Sheets
175

Selectors
176
Contextual Selectors
176
Classes and IDs
177
What Cascading Means
179
Units of Measure
180
The Box Model
182
Borders
183
viii
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Download from www.wowebook.com
ptg
Margins and Padding 185
Controlling Size and Element Display
189
Float
192
CSS Positioning
196
Relative Positioning
197
Absolute Positioning
199
Controlling Stacking

202
The <body> Tag
205
Links
206
Summary
207
Workshop
207
Q&A
207
Quiz
208
Quiz Answers
208
Exercises
209
LESSON 9: Adding Images, Color, and Backgrounds 211
Images on the Web 212
Image Formats
213
GIF
213
JPEG
213
PNG
214
Inline Images in HTML: The <img> Tag
214
Adding Alternative Text to Images

215
Images and Text
219
Text and Image Alignment
220
Wrapping Text Next to Images
223
Adjusting the Space Around Images
226
Images and Links
228
Other Neat Tricks with Images
232
Image Dimensions and Scaling
232
More About Image Borders
233
Using Color
234
Specifying Colors
234
Changing Colors Using CSS
236
Changing Page Colors in HTML
236
Contents
ix
Download from www.wowebook.com