Click Me!
Drop in on a neighbor!

The "HOME PAGE" Home Page

Get the most out of HTML and GeoCities home page editor!

You may have noticed that the text sections of GeoCities basic home page editor will accept HTML tags, and that GeoCities has added a great new HTML editor. If you don't know what HTML means, this is a place for you to learn. Use the index, tips, and resources to learn about HTML and create great home pages. This page is meant to be a quick-start reference - not a textbook. It may not answer all of your questions. Comments and corrections to the basic material in the index are welcome.

That's it. Have fun!

Go to index.

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 or Mosaic. 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> type_Document_Title_here </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 Homepage Editor 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. If you want to go further, try the RESOURCES - HTML info links.

Go to index.

Colors

Colors, background images, and some other features are controlled by the <BODY> tag. Since the GeoCities Basic Homepage Editor automatically places a <BODY> tag in your home page, you cannot use background images (wallpaper), or colors other than those allowed by that editor. But GeoCities now has a great new HTML editor, which allows you to have full control of your page, including colors and backgrounds! The information on this page will help you to develop a basic understanding of HTML. Once you have done that, use the new editor.

You can control the color of the background, text, and links in your homepage by using the HTML </BODY> tag. To control colors, the <BODY> tag is written like this :

<BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" link="#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. Here are a few colors that you can use:

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. Try this hexidecimal color converter. By using the proper combination, any color can be achieved. 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.

SUGGESTION: Start out by adding the tag as the first item in the body text window. This will give you the color combination used on this page. Once you have that working, you can experiment with different colors by changing this tag.

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 modern browsers, allow more control of the appearance of the line. By adding LINE=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 ALIGN=LEFT WIDTH=50% SIZE=10 NOSHADE > 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:

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:

  1. item one
  2. item two
  3. 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> </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 <CENTER> 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.

<B>Bold text </B>

will appear as:

Bold text

<I>Italic text </I>

will appear as:

Italic text

<B> <I>Bold and italic text </I> </B>

will appear as:

Bold and italic text

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:

I am blinking!

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.

  1. INSERT A TARGET at the point to which you want the link to jump. A target looks like this:

    <A NAME="target_name_here">target_text</A>

  2. 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. <A HREF="#index">Go to index.</A> 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 being called 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 HREF="graphics/chick.gif". If the calling file were in "schmoo/graphics" and the called file were in "schmoo", the tag would be written 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>

Try out this hotlink (below), then use the "back" key on your browser to return to this document.

Open chick.gif

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:

Go to "The Pullet Surprize"

will take you to a page called "The Pullet Surprize" located at http://www/geocities.com/Paris/2426/. You will find a link on that page to return you here, or use the "back" button on your browser. Try it!

Go to "The Pullet Surprize"

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. 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">

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"><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.

Other HTML editors

The GeoCities Basic Homepage Editor allows persons who are just getting started to easily create a very good homepage by "filling in the blanks", but it does impose some limitations! Once you have a basic understanding of how HTML works, you can use an editor that gives you full control of your page. The great new GeoCities HTML Editor is now available to do just this, and is a great way to make the transition to "real" Html.

If you get deeper into HTML, you may want to use an editor on your own computer and transfer the files to GeoCities (or wherever) by FTP. The advantage of a local editor over the GeoCities HTML Editor is that a good editor will insert many common tags automatically. The advantage of the GeoCities HTML editor over a local editor is that you do not have to send files by FTP. I use a nice, straightforward editor called HTMLWriter. I like it best of the ones I have tried. The price is hard to beat, too. It's free. The editor Iike LEAST is Hotdog.

If you are FTP'ing the file to GeoCities, you will also need the ability to upload the file with a long (unix-style) file name. I use ws_ftp for this. Be sure to go to GeoCities Help Page page for the specifics on how to FTP to them. You can also download ws_ftp there.

The programs mentioned above are for the PC. Mac users click here.

Go to index.

HTML information links

For more information about HTML, try these links.

Go to index.

visitors since January 1, 1996.

Return to GeoCities Athens 1