Build a Website for Free

Mark Bell is a Ph.D. student 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, 8, and the husband of Sarah “Intellagirl” Robbins. Mark blogs at blog.markwbell.com. You can find him on Twitter, Facebook, and LinkedIn.

Introduction     1

Part I: The Basics

1 The Order of Things     11

The Website Creation Process     12

1. Planning     12

2. Design     13

3. Building     14

4. Testing     14

5. Promotion and Maintenance     14

2 Choosing a Location for Your Site     17

Web Hosting      17

What Is a Web Server?      18

Determining Your Web Hosting Need     19

Cost     19

Technical Knowledge Required     19

Maintenance Needs     19

Storage Space     19

Accessibility     20

Bandwidth Needs     20

Domain Name Service     20

Hosting Options     21

Home Hosting     21

Free Online Hosting     21

Online Hosting Service     21

Professional Hosting     22

Commercial Hosting     22

So What Works Best for You?      22

Working with Different Types of Hosting Services     23

Free Services     23

Low-Cost Commercial Sites     25

Other Resources     26

 

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     33

Website Goals     34

Organizing Websites     35

Organizing the Site     36

Organizing the Page     37

Best Practices of Website Organization     38

Keep Your Website Simple     38

Keep Your Website Consistent     39

Keep Your Website Easy to Maintain     39

4 Designing Your Site     41

I Can’t Make a Website That Looks That Good!      42

Content Before Design     42

Overall Design     43

Design Ideas     43

Central Image Design     43

Colors     43

The Magic Four     44

Hex Color     44

Color Schemes     45

Color Blindness     47

Fonts     48

System Fonts     48

Fonts as Images     49

Fonts and Color     50

Images     50

Cascading Style Sheets     51

Design Best Practices      51

Content Is King     51

Put What Is New Front and Center     51

Keep It Simple     51

Don’t Use Attention Grabbers     51

Be Consistent     52

5 Gathering Your Tools     53

Finding the Right Tools for the Job     54

Tool Sites and Reviews     54

Downloading New Software     54

Essential Tools     55

Operating Systems     55

Web Browsers     56

Office Suites     56

File Transfer Protocol (FTP) Programs     57

Text Editor     58

Graphics Editors     59

HTML Editors     59

Sound Recorders     61

Video Editing     61

Advanced Tools     61

The Future of Free Web Tools     62

6 Moving Files to and from the Internet     63

Storing Your Files     64

Naming Files     64

Keep All Your Web Files in One Place     65

Have an Organizational Structure     65

Use a Version Control System      66

Uploading Files to the Internet     66

Logging In      67

Adding New Files     67

Changing Existing Files     67

Downloading Files from an FTP Server     68

One File or Many     69

Downloading from a Browser     69

Types of Download Files     69

Best Practices for Downloading Files     71

 

Part III: Website Building Basics

7 Elements of a Website     75

Content     76

Content Best Practices     76

Content Standards     77

Parts of a Web Page     78

Title     78

Header     79

Body      79

Footer     80

Sidebars     80

Navigational Elements     82

Parts of a Website     83

Home Page     83

Content Pages     84

Web Advertising     85

Banner Ads     85

Animated Ads     85

Google AdSense     86

8 Using Existing Websites     89

Social Networking Sites     90

MySpace     90

Facebook     96

Other Web 2.0 Sites     101

Flickr     101

Twitter     102

Delicious.com     103

9 Web Page Services     105

Google Sites     106

Signing Up for Google Sites     106

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

Wetpaint     116

Signing Up for Wetpaint     116

Creating a Site on Wetpaint     118

Editing a Page     119

Wetpaint Features and Limitations     120

Netvibes     120

Signing Up for Netvibes     120

Personalizing Your Netvibes Page     122

10 HTML 101     123

The Structure of HTML     124

The Structure of Tags     125

Common HTML Tags     126

HTML Structure Tags     126

Text Tags     127

Lists     129

Tables     130

Hyperlinks     132

Images     132

Free HTML Editors     132

Text Editors     133

WYSIWYG Editors     134

Resources     135

The Latest Version of HTML     136

11 Working with Images     137

Web Graphics     138

Lossy and Lossless Compression     138

The Image Tag     140

Background Images     141

Image Maps     141

Animated GIFs     141

Optimizing Images     142

Resizing Images     142

When to Use Different File Types     142

Slicing Images      143

Finding Images     143

Free Images     143

Other People’s Images     143

Using Your Own Images     144

12 Working with Multimedia     145

Digital Audio Files     147

Audio Formats     147

Audio Players     148

Digitizing Audio     149

Audio Editing     149

Audio Resources     150

Digital Video Files     150

Video Formats     151

Video Players     151

Digitizing Video     152

Video Editing     153

Video Hosting Sites     154

Video Resources     155

13 Building a Site Using HTML     157

How Web Pages Work     158

Page File     158

Extensions     158

Tools for Creating Web Pages      158

Parts of a Page     159

Cascading Style Sheets     167

Format of a Style Sheet     167

Creating and Linking a Style Sheet     168

Scripting     170

Using Templates     170

14 How’d They Do That?      171

Viewing Code from Other Websites     172

Web Development Firefox Add-Ons     172

Recommended Firefox Web Development Add-Ons     173

Recommended Chrome Web Development Add-Ons     176

Recommended Safari Web Development Add-Ons     177

Badges     178

Templates     180

Developer Networks and Sites     181

15 Making Your Site Mobile     183

Why Should You Care About the Mobile Web?      184

How People Access the Mobile Web     184

Become a Mobile Web User     184

Mobile Web Devices (MWD)      185

Mobile Operating Systems      186

Mobile Browsers     187

Limitations of the Mobile Web     189

Making Your Website Mobile     189

Mobile Browser Detection     190

Domains and Subdomains     190

Use the Right Code     191

Page Sizes     191

Interface     191

Things to Avoid     192

Mobile Web Tools and Sites     192

Testing Your Site on a Mobile Phone     193

 

Part IV: Site Testing and Maintenance

16 Testing Your Website     197

Why Testing Is Important     198

Building a Test Plan     199

Start at the End     199

Testing Basic Functionality     199

Testing HTML     200

Testing Browsers     201

Testing Resolution     202

Testing Printing     203

Testing Navigation     203

Testing Consistency of Design     204

Testing Security     205

Testing Mobile Web     205

Testing Accessibility     206

After Testing     206

Testing Tools     206

17 Promoting Your Website     209

Self-Promotion     210

Have Excellent and Unique Content     210

Update Content     210

Publicize Your URL     211

Connect with Others     212

Search Engines     214

How Search Engines Work      214

Optimizing Your Site for Search Engines     216

Keywords     216

18 Maintaining Your Website     219

What? I’m Not Done?      219

Regular Maintenance      220

Weekly Tasks     220

Monthly Tasks     220

Annual Tasks     220

The Power of Analytics     221

Common Analytics and What They Mean     221

Using Google Analytics     222

Tweaking Your Site Based on Analytics     228

 

Part V: Website Workshop

19 Building a Blog Using WordPress     231

What Is a Blog?      232

Why Should I Blog?      232

Blog Publishing     232

Syndication     233

What Is WordPress?      233

Software Versions     233

Five Reasons to Use WordPress.com to Host Your Blog     233

Five Reasons to Create Your Blog Using WordPress Software     234

Building a Blog Using WordPress.com     234

Signing Up for WordPress.com     235

Activating Your Account     239

Logging In to Your Blog     240

Writing Blog Posts     241

Managing Blog Posts     243

Changing the Design of Your Blog     244

Manage the Comments on Your Blog     245

Setting Up Your Own Blog with WordPress Software     246

Information You Need Before You Begin     246

How WordPress Software Works     246

How Much Does All This Cost?      247

Before Installing Your Software     247

Confirm That the Right Software Is Installed on Your Server      247

Get a Text Editor     248

Get an FTP Client     248

Pick a Username and Password     248

Download and Install WordPress     248

Download WordPress Software     248

Customization of WordPress     249

Adding Themes     249

Adding Plug-Ins     250

Personalization of WordPress     251

Modifying Themes     251

Creating Themes     252

Creating Plug-Ins     253

Blogging on Your iPhone     253

Keep an Eye on Things     253

20 Building a Business Site Using a Content Management System     255

Five Reasons to Use SocialGO as Your CMS     256

Five Reasons to Use Joomla as Your CMS     257

What Is SocialGO?      257

Building a Social Network with SocialGO     258

Sign Up for SocialGO     258

Invite Friends     260

Add Photos and Video     261

Start Admin Center     262

Building a Site with Joomla     264

Before Installing Your Joomla Software     265

Download and Install Joomla     265

Adding Articles     267

Managing Users     268

Modules, Plug-Ins, and Templates     269

Keep an Eye on Things     270

21 Building a Multimedia Website     271

Best Practices for Multimedia     272

Using Multimedia     273

Storing Multimedia Files     274

Downloading Audio and Video Files     275

Streaming Audio and Video     276

Advanced Multimedia Options     279

Wix.com (www.wix.com)      279

Webtrends Apps (www.transpond.com/)     279

Advanced Open-Source Multimedia     279

22 Building a Site Using a Wiki     281

Five Reasons to Use PBworks to Host Your Wiki     282

Five Reasons to Use MediaWiki for Your Wiki     283

What Is PBworks?      283

Building a Wiki Using PBworks     284

Signing Up for PBworks     284

Activating Your Account     286

Editing a Page     287

Adding a Page     288

Linking Pages     289

Viewing Page History     290

Setting Up Your Own Wiki Using MediaWiki Software     291

Information You Need Before You Begin     292

MediaWiki Software Architecture     292

Before Installing Your MediaWiki Software     292

Download and Install MediaWiki     293

Keep an Eye on Things     295

 

Part VI: Appendixes

A List of the Most Common HTML Tags     299

B Free and Open-Source Software Sites     303

History of Open Source     304

Open-Source News     304

General Open-Source Sites     304

Operating Systems     304

Web Browsers     304

Office Suites     305

File Transfer Tools     305

Text Editors     305

Graphics Editors     305

HTML Editors      305

Video Editors     306

Sound Recording     306

Web Servers     306

Database Tools     306

Blog Software     306

CMS Software     307

Wiki Software     307

Script Tools     307

Index     309