Index
What is HTML?
HTML stands for Hypertext Markup Language. It consists of a set of codes
which are inserted in a document to control the way the document is displayed
by a "web browser" such as Netscape Navigator/Communicator or Microsoft
Internet Explorer. Since you are viewing this document, you must be using
a web browser. If it has a "view source" feature, you can see what this
web page looks like with the codes showing. In Netscape, select VIEW, then
SOURCE... If you are familiar with the hidden codes used by word processors
such as WordPerfect, you will see that HTML codes are very similar. A document
containing these codes is called an HTML document.
An HTML document must have the proper form, so that it will be recognized
and interpreted properly by the browser software. The basic form is:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
main_part_of_document_goes_here
</BODY>
</HTML> |
You should notice two things here. Opening codes are enclosed in brackets
(< >), and closing codes include a slash (</ >).
For example, an HTML document is opened by <HTML> and closed by </HTML>.
This is true of most (but not all) codes. The GeoCities Basic HTML Editor
(located within the File Manager Utility) will create the basic document
structure for you.
The best way to learn how to use HTML is to use it. Try out the tips
on this home page. Each one will teach you a little more.
Go to index.
Colors
Colors, background images, and some other features are controlled by the
<BODY> tag. GeoCities Basic Editor allows you to choose from several
different background colors for your home page, by selecting from the many
choices listed in the pulldown menus.
You can control the color of the background, text, and links in your
home page by using the <BODY> tag. To control the various colors on
your page, the <BODY> tag is written like this :
<BODY BGCOLOR="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx"
alink="#xxxxxx">
You may include any of the items (bgcolor, text, link, vlink or alink),
or leave any of them out. To set the color of the background, text, link,
visited link, or active link, substitute a color value for the xxxxxx in
the sample above. Do not make them all the same color, or you won't be
able to see anything on your page.
Here are a few colors that you can use:
-
White = FFFFFF
-
Yellow = FFFF66
-
Red = FF0000
-
Grey = CC9999
-
Blue = 0000FF
-
Green = 00FF00
-
Black = 000000
-
Purple = CC33FF
-
Lt. Blue = 00CCFF
|
These values represent the hexidecimal value of the red/green/blue combination
that makes up the color. A full explanation of these values is beyond the
scope of this page, but can be found elsewhere on the web. When you see
a color you like on another home page, you can use the "view source" feature
of your browser to see the code for that color.
If you're comfortable enough already with how to set your own colors,
the Basic Editor allows you to create your own "Body" tag line by unchecking
the box located above the pulldown menus, and including the tag directly
inside the "Body Text" section.
SUGGESTION: Start out by adding the tag
<BODY BGCOLOR="#FFFFFF" text="#000000" link="#0066CC" vlink="#336600"> |
as the first item in the "Body Text" window. This will give you the color
combination used on this page (as long as you have unchecked the box above
the pulldown menus). Once you have that working, you can experiment with
different colors by changing this tag.
Go to index.
Background Images
To add background images instead of background colors, you need
to use the attribute BACKGROUND in the BODY tag instead of BGCOLOR.
For example, if you wanted to use an image named "bg.gif" for your background,
the tag would look something like this:
<BODY BACKGROUND="bg.gif" text="#000000" link="#0066CC vlink="#336600"> |
Note: the image must be located in your own directory in the example above.
If it's located somewhere else, you'll need to give the entire path in
order for it work successfully. For more help with loading images, please
see the section on adding graphics to your site.
Go to index.
Horizontal lines
You can insert a horizontal line (horizontal rule) in your document by
inserting a <hr> tag. The default line is a full width, thin, and shaded,
like this:
Enhancements to this tag, which are recognized by most browsers, allow
more control of the appearance of the line. By adding SIZE=NUMBER, the
thickness of the line can be controlled. The alignment can be controlled
by adding ALIGN=LEFT/RIGHT/CENTER. The width of the line can be adjusted
by adding WIDTH=PERCENT. A black line can be created by adding NOSHADE.
Combining these enhancements,
<hr size=10 align=left noshade width=50%> |
will produce a thick black line at the left margin, half page width.
Note: The "fancy" lines used on many web pages are not produced by the
<hr> tag. They are graphic images.
Go to index.
Bullet lists
You can create bullet lists by using the <ul> (unordered list) tag.
The format is:
<ul>
<li>item one
<li>item two
<li>item three
</ul> |
The list will look like this:
-
item one
-
item two
-
item three
Go to index.
Numbered lists
You can create numbered lists by using the <ol> (ordered list) tag.
The format is:
<ol>
<li>item one
<li>item two
<li>item three
</ol> |
The list will look like this:
-
item one
-
item two
-
item three
Go to index.
Create definition lists
The easiest way to explain what a definition list is is to show you one.
They look like this:
-
Oranges
-
A reddish yellow tropical fruit about the size of an apple. A member of
the citrus fruit family. In the United States, oranges are grown primarily
in the states of Florida and California.
-
Apples
-
Technically a pome, apples are an orange-sized fruit, usually in varying
shades and mixtures of red, yellow, and green. In the United States, apples
are grown primarily in the northern states, near bodies of water.
This is the same list, with the tags visible:
<dl>
<dt> Oranges
<dd> A reddish yellow tropical fruit about the size of an apple.
A member of the citrus fruit family. In the United States, oranges are
grown primarily in the states of Florida and California.
<dt> Apples
<dd> Technically a pome, apples are an orange-sized fruit, usually
in varying shades and mixtures of red, yellow, and green. In the United
States, apples are grown primarily in the northern states, near bodies
of water.
</dl> |
Go to index.
Headers
Web browsers recognize six levels of headers.
<h1>Level one header </h1>
<h2>Level two header </h2>
<h3>Level three header </h3>
<h4>Level four header </h4>
<h5>Level five header </h5>
<h6>Level six header </h6> |
will look like this:
Level one header
Level two header
Level three header
Level four header
Level five header
Level six header
Go to index.
Centering text
You can cause text to be centered by enclosing it in <CENTER> tags.
This line:
<center> This is a test </center> |
will appear like this:
This is a test
If more than one line of text is enclosed in the tags, all enclosed
lines will be centered.
Go to index.
Bold and italics
You can cause text to be bolded or italicised by enclosing it in tags for
those attributes.
will appear as:
Bold text
will appear as:
Italic text
<b><i> Bold and italic text </i></b> |
will appear as:
Bold and italic text
Note: It is very important that you close the tags in the same
order that you opened them. In other words, in the last example, it was
important that I closed the "Itlaics" tag before I closed the "Bold" tag
(put the </i> before the </b>).
Go to index.
Paragraph and line breaks
Web browsers do not respect the way you have formatted your text. They
ignore carriage returns and line feeds. Unless given specific instruction,
your text will be fitted to the line length of the browser.
Inserting a <br> tag will cause the current line to end and a new
one to start. Inserting a <p> tag will cause the current line to end,
a blank line to be inserted, and a new line to start.
Go to index.
Preformatted text
There are times when it is nice to have your text appear just the way you
have typed it. You can do this by placing a <PRE> tag at the beginning
of the passage, and a </PRE> tag at the end. Your text will appear in
a fixed-pitch (typewriter) font and retain any tabs, line feeds, multiple
spaces, etc. that you may have included. For example:
There was a young man from Boston
who bought himself a new Austin.
He had room for his lass and a gallon of gas
but his tie hung out and he lost 'em.
Go to index.
Make things blink
You can make text or graphics blink on and off by surrounding them with
tags.
The code
<blink> I am blinking!</blink> |
appears like this:
Be careful not to overdo it with this one!
Go to index.
Creating a jump within your document
It is easy to create "hot links" within your document that can be "clicked"
by the reader to jump to another part of the document. There are two steps
involved.
-
INSERT A TARGET at the point to which you want the link to jump.
A target looks like this:
<a name="target_name_here"> |
-
INSERT A LINK to be clicked to cause the jump. The link looks like
this:
<a href="#target_name_here">hotlink_text</a> |
The hotlink_text will appear underlined and in the "link" color. When the
user clicks the hotlink, the web browser will jump to the target_text.
Go to index. is a good example of a hotlink. Use the
VIEW, SOURCE feature of your browser to see the HTML tags surrounding the
hotlink and the target text at the top of the index.
Jump to another file on the same system
It is easy to create a "hotlink" that will cause the web browser to open
another file located on the same server as the file from which it is being
called. The tag format for this kind of link is:
<a href="relative_path_and_filename">hotlink_text </a> |
If the file is in the same directory as the calling file, it is only necessary
to specify the filename. If the file being called is in a different directory,
give the "relative path and filename". For example, if the calling file
is in a directory called "schmoo" and the called file is named "chick.gif"
and is in "schmoo/graphics", the tag would be written <a href="graphics/chick.gif">.
If the calling file were in "schmoo/graphics" and the called file were
in "schmoo", the tag would be written <a href="../chick.gif"> I have
placed a file called "chick.gif" in the same directory as the file you
are currently reading. This file can be opened with the following hotlink:
<a href="chick.gif"> Open chick.gif </a> |
Go to index.
Jump to a document on another system
Creating a hotlink that jumps to a document on another system anywhere
on the Internet is very similar to creating a link to a document on the
same system. The only difference is that instead of using the relative
path and filename of the called file, the URL (uniform resource locator,
or "internet address") is used. The link:
<a href="http://www.geocities.com/Paris/2426/">Go to "The Pullet
Surprize" </a> |
will take you to a page called "The Pullet Surprize" located at http://www/geocities.com/Paris/2426/.
Go to index.
Placing graphic images on your pages
You can place graphic images on your pages, if the graphic image exists
as a separate file on your server or some other server on the net. The
file format must be readable by browsers. I suggest GIF or JPG. Your page
shouldn't "depend" on the graphic, since some browsers are "text only"
and will not display graphics. In it's simplest form, the tag to cause
a graphic to be placed on the page looks like this:
<img src="right.gif" align="bottom"> |
This tag will cause a graphic file named "right.gif", which is in the same
directory as the file you are reading (index.html) to be displayed in the
position that it would appear if it were text, like this:
You can control the position of the image. The most basic way to do
this is to treat it as text. For example, surrounding the image tag with
center tags gives this:
You can also combine the image tag with other elements of your document.
For instance, the following combination:
<img src="right.gif" align=bottom> <a href="#index">Go to index.</a> |
gives this display:
Go to index.
There is much more to be said about graphic images, since they are a
key element in really good pages, and can also detract from your page by
making it very "slow". Stay tuned.
Please note that the image below is clickable.
Go to index.