How do you build a website?
That's one of the most commonly asked questions I get quizzed about when people discover I'm a web developer. The sad truth is, there is no magic answer. Building a website and getting it on the internet involves a number of different processes.
A good example was a co worker who was interested in setting up a hobby website. He wasn't interested in making money, and to be honest wasn't sure where to start. All he had has an idea and to be honest sometimes the idea can be the difficult part.
The first thing I did was install a local server on his laptop. In this case I installed Xampp. What I then did was introduced him to the htdocs folder and [localhost...] I used this to demonstrate that what ever you put in the htdocs folder is what appears at the document root “localhost” or if you are online www.example.com. The reason I chose to get him started by using a local server as opposed to simply creating a folder and viewing the files is to make it a little bit easier to switch from the local site to having a hosted site. The htdocs folder is basically the same locally as it would be on a web host.
I think it is important to learn and understand a bit about how the web actual works before you can fully begin to make it work for you. Even if you are only looking to set up a very small scale project site, having some level of understanding of the underlying principles will come in handy.
A local server is a piece of software you can install on your computer to display your site during its development. The benefit to using a local server being that only you will be able to view the website you are working on. It will not be public.
A web server is a computer that stores web content and makes this content available to be viewed over the internet. The major difference between a web server and your local server is that content stored on the web server will be made public.
FTP (File Transfer Protocol)
FTP is another important protocol you should be aware of if you are interested in attempting to build your own website. FTP allows you to copy or move files from one computer to another over a network or the internet. A common use of FTP is to copy a website from your computer to your web host. This is commonly carried out using a piece of software called an FTP client.
A domain name is a name given to a website for example www.webmasterworld.com
Domain names have to be purchased from a domain name registration company, often refereed to as a domain registrar. A domain name is what the user will type into his/her address bar in order to visit your website. The domain name points to your web server. We will go into this in more detail later on.
A web host is a company that sells space on its web server(s). When you have an account with a web host you will use FTP to move your files from your PC to your web hosts web server. Your domain name will also point to your web hosts server.
Server and client relationship
When ever data is being sent or received over the internet it uses a client server relationship. For simplicity a server is a computer that serves data. A client is a computer that receives the data. Right now you are reading this page so your computer is the client. It is being served by WebmasterWorld (the server).
HTTP (hyper Text Transfer Protocol)
HTTP is the protocol that allows browsers and web servers to communicate. Every time you type a URL in the address bar your browser issues an http get request across the internet. This request is more or less saying “I want to view www.example.com get it for me.” The request is sent via the internet DNS system to point your request to the server that hosts the domain. Once the request arrives at the destination server the server will then return the page to the users browser. Its http that makes accessing web content possible.
What is a web page?
In simple terms a web page is a document placed on a web server server that is designed to be viewed by an end user using a web browser. This is an example of the client server relationship we spoke of earlier. A web page is created using a markup language called HTML (Hyper Text Markup Language) A web browser reads the HTML from the document and displays it as a web page.
HTML is quite a simple language to learn. It is made up of tags that are placed within the document. The html document itself is also enclosed in such tags. <html></html> below is a very simple example of a page created in html.
<p>This is a paragraph within the page. Note the opening and closing html tags. This means everything within the html opening and closing tags is html. The header tags contain header information. In this example we have added a title tag. Our h1 indicated that you are using a page heading. The body tags enclose the main body of the document. The p tag is used to open and close a paragraph<p>
If you copy the above html code into notepad and save it as index.html then click the file it will open in your computers default web browser. The above is just a very quick example of how a page is constructed.
What about links?
Well I suppose we do need some of those, after-all the web simply wouldn't work where it not for links (hyperlinks). A link is a clickable region that enables a user to click on it and be transferred to another page.
Go back to the example I created earlier and add the following html code to the document. You can either add it before the paragraph we added or after. To do so simply add the code before or after the opening/closing <p></p> tag.
<p><a href="http://www.webmasterworld.com/">WebmasterWorld forum</a></p>
This is the common syntax you would use in html to create a link. In this case we have added a link to WebmasterWorld. This code will create a simple text link using “WebmasterWorld forum” as the link text. This is often refereed to as anchor test. You can change this to pretty much anything you want. Also try linking to other locations.
<p><a href="http://www.google.com/">Google search engine</a></p>
<p><a href="http://www.bing.com/">MSN Bing search engine</a></p>
<p><a href="http://www.yahoo.com/">Yahoo homepage</a></p>
The html examples I have used are very simple. This is in no way designed to be an html tutorial. There are literal thousands of good html tutorials only a search away. Another idea to help you learn html is to by a book. The benefit of a book is it will be written from start to finish by the same person so the tone and pace of learning will be the same all the way through. It is very easy to learn at your own pace. Becoming fluent in HTML is important if you want to progress as a developer.
There are software tools out there that create html for you. These programs make building a website as easy as creating a document in MS office. Why then take the time to learn HTML? Well no editor is perfect, from time to time you will need to look at the code and fix errors that have been created by your editor. These editors are commonly referred to as WYSIWYG editors (what you see is what you get). Common examples include Microsoft Frontpage, Microsoft expressions web and Adobe Dreamweaver. These tools can be quite expensive and if you only intent to set up a small scale site then the investment may not be worth it. There are free trials for most of these products so I would certainly advise you to download an evaluation copy and have a play with it.
There is no substitute for at least a basic understanding of html. Not only will it help you understand what is happening, but it will help you fix problems or bugs that your editor can't seam to get round.
The best way to design a site is to get away from the computer. Good old paper and pen work wonders. Draw what you want the site to look like, then when you are happy go back to your PC and recreate what you have dreamed up. Design doesn't only involve the actual pages but also the layout of the site. Where will each page be in relation to others. Sticky notes are great for this. Put them on a large sheet of paper and plot out your page layout. Draw lines between the post it notes to represent links. Don't just link to every page fro every other. Only link to pages that will be of use to a visitor who is on a specific page. Link to the homepage on every page. If you are using a logo on your site use the logo image or text as your home link.
If this is your first site don't worry about anything, just try and get it set up and looking as you had envisaged. I doubt there is anyone who is particularly happy with their first ever website, but the only way to learn is to gain experience. Don't be afraid to try things, its your website, you can do pretty much anything you want. Experiment with images, try editing your layout to make it work a little better. Very often when you have a design drawn out you find things need to be changed for it to work on the web. When you are happy with your site it's time to go live.
Buying a domain name
Buying a domain name for a website can be tricky. The sad fact is all of the really good domains are gone. If you are building a site that is about you why not try firstname-secondname.com?
To buy a domain you need to go through a domain registration company. These are companies who supply domain registration services. They register a domain name for you and reserve it for a period of time. The time can vary from registrar to registrar so be sure to read up on their website. At this time a domain can be purchased for up to 10 years. Once you have found a suitable domain for your website go ahead and order it. Again price can vary quite a bit from company to company. You should shop around but don't just go for the cheapest, read up and see what you are getting for your money.
A domain registration isn't instant. It can take up to 48 hrs for the domain to show as registered to you. It can take up to 4 days for the domain to be available to all of the web. The reason for this delay is usual DNS propagation. We spoke about DNS very briefly before. It is a process that makes a domain name resolve to a web server. There are a very large number of DNS servers on the web and they all need to update their data periodical. It's this update time that can cause a delay in domain name resolution. All it takes is your ISP's DNS server to be out of date and you wont be able to view a recently set up domain name. It does take some time for the DNS record of your domain to be updated.
Many companies who offer domain name registration also offer web hosting. For someone who is relatively inexperienced in this field this might be a good option. This means that the domain registration and web hosting will be managed by the same company. It keeps things nice and simple. You do not however need to use the same company to manage your web hosting and domain name. When it comes to hosting you can shop around. Again don't just go for the cheapest, make sure you know what you are getting, perhaps even read some reviews. Once you have decided on what company you wish to use sign up and you now have hosting.
What you then need to do is point your domain name to your web hosting. This can be tricky. Your domain registration company will be able to offer specific advice on how to do this using their platform. It does vary a lot from registrar to registrar.
Getting your website online
How that you have hosting, a domain name and a website all ready to go it's time to get your website online. This is where FTP is used. As we mentioned earlier FTP is a protocol to copy files from one computer to another. This is done using an FTP client. There are many free ftp clients out there. In order to access your web hosting using FTP you will need to know your FTP user name and password. This is supplied by your web hosting company. Once you enter the details correctly onto your FTP client and access your site you will see the public_html folder or “htdocs” just like on our local server. Copy all the files from your local server to the web server and your site is now live and on the internet.
How does it feel, you now have a website up and running. Well your far from done. You can still make changes, just do the changes locally, test locally then upload the changed files to your web host. There is no need to experiment with anything on the live host when you have a test environment right on your own computer.
The learning process is also far from over, are you happy with your site? Are there things you would like to add? Would you like to make it more interactive? Well whats stopping you?
In life we live and learn and when it comes to building websites the same applies. You can do a lot when you set your mind to it, so what are you waiting for?
[edited by: mack at 11:04 pm (utc) on Oct. 20, 2009]