Introduction . . . . .1
Part I: The Basics
1 The Order of Things . . . .11
The Website-Creation Process . . . .12
1. Planning . . . . .13
2. Design . . . . .14
3. Building . . . . .14
4. Testing . . . . .15
5. Promotion and Maintenance . . . .15
Why You Should Follow This Order . . . .16
2 Choosing a Location for Your Site . . . .17
Web Hosting . . . . .17
What Is a Web Server? . . . .18
Determining Your Web Hosting Needs . . .19
Cost . . . . .19
Technical Knowledge Required . . . .20
Maintenance Needs . . . .20
Storage Space . . . .20
Accessibility . . . . .20
Bandwidth Needs . . . .20
Security Needs . . . .21
Domain Name Service . . . .21
Hosting Options . . . . .23
Home Hosting . . . .23
Free Online Hosting . . . .23
Online Hosting Service . . . .23
Professional Hosting . . . .24
Commercial Hosting . . . .24
So, What Works Best for You? . . . .24
Working with Different Types of Hosting Services . . .25
Free Services . . . . .25
Low-Cost Commercial Sites . . . .27
Other Resources . . . .27
Part II: Plan and Prep
3 Planning Your Site . . . .29
What Type of Site Do You Want to Build? . . .30
Types of Sites . . . .30
Learning from Sites You Go To . . . .34
Website Goals . . . . .35
Organizing Websites . . . .36
Organizing the Site . . . .37
Organizing My Personal Site . . . .38
Organizing the Page . . . .38
Web Page Designs . . . .40
Best Practices of Website Organization . . .41
Keep Your Website Simple . . . .41
Keep Your Website Consistent . . . .42
Keep Your Website Easy to Maintain . . .42
4 Designing Your Site . . . .43
I Can't Make a Website That Looks That Good! . . .44
Content Before Design . . . .45
Overall Design . . . . .45
Design Ideas . . . . .46
Colors . . . . .46
The Magic Four . . . .46
Hex Color . . . . .47
Color Schemes . . . .48
Color Blindness . . . .50
Fonts . . . . .51
System Fonts . . . . .51
Fonts as Images . . . .52
Fonts and Color . . . .53
Images . . . . .53
Cascading Style Sheets . . . .54
Design Best Practices . . . .54
Content Is King . . . .54
Put What Is New Front and Center . . . .54
Keep It Simple . . . .54
Don't Use Attention Grabbers . . . .54
Be Consistent . . . .54
5 Gathering Your Tools . . . .55
Finding the Right Tools for the Job . . . .56
Tool Sites and Reviews . . . .56
Downloading New Software . . . .56
Essential Tools . . . . .58
Operating Systems . . . .58
Web Browsers . . . .58
Office Suites . . . . .59
File Transfer Protocol Programs . . . .59
Text Editor . . . . .60
Graphics Editors . . . .61
HTML Editors . . . . .62
Sound Recorders . . . .63
Video Editing . . . .64
Advanced Tools . . . .64
Future of Free Web Tools . . . .64
6 Moving Files to and from the Internet . . .65
Storing Your Files . . . .66
Naming Files . . . . .66
Keep All Your Web Files in One Place . . .67
Have an Organizational Structure . . . .68
Use a Version Control System . . . .69
Back Up Your Files . . . .69
Uploading Files to the Internet . . . .70
Logging In . . . . .71
Creating a FTP Site Listing . . . .72
Adding New Files . . . .72
Changing Existing Files . . . .73
Downloading Files from an FTP Server . . .73
One File or Many . . . .73
Downloading from a Browser . . . .74
Types of Download Files . . . .74
Best Practices for Downloading Files . . .76
Part III: Website Building Basics
7 Elements of a Website . . . .77
Content . . . . .78
Content Best Practices . . . .78
Content Standards . . . .79
Parts of a Web Page . . . .80
Title . . . . .80
Header . . . . .81
Body . . . . .81
Footer . . . . .83
Sidebars . . . . .83
Navigational Elements . . . .84
Parts of a Website . . . .85
Home Page . . . . .85
Content Pages . . . .86
How Do I Know How to Organize My Site? . . .87
Web Advertising . . . .88
Banner Ads . . . . .89
Animated Ads . . . .89
Google AdSense . . . .89
iSocket . . . . .90
Advertising Widgets . . . .90
8 Using Existing Websites . . . .93
Social Networking Sites . . . .94
MySpace . . . . .95
Facebook . . . . .95
Twitter . . . . .100
Other Web 2.0 Sites . . . .101
Pinterest . . . . .102
Flickr . . . . .102
Delicious.com . . . .103
Promoting Your Website on Other Sites . . .103
9 Web Page Services . . . .105
Before We Begin . . . .106
Google Sites . . . . .106
Signing Up for Google Sites . . . .107
Creating a Google Site . . . .108
Editing a Page . . . .111
Creating a Page . . . .113
Move a Page . . . .114
Delete a Page . . . .114
Edit Page Settings . . . .114
Edit Site Settings . . . .115
Google Sites Features and Limitations . . .116
Weebly . . . . .116
Signing Up for Weebly . . . .116
Creating a Site on Weebly . . . .117
Editing a Page . . . .118
Weebly Features and Limitations . . . .119
Webs . . . . .119
Signing Up for Webs . . . .119
10 HTML 101 . . . . .121
The Structure of HTML . . . .122
Elements, Tags, and Attributes . . . .123
The Structure of Elements . . . .124
Common HTML Tags . . . .125
HTML Structure Tags . . . .125
Text Tags . . . . .126
Lists . . . . .129
Tables . . . . .130
Hyperlinks . . . . .131
Images . . . . .132
Free HTML Editors . . . .132
Text Editors . . . . .132
WYSIWYG Editors . . . .133
Resources . . . . .134
Using a Text Editor to Create HTML . . . .135
11 HTML5 . . . . .137
What Is HTML5 and Why Should I Care? . . .137
Standards . . . . .138
World Wide Web Consortium (W3C) . . . .138
HTML and XHTML . . . .138
HTML5 Standard . . . .138
High Level of Changes . . . .138
Browser Overview . . . .139
HTML5 Resources . . . .140
HTML5 Elements . . . .140
Structure Elements . . . .140
Multimedia Elements . . . .144
HTML5 Forms . . . .145
Fun Stuff . . . . .147
Removed Elements . . . .149
12 Working with Images . . . .151
Creating Graphics . . . .152
Compression: Lossy and Lossless . . . .152
Editing Images . . . .154
Resizing Images . . . .154
Saving Images . . . .154
Optimizing Images . . . .155
When to Use Different File Types . . . .156
Slicing Images . . . .157
Image Maps . . . .158
Animated GIFs . . . .159
Images and HTML . . . .159
The Image Tag . . . .160
Inline Images . . . .161
Background Images . . . .162
Finding Images . . . .162
Free Images . . . . .162
Other People's Images . . . .163
Using Your Own Images . . . .163
13 Working with Multimedia . . . .165
Digital Audio Files . . . .167
Audio Formats . . . .167
Audio Players . . . .168
Digitizing Audio . . . .169
Audio Editing . . . .169
Streaming Audio . . . .170
Audio Resources . . . .171
Digital Video Files . . . .172
Video Formats . . . .172
Video Players . . . .173
Digitizing Video . . . .174
Video Editing . . . .174
Video Hosting Sites . . . .175
Working with YouTube . . . .175
Video Resources . . . .178
Multimedia Best Practices . . . .179
14 Building a Site Using HTML . . . .181
How Web Pages Work . . . .182
Page File . . . . .182
Extensions . . . . .182
Tools for Creating Web Pages . . . .182
Parts of a Page . . . .184
Hyperlinks . . . . .185
Cascading Style Sheets . . . .193
Format of a Style Sheet . . . .194
Creating and Linking a Style Sheet . . .195
Putting It All Together . . . .196
Scripting . . . . .201
Using Templates . . . .202
15 JavaScript for Beginners . . . .203
Yes! You Can Be a Programmer! . . . .203
Geek Speak: Script Versus Language . . .204
Programming Process . . . .204
Programming Tools . . . .204
JavaScript Console . . . .205
Text Editors . . . . .205
Browser Add-Ins . . . .206
JavaScript Basics . . . .206
Functions of JavaScript . . . .207
JavaScript Versions . . . .207
JavaScript Requirements . . . .207
The Script Element . . . .207
Inline and External Scripts . . . .208
Simple JavaScript Example: Rollovers and Dynamic Content . .209
JavaScript Resources . . . .211
Tutorials . . . . .212
Script Libraries . . . .213
Part IV: Site Testing and Maintenance
16 How'd They Do That? . . . .215
Viewing Code from Other Websites . . . .216
Web Development Firefox Add-Ons . . . .216
Recommended Firefox Web-Development Add-Ons . . .217
Recommended Chrome Web-Development Add-Ons . . .221
Recommended Safari Web-Development Add-Ons . . .222
Badges . . . . .222
Widgets . . . . .224
Templates . . . . .225
Developer Networks and Sites . . . .226
17 Making Your Site Work on Smartphones and Tablets . .229
Why Should You Care About the Mobile Web? . . .230
How People Access the Mobile Web . . .230
Become a Mobile Web User . . . .230
Mobile Web Devices (MWD) . . . .231
Mobile Operating Systems . . . .232
Mobile Browsers . . . .233
Limitations of the Mobile Web . . . .234
Making Your Website Mobile . . . .235
Mobile Browser Detection . . . .235
Domains and Subdomains . . . .236
Use the Right Code . . . .236
Page Sizes . . . . .236
Interface . . . . .237
Things to Avoid . . . .237
Mobile Web Tools and Sites . . . .237
Testing Your Site on a Mobile Phone . . . .239
18 Testing Your Website . . . .241
Why Testing Is Important . . . .242
Building a Test Plan . . . .243
Starting at the End . . . .243
Testing Basic Functionality . . . .244
Testing HTML . . . .244
Testing Browsers . . . .246
Testing Resolution . . . .246
Testing Printing . . . .247
Testing Navigation . . . .248
Testing Consistency of Design . . . .248
Testing Security . . . .249
Testing Mobile and Tablet-Based Websites . . .249
Testing Accessibility . . . .250
After Testing . . . . .251
Testing Tools . . . . .251
Part V: Website Workshop
19 Promoting Your Website . . . .253
Self-Promotion . . . . .254
Have Excellent and Unique Content . . .254
Update Content . . . .254
Publicize Your URL . . . .255
Connect with Others . . . .256
Social Media Sites for Self-Promotion . . .258
Search Engines . . . . .259
How Search Engines Work . . . .259
Optimizing Your Site for Search Engines . . .261
Keywords . . . . .261
Meta Tags . . . . .261
20 Maintaining Your Website . . . .263
What? I'm Not Done? . . . .263
Regular Maintenance . . . .264
Weekly Tasks . . . .264
Monthly Tasks . . . .264
Annual Tasks . . . .264
The Power of Analytics . . . .265
Common Analytics and What They Mean . . .265
Using Google Analytics . . . .266
Tweaking Your Site Based on Analytics . . .270
21 Building a Blog Using WordPress . . .271
What Is a Blog? . . . . .272
Why Should I Blog? . . . .272
Blog Publishing . . . .272
Syndication . . . . .273
What Is WordPress? . . . .273
Software Versions . . . .273
Building a Blog Using WordPress.com . . .274
Signing Up for WordPress.com . . . .275
Activating Your Account . . . .278
Logging Into Your Blog . . . .279
Writing Blog Posts . . . .280
Managing Blog Posts . . . .282
Changing the Design of Your Blog . . .283
Manage the Comments on Your Blog . . .284
Setting Up Your Own Blog with WordPress Software . . .285
Information You Need Before You Begin . . .285
How WordPress Software Works . . . .285
How Much Does All This Cost? . . . .286
Before Installing Your Software . . . .286
Confirm That the Right Software Is Installed on Your Server . .287
Get a Text Editor . . . .287
Get an FTP Client . . . .287
Pick a Username and Password . . . .287
Download and Install WordPress . . . .287
Download WordPress Software . . . .288
Customization of WordPress . . . .288
Adding Themes . . . .289
Adding Plug-Ins . . . .289
Personalization of WordPress . . . .290
Modifying Themes . . . .290
Creating Themes . . . .291
Creating Plug-Ins . . . .292
Blogging on Your iPhone . . . .292
A Simple Blogging Solution . . . .293
Keep an Eye on Things . . . .293
22 Building a Business Site Using a Content Management System . .295
Five Reasons to Use Open Source as Your CMS . . .296
Building a Site with Joomla! . . . .297
Before Installing Your Joomla! Software . . .298
Download and Install Joomla! . . . .298
Adding Articles . . . .299
Managing Users . . . .300
Modules, Plug-Ins, and Templates . . . .302
Keep an Eye on Things . . . .302
Other Open Source CMSs . . . .302
23 Building a Multimedia Website . . . .305
Best Practices for Multimedia . . . .306
Using Multimedia . . . .308
Storing Multimedia Files . . . .308
Downloading Audio and Video Files . . .309
Streaming Audio and Video . . . .310
Advanced Multimedia Options . . . .314
Wix.com (www.wix.com/) . . . .315
Webtrends Apps (www.transpond.com/) . . .315
Advanced Open-Source Multimedia . . . .315
24 Building a Site Using a Wiki . . . .317
Five Reasons to Use Wikia to Host Your Wiki . . .318
Five Reasons to Use MediaWiki for Your Wiki . . .319
What Is Wikia? . . . . .319
Building a Wiki Using Wikia . . . .320
Signing Up for Wikia . . . .320
Adding a Page . . . .322
Editing a Page . . . .323
Linking Pages . . . .323
Viewing Page History . . . .324
What Is MediaWiki? . . . .325
Information You Need Before You Begin . . .326
MediaWiki Software Architecture . . . .326
Before Installing Your MediaWiki Software . . .326
Download and Install MediaWiki . . . .327
Keep an Eye on Things . . . .329
Part VI: Appendixes
A List of the Most Common HTML Tags . . .331
B Free and Open-Source Software Sites . . .335
TOC, 10/19/2012, 9780789750235
