Table of Contents

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

  

About the Author

Mark Bell is a Ph.D. candidate at Indiana University. He studies media and its effect on social relations. Before returning to school, Mark worked for 15 years in the software industry as a technical writer, trainer, and developer. He started his first web design company in 1993 and has been making pages and managing websites ever since. He is the father of Jackson, 10, stepfather of Morrigan, Teagan, and Xander, and the husband of Sarah “Intellagirl” Smith-Robbins. You can find him on Twitter, Facebook, and LinkedIn.