Welcome to How to Build a Website. This guide will show not only how to design and create a website, but how to get it up and running on the web, just like this one. This is a basic guide meant to get you started with a website. I also recommend looking at a very nice, in depth guide at www.webdesignfromscratch.com. Things like CSS and HTML are discussed in depth, and there is much more of a technical aspect to it.
If you have anything to contribute to this guide, or if you spot an error, please contact me and tell me about it, so everyone is getting the best information possible!
READ: UPDATE 5/08: This is old. Really old. I believe the last time I updated this was around 3 years ago. Some of the links are dead, and a lot of the technical info is outdated as people have moved on to XHTML, CSS, AJAX, etc. I've been trying to find time to update it and give it a total rehaul. However, even if it's considered ancient by today's standards it still offers some good, sound advice on building a website from start to finish. I encourage you to read it, but just remember that it's a bit old and it's kind of half baked. Thanks.
The basics
Designing your site
Getting it on the web
Before you start building your website, you need to learn the basics of the Internet and web design. Don't skip through this part. If you do, you'll get very confused later on.
So why does the web page you're looking at right now look like it does? How does your computer know to display it that way? Well, it's all based on underlying code, called HTML code. This sentence:
| Building a website is fun. |
Would really look like this in HTML:
<p><b>Building</b> a website is
<u>fun.</u></p> |
We'll get back to the actual format and rules of HTML code later.
You can see the HTML, or "source code," of every webpage by right-clicking on a blank area and going to "View Page Source" or "View Source."
Don't freak out, though. If you're thinking "There's no way I'm going to be able to write a webpage by hand," you're right. That's why there is software to do it for you, but we'll get back to that later.
The piece of software that you "browse" the Internet through is called a browser. The most common browsers are Internet Explorer and Firefox. Each browser interprets a webpage a little differently, so your webpage may come out differently to different people.
When you look at a website, each page is a single HTML file, with an extension of .htm or .html. Some web sites also use different scripting languages, such as PHP or ASP, but that isn't covered in this guide. You can connect the pages using links.
Once you have learned the basics of web design, it's time to start designing your site.
There are three ways that you can go about doing this:
So where do you start? How do you design your website? This really depends on what kind of site you have. Stop for a second, get out a piece of paper and a pencil, and visualize what you want your site to look like, and what the structure is going to be. Are you creating a business site? What pages are you going to include? Is your site content-oriented? Are you going to have a navigation bar or structure, or just a simple link system like I have here? Ask yourself lots of questions, but don't think in detail about colors or fonts just yet, and don't visualize something that is way out of the box or would be hard to do. Think about the layout, the structure, and get a rough look at the content you are going to have. Think about what it is going to be used for, what you want on it, and look through the viewer's eyes.
Then, start planning out a color scheme, the images you might have, and the look or the fonts you want. Visualize what it's going to look like, you can even draw it out and label it if you want. Check it again through the viewer's eyes. What would they want? Would they want to spend time on your site? What would they like, what wouldn't they like?
Get your vision finalized, and then start thinking about how you are going to create it. Open up your web design program, and explore the options and features that are available to you. Are you going to need other tools to complete your website, like a image editing program to create borders or a navigation bar? I recommend using CSS to define the layout and look of your page. If you can master CSS either by hand or in your web design program, you'll end up with a nice clean page with clean code. And it will be virtually future proof. The worst thing you can do for yourself is write a website with dirty code. If you can't find a feature that you are looking for, but you think it might exist, use the help system to search for the feature or find out how to do what you are wanting to do. There are many tools and tutorials on my Web Resources page if you're looking for a tutorial or tool to do something. If you're stuck, think of alternate ways to achieve what you're looking for.
If you're looking to code your site completely by hand, then I recommend
visiting W3Schools.com to start learning
HTML. As they mention on that site, you'll probably want to get used to coding
in lowercase (<b> or <i> instead of <B>
or <I> ), because it will really pay off in the future. You'll also
want to make sure you have all end tags (such as </p>), and you'll
want to add an ending / slash for tags that don't require an ending tag, like
this: <img src="image.gif" />
The worst thing you can do is write "dirty" code for your website.
Once your site is designed, it doesn't just automatically appear on the Internet. To get it out on the web, you need to host it.
Unfortunately, hosting requires space and bandwidth, plus the right to a domain name (www.yourdomain.com), which costs money. But, luckily, there is still some ad-free hosting out there. The downside with free hosting is that you often don't get the support, up-time, or features you would get with a paid host. And you don't get a domain name. You will get a subdomain instead, which is like yourdomain.hostwebsite.com. There are many, many, paid and free hosts out there. You'll want to choose the host and package that is right for you.
The two most important aspects when choosing a host are space and bandwidth. Space is the amount of space you have on the server, how many files you can store. You can estimate how much you are going to need by taking a look at how much your website is taking up now. Remember that you are probably going to expand down the road, and if your site is going to have lots of images or any video or media content, you're going to need lots of space. Bandwidth basically limits how many visitors you can have each month or year. Every time a visitor visits, they download your website from the server. This subtracts from your bandwidth each month. You definitely don't want to be paying more than you have to, but you don't want to run out of space or bandwidth either. You should also consider the features and options the host has, like server-side scripting, when making your decision. This can make a difference about what you can do with your site.
Below is a list of free and paid hosts, as well as websites that can help you find one. Be sure to browse around and do a Google search on the host first, because some hosts may be cheap, but they don't necessarily have all of the features or the customer service that you would want. If you are looking to get a domain name, there are also companies for that (although most hosts include domains in their packages). Watch out for too-good-to-be-true prices, however, because they may lock you in to their hosting or domain plan, not allowing you to switch hosts or transfer the domain.
Paid hosts:
Using an Online EditorUsing an online editor to design your website instead of web design software on your computer simplifies the aspect of uploading and hosting. You don't need to figure out a host, because you already have space with the online editor. You also don't need to upload anything. There are downsides, however. There is usually no option to upgrade to a domain name and a paid package, and if you don't like the host, you're basically stuck. Two honorable mentions in this category are Google Page Creator and Yahoo! SiteBuilder, but there are others. |
Free hosts:
Domain registrars:
Once you've got your hosting account setup, the rest is very easy. The easiest way to get your files to your hosting account is using an FTP Client. To do this, go download SmartFTP, and then obtain your FTP account details from your hosting provider and simply enter them into SmartFTP and hit connect. From there, it's a simple drag-and-drop procedure. If for some odd reason your host doesn't support FTP access, they should have an online file manager or uploader that you can use, but almost all hosts do support FTP, and if you host doesn't, you might want to think about cancelling and moving to a different host.
Once all your files are uploaded, you're done! Visit your subdomain or domain, and enjoy!