You may have noticed that the text sections of Geocities Basic and Advanced HTML editors will accept HTML tags. If you don't know what HTML means, this is a place for you to learn. Use this page 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. You may find it easiest to open a second browser window and actually work on your page while referencing this page at the same time. You can do that in almost any browser by choosing "New Window" of "New Browser Window" from the "File" pulldown menu.

Index: Getting started in GeoCities 1. What is HTML?
2. Control the colors on your page
3. Add background images
4. Centering text
5. Bold and italics
6. Paragraph and line breaks
7. Jump to document on same system
8. Add graphics to your page
9. Headers


1. What is HTML?

HTML stands for Hyper Text 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/Communications or Microsoft Internet Explorer. Since you are viewing this document, you ust 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 cotaining these codes is called and HTML document. An HTML document must have the proper form, so that it will be recognized and interpreted properly by the browser software. You should notice two things here. Opening codes are enclosed in brackets (< >), and closing codes include a slash (). For example, and HTML document is opened by and closed by . This is true of most (but not all) codes. The GeoCities Basic HTML Edit or (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 home this home page. Each one will teach you a little more.


2. Control the colors on your page

Colors, background images, and some other features are controlled by the 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 on your home page by using the tag. To control the various colors on your page, the tag is written like this: You may include any of the items (bgcolor, text, link, vlink or alink), of 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
Or you could just type the name of the color if you don't want to use the codes. 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.


3. Add 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" > (but there are not spaces between the brackets). 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 aroder for it to work successfully. For more help with loading images, please see the section on adding graphics to your site.


4. Centering text

You can cause text to be centered by enclosing it in < CENTER > tags. This line: < CENTER >This is a test 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. To center lines, you must open it with < CENTER > and close it with (again, there are no spaces between the CENTER and the brackets).


5. Bold and italics

You can cause text to be bolded or italicised by enclosing it in tags for those attributes. < b > Bold text will appear as: Bold text < i > Italic text will appear as: Italic text < b > < i > Bold and Italic text will appear as: Bold and Italic text Note: it is very important that you close the tags in the same order thatyou opened them. In other words, in the last example, it was important that I closed the "Italics" tag before I closed the "Bold" tag (put the before the ).


6. Paragraph and line breaks

Web browsers do not respect the way you have formatted your text. They ignore carriage returns and line feeds. Unless give specific instruction, your text will be fitted to theline 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.


7. Jump to document 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 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" >.


8. Add graphics to your page

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" > 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 thatit would appear if it were text. You can control the position of the image simply by surrounding it with CENTER tags. For more help, refer to number 4 above.


9. Headers

Web browsers recognize six levels of headers. < h1 > Level one header
< h2 > Level two header
< h3 > Level three header
< h4 > Level four header
< h5 > Level five header
< h6 > Level six header

Level one header


Level two header


Level three header


Level four header


Level five header

Level six header



NOTE: Make sure that all documents are opened by brackets, and closed in the order of opening them with a slash before the brackets. Also, whatever has a space between brackets throughout the page is just for examples. Example, < br > would have no spaces between the brackets. That goes for all spaced brackets on this page. Please forgive me if I have misspelt anything, I kind of typed this in a hurry.


Back to main page Back to top