START A PETITION 25,136,189 members: the world's largest community for good
START A PETITION
x
Jan 2, 2007

http://www.ozpolitic.com

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.

top

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.

top

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.

top

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.

top

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.

top

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.

top

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).

top

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.

top

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.

top

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.



top

Most programming languages are designed for instructing a computer to do a series of repetitive tasks. HTML was not designed with this in mind, however it becomes necessary when you start creating a website with many pages. There are aspects of the appearance, as well as text and links that will be common to all or most pages. There are different ways of handling this, depending on whether you want to replicate content (text and links) or style (colour, font, background etc). Styles are dealt with via external (cascading) style sheets (.css files) and content via javascripts (.js files).

top

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.

top

Java scripts are similar to C code and allow you to add ‘dependencies’ in your page. For example, you can make a greeting dependent on the local time of a person browsing your site. Though it was not their original intention, you can also use javascripts to handle content (text and links) that is repeated throughout your site. For example, the links down the left hand side of this page, the links in the header, the copyright text in the footer and all of the ads are specified in separate .js files, and each html file calls those javascripts. I can now add a link on the left of every page in this site by changing a single file.

You can encounter problems when you get javascripts to refer to other javascripts, and I am yet to come across a satisfactory explanation for this. It is probably something to do with the fact that this was not the intended purpose of a javascript. By using a javascript in this manner, you are effectively inserting more html code into each html file. There is an alternative way to do this – by using top

There are several websites that will convert html to javascript for you, or you can do it manually.

top

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:

Local: OzPolitic logo
Absolute: OzPolitic logo

The files on this site that start with http://www.ozpolitic.com/gardening are contained in a folder on the host server called gardening, and also in a folder called gardening on my PC when I am doing offline development. Local referencing can be used to refer to files from a different folder, provided they always stay in the same relative position (for example, ‘go up two folders then look in the images folder’ would look like ../../images/ozpolitic.jpg). When you start having multiple sub folders, and sub-sub-folders, the relative position will not always be the same. This is true even if the image is called from a single javascript file, because the browser takes the position to be relative to the html file, not to the javascript file that it calls. For this situation absolute referencing is needed. This makes it harder to wok completely offline because the pages try to load images from the web.

The reference to the OzPolitic logo, and all the links down the left hand side and in the header at the top of the page, are all contained in javascript files that use absolute references, so that they will work from anywhere. The photos in the gardening section, which only appear on one page each, are referenced locally, directly from the html file.

Advantages of local referenceing: easier, especially for offline development, html file and image can both be moved into a different folder without changing the html code Advantages of absolute referencing: multiple pages from different locations can include the same image or link via a javascript.

top

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.

Eventually I came up with a technique that worked. I had come across vague references to it, but not anything that works. You will find the code for it in the header-xxxx.js files, where the xxxx varies depending on which section of the site you are in. Let’s take the example for the picture shown above. I will convert from the javascript back to html:



  • Home



  • You can view the javascript files (eg header-home.js) and the ozstyles.css file by entering the following URLs into your browser:

    http://www.ozpolitic.com/header-home.js
    http://www.ozpolitic.com/ozstyles.css

    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.

    top

    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.

    top

    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.

  • Visibility: Everyone
    Posted: Tuesday January 2, 2007, 1:07 am
    Tags: website your own starting [add/edit tags]

    Group Discussions
    Comments
    Or, log in with your
    Facebook account:

    Debbye s. (255)
    Tuesday January 2, 2007, 4:49 am
    You did a nice job with this FD.

    Freediver OzPolitic com (192)
    Monday February 12, 2007, 12:37 am
    I have added instructions for displaying rss feeds and html code:

    http://www.ozpolitic.com/articles/starting-your-own-website.html#RSS-feeds

    Author

    Freediver OzPolitic com
    male, age 114, single
    City, Australia
    FREEDIVER'S SHARES
    Oct
    22
    (3 comments  |  discussions )
    \nThis is a new group I started. For some reason group invites don\'t work, so I\'m doing a share instead. Please pass it on. All topics to do with Islam or interaction between Islam and the west are welcome.\r\nhttp://www.ca re2.com/c2c/group/islam_a nd_the...
    Jan
    9
    (1 comments  |  discussions )
    How to make online debates interesting – for everyonePrevious Next Up Home ad hominemargumentum ad populumstrawmanfalse dichotomyappeal to emotionargumentum ad consequentiamreversing or misusing a correlationcorrelation equals causationenemy of ...
    Sep
    12
    (0 comments  |  discussions )
    There are so many ways in which people can reduce greenhouse gas emissions. They can change spending habits and buy different types of products. They can buy the same type of product, but choose ones that have a lower carbon cost. They can switch...


    SHARES FROM FREEDIVER'S NETWORK
    Jan
    21
    by Uno D.
    (0 comments  |  discussions )
    I love my Macbook, but reently thought I had reason to shop for a new one. In doing some research, I came across this ... which I found interesting.  I had a positive image of Apple ... not anymore ... \\r\\n \\r\\nhttp://impressiveen gineering.com/d...
    Jul
    15
    (0 comments  |  discussions )
    \\nWe have just posted, as a news story (click here) this urgent call for humane, medical release for Herman Wallace of the Angola 3, recently diagnosed with liver cancer. Amnesty International has just launched a campaign calling for Herman\\\'s release...
    (0 comments  |  discussions )
    \\nWe have just posted, as a news story (click here) this urgent call for humane, medical release for Herman Wallace of the Angola 3, recently diagnosed with liver cancer. Amnesty International has just launched a campaign calling for Herman\\\'s release...
    Mar
    29
    (0 comments  |  discussions )
    \\ndEAR PEOPLE,\\r\\ni LEFT CARE2 FOR AWHILE BUT I AM BACK NOW...SO MUCH HAS HAPPENED...MY TEN MONTH GRAND DAUGHTER WAS MURDERED LAST YEAR...WE ARE FIGHTING FOR CUSTODY OF MY OTHER 3 GRAND DAUGHTERS.....i TRULY NEED FREINDS///EVERYONE THAT HAS REACHED OU...
    Sep
    8
    (0 comments  |  discussions )
    \\nPoverty in America — It\\\'s not what you think.Go to thelinemovie.com for more information and a free DVD copy of The Line.  Please share this with your friendshttp://youtu.be/RG kqh5x6scw\\r\\n\\n


    MORE MEMBER BLOGS
    Mar 31
    Blog: How to Extend the Life of your TRIAD Boilers by Kayleigh L.
    (0 comments  |  discussions ) — \\nHow to Extend the Life of your TRIAD Boilers \\r\\n \\r\\nCorlis Engine Review\\r\\nEvery user desires to prolong the life of a unit. TRIAD assists their clients in achieving this important objective by informing them of ways they can avoid problems... more
    Feb 27
    Blog: Dr Oz Weight Loss - The 100% Natural And Very Efficient Diet Pill by Debra S.
    (0 comments  |  discussions ) — \\nYes, Dr. Oz called Garcinia Cambogia Extract (HCA) the Holy Grail of Weight Loss. He went on to say, “Anytime I see a scientist get this excited about something like Garcinia Cambogia Extract and when I looked through some of this research and... more
    Blog: My Favorite Websites by krysta I.
    (0 comments  |  discussions ) — \\nIFAW: www.ifaw.org\\r\\nOCEANA www.oceana.org\\r\\nPETA: www.peta.org\\r\\nEARTH 911: www.earth911.org\\r\\nANI MALs ASIA: www.animalsasia.org\\r\\n \\r\\n\\r\\n\\n more
    Feb 21
    Blog: testing one two three by Geoff M.
    (0 comments  |  discussions ) — hello world more
    Blog: Garcinia Cambogia Reviews From Actual People Garcinia Pure Extract Is A Huge Success February 20 by Dany M.
    (0 comments  |  0 discussions ) — \\nGarcinia Cambogia Reviews From Actual People Garcinia Pure Extract Is A Huge Success February 20\\r\\nGarcinia Cambogia System The Dr. Oz Lose Weight Quick Process Without Having Side Effects\\r\\nHe went on to say, “At any time I see a researcher... more
     
    Content and comments expressed here are the opinions of Care2 users and not necessarily that of Care2.com or its affiliates.