How to Design and Setup a Website
By John Wilson
Posted Wednesday, June 23, 2004
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.
