SEE ALSO

FAQ, Web Tips, Help, FTP Pictorial, META TAGS, Copyright, Spam Mail, Security, Cpanel, Ensim Pro, Using Word

FOR STARTERS

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 editing. Pros 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 several others. Cons 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 box Note   The URL should be typed in the following format: http://yourwebsite.com Click OK. 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 re-install anyway). 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 server. Pros 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 Front Page, Word, Coffee Cup, Dream weaver, Netscape (yes, the Browser comes with a HTML editor), and many others (Bold items are FREE) Cons 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 Front Page, Word, Coffee Cup, Dream weaver, Netscape (yes, the Browser comes with a HTML editor), and many 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 turn - 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 same way 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 IMPORTANT?

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.

SEE ALSO

FAQ, Web Tips, Help, FTP Pictorial, META TAGS, Copyright, Spam Mail, Security, Cpanel, Ensim Pro, Using Word