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

Colors

The <BODY> tag controls colors, background images, sound, and some other features. 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

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

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

EXAMPLE: <a href="http://www.softcom.net/users/pohara/webstart.html>START HERE</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">

 

<a href="chick.gif"> Open chick.gif<a>

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.softcom.net/users/pohara/index.htm/">Go to "Web Design Home Page" </a>

will take you to a page called "Web Design Home Page" located at http://www.softcom.net/users/pohara/. You will find a link on that page to return you here, or use the "back" button on your browser. Try it!

Go to "Web Design Home Page"

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="lftarrow.gif">

lftarrow.gif (876 bytes)

This tag will cause a graphic file named "lfarrow.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 display:

<center><img src="lftarrow.gif"><a href="http://www.softcom.net/users/pohara/index.html"></a></center>

You can also combine the image tag with other elements of your document. For instance, the following combination:

<center><img src="lftarrow.gif"><a href="http://www.softcom.net/users/pohara/index.html">Return to index.</a></center>

gives this display:

Return to index.

 

There is much more to be said about graphic images, since they are a key element in really good pages.

BUT - THE MORE IMAGES YOU PUT ON YOUR PAGE THE LONGER IT TAKES TO LOAD

 

Other HTML editors

The GeoCities Basic HTML Editor allows persons who are just getting started to easily create a very good homepage by "filling in the blank", 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 Advanced 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 by FTP or with the Ez Upload Utility (located within the File Manager Utility). 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.

If you are FTP'ing the file to GeoCities, you will also need an FTP Utility. I use WS_FTP for this. Go to FTP Procedures Page page for the specifics on how to FTP. You can also download ws_ftp from the FTP Procedures page.

tphome.gif (3900 bytes)