Building a Website Offline

By far, the best first step you can take to building and hosting a website online is to create a fully navigable version of your site offline. There are a number of reasons for doing this:

1. Test pages ~ Assuming that you are using relative addressing in your HTML source code, you can test your website offline to make sure that all images and text on your web pages are displaying properly and all the internal links (hyperlinks leading from one page on your website to another page on your website) are fully functional. Testing your pages offline can also help save bandwidth and preserve all your web stats for 'real' visitors.
2. Stay organized ~ Working offline by default establishes an important routine where you can make it a hard and fast rule to never edit the online versions of your web pages. Instead, always edit the offline version and then upload them to overwrite the online versions.
   
   If you don't follow this routine then you could run into some problems should you, for example, decide to edit the online version without remembering to make the same changes to the offline version. What could happen then is that later on you may decide to do the opposite, i.e. edit the offline version and then upload it and unwittingly overwrite the previously edited online version. Hence, if you don't establish a steady routine for updating files then you could make some irreversible mistakes. Believe me, I've learned this the hard way.
   
   And this leads to the next reason why you should work offline:
3. Backup files ~ An offline version of your website acts as a back up to the online version (and vice-versa). This will exist as a kind of failsafe should anything happen to your online web files. And you never know what might happen, for instance you could accidentally delete some online files or your web host could suddenly go bankrupt and go out of business overnight without even telling you (yes, this happens) or any number of mishaps that could corrupt or change your online webpages beyond recovery. Better safe than sorry. Right?

Alright then, the best and simplest way to organize your web files so that the exact same files work both offline and online is to use...

Relative Addressing

The easiest way to create an offline version of your website is to simply create a directory on your hard drive and then keep ALL YOUR WEB PAGE FILES (.htm files, graphics files, the whole shebang) in that one directory. So, for example, assuming that you are working in Windows and that you normally keep your stuff in drive C then create a directory called "Homepage" in drive C.

Now whip up your home page, name it index.htm and save it, along with all its graphics in:

C:\Homepage\

Any other web pages and graphics you create for your site will also be saved in:

C:\Homepage\

By keeping all your web files stored in the same directory, you can write the HTML source code for all your web pages using relative addressing for your internal links (links leading to other pages in your website) and relative addressing for your graphics files. In this situation, we'll be using the simplest form of relative addressing which is just using the file name as the respective value.

For example, to create a hyperlink to another page on your website describing your vacation called vacation.htm, use this HTML code:


To render a graphic displaying a photo of yourself on vacation called on_the_beach.jpg, use this code:


Now...

When you go to upload your web files to your web server thus making them available online, you will upload them ALL to the root directory designated for your HTML files (your web host will be able to tell you what that directory is). By keeping all your files in the same respective directory offline or online, the same web pages will now function both offline and online, i.e. images will load properly and internal links will work.

And that's it, that's all. One website. No muss, no fuss.

Viewing Your Website Offline

Want to view your home page offline? Well assuming you followed the above tutorial, just type (or copy and paste) the following into the address bar of your web browser:

file:///C:/Homepage/index.htm

After loading your offline home page, any links on it leading to other pages on your website should work. You will actually be able to browse your website offline. The only links that won't work will be external links, i.e. links leading to web pages outside of your website. You can check your external links by simply logging on to the internet.

Making a Separate Directory for Graphics

Got about a kazillion graphic files that you would rather keep in a separate directory? No problem. Just create a subdirectory in your web files root directory (both offline and online) and call it, say, 'mypics'. Now the relative addressing to all your graphics files will be prefixed by mypics/

So once again, if you wanted to insert a graphic on your home page called on_the_beach.jpg then the HTML source code would look like this:


Easy as pie.

Alright then, I can hear some of you saying, "Yeah, yeah, yeah... whatever.... I'll get to that later but right now I wanna see my web page on the internet, like now, like RIGHT NOW. How do I do that?"

Fair enough.

Let's get started with choosing a web host and we'll kick that off by examining what you're up against when you opt for free web hosting...