Site hosted by Angelfire.com: Build your free website today!
Building Your Own Web Site

Building your very own web site should be fun and exciting! And although it would be impossible to list every last detail, or answer every last question using this format, we wanted to provide you with some basic rules regarding HTML - which (just in case you're interested) stands for "Hypertext Markup Language".

Number One Rule to Always Remember: No one learns HTML overnight, and you'll certainly never be bored, as there's always something new and exciting to explore and learn! Review this section of our site, test each step, and when you feel comfortable, move on to the next step.

Since Angelfire is where this particular site is located, we'll use them as our reference - although there are many other terrific hot spots on the web to build your site, such as: Geocities, TalkCity, or Tripod, just to name a few.

GETTING STARTED

Register yourself as an Angelfire Member, then sign up to build your site. During this procedure, you will be asked whether you would like to use Angelfire's "Basic Editor" or "Advanced Editor". The "Basic Editor" allows you to chose a background color, text color and size, and so forth, then does all of the work for you. This is how most people build a site.

However, since we're working with HTML, we'll be using the "Advanced Editor". This allows you a blank page, and nothing more. Think of it as your canvas - with you as the artist! Log into the "Advanced File Manager" and click on the "Create/Edit" box. You should now be located in the "Advanced Editor" utility.

HTML

An HTML document must have the proper form, so that it will be recognized and interpreted properly by the browser. The basic form is:


<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
main_part_of_document_goes_here
</BODY>
</HTML>

You should note two important things: Opening codes are enclosed in brackets (< >), and closing codes include a slash (</ >). No matter what, everything you do will fall within your HTML tags. The very best way to learn how to use HTML is to actually use it. And don't be afraid to experiment... that's half the fun!

Colors

You can control the color of your background, text, and links on your site 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's but a small sampling of the different colors you can use:


  • Black = 000000
  • White = FFFFFF (Sorry, no sample due to white background)
  • Gold = CFB53B
  • Yellow = FFFF66
  • Yellow Green = 99CC32
  • Green = 00FF00
  • Red = FF0000
  • Orange = E47833
  • Grey = 545454
  • Blue = 0000FF
  • Light Blue = 00CCFF
  • Maroon = 8E236B
  • Purple = CC33FF
  • Orchid = DB70DB

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 "menubg.jpg", your tag would resemble something like:

<BODY BACKGROUND="/pa3/decor/images/menubg.jpg" text="#000000" link="#FFFFFF" vlink="#545454">

The example above takes several factors into consideration. As do most sites, Angelfire provides you with your own "File Directory", under the classification "Images". "Images" is where you will upload all graphics you intend on using to build your site.

Please keep in mind that Angelfire is the only site I personally know of that insists upon your using the entire path name in order for your graphics to work successfully. Normally, you do not need the entire file path, and at some other location (such as Geocities) your code would, instead, resemble something like:

<BODY BACKGROUND="menubg.jpg" text="#000000" link="#FFFFFF" vlink="#545454">

Horizontal Lines

You can insert a colorful horizonal line in your document by inserting a <hr color"#000000"> tag. The line created is of full width, and thin, like this:


In the above example, I have used black in my horizontal line. However, if you prefer a different color, simply replace the "000000" with a color code from the color menu provided above.

Text

You can cause text to be Centered by enclosing it in <CENTER> tags:

<center> Centered Text </center>

Or make your text Bold, like this:

<b> Bold text </b>

Or, using the same principal, you make your text Bold and Italic:

<b><i> Bold and Italic text </i></b>

Note: It's important to close the tags in the same order that you opened them. In other words, it was important to that I close the "Italics" tag before I closed the "Bold" tag (put the </i> before the </b>).

Paragraph and Line Breaks

Typing out a web site on a keyboard is not like typing away on a typewriter. Browsers do not respect carriage returns, tabs, and so on. Unless given specific instructions, your text will be fitted to the length of the browser.

Inserting a <br> tag will cause the current line to end and a new one to begin. Inserting a <p> tag will cause the current line to end, a blank line to be inserted, and a new line to start.

Inserting A Link

You can create a link on your web site that will take you to another web site, or even to another page of your own web site. To do so, you will need to know the URL (uniform resource locator, or "internet address") you wish to link to. For example, the link below will take you to Witty1 Productions, Inc.'s domain:

<a href="http://www.witty1.com/"> Witty1 Productions, Inc.</a>

Try it! Then use the "Back" button on your browser to return here.

Witty1 Productions, Inc.

Email

To place an email form on your site, you would use the following code:

<a href="mailto:witsend@witty1.com">

witsend@witty1.com

Placing Graphic Images On Your Site

After uploading the graphics you've choicen for your site into your "File Directory" under "Images" (as discussed above), you can begin placing graphics onto your site. File formats must be readable by browsers, so use GIF and JPG files. The tag to cause a graphic to be placed on a site looks like this:

<img src="flower.gif">

As mentioned previously, an exception to this code would be used at Angelfire, as they insist upon your using the entire path name in order for your graphics to work successfully. In this case, your code would resemble something like:

<img src="/pa3/decor/images/flower.gif">

Note: The more graphics used on a site, the slower its download time, so try to chose carefully.

Placing Music On Your Site

The code for placing music (midi) on your site is:

<img src="nameofyoursong.mid">

To place a wav (music, but with a different file extension) onto your site, the code is:

<img src="nameofyoursong.wav">

Again, with Angelfire, remember to add the entire path name, which would resemble something like this:

<img src="/pa3/decor/images/nameofyoursong.mid">

We hope you've enjoyed this section of our site, and that you've picked up even a few new tips. There are many other online HTML references available for you to read, so don't hesitate checking them out. Most of all, relax and have fun while creating your new web site!