In our first article we have created your first web page and now we are going to move on to building a web site.
Introduction
You probably know what a website is. You surf the web everyday to get your news, do some shopping, etc. But just in case, websites are numerous web pages that are connected together through something called links. In HTML there is a special tag called the ‘link’ tag, and it looks like this in its most basic form:
<a href="#">
And here is an example of the link tag with a destination filled in:
<a href="http://www.chriscampisi.com">Visit chriscampisi.com</a>
It’s safe to say that we have all used links when surfing the web. Whenever you click on a link that takes you to another page or website, you are using a link tag. The link tag is the most important tag in HTML; it interconnects the Internet.
In the above example, we see that the link tag points to the web site www.chriscampisi.com and the text that is displayed on the web page is: ‘Visit chriscampisi.com’. Now if you wanted to send a visitor to another website, say Google, change the link to www.google.com.
Like all other tags, link tags have an opening tag
<a href="#">and a closing tag
</a>. Link tags are a little more complex than the other tags we have seen, but as you have seen so far, they are an important part of creating a web site, and the most important part of your website will be your navigation menu.
Now lets get into some fun stuff when utilizing links.
To link pages in your web site from one page to the next you have a choice of using one of two types of addresses (URLs): absolute addresses (complete) and relative addresses (partial).
Absolute URLs
An URL that is Absolute shows the complete address. In other words, the Absolute URL gives the entire path to a specific file. An example would be:
http://mysite.com/images/day1.gif
The above absolute URL is the complete address (path) to the image file day1.gif. This URL can be found from any other location on the Internet.
Now let’s say you have a page called about.html on the root of your web site whose domain name is www.mydomain.com. In this case, the absolute URL of the about.html page would be:
http://www.mydomain.com/about.html
Please Note: the root of a web site is the starting level of the web site.
All of the files that make up your web site are organized in directories just like any other file that you store on your computer. Your host will give you a directory on their server for you to place all your website’s files.
This directory assigned to you will be the ‘root’ of your web site. This means that as far as the Internet is concerned, anything (HTML files, images, other directories, etc.) in this directory are directly accessible by your domain name plus the name of the file. What I am saying here is this, let’s say that on the root level of your website, you have these HTML files:
index.html and about.html
And in a directory called apple, you placed a lot of other pages with one called ‘ipads.html’. You decided to put all your apple HTML pages into an apple directory to keep the web site more organized (something you should always try to do.)
Now can you tell me what the absolute URL would be for the web page ‘ipads.html’?
Right – http://www.mydomain.com/apple/ipads.html
Relative URLs
A relative URL is a partial address that is relative to the file where you placed your link. So if you were linking from the index.html page of this web site to the ipads.html page, your relative URL (address) would be:
apple/ipads.html
And the actual link tag would look like this:
<a href="apple/ipads.html">Information on Apple iPads</a>
You are basically telling the browser that the HTML page we want to load is in the apple directory. Play around with creating links and directories on your own web site and you will see how useful this will become in building and organizing your website.
Now I mentioned above (in the Absolute URL section) a page called about.html. How would you link to this file from the index.html page?
<a href="contact-us.html">Contact us</a>
Correct, since the page about.html is on the same level as the page index.html, we need only include the name of the HTML file in the link address.
10 Steps of Creating a Web Site
1. Define the purpose of the web site
When starting a web site project, you must be clear of what the goal of the website is. Knowing your goal will impact the choices you make when putting the web site together and ultimately contribute to its success or failure. This may sound obvious, but many web sites seem to have been put together without the goal kept in mind. The result is a messy web site that is disorganized and harder to build and maintain.
So if, for example, the goal is to create an e-commerce web site where you want to sell computers, then as a web site designer you have to consider things like the following:
How many brands will be sold on the web site?
Are you going to accept credit cards and/or Paypal?
Are you going to need a shopping cart system to take orders?
This is just one example. The point to take away is that by defining the purpose you can better prepare and get the right tools / people for the job.
2. Create a flow chart of the structure of the website.
A simple flow chart helps you to visualize the web site. Nothing special is really needed, a piece of paper and a pencil. Start at the top of the web site – typically the index.html file – and “flow down” to the other pages, connecting them, showing how they are linked.
3. Write out your content
Before you start writing any HTML, you should write out all the text that you need to include in the website. Doing so will help you with the design process.
Another thing you should try to do is to make sure that the text is finalized before it gets to the web site and that means proof read and then proof read again. If you are setting up the web site for your business, it is best to catch any typos, etc., prior to going live with your new web site. Just think of the perception, if your web pages are filled with mistakes!
4. Choose your layout
Armed with your website diagram and your web site’s content you can now choose a basic layout for your pages. You can go crazy with some funky artsy web site (and sometimes it can work), but most of the time you should use standard layouts that people are used to. This could mean a 2- or 3-column layout. If using a 2 column layout, you will have to experiment if left navigation or right navigation works best. But below are the most common and important elements of a website layout:
Top navigation – very important. Organizes your web site. Must be site-wide!
Left side navigation
Right side navigation
Footer – very useful for your copyright tag, text menu links, policy links, etc.; site-wide!
5. Choose the color scheme and fonts for the site
Next start to consider the basic colors and fonts that you are going to use. You want to choose a style that fits the subject of the web site. For example: red does not do well for a hardware store, maybe some steel blues instead! The point to take away is to establish the style of the web site before you start creating pages, otherwise you may find yourself doing pages over again!
6. Build out the website
With the before-mentioned completed, you are ready to actually start creating your web pages. So what is it that you need to do?
Take the structure you developed in steps 1 to 5 to create your web pages.
Link the web pages together – utilize your top navigation menu.
Do not forget to place any images, videos, etc., you want to use in strategic places.
Now is the time for you to practice a little and actually build a small web site!
Remember that you only get good at doing something by doing it!
7. Choosing a domain name
Once your website is built, you will need to put it up on the Internet – that means you need a domain name.
All websites need a domain name, and your choice of a domain name can impact on how many people find your website. It should either be a cool catchy name or as relevant to your web site as possible. What I mean by that is, if you are building a website for book publishing, a domain name like ‘bobsbookpublishing.com’ is pretty good, it tells you everything about the web site immediately. Also, this domain name is good for the search engines. If for example you called it ‘bobsforreaders.com’ instead, you can argue that we are not giving such a clear message of what the web site is about. Even if the book publishing company was actually called ‘Bobs for Readers’, I would definitely go with ‘bobsbookpublishing.com’.
Search engines such as Google will look at several elements of your web site to try and determine what your website is about. One of those key elements is the domain name; Google’s web site crawler, Googlebot, will look for keywords in the domain name that help to categorize your web site.
One question that is often asked is whether the domain name has to have the same name as the business it is representing – the answer is no.
8. Register your domain name
This can be trickier than you think, since many of the good domain names are taken. You can pretty much forget about single-word domain names like business.com and auctions.com; they are long gone! You will need to come up with combination words like ‘how-to-build-websites.com’.
Today you have many more options for domains; in the past, businesses could only register .com’s because .net and .org domains where reserved for special types of organizations. Those old restrictions are now gone, and there are a wide variety of extensions you can choose from:
.com, .net, .org, .tv, .biz, and several others including country codes like .ca (Canada), .us (USA), .co.uk (United Kingdom), and the list goes on.
In terms of the search engines, it makes no difference which extension you use.
Some people might argue that the first thing you need to do is to register your domain name, then build your web site. That may be true if your website design is impacted by the domain … for some people this is the case, and for others it is not. You can make that call for your own websites.
How do you know if a domain is already taken? The best way to figure this out is to go to your registrar. Every registrar will have a form where you can check to see if domain names are available just by typing it in.
The best thing about going to the registrar is that when you type in a domain name you are interested in their systems will not only tell you if the .com is available, they will also show you what other variations that are available – a big time saver.
9. Find a hosting company
Today, it does not cost much to have your website hosted by a hosting company. You can purchase your domain and sign up for hosting services all in the same process – through the registrar you selected to go with. Remember though, the more you need your website to do the more the hosting costs will be. Nothing to worry about if you are just serving up some web pages. But if you need a full fledged e-commerce site, look to spend a little bit more. The best thing to do is to shop around. Check out a few different registrars to see who can provide you with what your website needs and of course, how much it will be.
Lets take a look at some of the things that can affect cost:
Traffic – the more traffic your web site gets can cost you more per month. But for this to affect you, you would have to have a pretty popular web site. Since you are just starting out, I would not expect that problem for a while.
Extra features / services – if your website is CMS based or e-commerce, you may need to use a database or if you need a lot of email accounts, extra disk space to store all your website’s files. Each host will have a list of plans that you can choose from depending on your needs.
In the end you have to choose the hosting company and hosting plan that is best suited to your web site. Cheaper is not always best, but it may be good enough for you.
10. Upload your website to the hosting company’s server
Once you created your web site, paid for your domain name, and picked your hosting company, it is time to upload the web site onto your host’s server for the world to see. Typically, you would use something called FTP to do this; your hosting company should be able to help you with the details when setting up your account.
Some quick tips to remember:
Keep web pages as small as possible. Very large pages are slow to load, causing people to move on to the next web site. Think about this, and test, when adding images and other media files!
Keep content headers (H1, H2… tags) clear and to the point. Remember to stay focused on your goal for your web site.
Keep paragraphs small. Approximately, two to three sentences each.
Keep contact information (address, email, phone) easily found and in the same place on all pages.
Keep the look and structure of the web pages consistent across all pages.
Provide a ‘Home’ button in your top navigation bar to take the user back to the home page of the website no matter what page they are on.
Make sure links are always clearly defined. Most of the time a link is blue in color, some times underlined, and also changes color when the mouse is placed over the link.
The company logo should appear on every page, in the upper left corner, and it should always be linked back to the home page.
Summary
I hope you have a good idea of what building a website is all about. You can create a website targeting a specific audience (niche web site) to something as broad as a blog where anything and everything is open to discussion. All you have to do is figure out what it is you want to do, find the right domain name, and write the content.
Good luck getting started on your road to bringing your dream online.