Before You Start
If you know nothing about websites or web design then this page tells you what you need to know in order to build your site and get it on the Internet.
- What is a website?
- How the web works.
- Building the site.
- Text editor.
- Image editor.
- Writing the code.
- Saving your pages.
- Register a domain name.
- Find a hosting company.
- Upload your files.
- Test everything.
What is a website?
A website is simply a collection of files - text, images and scripts which are grouped together to make up the individual pages of the site. These individual pages are linked to each other and usually to other websites on the Internet to make a fully functioning and integrated website.
Once the pages have been designed they have to be made available for anyone around the world to look at via the Web (assuming a public website as opposed to a private one). To understand how this is achieved we have to explain a little of how the Web works.
How the Web works
Browsing the Web is something that people have become accustomed to and take for granted in many parts of the world but this seemingly simple activity is in fact a remarkable and complicated process.
Every website has a unique identifier which sets it apart from all other websites in the world. This identifier is known as the domain name or address and this is the key to how the Web is able to work so efficiently.
When someone connected to the Internet types an address into their home computer/mobile etc. a request is sent across the Internet to find the location of the website and page in question. This request goes to specialised computers called "Domain Name Servers" which hold lists of addresses of websites and the location of these websites. In this context location refers to the physical computer space which contains the files - text, images and scripts which combine to make a website.
The computer which holds the files requested is known as the 'host', 'host computer' or 'server' - which can be confusing but we will use the name host computer for now. The request goes from the user's computer, also known as the 'client', across the Internet to the host computer and the specific files which make up the requested page are then sent from the host computer back across the Internet to the client computer and displayed as a web page.
So in order to make a website available to the public you need a unique address which identifies the site and a host computer on which the website files are stored and from which the files are sent around the world to anyone who wants to see your website.
Building your website
In order to write and assemble the pages that will make up your site the minimum tools you are going to need are a computer, a text editor and an image editor.
Computer
You will need a computer to run the text editing and image editing programs that you have chosen to use and you also need somewhere to save your work in progress and the finished pages.
Text Editor
A text editor will be your principal working environment when writing the code and text which makes up the pages of the website. Here are some examples of text editing programs that you may have come across:
- Notepad - very basic text editor from Microsoft which is perfectly fine to use for your pages.
- MS Word - fairly complex word processing program from Microsoft - can be a little tricky for composing web pages as it was primarily designed for printed media and can sometimes add unexpected bits and pieces to your pages.
- Dreamweaver - complex web design software from Adobe (formerly Macrovision) which writes the code for you. Has the advantage that you don't have to learn coding but this is also a disadvantage as it means you don't learn to read already coded pages. It is expensive - thousands of dollars as part of a suite - takes quite a while to learn fully and some say it writes bloated code which is not valid.
- HTML-Kit - Free program from a company called Chami which lets you write the code but provides many useful features to aid the writing process - such as having computer code and normal text in different colours.
I would recommend HTML-Kit but use whichever suits your needs, it does take time and effort to learn to code by hand but, in my opinion the benefits outweigh the disadvantages.
Image editor
If you plan on having any photos or graphics on your web pages then you will need image editing software of some sort - here are some examples;
- Photoshop - All singing all dancing graphics editor from Adobe which is the editor of choice for many, but costs many hundreds of dollars and is complicated to learn fully.
- Fireworks - Also from Adobe but aimed specifically at web designers, unlike Photoshop. Included in the suite containing Dreamweaver - the cost can be prohibitive - and Photoshop is seen are the more feature rich and useful product.
- GIMP - GNU Image Manipulation Program, open source and hence free - this image software has been around for over a decade and is highly recommended by its many fans having a powerful set of features for image manipulation.
Writing the code
Writing the code is a simple process of opening a blank document, typing in your code and saving the results but there are some basic rules to follow which will save you a lot of time and possible frustration:
- Code carefully - Take your time and make sure that the characters and particularly punctuation you use are correct, in coding a colon, semi-colon, full-stop and comma all have entirely different meanings and are not interchangeable. You wouldn't believe the amount of time you can spend looking for the mistake in a page which refuses to display correctly only to find you used single quotes instead of double quotes, or a comma when a full-stop was required.
- Save your work often - Computers being computers problems occur such as programs which stop responding and close down, power glitches that reset the computer, cats walk across the keyboard, you spill a drink etc. . For all these reasons it is good practice to get into the habit of saving your work on a regular basis to avoid the frustration of wasted time and effort.
- Make backups - You should make regular backups of your work onto media which is not part of the computer you are storing the work on, such as CD-ROM or a removable USB drive. This saves your work in the event of a computer failure and should be done as often as necessary.
- Use Comments - HTML and CSS both have a system for adding comments to a page of code which will not be displayed on the screen. Comments are an invaluable method of ensuring that you or anyone else who needs to understand or update the code has a record of important decisions or explanations in the coding. For details of how to add comments please see the HTML comment element page.
Saving your pages
Pages written in HTML or XHTML should be saved with the '.html' file extension i.e. the home page is nearly always called 'index.html'. CSS files should be given the '.css' file extension i.e. 'sitestyles.css' .
Once you have constructed and saved the site pages you are ready to move onto the next step of putting the site online.
Put the site online
Domain name.
The first step is to choose a name for the site which will be the address that visitors use to access the site pages and the name that appears in advertising and search engine results. Every domain name is unique, every website must have a different address in order to differentiate one from another and ensure that the correct site is viewed in the user's computer.
This fact can be a real stumbling block in the hunt for a good name because there are millions of sites on the Web and it is quite possible that names relevant to the product or service you are offering are already taken. You will probably have to think of a selection of possible names and then check to see which are taken and which are available. If you search for the term 'domain registration' you will see there are many companies out there which deal with domains, registration and purchasing and they provide a service through which you can check to see if your chosen names are already registered and take appropriate action.
Many hosting companies offer domain registration as part of their services, often at a reduced price or even free, when you purchase hosting with them. So an alternative to name first, host second is to tie the domain registration in with the hosting of the site and find a suitable host before you register the name.
Find a host.
This can be one of the trickier aspects of going live as there are so many hosting companies out there all offering you the world and making out they are the best hosts ever. Always remember that hosting companies are in the business of sales and some of the more unscrupulous ones will tell you what you want to hear in order to part you from your hard earned money.
The best thing you can do is go on personal recommendation from someone you trust - ask around and find out who other sites use and how they get on with their hosting company. There are many hosting company reviews on the Web and these can give you an idea as to the general level of service, support etc. of a particular company but take care as many of these review sites are by no means current and good companies can quickly become bad ones when complacency sets in. Also it is not unheard of for companies to post their own glowing reviews on these sites.
Another way to feel out a host is to contact customer support and see how they respond to enquiries, when you have a live site speedy and technically correct customer support can be very important to your business. Phone or email the customer support team of prospective hosts and see how they deal with questions and issues, how quickly they respond, whether they seem interested and capable. Chances are that if they are slow to answer or vague before they even have your money then they will not really care about your site once you have signed on the dotted line and you do better to go elsewhere.
Upload your site.
After choosing a host company you will need to transfer or upload all of the site files, images, scripts etc. to the host server. Most paid hosting companies include software called cPanel which gives you a control panel with online login from where you can manage your site and files. CPanel includes a File Manager which allows you to upload files from your computer to the host server very easily without the need to install any software on your computer.
If you are using free hosting it is possible that cPanel is not included and in this case you will need to use a third party FTP program (also known as an Ftp Client) installed on your computer to upload and download the files. There are many such programs available some free and some available for a small cost.
Test Everything.
Testing should be carried out throughout the design process but sometimes it takes a live situation to expose weaknesses or problems which may not have been apparent before.
Testing involves checking all the links are working, seeing if the site displays satisfactorily across many different combinations of operating system, browser and screen resolution, and in general terms putting the site through its paces to ensure everything is working as expected.