Note that the online version of this article contains screenshots that are helpful but could not be included in this article. To view it http://dollarware.us/websitedesign.htm

You need your computer, some software and a connection to the Internet.

A website can be on the Web, (the Internet) like http://yahoo.com or it could actually be on your own computer. When it’s on the web, in order for it to be seen by others using their Internet Service Provider, it must be hosted. That is the files which comprise the website must be placed on a computer with an “always on” connection to the Internet.

A Web site is just a place where a collection of web pages or html documents are located. There are around 16 million of them as of early 2003. You can design and setup a website of your own fairly easily in as little as a day or two. I am going to walk you through the steps that you will need to follow, giving a little explanation along the way.

If you can type a letter in Microsoft Word, you can be live on the Web in 2 Days.

The Internet is just a giant network of computers all connected together so that they can share information with one another. Thirty four million of you are connected to that network by a modem in your computer, a telephone line connection to AOL’s computers and then through their connection to the Internet. If you have a cable modem, or satellite modem, then no phone connection is needed.

Telephones and the Internet

Telephones have been around for all your life. You don’t even think about how you can call the local access telephone number to AOL. But the Internet is much newer and you don’t understand modems and Internet Service Providers and bandwidth. Who cares, you don’t know that much about how your telephone calls are switched to get you to your final destination. You don’t have to understand how your connection to the website you want to visit gets switched either. Actually today there is some merging of telephones calls and the internet in that some voice and data phone calls are actually travelling over the internet. But that’s another story.

So that’s how you would get to someone else’s website, but how would they get to one that you setup? Or what would you have to do to make your website available to others?

Create content, get hosted and tell others.

First if you have an idea for some information, graphics, pictures or sounds that you would like to place on a website of your own and have them available to others what would you have to do? Well, first you create the content, whatever it is. Then you arrange to have it hosted and then just tell others how to find it.

Creating the content on Web site pages. For most web sites, the information is in the form of a page containing text and probably a few graphics. It is much like a word processing document. They are created in a plain text file which is written using special coding called HTML. Hyper Text Markup Language is the code in which html pages are written. It has various words and symbols that it calls tags. They are just special code words which are standard and which tell your Internet Explorer (for instance) browser how to display the information and graphics on the html page.

I am creating this html document using Microsoft Word. So for right now, I am doing nothing different. The difference was that when I asked Word to start a new document, I specified a new webpage. It’s File-New-Blank Web Page from the main Word menu. And then you just type. You can use whatever menu choices are then showing on the menu bar. You could insert a graphic, pictures, diagrams or a table, all from the Word menu bar. You can format the text to different fonts, make it bold, italic, underlined just as you can do in a word processing document.

So you probably have Microsoft Word or another competitors word processor. Word can create html documents and if you have a competitive product it probably can also. You can start to create the pages that will make up your website. But there are some things that are not so obvious when working with a word processor. How do I get from one page to another and then back again or to yet a third page? It’s done with hyperlinks. A hyperlink is just a special word or phrase, that is usually bright blue in color and underlined which, when clicked on with your mouse loads a different part of that web page or loads a different web page. Back at the top of this page when I typed Yahoo’s website address in it’s proper form, Microsoft Word recognized what it was and automatically made it into a hyperlink, and made it blue and underlined it. But here’s another one #Top of the Document which takes you to the top of this document. You create a hyperlink in Word from the menu bar with the command Insert- Hyperlink.

You can do a webpage in Word, but it has some limitations. The Microsoft application that is specifically created to design web pages is FrontPage. It is a wysiwyg (what you see is what you get) html editor or webpage creator. Now it is set up for the specific purpose of making web pages. But it has some other cool stuff that is going to make creating your web site really easy and once you learn a little, a whole lot of fun. There are other web page programs that are less expensive, maybe even free, those that are more expensive, maybe more powerful in certain ways and those that the professionals use. But many professional web designers like FrontPage because it is powerful and similar to applications that users are already used to and because it is easy for a non-professional to take over and manage his website once the pro has set it up for them. You can probably find a copy of Microsoft FrontPage 2002 for $50 or so on Amazon or Ebay. You may even have a copy on your computer that came with Office.

What is html and what do I have to know about it?

Its that code that tells the internet browser how to display the information and graphics that are on the webpage. You can find the html tags and some basic information about them in many places on the internet. Just search for “html tutorial” in a search engine and you’ll probably get more information than you want to read. If you are using a wysiwyg editor, you probably don’t need to do much more that a quick read through of one of the tutorials that you will find.

See how html works… go to the Source.

Another way to see, in the real world, what the html coded page and the page as displayed by your browser is to do this. Pick a simple website that you normally visit and go there in your browser. Now with your mouse, right click on a blank part of the page. You should get a popup menu, choose, “View Source”. Another window will open and display the html source code that is being used to display that page in your browser. You can actually copy that code and save it as a file on your computer. If you save it with the proper extension .htm or .html, then using My Computer to view the contents of the directory where the file is saved. If you double click on the file name, it will start your internet browser and load that document into it and it will seem that you have gone to that previously visited website.

So what’s different about visiting a site on the web instead of the one on my computer?

Not much difference at all, except that the page that you will first see is on another computer at some unknown to you location. And that some how your browser must find that computer and asked it to send a copy of that page over the internet to your computer where it eventually arrives loaded into your browser. Exactly how all that happens is another story, but basically, your browser sends a request for a page whose location is really given in the address or URL (Uniform Resource Locator) that you typed into your browser. The request goes outside through your Internet Service Provider to a nameserver computer and asks what path it should take to send the command to the webserver. All this happens automatically, kind of like when you dial a phone number, but not exactly that way. Anyway the request for the webpage finally finds it’s way to the webserver on which the web page is stored. The webserver receives the request and sends the data contained in the html document back over the path through the internet and back to your computer where it is delivered and read by your browser which properly displays it for you. All this happens in seconds!

Getting Hosted

Now, you create the html documents using whatever program you choose. But your computer is not a webserver. A webserver is a computer with special programs which can receive and act on commands to deliver a webpage to another computer. It finds the page that was requested and sends it out over the internet back to the requesting computer. You could make your computer a webserver by installing the proper programs and making the connection to the internet. But the normal way for most of us is to arrange for web hosting from a company who offers that service to the public for a fee. There is a full range of hosting packages with various features and from free to expensive. An average for a reliable, full featured package will probably be in the $20 to $25 a month range.

Once that service is arranged you are told what their URL is so that you can know how to send the html documents that you created to the webserver computer. Most of the time this is accomplished by using an FTP (file transfer protocol) program which acts like a translator and sends the pages from your computer to the webserver. A username and password setup allows your access to your space on the webserver and prevents others from gaining access to your files. It can get a little confusing when you use FTP. That’s why I prefer and recommend that you use a program where the FTP is built-in to the html editor.

FrontPage is a wysiwyg html editor with built-in FTP

FrontPage has this FTP program (actually Word has it too) built into it and uses it to send and receive html document to and from your computer. You only have to use one program and believe me, it’s going to save you a lot of aggravation over dealing with two. So remember when you are comparing prices of html editors and whether or not they have a built in FTP or require a separate one. You can get a free one or a free trial of one, if you search.

But of course many of you have Microsoft Word so just type up a little page, click on the menu bar File – SaveAs

Notice the slashes instead of backslashes in the file name box and notice that the address of the website is added before the file name in that same box, the Save as type is set to Web Page. Now click the Save button and if you have worked through this carefully Word will send this document (web page) to your website.

To see if the transfer worked, just enter the same address that was in the File name box into your browser and it should retrieve the document from your site and display it.

How about domain names?

Oh, you don’t have to have your own domain name to have a website on a webserver somewhere else. You can use the domain name owned and hosted by someone else. Geocities is an example of this. You use their domain name with some variation such as a subdomain or a subdirectory. Here’s an of example.

http://www.geocities.com/dollarwareinc/howto.html

Domain names and email accounts.

In most cases, though, you think of a domain name that you would like to own and you go to a Domain Name Registrar’s web site and do a search to see if that name is available. If it is you pay a fee and get exclusive rights to that domain name for a given period of time usually one or two years. Prices vary quite a bit. I’ve seen them as low as $8 or $9 for one year to $65 for two years. For less than $10 (ten dollars) you can get a domain name, and get 5 email accounts. Even if you don’t get a hosting account. You can have the email forwarded to your regular email box. But the email address will be at the domain name you have chosen, john@moneymaker.com for instance.

Ok, now that you have the domain name, you need to also tell the registrar where you will be hosting your web site. You give them the address of the hosting company’s nameservers (usually two of them) . The name servers addresses will have names like other web sites. Something like this:

Nameserver 1 ns.my-ehost.com Nameserver 2 ns2.my-ehost.com

You give this information to the registrar, usually by just typing it into a special form on their website. You usually find it under something like “Manage Your Domain”. The registrar then, will send this information, the name of your new domain and where it can be found to all the other name servers on the Internet. Actually new information is transferred from one connecting device (Routers) to another automatically until it is said to have “propagated” throughout the internet. This just means that anyone can now find your website by typing its address into their browsers. This propagation process takes from 24 to 48 hours to complete.

You’re done. That is, you have your web site’s html pages created, you have them “uploaded” to the webserver. You have a domain name which becomes the address of the site.

Now just tell the World about your new website.

About the author:
John Wilson, BSIM, A+, Network+, CCNA, MCSA. Webmaster for http://website-how-to.com offering help to those who want to create and setup their own site.