On-line / Off-line Homepage Guide

HTML Guide for those using the GeoCities Advanced Editor, or for creating pages Off-line
(For offline operation, use notepad, wordpad, any other text writing program, or even the Editor in Netscape)

This guide will only cover these tags, and in some cases, add-in code for them.
,,,,

,

,
,,,,

: name, href
This one into the image tag : src

To Top of Page

1) Beginning and Ending your page
In this section, these will be covered: , , , , , ,
It may seem a lot right now, but these are the critical ones for an html document

So, let's start shall we.

You begin with the tag that tells your browser it is reading an html document;

Every page should then have a header;

and a title inside this header. (This gives the page a meaningful name in someone's bookmarks).

(The closes the title section)
Then, the header ends.

The next step is to start the bulk or body of your page.

You have opened the parts of your page that tell the browser what it is looking at. To complete the skeleton, you must now close them with these.

So, to start your infant page, copy the code below, paste it into your editor, and then, enter your page title.

Now you save the page with an html address (which is different to a title).
If this is your second page, your page title might be Joe'N'Jane, yet the html address may be jnj.html or even jnj.htm, BUT if the page you are working on is to be the first page to your site, save it as index.html

Note: users of windows 3.1 will have to rename it when it arrives on the Geocities server, and adjust any links to the index page. Use the htm extension for all the rest of your pages.
Alternatively, create an entry page using the geocities editors, call that index.html, and link it to the page that you want as your real first page, which you can then call anything you like, and you do not have to link it back to the index.html!

The rest of this guide will cover items that you insert into the tag, or between the and tags.

To Top of Page

2) Background Colour
In this section, this will be inserted into the tag: bgcolor

The code used to alter the background color is bgcolor, and is entered into the tag. The code below shows the background colour for this page.
bgcolor="#C7FEDC">
The #C7FEDC part is electron speak for this ghastly blue-greeny colour (Actually it's hex, but you don't need to worry about that).
The bgcolor tells the browser the colour applies to the background. Note:- there is a space between body and bgcolor.
Below is a table with a sample of colours, and the E-Speak that fits between the quote marks.

Simply copy this below, and paste it into the command as shown above,
bgcolor="YourBackGroundColour"
and insert the colour you choose.

When you have done this, save your page, and use your browser to view it. If you don't like the background colour, switch back to your editor, and change it.
If you are following this online, open a second window/browser, by going into the file menu, then enter your address in the URL bar of your second window/browser, press enter.

To Top of Page

3) Entering your First Text
In this section, these tags will be covered:

,

So, you actually have something to say, Hmmmm.
Well everyone does, so you may as well join in, but before you start merrily typing your autobiography, listen up.

The first thing you need to do is open your paragraph. To do this, you use

, which means....open paragraph. You can then type your first words. Finally, close the paragraph with

Lets make it your first webside broadcast.

Hey look everyone, my very first words on the net

Now, see how some lines just stop, and immediately under them a new one starts, yet with others there is a large gap? This is achieved by using the line break command
, inside a paragraph. The text blocks above show this off well.

Hey look everyone,
my very first words on the net

All right, enter your text, and save your page, then switch to your browser, (your 2^nd browser window if you are online), and click on refresh to view it.

To Top of Page

4) Setting the Text Colour
In this section, this will be inserted into the tag: text

If I had set this page's background to black, then, obviously no-one would see what I've have written, unless I changed the colour of my text. If you have set your background rather dark, then this section will really interest you.
If you want all of the standard text that you enter to be of a complimentary colour to your background, you need to add to the tag.

So, find it, and add to it, the following.
text="YourTextColour" - Enough said. You can use a colour from the above selection if you choose.

Your body tag would now look something like
text="YourTextColour">

That was short and sweet, wasn't it? Well, move to the next section, to see if it is shorter.

 To Top of Page

5) Italic and Bold text
These will be introduced here:,

and When text is surrounded by these, you get bold text

and When text is surrounded by these, you get italic text

Once again you need to close these in order to prevent text that you want to be normal, from being either bold or italic. 
Try some text on your page, put YourWords or YourWords, or even YourWords in your code, and see the effect.

Yes, it is a bit shorter than the last section!

To Top of Page

6) Heading Size
These will be introduced here: where # is a number from 1 to 7
This section will not cover altering the size of standard text. To learn how to do that, see the selection of links back on the RainForest help page.

To alter your heading size, you can use the tags that were designed for headings. When you apply a heading format , do not forget to close it.

Your heading

Your heading

Your heading

Your heading

Your heading

Your heading

So, now that you can see the sizes for headings, go to the line that you want as your page heading, and change the

to the heading size required, and replace

To Top of Page

7) Creating Your Links
This section will introduce these tags, and tag add-ins: ,name, href

By now you have used the links on this page a number of times, and want to get your page to jump around a little as well.
Basically, there are two main portions that will be discussed here:
1) Clickable item
2) Item that the link targets

Right then, here we go:

Links within a page
To start, look at this,
Creating Your Links
which ends up like this Creating Your Links
This code covers the first item.
The opens the link (a stands for anchor), and the closes it, in this situation, creating the clickable link
The href="#gothere"> is the reference address, the # tells the browser to stay on this page, and move to the target named "gothere".
Creating Your Links is the text you see.

name="gothere">Creating Your Links
name="gothere" names the target item as gothere. Notice there is no # mark. The # only gets used at the actual link, not at the target. You can set the target with any name, but you must refer to it in the link code (above) for it to be found.
Creating Your Links -This is the target proper, and is where you end up when you click on the link.
I could have used just the first letter as the target, and it would work just as fine, but I would have needed to place the rest of my text after the , like this;
Creating Your Links

Links within your site (Getting off the first page)
This can get a little hairy as well, since there is two possible options.
First, you may simply wish to move to a different page, or
secondly, you may wish to move to a specific point (a named point) on that different page.

The code Home would take you to the start of my first page, setting "Home" as the clickable text.
The difference between this type of link, and that above, is the direct reference to an html file (index.html). Reasonably simple after all that above, isn't it?

Now, an extension of this idea, is to link to a target on a different page. Below is the code which would move you to the "search" target on a page different to the one that the link appears on.

Home

index.html is perhaps the first page, while # instructs the browser to look for the target reference on that page called search .
So, if one of your pages refers to an item half way down another, name the target on the second page at the point that you want people to go to, and set the link in the first page to point at the target.

Links to someone elses page
After all that has happened above, this is reasonably simple.
If we take this bit of code Home,
and replace "index.html" with "http://....the rest of the address you want to go to", and the text "Home" with "GotoMyFriendsPage", you have a link that moves to your friends site when you click "GotoMyFriendsPage".
GotoMyFriendsPage

To Top of Page

8) Setting Link Colour
In this section, these items will be added to your body tag: link, vlink, alink

Ok. Setting the links is done in the body tag, along with most of the major page settings.

is the settings for the links on this page, and along with them is the background colour code (bgcolor) mentioned further up. There is no text colour setting, as I have chosen not to use one. The result is black (if your browser's default is black)

LINK= "YourColour" defines the color of the link before it is used
VLINK= "YourColour" defines the color of any visited links, so tells you where you have been to.
ALINK= "YourColour" defines the color of the active link.

So ladies and gentlemen, copy then paste this and place your colours.

link="LinkColour" vlink="VLinkColour" alink="ALinkColour"

Remember, if you set the colour of these too close to the colour of your background, as with your text, it would be practically impossible to see, making visiting the page unpleasant and awkward.

To Top of Page

9) Putting an Image on Your Page
This section will give you the power to put images onto your page, using the following tag and tag insert: , src

Ok. Here is the code that has put this image up on this page.

Please explain! Yep, I'll try.
The img tells the browser that it is going to retrieve an image and display it. This is the image tag .
The src="sample.gif" tells the browser that the image source is the file "sample.gif".

To load a picture onto your page, your file name in your directory and your code must match exactly. - sample.gif is different to SaMpLe.gif

If you get this icon "" instead of your image, first check to ensure you have uploaded it .
If so then compare the image filename in your directory with the one in your html code (They HAVE to be identical). If there are no errors there, then try to upload the image again. Sometimes the upload facility doesn't do as it should.

Now, to put up your immensly flattering passport photo, you would use this . Yes, that's it.

Links using Images

Ok. The image at left could be set as a link to another page and is done by using instead of using a text entry.

If you are of an artistic mind, and you have the software, you could make a series of "Buttons", then link them to wherever you wish to send people.

You can do more with images, but there are plenty of resource sights listed on the RainForest help page that explain them.

To Top of Page

10) Using Images as your background
Now you may put this into your body tag: BACKGROUND

To use an image as your background, instead of having a plain colour can add spice to the page. This is done by, once again, making an entry into the tag, as below
BACKGROUND="YourBackgroundImage" - sets the image to be tiled underneath your text.

background="YourBackgroundImage" link="LinkColour" vlink="VLinkColour" alink="ALinkColour">

To Top of Page

11) Mail link
Ok. Firstly, below is the code for a dud GeoCities mail address
duddles@oocities.com
and gives this
duddles@oocities.com But, as with all links, I could have used any text. -Mail me - Comments .You could even set it to an image, as described above, using the

So, all you need do is copy this code,

YourMailTextOrImage

Well, well, another short section. Aren't you glad of that? Well, you are nearly there.

To Top of Page

12) GeoCities link
Finally, in order to follow the guidlines set out by our host , you should add the following code. Simply copy and paste it onto your page just above the tag

This page hosted by

Get your own Free Home Page

To Top of Page

And then you are done.Whooo-iiiii

Now hang on, settle down there

SAVE IT
and have a look at it, try all the links, in fact send your internet connection or your hard drive into a frenzy as you flit through your site, checking that everything works. This is important, because if it doesn't work for you, it won't work for anyone else.

While you are admiring your skilled handiwork, have a thought for us, not knowing whether you used this or not. Please fill out this online form. We would like to know just how helpful this guide has been to you.

With this guide, and those resources listed in the RainForest Help Index, you should be able to fly along.
If you do not understand something on this page, fill out the form, and make sure you enter your mail address.
If you have a problem on one of the other resource sites, about their page, send an email message to them.