|FAQ, Web Tips,
Help, FTP Pictorial,
OK, so you have this cool website but it's totally blank and you are
absolutely clueless with what comes next. Hopefully this short tutorial will
help you get started.
TWO WAYS TO DO IT
Essentially there are two ways you can build/edit/create your web-pages.
- Live online
- On your PC and upload them later.
We will look at how to do both and what the pro's and cons of each are.
BUILD YOUR SITE LIVE ONLINE
This is a great way to build your site if you have the right software tools
for the job. First, you will need to get a HTML Editor and install it on
your PC. Commercial editors you can use include Microsoft's Front Page and
MS Word. Other vendors of commercial
software include Macromedia and many others. If you want a completely
free HTML editor can download a free one from
here. NOTE Not all are suitable for live
- You get to see the results immediately. (Some pages will not appear
the same on your PC and website. counters, PHP and the like will only work
correctly on a real web server)
- If you have a fast connection to the internet it is generally quicker.
- Editors you can use for working online are Front Page, Word and
- Since your site is online and being edited online, you need to
remember to make occasional backups of your site as a server crash could
leave you with no site at all. (You can either use the
File Manager in your Control
Panel or an FTP program to copy your
entire site from the server to your PC)
- Can be a pain if you have a slow internet connection.
Q. OK. so how exactly do I build my site online?
A. Assuming you are using Front Page here are the basic steps
In Microsoft FrontPage, on the
File menu, point to Open
Type in the location of your Website in the File Name
Note The URL should be typed in the following format: http://yourwebsite.com
Enter the username and password you were provided in your
welcome email when the password dialogue appears.
NOTE: If you get an error at this point, Front Page
extensions are most likely not installed on your website. Log into your
site administrator Control Panel
to install them. (If they are already installed, uninstall them and
In the Folder list view on the left you will be able to see
all the files and folders on your website. Something like this
To open a HTML page, double click on it.
To Create a new HTML page, Click File -> New
-> Page Or Web.
On the right hand side pane that now appears, Click the
option you want.
Remember, most HTML editors usually come with a substantial
Help file. Use it! On most, they will usually have a Getting Started
section. Start there.
Word works pretty much the
same as Front Page.
BUILD YOUR SITE OFFLINE AND UPLOAD IT FROM YOUR PC TO
YOUR WEB SERVER
This is often the easiest, and simplest way to do it especially if you are
new to web authoring and/or you are building a site from scratch because you
can test-drive your whole website on your PC before uploading it to your web
- Don't need a fast internet connection to build and test your website.
In fact, you don't need an internet connection at all!
- There are a much wider variety of HTML editors to choose from in this
category - both
Free and commercial. The most popular ones are
Netscape (yes, the Browser comes with a HTML editor), and
others (Bold items are FREE)
- Your pages are not instantly online.
- Because a real web server is required for many special features (like
counters for example) to work, you won't know if they are working until
you upload your pages to your web server.
- You will need to get either a FTP program (fortunately there are many
good free ones available) or use the
built in File Manager from your
Control Panel to upload the files from your PC to your web server.
Q. OK, so exactly how do I build my site offline and then upload it to
my web server?
A. There are several simple steps you need to follow to do this -
- Get an Editor. First, you need to get a HTML editor installed
on your PC. As mentioned above, there are many to choose from. Choosing a
HTML editor is like choosing anything else -- you must use what works for
you. The most popular ones are
Netscape (yes, the Browser comes with a HTML editor), and
others (Bold items are FREE)
- Decide on content. Obviously, you need to have an idea for your
website - what you want to say, how many pages you want, pictures, what
you want your menus to look like and so on. Lets look at each of these in
- Start off with a small website of just a few pages. Remember, you
can always add more later.
- Images are often the hardest things for web designers to make
because they require artistic ability.
Google is a good place to get ideas for images. Just remember there
are copyright issues around images and you
can't simply use images from other people's sites unless they either
give you permission on the site or you write and ask them.
- Keep your menus simple to start with. Don't try to do fancy stuff
until you have become comfortable with the basic HTML.
- Remember, content is more important than making pretty pages. Focus
on getting the text right. The rest will follow in time.
- Read the Help files. Most HTML editors come with substantial
help files. Read them. In almost every case, what you need to know is in
the Help file. Remember F1 is your friend! :)
- Make your first page. Aha! Here comes the crunch. In order to
make your first web page, you need to understand some things
- HTML files are not rocket science. In fact, they are simple text
files you can open and edit even with something as basic as Notepad!
Don't let this HTML word get you down. All it means is HyperText
Markup Language - or text files on steroids. Nothing more.
- Most HTML editors are WYSIWYG (What-You-See-Is-What-You-Get) which
makes it real easy. You Type some text, make it bold, or
underlined or whatever and that's what you see in your browser. When
you save it as an HTML document, that's it. It's done.
- All HTML files are stored with either .htm or .html extension. The
server doesn't care which it is.
- HTML file names are Case Sensitive. It's a good idea to stick
to lower case for your file names.
- A file with a .htm or .html extension will open in your Internet
Browser from your local PC just like it will on a real web server. Just
double click on it and it will open in your browser. (some fancy stuff
like counters may not work correctly on your PC though).
- With the HTML editor of your choice open, type some text, save it to
your PC's hard drive (in a new folder) as a .htm or .html file
and you have made a HTML page. It's that simple.
THE MAGIC FILE - index.htm OR index.html
When you go to any website - take this one for example. The main website
address is http://webnet77.com right? So
how does the web server know what page you want to see? Easy, the web server
is actually a pretty dumb animal and only knows that if you type
http://webnet77.com it must look see if it
has a file called index.htm or index.html in its web root
directory (folder) (we'll get to web root later) and send that to your
browser. On this site, we have decided to use .html extensions for all the
files so http://webnet77.com is actually
the same as typing
http://webnet77.com/index.html -- click both links and you'll see they
are the same.
In other words, your index.htm or index.html file is your
main page on your website. It is the page the web server will send to
your visitors Browser when they type in your website address (also called a
URL - Uniform Resource Locator). From your index.htm or
index.html page, you will have links (see below) to all the other
important pages or sub-sections on your website.
AND LINKS ... HOW DO I LINK ONE PAGE TO ANOTHER?
That depends on the HTML editor you are using. Most work pretty much the
- Lets assume you have a page called index.html with some text
and you want a clickable link to another page called page2.html.
You want the text to say Click here to go to page 2 and the word
here must be the clickable link.
- In most HTML editors, you would first need to create a new blank page
and save it as page2.html - (you can always add the content later).
- In index.html select the word here and either right
click the highlighted word or select Add Hyperlink from the menu.
- You may either be given a list of files to choose from -- choose
page2.html -- or you may be prompted to type in the name of the file
you want to link to -- type page2.html
- That's it. You're done! The text Click here to go to page 2
will change to Click here to go to page 2. (Mine
won't work in this example because there is no file called page2.html on
this website. If you click the above link, you will get an error message
telling you there is no such page :).
You can add as many links as you like on your pages.
HOW DO I LINK a MESSAGE BOARD OR GUESTBOOK OR ANY
OF THE OTHER STUFF CREATED IN MY CONTROL PANEL?
Same way as you do normal HTML links. The only difference is that if you are
developing your website on your PC you will need to enter the absolute link
for the application.
When you add an application -- say a Message Board --
the installer in your Control Panel will give you two links after it has
completed the installation -
- One link will be for the Administrator functions of the
Application you have just installed. This link is for your eyes only
as it's only function is to enable you to customize the application you
have just installed. Make sure you write it down and don't loose the
password or you will have to delete the application and start over.
- The second link is for the application itself. This is the link you
would want to give your visitors so that they can reach your (say Message
Board) application. Depending on what you chose as the directory (it can
be anything you want -- keep it lower case and don't use spaces though),
it would look something like this http://yoursite.com/message-board/index.php
- Copy this link and add it to some text in one or more of your pages as
described in the ADD LINKS section above.
HOW DO I ADD PICTURES?
This will depend on your HTML editor. Usually you will find a menu item
somewhere called Insert Image. Use that to insert pictures. There are
some things you need to remember though -
- Before you insert pictures, make sure they are in the directory (or
sub-directory) you created on your PC for your web site.
- Pictures are not stored in the HTML files. Remember, HTML files are
only text files, they can't store images. The way it works is that the
HTML editor will add an image tag into the HTML file with a link to the
location of the image file on your PC (or web server). When you open the
HTML file with your web browser, the browser will know the location of the
image and go fetch it and display it in the right location in the browser.
WHAT ON EARTH IS "WEB ROOT" AND WHY IS IT
On your PC the root folder -- called a directory on a web server -- is
usually C:\. It's the same for your web server. However, because your site
is not the only one on the web server, your web root directory is usually
not the root directory of the server itself but merely a directory on the
server. For example, on our Ensim servers, your web root may be something
like /var/www/html/ and public_html/ on our Cpanel Servers.
The web root
is where your index.htm or index.html file must go. Your web root is also
where you will create any other sub-directories for your site.
(Sub-directories are not essential. In fact, you can put your whole site in
the web root if you wanted to. The main reason one uses sub-directories is
to put things that go together in the same place. For example, you may have
a directory called images/ in your web root directory for putting pictures
-- just makes your site more manageable that's all).
HOW TO GET THE FILES FROM MY PC TO MY WEB SERVER
It's called uploading. There are two ways you can do this.
- From your Site Administrator Control Panel using the
File Manager. This method is
fine if you only want to transfer one or two files to your web server but
it gets a bit slow if there are many files.
- FTP (File Transfer Protocol) is the recommended method. We have a
Tutorial here which will guide you.
- If you use FTP, be sure to copy everything to your document root on
your server. This includes any sub-directories you have made.
|FAQ, Web Tips,
Help, FTP Pictorial,