Awards button
Whales button
Privacy button
Copyright button
Search button
Amber button
Luuk's Travel Site Logo
Travel button
Sitemap button
About us button
Genealogy button
Homepage tutorial button
Home button
Helpware site. Directory closed AwardSites! Key Recource site

Home page tutorial

Please understand that this is a very long page. It is however divided up in 5 lessons. If required, they can be targeted directly by hitting the button to the specific lesson you want to see. Underneath each lesson a "TOP" button can be found that will return you to top of the page. Also, this is a series of lessons meant for the real beginner. It will help you make a rudimentary home page, which can be the start of it all. Remember that making a home page is never the end. In fact, it is the beginning. You will find that a home page needs updating constantly. As you keep on doing that, your skills in building a site will increase and the site will grow and become more professional. I wish you all the best, now in that beginning. But also for that future terrific site.

Introduction

There are many tutorials on the net, that tell you how to make a home page. However, I believe I have a different approach: You'll be making a very simple home page together with me, step by step. Of course, you may vary the text, the pictures and what have you. I would suggest though, that you follow my lines for the time being and then erase the whole lot and make your own. Otherwise there will be so many home pages looking like the one we make now!! To start off, I would like you to use a program, that can produce HTML coding. Any program will do that's on the market. It's a so-called HTML editor. So, once you have finished making your page, you can maintain it using that program. Now: start on my first lesson! Click on the button for Lesson 1 below this introduction! Good luck. You can always ask questions. My e-mail address is also to be found below, or on my Home page.

Divider

lesson 1 button lesson 2 button lesson 3 button lesson 4 button lesson 5 button

How do I make a home page? Lesson 1

Divider

Let's start with making a new map (directory if you like) on your hard disk, named "homepage". Or whatever you would like to call it. Just make sure you will get all your pages, graphics, buttons and banners in that map. Secondly: if you see any nice pictures, buttons, banners, backgrounds on the net, click your right hand mouse button on it, choose "save image as", and save it in your home page folder. But make sure you have permission to use those "graphics". There usually is a copyright on them. But with permission there is no problem. You can then use it on your own pages. You will find quite a few locations where you can get hold of free graphics etc. Try a search machine. Right. we'll get going. Start your HTML editor up. Start a new file. If the editor doesn't fill in the essentials automatically, have a look below what it should show. If need be, type it in yourself. You'll see several things. Then there are several "tags". Like: <HTML> and <HEAD>. Also the same for <TITLE> and </TITLE>. Notice, that there are two different tags. One starts with the name and the next one always starts with "/". That last bit shows your browser, that the action it took on encountering the first tag now has terminated. What you should have is:

<HTML>
<HEAD>

<TITLE></TITLE>

</HEAD>
<BODY>
then something like:

<HR><ADDRESS><!--Auto_StampDNR-->Page maintained by your name. Created: January 15, 1998 Updated: <!--DS-->23 april 2001<!----> </ADDRESS>

This is a nice thing to have, as it will tell visitors, who you are, when you setup your page and the last time you updated it! For the first time, fill in your name: For instance: Page maintained by: Your name. And maybe your e-mail address. Or your ICQ number. You will find that the program will fill in the rest for you. There are sites that give out awards for good design, good navigation etc. Like I do! Remember that. As soon as you have your page up and going, let me know and I'll come and have a look. Who knows, I may grant you your first award to put on your pages. Anyhow, there are sites that like you to update regularly. This is where they can see you do! Mind you, you can also forget it and not put anything there. Up to you. Next you will see the tags: </BODY>
</HTML>

Your whole page will be written in between the <BODY> and </BODY> tags. It is literally the BODY of your page!

Let's start with putting a title in.

Write a name between the <TITLE> and </TITLE> tags on the top. This is an important title, as it will be asked of you many many times. I called mine "Luuk's Travel Site". Make it anything you like. Again, this will not show on your pages! It is there for you to remember it and for some robots that search your site. I'll come back on that later. You can use it for a short description with key words. Never more than 60 digits! There are robots that use the title to place it on their search machines!
For more pages, you can then call them, for instance: "Your Name's home page- links". And so on.
The next tag you see is the <HTML> tag. It tells the browser, that it should start reacting to whatever follows. And that it is supposed to read HTML codes. At the bottom of the page it is repeated, but now with a "/" sign before it: </HTML>. That means to the browser, that it has come to the end of the HTML code. Or another end of some tag. Like the <CENTER> tag. That makes sure, that whatever is in between the <CENTER> and </CENTER> tags will be centered on your screen.
The second tag, <HEAD> is an important one as well, but I'll come back on that later on in the lessons. Please save your page now. Under FILE: choose "save as". A pop-up menu will appear to let you save the page where you want to. Save it in your folder "home page". Give it the name: index.html. Yes, 4 characters behind the dot. No other name please. I'll tell you why later on, when we start getting into the serious thing of getting the pages to your provider! Later on, if you want to save in between, just click on SAVE. It will do all that's required then. Nothing can be seen on your monitor yet, even if you tried. But in the next lessons, that will change. Now go and have a cup of coffee!

Divider

Top Button

Divider

How do I make a home page? Titles & backgrounds. Lesson 2

Divider

Professor

Let's go on with your page and lesson 2! A home page needs a title to greet your visitors. I'll give you one, but remember, it's up to you to personalize your own page, So feel free to change the name. In fact, please do! And it should have a nicely colored background. To get this background you'll need to paste the following script in your HTML code, just below the <BODY> tag: (Just COPY/PASTE it! You know; Click on the beginning of the script with your left mouse-button, then move it to the end of the part you want to copy, holding the button down. When you have reached the end, and make sure only the part that you want is colored (marked), release the button. Now either click the right hand button and choose COPY from the menu by clicking it, or go to EDIT on the top bar, click it and choose COPY. Now set your cursor wherever you want to copy it to, in any document, again click the right hand button and choose PASTE. There it is! Even if you leave the program you are working in, it will stay behind that right hand button. Until you either replace it with another copy or switch off the computer!):

<BODY BACKGROUND="zand.gif" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" ALINK="#000000" ><BASEFONT SIZE=4>

The background I use is the following: (Please save it on your hard disk in the home page directory: click on the graphic with your right-hand mouse button, then choose "save image as", and save it to that directory in the next menu. Do the same with my "Brown divider" line! And any other graphics I ask you to save. Okay?)

Zand Background


In fact, you may use any background you see on the net. Just check whether it says anywhere on the page you are on that the background is copyrighted. Is that the case, then you don't "steal" it!! Just click on an empty space on the background you fancy with your right-hand mouse button and then choose "save background" of "save image as". The rest you know. Just remember: If anybody who visits your site, can't see backgrounds (there's not many, but still, you don't know), make sure he or she can read your text! In other words, if you decide on a nice, dark blue background and white characters, it will be difficult for them to see. I know, not many people bother, as indeed, 99 % of your visitors will be able to see the background. It's up to you again. I'll give you another background for future us in that dark color. Again, feel free to use it. For the time being, I would stick with black characters on that sandy background!

Here is the dark one:

Starmist background

A biggie, isn't it? Now the title of your page! Important, as it greets your visitors! You can use any font you like or any color. I found that the colors I took show properly on any background. The size of the font is again up to you. Here's the script to COPY/PASTE into your HTML code:

<CENTER>
<FONT FACE="Times New Roman" SIZE="6" COLOR="#800000"><B>Welcome to (Your Name!)'s Home Page! </B></FONT>
</CENTER>
<BR>

Let's analyze that: First the center tags to get it nicely lined out in the center. It could also be done with the attribute ALIGN, but we're now busy getting a home page on the net in the simplest way possible.
Then I choose the font, in this case "Times New Roman". I like that font, and it shows up in all versions of Windows. But it is only an example. Arial is another well used font, which is a little easier to read. Make sure to choose one from your standard list of fonts incorporated in Windows, as that one will show up everywhere. What happens is that when our Windows can't find the font on the computer of your visitor, it will take it's own default font that you use on his computer and substitute that for the font you chose. But now there will be always my title on their computers, using the font that I want them to see. Then the size of the font. When you should choose a 4 or 5 or smaller, the characters become smaller. Higher than 7 doesn't work anymore! Next I choose the color of the font, in this case a darkish red. Because I like a BOLD font I use the <B> tag and close after the title with </B>. Then the title and I end up with the end tag </FONT>. If you don't put the closing tag (</FONT>) in, the rest of your page will be in this font type, color and size! Then end with a BREAK ( <BR> ) which will make sure there's a space between the title you have just made and whatever follows.
Right at the beginning of the page, I have set not only the background color, but also the default font color and size. It will now revert back to the default font! Also notice the order of the tags; Always put them in such a way, that the end-tags are in the reversed order. For instance:

<CENTER><B><H3> then your text</H3></B></CENTER>. That's called nesting in!

Right, that was the second lesson. Leaves us to save the page (FILE-SAVE) and look at what we have done: click on the button on your HTML Editor that will start up a browser or screen that shows the script as a web page. If It starts up your browser. When it asks you to connect to your provider, just click on cancel and keep doing that until the browser is ready in the off line mode. You will now see the page you made off-line, with the sandy background color and the title you made!
Congratulations. It is the beginning of your very own spot on the internet!!!!

Divider

Top Button

Divider

How do I make a home page? Java script! Lesson 3

Divider

Java script is a programming language, which has been integrated with HTML in the last couple of years, and the browsers like Netscape and Microsoft Explorer have made sure, that their products can understand it and show it. And that has opened a whole new world to the home page! You don't have to know the language, really. You'll find that the most interesting scripts that enrich your home page with interesting things like forms, etc. can be taken from the net free of charge and pasted into your own site. You can even make alterations, that may be needed to personalize the script.
I will give you one, which will wish your visitor a "good morning" or "It's past midnight, time to call it a night" and more of those statements. Feel free to alter the text if you wish. It's very simple to do. Just make sure you don't erase comma's or any other thing besides the text itself. Otherwise it may not work! This little gem will have a look in the computer's clock of the visitor, no matter where he or she lives and give him or her the wish which is appropriate to the local time! Smart huh!
First, put a line underneath your title. You could do that by simply making a horizontal rule, a line from left to right across your page, simply by putting in the tag: <HR>. Some people like that, because it is simple and effective. I have used a brown line in this document and earlier on. I suggested you save that image on your hard disk in the directory "homepage". If you didn't, please do so now. But in this case, we use another graphic. Please save that also in your homepage directory. Here it is:

Grapevine Line

We are going to put that graphic on our page to sort of separate the title from the rest of your page. Put this script (COPY/PASTE) directly after the <BR> tag:

<CENTER><IMG SRC="grapvine.gif" ALT="Grapevine Line" BORDER="0"></CENTER> <BR>

Add the BORDER="0" (zero). Otherwise the picture might have a thin border, mostly a thin blue line, which you don't want. In fact, always put that border="0" in with any images. The ALT text is not really necessary, but if your picture loads slowly, the visitor may get tired of waiting and leave. If he however knows what the picture will be beforehand, he may click on the spot if it happens to be a link without waiting for it to load completely, thus saving time and you have the benefit of him staying on a bit longer! There are also visitors that are not able to see graphics as they switch that off. Adding the alt tag then helps them understand what should have been there to see. So just make it a habit to put an ALT text with your images! The ALT text is in this case "Vine Line". Just don't forget the quotation marks. So just type it or COPY/PASTE it from somewhere else and change the name of the graphic if need be! It's all up to you! Now save your page and have a look at the results. One should also make a habit of adding the width="number" height="number" statement in, where "number" is the size of your graphic in pixels, with each graphic you use. That way it will never show up larger or smaller than you intended. In this case I did not add those dimensions, as this is only a divider. But it can be very nice if you want to stretch the divider, by simply adding that dimension you want. It may even be a percentage, like: width="90%".

Now paste the following script directly below the "vine"graphic, after the <BR> tag. It is always nicer to make a space below the BR tag simply by pushing the Enter key. It won't show on your screen, as HTML doesn't recognize it, but it looks a lot better when you read back or have to check for mistyping. In fact, each time you put something else in make a space before and after to separate it from the part before and after. It makes everything a lot neater! So, here it is. Just COPY/PASTE it into your HTML code. Do NOT change anything except maybe the text. Otherwise it will not work!

<CENTER>
<SCRIPT language="javascript">
      <!-- hide javascript
            document.write("<STRONG><FONT size=-1>");
            day = new Date();
            hr = day.getHours();
            if ((hr >= 1) && (hr <=5)) {
            t = "Shouldn't you be in bed right now?";}
            if ((hr >= 6) && (hr <=11)) {
            t = "Good morning!";}
            if ((hr >= 12) && (hr <=16)) {
            t = "Good afternoon!";}
            if ((hr >= 17) && (hr <=21)) {
            t = "Good evening!";}
            if ((hr == 22) || (hr ==23)) {
            t = "Almost time for bed you know...";}
            if (hr==0) {
            t = "It's past midnight...time to call it a night";}
            document.write(t);
            document.write("</FONT></STRONG>");

            // done hiding -->

            </SCRIPT>
</CENTER>


That was this lesson. Please go on with the fourth!

Divider

Top Button

Divider

How do I make a home page? Lesson 4

Divider

Welcome Titel

To the Fourth Lesson.



The subject:
Link Animation


And your very own guest book!

Guest

Divider

We have to admit it to ourselves: we love to just sit back and admire all the beauty of our own page. Just look. But alas, that's not what we made it for! You want visitors. And visitors want to have a reason to come to your site. From now on, start thinking about a theme for your page. Your own hobbies maybe. Or a sport you want to talk about. Or maybe you're like me and want to do something to save the Whales and the Dolphins. Whatever. Make sure you make it interesting for your visitors. If at all possible, you want them to bookmark your home page, to come back to later on for further reference. That makes at least two "hits". We don't make the page for ourselves or even for the friends and family to have a look at. You'd be out of visitors mighty quick! So one page about you and your family is appreciated by the visitor, but a site with you and your family as the only subject (except when it's a genealogy site), is frowned upon by many visitors. They leave very quickly if they surf to your site and will never come back.
So, as I said, try and think of a "theme" a subject you know quite a bit about if at all possible and otherwise get the info from the net. It is allowed if not copyrighted! After all, you're gathering the info, so that others won't have to start searching all over the world.
How to get more visitors is something for later on. Just get some ideas at this stage of the game!
Some of the things you can do to make it more interesting is to make links to other sites that have info relating to your subject. Let's say you want to put in some links for your visitors to sites that have all sorts of goodies on HTML, Freeware, buttons, banners, guest books, HTML editors like the one you are using now, free graphics and whatever.
There are several ways of presenting those links. You can simply put them underneath each other with a short description. Or you can present them in a list. Or even fancier, you can use Java to make a nice menu to scroll to your selection, click it and there you go.
Let's try the first two. And you can use any one of them. The JavaScript type is beyond the scope of this tutorial, but can always be added at a later stage, if you so desire!

First the simple way:

We use the "normal" link. The easiest way of doing things! Let's link to my home page, my awards page and my genealogy page as an example.

We use the anchor <A> and the HREF to do it:

<A HREF="http://www.luukfrancken.nl" target="_top"> Link to Luuk's home page </A><BR>
<A HREF="http://home.planet.nl/~lafranke/awarding.html" target="_top"> Link to Luuk's awards page </A><BR>
<A HREF="http://home.planet.nl/~lafranke/genealog.html" target="_top"> Link to Luuk's genealogy page </A><BR>

As you can see, simple HTML. Do not forget the "" and the "target="_top". Why? If you forget a simple"" nothing will work properly. If you forget the target="_top" you may bring your frame along to the next page, which isn't what the writer of the page intended. And I put in the <BR> tags to make sure each line is separated and underneath each other. Use the target="_top" statement for internal links. But if the link points to another site, not yours, use another statement: target="_blank". When your visitor should use an external link on your site, using the target="_top" statement, he will simply leave your site all together. If he then surfs onwards on this site, he will have to use his back button of his browser again and again to return to your site. Which he won't do! So, you've lost him! But if you use the target="_blank" statement, a new window opens up for the new site. He can then surf onwards as much as he likes, but in the end he will have to close down that window and bingo, he's back on your site. You didn't lose him!

They will appear as simple text, underlined. When clicked, they will take you to the respective pages. They'll show up like this:

Link to Luuk's home page
Link to Luuk's awards page
Link to Luuk's genealogy page

As you can see, all the other script is now hidden. Only the links are left to see. By bringing the cursor across the link, you will see the URL on the bottom bar of your browser. Try it! The color will be blue if your browser's colors are default. They will turn red, when you have followed them.

Now let's use the list. Make sure your cursor is at the spot where you want to start your list-code. Your editor may have a "List Assistant" that will facilitate making a list. If not, you will have to start typing! We want 3 items in the list for my three links. And I would like to have a small square as indicator of the items. Now start typing or use the assistant.


<UL TYPE="square">
<LI></LI>
<LI></LI>
<LI></LI>
</UL>

In between the <LI> and the </LI> you will write the links as we did before:

<UL TYPE="square">
<LI><A HREF="http://www.luukfrancken.nl" target="_top"> Link to Luuk's home page </A></LI>
<LI><A HREF="http://home.planet.nl/~lafranke/awarding.html" target="_top"> Link to Luuk's awards page </A></LI>
<LI><A HREF="http://home.planet.nl/~lafranke/genealog.html" target="_top"> Link to Luuk's genealogy page </A></LI>
</UL>

Notice that there is no longer any need to put in the <BR> tags anymore!

The list will now show up on your screen as:



As you can see, nicely ordered underneath each other. And they actually work, by the way. Just like the simple links above! They are accentuated with the little square in front of each line.

Then there is the way of putting links in your pages with graphics to click on. We usually use those for single links. You may have seen all sorts of clickable graphics on the web. Like buttons that link you to another place. Like the buttons I have put on these lessons, for instance.
Let's take the "HOME" button I used. I grabbed a button from a site that offers free buttons. You can find plenty yourself, by simply entering "free buttons" in your search engine's form and pushing the enter knob. In this case, I used Paintshop Pro to put the text "HOME" on it. I will now link it to my own URL. Here's the code you need to put into your HTML code:

<CENTER><A HREF="http://home.planet.nl/~lafranke/index.html" target="_top"><IMG SRC="buthome.gif" border="0" width="121" height="53" ALT="button home"></CENTER>
<BR>

It will look on your screen as:

button home

if you used my button as an example. And you're welcome to grab it, save it and use it, free of charge! You could have used any graphic off course. Just make sure, that the image script is embedded in between the two anchors <A> and </A> In fact, the <A HREF.....="_top"> is the URL and the rest after that is the script which tells your browser where to find the image (in your homepage directory) and how to display it: no border and with an alternative title: "Button Home".

Right, let's get a guest book.
That is simple: there are quite a few institutions where you can get a guestbook for free. Like Bravenet. Go to their site and follow the directions there. Mind you, you must have a home site before you start getting one. And as you are planning to start your home page, why not contact your provider to get yourself a URL for your very own site? You can then fill in all the required info they want, such as your name, your e-mail address, your password (don't forget it!!), the name of your home page (Your name's home page??), the URL, and other itemjs they want. You will then receive the complete HTML script to be put into your HTML code, where ever you want it. You are probably required to give your guest book a name. Use a one word name, such as your family name, or your Christian name or whatever. You will see it in the received script. Bravenet will identify your guest book and maintain/update it by means of that name and the URL you give it.
Later on you can change the graphic they offer you by maybe the one I showed you at the top of this lesson. So, go to Bravenet to get your very own guest book. Just click the link, which will get you to their registration page. Follow there directions. Fill in the form, hit the submit button and you'll get further information and the script by e-mail, usually within minutes. And again: it's completely free of charge.
Well, that's the end of this lesson. Please save whatever you have put on your page.
In the next lesson, which will also be the last, we will make a link to another page within your site. And I'll give you some URL's for tutorials on HTML use and how to make frames. But you're now so far, that you can have your own site on the net very soon. I'll also tell you how to transmit it to your provider!

Divider

Top Button

Divider

How do I make a home page? Lesson 5

Divider

Links to other pages, transmittal to Provider


Divider

Let's start with a link to another page within your site. It is so easy: It works exactly as making a link to another site. The only difference is that it is now a URL of your own, in the same directory of your provider as where your own site is located. Let's presume that the URL of your site is the same as mine. At least that one works and the only thing you will have to do is replace the URL with your own. The URL of the site at the provider is:

http://www.luukfrancken.nl

Notice by the way, that writing a URL into an e-mail automatically turns the URL at the receiving end into a link!.
Now let's assume you have made a second page. Because normally you have made a home page with a special theme. Just a main page with some links, a guest book and some info on yourself is not the thing to interest people. They may happen to arrive on your site somehow, but will never return. Give your page a subject. Your special hobby, for instance. Tell them all about it. Give pictures (Never make them too large in bytes, as they will load very slowly and the visitor might get bored waiting and leave before he has seen what is supposed to come!), links, information, etc. Make it as interesting to the visitor as possible. There are so many subjects you could choose from: your dog, your car, your hobby, your sport, and like on my site: travel to exotic destinations, where I try to share my experience with others, Whales and Dolphins, Genealogy, this tutorial, my award, etc. etc.
Let's for the time assume that you have made a nice page on whales and dolphins. The link on your main page could be any one of the three types above. Maybe just a sentence as link: Go to my whales page! .You will find this is not very satisfactory, although it works fine.
The script is simple. Just paste it in between your sentence:

Maybe just a sentence as link: <A HREF="http://home.planet.nl/~lafranke/whales.html" target="_top">Go to my whales page</A>. You will find etc. etc.

You can also do it with a graphic:
whale
Click the whale to go to my Whales Page

Or even better, take the sentence "Click etc." in as a link as well as the whale graphic: (you will have to change the wording a little):

whale
Click here or the whale to go to my Whales Page

Here are the two scripts for these two. The first one:

<CENTER><A HREF="http://home.planet.nl/~lafranke/whales.html" target="_top"><IMG SRC="whale.gif" border="0" width="120" height="88" ALT="whale"></A></CENTER>
<CENTER>Click the whale to go to my Whales Page</CENTER><P>
the second one:
<CENTER><A HREF="http://home.planet.nl/~lafranke/whales.html" target="_top"><IMG SRC="whale.gif" border="0" width="120" height="88" ALT="whale"></CENTER>
<CENTER>Click here or the whale to go to my Whales Page</CENTER></A><BR><BR>

You will notice, that the only difference in the second is the wording and the </A> tag's position. In the second script the whole lot is nested into the anchors, where the first one only the URL and the image were embedded within the anchor tags. It's that simple. I added the <BR> tag twice to make sure the next part of your script code will be on a next paragraph.
Please, also notice that when I made my Whales page, I saved it as: whales.html. And I transmitted it as such to my provider. The only thing you have to do to get to that page directly is add it behind your own URL after adding a slash: http://home.planet.nl/~lafranke is the URL to my Site. The URL to my whales page is:
http://home.planet.nl/~lafranke/whales.html (The url to my site normally is http://www.luukfrancken.nl But that is my domain URL. When you use that URL, it is automatically referred to the http://home.planet.nl/~lafranke URL!
Don't forget to grab my whale.gif graphic if you want it. Save it on your home page directory.

I have to tell you one more thing. Remember those <HEAD> tags? When you submit your pages to some search machines in the future, to get more visitors, these search machines come to your site (they call it "spidering") and look for information to put into their data bank. In between those <HEAD> tags, you can add <META> tags. And the information given there, will be taken into their data bank. Like the name and description of your pages. And even more important, key words, describing your pages. All single words, divided by comma's. Any word that you can think of, that people might put into a search machine. Like you asked for "buttons" in your search engine and it gave you a lot of results? Those are the words, you must think up and put in between those META tags! Even words spelled wrongly. If it is possible, that people type Bttons by mistake, you must, if it is one of your key words, also think in misspelled words and add in your string of words: "bttons"!! I'll show you some of my META tags. Put them directly after the <HEAD> tag and off course, change the text.

<META name="description" content="Awards given to deserving sites. Travel information to exotic destinations from own experience. Genealogy page. Personal info, Links of interest. Whales and Dolphins, Home page tutorial">
<META name="keywords" content="Awards , Travel, genealogy, personal, links, Sydney, Panama, Tahiti, Vancouver, Kuwait, Tehran, Esfahan, Iran, Dammam, Singapore, Bangkok, Pataya, Dubai, Anchorage, Beijing, Wales, Amsterdam, Lagos, Curacao, Malaysia, Seoul, Istanbul, Copenhagen, Alaska, Kuala Lumpur, Johor-Baru, New Zealand, Wellington,Whales, Dolphins, Porpoises, Cetacea, homepage, tutorial, tutor, johor, award, HTML, code, JavaScript, website, ">

Then comes the </HEAD> tag.

We have now made all the necessary pages, have all the graphics and we can now proceed to transmit everything to your provider. To do that you must use a transmitting program. The most widely used is WS-FTP95. You can download the unregistered version for free from Ipswitch. The URL is: http://www.ipswitch.com, just in case you want to do it later. There are other programs which are very good, like "Cute FTP", but these are not freeware and you have to pay to keep them working. But should WS-FTP give problems, it's always worth knowing there's something else on the internet to use!
This WS-FTP program must be configurated for your provider. Please contact your providers help desk to get the particulars. Make sure you have ALL the files in your homepage directory, including all the graphics.
Start up your WS-FTP program. You will get the menu "session profile". If it is your first time, fill the menu in as follows: profile name: the name of your provider. In my case that is "Planet Internet". This is only for your own convenience! You can name it anything you like.
Then under "host name" fill in the FTP address which you will get from your provider. In my case that was: "ftp.planet.nl". than below that it says: host type. There is a scrolling bar on the right which will give you all sorts of choices. Check with your provider, but usually you can leave it at "Automatic detect". The next items User ID and Password are your business. Get the info from your provider's help desk, please. If it is at all possible, and you have two lines: one for your computer and one for your phone, sit behind your computer and start up the WS-FTP program before you ring them and set everything up while you have them on the phone! Put a "V" in the space "save password". The rest in the menu can be left empty. Now press the SAVE button.
We'll do a few things first before going on line. Press the "CANCEL" button on the SESSION PROFILE" menu. You will now see two screens. On the left is where you can see your hard disk's files. The right hand screen is the hard disk's space of the provider you will use for your home pages.
Let's do a few things to that left screen. Mind you, you're still off line!! Put a dot into the radio button at the bottom of the screens in "binary". That means you will be able to upload graphics as well as text files.
Then hit the "ChgDir" button on the top/middle. You then fill in the location of your homepage directory. For instance: c:\homepage. Then hit the enter key on your keyboard or click the OK button. You will now, after a few seconds, see all files of that directory on the left screen. Please rename ALL files if and when they show here in capitals. They MUST be in lower case characters, all of them. But do not give them other names. Just change the capitals into lower case characters, nothing else. Simple click the one you want once to rename. It turns green. Now click the button "rename" on the right of the left screen and rename it in the menu you will get. Hit the OK button. Do that with ALL files!!!! This is indeed very important. Make sure, that all your files and scripts in the HTML code are also in lower case characters! An image should never be written in as WHALE.GIF, or Index.html. Always as: whale.gif and index.html etc. And the most important item: make sure your main page is called

index.html

All the other pages may be called whatever you like. But pages always with the extension .html, like the whales.html page. Now go on line in the normal way you usually make contact with your provider. Do not start your browser up!
You should now be able to press the "connect" button (left top) (Again: AFTER you have logged on to your provider in the normal way). You will get the SESSION PROFILE menu. Hit the CONNECT button there. As soon as you are connected, you will be able to transmit all the files needed for your home page, by either marking them all at once or one by one (which is the way I prefer it). Let's say you have marked one file to be transmitted by clicking it once. You then click the button in the middle of the two screens with the arrow pointing to the right. Several thins will happen. You can see it all on the bottom of the screens. When all is well and transmitted, you will get a sound and you can start off with the next file. And so on. Double clicking the file to be transmitted will have the same effect as hitting the arrow button. It will transmit the file in question. But again, make sure you have talked to the help desk first. If at all possible, do a few files while they are on the phone to instruct you and help you on the way. You will be using this program again and again in the future, to replace updated pages, and so on. If you update pages, just re-transmit them. They will automatically replace the ones on your providers hard disk, as long as the name hasn't changed off course! Remember also: large files will fill up your Mb's the provider has given you for free for your home site. But 5 Mb's go a long way. Most providers will give you many more Mb's, up to 25Mb! In those cases you don't have to bother so much with the space you use. But you still have to consider the size of your graphics, as they will slow the loading time of your pages considerably when they are large in bytes.And that's not polite towards your visitors. You might even loose them before they saw your site!
When it's all done, start your browser and put the URL of your home page in the space provided at the top. Now hit the ENTER key on your keyboard. And sit back and admire your very own, first home page on the Internet. Your own a little home of your very own on the web! Congratulations. Let me know when all is well and I can visit you. It's well possible that I may, as the first person, sign your guest book and even grant you my award of excellence.
But whatever you do, please let me know when you have your site on the web.

I promised some links to tutorials on further HTML use and frames. Here they are:

Bye for now, and good luck with all the hard work to come!!!!!

Luuk Francken

©Copyright L.A.Francken. These lessons are for personal use only and may not be replicated without the consent of the author.

Top Button
Teacher

][ Home][ Travel][ Awards][ Genealogy][ HPage tutor][ Whales][ About us][ Amber][ Search][ Sitemap][ E-mail][

Copyright © 1998-2010 Luuk Francken

Page maintained by Luuk Francken. Created: February 14, 2004. Updated: januari 24 2010