1) Beginning your Page | 4) Changing Text Colour | 7) Creating Your Links | 10) An Image as Background | |
|
This guide will only cover these tags, and in some cases, add-in code
for them.
,,
,
,
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
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.
2) Background Colour
In this section, this will be inserted into the
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.#004000 | #49BF11 | #008000 | #FFF1E3 | #008080 | #ECD0F4 | #004080 | #FFB38E | #8080C0 | #BE7D05 |
#000000 | #26CDFD | #808080 | #D6D6AD | #FFFFFF | #FFFFEC | #E2E2E2 | #B8C9BE | #800080 | #CF9E9E |
#800000 | #B08968 | #FF8080 | #E3F2F4 | #F7F2D0 | #B0A473 | #FFC4C4 | #8E8E00 | #FFFFB5 | #AC1313 |
Simply copy this below, and paste it into the
command as shown above,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.
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
.(I think you've guessed what that means)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 2nd browser window if you are online), and click on refresh to view it.
4) Setting the Text
Colour
In this section, this will be inserted into the
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.
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!
6) Heading Size
These will be introduced here:
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.
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
with the equivalent heading closure tag as shown above, or enter it fresh, straight after the body tag.
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.
The next bit of code looks similar, however, this names the target. The text, in this case, is the target itself and is located away from the link text.
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.
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
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.
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.
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
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,
Well, well, another short section. Aren't you glad of that? Well, you are nearly there.
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
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.
[Home]
[Interactive]
[Help]
[Earth
Journal] [News]
[Survey]
[Webrings]
[Web
Netiquette]
This page is managed by your
RainForest
Community Leaders
This website is made possible by:
Get your own Free Homepage