Table Of Contentptg
Laura Lemay
Rafe Colburn
SamsTeachYourself
ptg
Web Publishing with
HTML CSS
and
in One Hour a Day
800 East 96th Street,Indianapolis,Indiana 46240
Sams Teach Yourself Web Publishing with HTML Acquisitions Editor
and CSS in One Hour a Day Mark Taber
Development Editor
Copyright ©2011 by Sams Publishing Songlin Qiu
All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, Managing Editor
or transmitted by any means, electronic, mechanical, photocopying, recording, or other- Sandra Schroeder
wise, without written permission from the publisher. No patent liability is assumed with Project Editor
respect to the use of the information contained herein. Although every precaution has been Seth Kerney
taken in the preparation of this book, the publisher and authors assume no responsibility for
Copy Editor
errors or omissions. Nor is any liability assumed for damages resulting from the use of the
Keith Cline
information contained herein.
Indexer
ISBN-13: 978-0-672-33096-4 Brad Herriman
ISBN-10: 0-672-33096-2 Proofreader
Apostrophe Editing
Library of Congress Catalog-in-Publication data is on file. Services,Inc.
First Printing: August 2010 Technical Editor
Julie Meloni
Trademarks
Publishing
Coordinator
All terms mentioned in this book that are known to be trademarks or service marks have
Vanessa Evans
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 Multimedia
trademark or service mark. Developer
Dan Scherf ptg
Warning and Disclaimer
Book Designer
Every effort has been made to make this book as complete and as accurate as possible, but Gary Adair
no warranty or fitness is implied. The information provided is on an “as is” basis. The Page Layout
authors and the publisher shall have neither liability nor responsibility to any person or Studio Galou,LLC
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
[email protected]
For sales outside of the U.S., please contact
International Sales
[email protected]
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 ptg
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
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
ptg
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
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 ptg
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
vi Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
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
ptg
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
Download from www.wowebook.com
Contents vii
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
ptg
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
Download from www.wowebook.com
viii Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
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 ptg
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
Download from www.wowebook.com
Contents ix
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
ptg
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
Download from www.wowebook.com
