I just finished adding a blog to it that I thought I should share here too - basically, it is an introductory guide to starting your own website. The original article is at http://www.ozpolitic.com/articles/starting-your-own-website.html
If you spend enough time discussing an issue on online forums and blogs you will eventually find that they don’t do justice to the effort you put in. The obvious next step is to start your own website. It is fairly cheap these days, and has the potential to make you money, though you shouldn’t give up your day job just yet. If you actually have something to sell direct to the public, or an organization to represent, even better. While there are a lot of good tutorials online, they don’t offer much broad perspective, which is what I hope to give here, ranging from advice for beginners to some of the more frustrating issues you may encounter.
It’s been a steep learning curve over the last few weeks and my primary motive for writing this article is to share what I’ve learnt before it got forgotten, so that I could save others the same problems. It was not my intention to give an exhaustive tutorial but to make you aware of what options are available and what to search for if you want to find out more. I have only gone into detail where I was not able to find useful information online.
If you are new to this, you should probably start with a free online blog or website. You supply the content and they take care of the technical stuff for you, but you do not get to choose your URL and they get all the advertising revenue. They may also put annoying popup ads on your site. A free website will tend to give you slightly more control over appearance etc than a blog, which is little better than a glorified forum/bulletin board. Most sites give you a subdomain of the form www.yourname.hostname.com, where hostname is the name of the company hosting your site, and yourname is whatever you choose. I started out with a website like this for political issues relevant to recreational fishermen.
If you want to start a ‘real’ website, the first step is to choose your URL (web address). It is worth taking your time to choose a good one, as it can be hard to find one that isn’t taken. I think I was lucky to get ozpolitic.com. The ‘brand name’ of a URL can be very valuable and it could cost you traffic if you decide to move somewhere more appropriate later on. A lot of potential URL’s are &lsquoarked’ which means that ‘speculators’ have bought it with the intention of selling it later for profit. If you get desperate you could always buy one. Alternatively, there are plenty of ‘extensions’ (eg .info) that have been created to give people or not-for-profit organizations access to cheap or free URL’s. If you hope to make money eventually, a .com or .com.au (or whatever your local .com is) is probably better as it is easier to remember, though you will have fewer options for short URL’s. I chose an American .com URL, even though this site is primarily targeted at Australians, because it is a lot cheaper than .com.au (less than AU$20/year). Hopefully it is also easie to remember.
The other cost you need to consider is the cost of hosting, which is actually more expensive than the URL. At the time of writing this site was hosted for just over AU$6/month. This can be shared between up to 4 different websites. The host stores the website files on a computer for you. The alternative is to host it on your own computer, but that would mean that it would have to be online all the time. More importantly, you would have to deal with hackers. Unless you really know what you are doing it is probably better to get the site hosted by someone else. The host does not own your site and you can move hosts at any time. The URL registration and hosting for this site was done through the same company.
Your next big decision is how to create your website. You can either write up the code yourself, or use software to create it for you. I went down the path of writing it up myself, but I wouldn’t recommend it for everyone. If you are comfortable with any other programming language, then html will be a breeze for you. But if you aren’t technically inclined you are probably better off going with software that will write the code for you (if that is the case you might as well skip the next few sections). Writing the html yourself gives you far more control and flexibility. It may take a bit more time, but you can create pages of the same complexity as any software package. In addition, the files will be smaller and people will be able to browse your site faster. No matter how powerful, a software package will always limit your designs by limiting your ability to take advantage of the full range of html capabilities. By simplifying the process, they inevitably limit your options. You may become dependent on the software package you use, which may become obsolete one day.
For those who are only familiar with html programming or who are not experienced programmers, I will start with some basic tips that apply to all programming languages. First, remember that you don’t have to start from scratch. Find something that is similar to what you want and pinch the code from that. So long as you modify it significantly and have a final product that doesn’t look the same, then you haven’t done anything illegal or unethical. Even if you did start from scratch, it would be highly unlikely that you would end up with something that is not very similar to another product (in this case a website) that already exists.
To &lsquoinch’ the code from another site, got to view -> source and save the file somewhere. (Note that the instructions I give are for windows/IE systems. If you use a different system you should be able to figure it out. If all else fails look for the file in your temporary internet files.) Do a text search (edit -> find or ctrl-f) to find some text, then look outwards from there to find the code that controls it’s location and appearance. This is where you will probably see a problem caused by many software packages – they create a lot of useless code that is hard to understand. When I was creating the files for the Australian People’s Party section of this website, I wrote most of the files starting from the text provided by Stuart. However, I asked him to convert one of the later documents to html for me. He must have done it by getting MS word or some other package to convert a document to a html file. The file ended up being about 150kb in size. Not huge, but far bigger than necessary for a simple text file. I opened it up and deleted a large block of code from the header. This halved the size of the file without changing the appearance in any way.
If you are not fluent in html, or are a complete beginner, it would be a good idea to do an introductory course, even if just as a refresher. When I started out I knew some basics and had created simple web pages. I did the free course at http://www.w3schools.com/default.asp, which has ‘test areas’ where they give you some sample code that does something interesting and allows you to change the code and view the effect by clicking a button – this is more convenient than editing a text file, then switching to a browser and refreshing. Keep in mind that html is designed to create pages that can be viewed on screens of various sizes and resolutions, so the appearance of a page is not fixed. It is always a good idea to check how a page looks on different screens after you have finished coding. This can be done by altering your screen resolution (minimse all open applications and right click on your desktop, choose properties -> settings).
When you get round to creating your own code, write it in notepad, with text wrap on (toggle this in the format menu). Have the same file open in internet explorer, and hit refresh each time you save the file. Make sure you specify a html extension when saving the file, and choose ‘all files’ rather than ‘.txt’ so it doesn’t add .txt to the end of the file extension. It may help to select notepad as the default program for opening html files. Do this by right clicking on the file, then selecting open with -> choose program and ticking ‘always use the selected program…’ before choosing notepad. This can be undone later.
I have already mentioned the text search feature in notepad. Most programs have the same feature. In addition, explorer (what you use to browse your PC if you have windows) has a handy search feature that allows you to search for files with a word in their name or containing certain text. This is handy for finding files in your temporary internet files folder, or where you have saved them on your hard drive.
As you write code, make regular backups. This isn’t just so you can go back to an old version if things go awry, it also helps you to debug (find errors). Get your hands on some software called araxis merge, or something similar (there is probably a freeware version available). This software allows you to open two files (say, your current buggy version and your most recent backup) and highlights the differences for you. You can then undo some of the changes (be careful you don’t lose your backup – it’s probably a good idea to create an extra backup of both files if you aren’t familiar with this process). Using this method, you can ‘re-impliment’ the changes one at a time until you locate the one that causes the error. This is much better than guesswork for difficult problems. This method prevents you from ever getting ‘completely stuck’ on a bug.
So, now you have the basic tools needed to start building your own webpage, either starting from scratch or by modifying someone else’s code. Make sure you use the title tag as that specifies the name that appears in the task bar and along the top of IE. Use the description meta tag to improve your ranking with search engines. Make sure you use the keywords from the description as often as possible in the body. Finally, use the robots meta tag to encourage or discourage search engines from listing your site. An example of these tags (from the ozpolitic home page) are given below. Until you start using external style sheets (see below) this is all you really need in the header () section of your html files.
A lot of the old html tags, such as the font tag, have been ‘deprecated.’ While they will probably continue to be recognized, the new system has big advantages. It allows you to define ‘styles’ that can be applied repeatedly throughout your html document without repeating numerous specifications. These styles can be defined within the html code in a similar manner to the old font specification, in the header section of your html document, or in an external file. The external file is a useful option if you have multiple pages with similar features. You can specify fonts, background colours, background images, padding, borders, text alignment etc. Then, by changing a single file, you can alter those properties throughout every page on your site. The file extension is .css, which stands for cascading style sheet. This refers to the way that specifications within your code take precedence over specifications in the header, which take precedence over the specifications in your external style sheet. This means you can override some or all of the styles at a local level, on a case-by-case basis.
When you start dealing with multiple pages, chances are you will have the same image appearing in them, and you will also start using subfolders. This is a good time to start using absolute references. An example:
One of the most frustrating tasks I encountered was trying to get curved corners on the tabs:
The problem is that html only allows one background image. With .css files you can go a step further and have a background image for each section (eg, one for each
tag). However, this is still not good enough as four different images are required. The width of each tab varies depending on the amount of text it contains, so you cannot simply have one background image that contains all four curved corners. The height may also vary, for example if I decide to change the text font (or if a user’s browser does something different with the font). Apparently the next version of html or style sheets will get around this by adding a function to create the rounded corners. However this is likely to take some time to come into general usage. It also may not be flexible enough to handle all the different things people may want to do with multiple background images.
If given the option, save the file to your hard drive and then open it in notepad.
The code above is a series of five list (
) tags. Usually you only need one for each of the links in the header, however for the ‘current’ section you need the extra four tags – one for each curved corner. Each ‘class’ statement refers to a section in the ozstyles.css file. The ‘headerlink3’ class tells the browser to put each list item on the same line, rather than creating the default bullet point list. Within each list tag is a link () tag. Only the central one contains a working link, with a class ‘headerlinkcurrent’. In the css file, this class is given the lighter background colour with the darker text. The other four link tags are included to make use of the references to classes in the css file. The four different classes: headerlinkleftlow, headerlinkleft, headerlinkright and headerlinkrightlow each specify a different background image. Each image is a small square with one curved corner. The curve is in a different location in each image and the background colour is light for the two central sections and dark for the outer two. The .css file specifies where to place the image – the bottom left, the top right etc. It also specifies the different background colours – light for the inner two and dark for the outer two – and the top and bottom padding. Finally, there is a span () tag within each of the four extra link tags. The ‘headerlinkcurrent’ tag specifies no padding on the left and right of the text. The span tags specify (via a class) the width of each section containing the curves, so that the two sections on each side of the text have the same width as the padding on the left and right of the other links in the header.
No doubt you are a bit confused by all this. I posted the actual code because I could not find a working example posted online anywhere and it took a lot of experimentation to get it working well. To try it out, copy the ozstyles.css file, the header-home.js file and the index.html file to a folder on your hard drive. Edit the relevant sections of the .css file on your hard drive until you get a feel for how it works.
Even if your primary motive is advocacy or politics, you can still offset the cost of your site with advertising – if the cost is a concern for you.
At the time of writing, roughly 6 weeks after I launched this website, I had only made AU$1.09 from the google ads which are hosted here, via 9 ‘clickthroughs’. I have no idea whether this is a competitive rate as the income from each click is highly variable (from 2c to 40c), and neither google nor it’s competitors advertise rates. In any case, there isn’t much point to setting up advertising until you get a reasonable number of visitors. It may even work against you by putting people off and diverting traffic away from your site. Pop-ups should certainly not be used. By the time you get enough traffic to make advertising worthwhile, you may be able to attract enough interest to negotiate advertising directly. If you do decide to use google ads, please sign up for the scheme via the ‘referral ad’ under the vertical banner ad on the right of this page, so that I get a kickback (it won’t affect your earnings). One advantage that google (and the competing schemes) have is that they can negotiate ‘targeted ads’ based on the content of each page on your site. Businesses bid competitively for ads on your site (or more likely, on sites that contain certain key words) and can also bid based on the location of your visitors, so a visitor in America sees a different ad to one in Australia. All this means higher rates from advertisers who wouldn’t normally bother talking to you, though google obviously gets a big cut.
You should get easy access to forums, blogs and many other features through the control panel provided by your hosting service. These can be installed at the click of a button. If you don’t have such access, there are plenty of freeware packages available that you simply upload onto your site. I do not have enough experience with these to recommend any in particular. The yabb forum here works fine, but they have not got a good anti-spam package yet. I suspect that spam is a fairly new problem on yabb boards. In any case, it sounds like the next version will have good functions for reducing spam, and there are plenty of hacks for reducing spam on the current version. I have recently added a hack that creates an error when new members or guests post URL’s. I have had no spam at all since.