Help Stefan CampaignIf you can spare $1 then help support this site and change someone's life forever? Learn how and why on the Help Stefan campaign page. Or donate $10 and get my guide to spices book as a gift for your donation! |
Celtnet Information:
How to Create your own Website with CSS, XML, CGI and JavaScript
You've reached this page, so you obviously have an interest in generating your own website. You may also have noticed this page's title and seen a whole slew of acronyms that may be entirely unfamiliar to you. The first thing I have to say is DON'T PANIC! By the time you've gone through every page in this introduction to creating your own website you'll know precisely what all those acronyms mean and you'll be able to use all the technologies they refer to.
Now, there are many tools out there that will help you build a website almost completely automatically. Though part of the problem with these applications and systems is that they can ignore standards and do not take into account the various differences between browsers and operating systems. Knowledge truly is power and if you rely on other applications to write your websites for you then you're also relying on those applications being right in everything they do 100% of the time. Which is never going to happen. If you know how websites and web pages work then you can at least fix some of the things that these applications do. You never know, you may even find out that yo don't even need those applications and can do a much better job by yourself...
As a result I'm going to start this section almost from scratch. The basis I'll be using will be my own website Celtnet. This is rapidly approaching its second anniversary on the web now and it's here that I've both learnt and employed almost everything I'm going to show you.
Getting Started
Before you get started, you will need some things. The first of these is somewhere to put and view your web pages. For basic (and even more complex) HTML all you need is a computer and a folder to drop your documents into. These files will open in your browser and will work fine (it's just like downloading web pages to your own PC to view later). However, once we get to more complicated topics you will need access to a web server. This could be where your website will eventually live or it could be a webserver installed on your own PC.
Though I'm not going to assume any familiarity with any of the technologies I'll be exploring this website has only so much space. As a result though I'm going to cover some topics in depth others will only by skimmed through. You'll need books or some kind of support material to help you get the most of each topic. Essentially you'll need books on HTML, CSS
,XHTML
, JavaScript
, DHTML
and CGI
. Of course, you won't need them all at once. Start with HTML, XHTML and CSS as these will be the first topics covered here.
You will also need a text editor of some kind. Anything that can read and write a plain text file to your computer. TextPad or WordPad will work for windows systems; BBEdit is one of the best for MacOS tough a basic unix-style command line text processor like Vi or Vim will also be fine.
Structure of a Website:
Before we get started on writing any code I'm going to tell you a little about how a website works. If you don't already have a website then the first thing you'll do is get a domain name (your ISP may already provide you with one of these so your domain name will be http://www.myisp.com/~myname. If you don't have a domain name or you don't want to use your ISP's default web address then you'll need to go and look for your own domain name. Essentially you will need to come up with a domain name which could be anything (but remember that domain names with large geographic spread, those ending in .com or .org cost more). Next go to a domain name provider such as Nominate for Domain Name Registration and check if your domain name is available. If it is then buy it (you will in effect be renting that domain name for a period of time, usually 2 years, but as the registered owner you get first refusal on renewal). Once you have your domain name you will need someone to host the content. There are a number of companies providing this service and they will associate your domain name eg: www.mygreatsite.org with an IP address. IP addresses are effectively the internet's postal/zip codes (of the form: 127.0.4.93 informing other systems on the network on which machine and where your site is located. Web hosters will also give you a certain amount of disk space on which to store your website and may provide you with services such as CGI. Of course, if you have a fast and stable connection to the internet at home you could host your website yourself.
Now that your domain name is linked to an IP address browsers can navigate to your site. Of course, until you create some content they won't actually find anything there...
The next stage is where a little subterfuge (or, at the very least some sleight-of-hand) comes in. When you type in the base URL for website; http://www.celtnet.org.uk in the case of my own site, what the web browser is actually doing is looking for a specific file called index.html at the very top level of the site. This is your 'home page' and is the first page you should write. What the web browser is doing in fact is converting the URL
http://www.celtnet.org.uk into http://www.celtnet.org.uk/index.html.
You can see that this is the case by trying it yourself. Instead of typing the bare base URL add index.html and see what happens. In most cases you will end-up at exactly the same starting page.
As a result the page index.html is of vital importance as the remainder of your web page hangs off it. It's the first page that indexing systems like Google come to and somehow every single other web page in your site must be able to trace their way back to it. This is also the page that tells all your visitors who you are and what your site's all about.
Now that all the preamble's out of the way we can actually start constructing a web page. Of course, the first page we're going to create is the index.html file...
On to the next part...






Help Stefan Campaign