HTML Tutorial

As a simple example, if you want text to show up BOLD you enclose them in <B> BOLD </B> (the markup tags you need to type are shaded). Notice there is one tag to open and another with a / to close the instruction. Most tags work this way.

Some of the other tags you can modify your text with are:

• <I> Italic </I>

• <center> Your Text Centered </center>

• <u> Underline </u>

• <span style="background-color: #DEB887">Highlight</span>
  Adjust the "DEB887" to be the color you wish to use. This is an inline CSS command, but you don't need to know why it works but just that it does.

• <font color=#FF8000> Change Font Color </font>
  Adjust the "FF8000" to be the color you wish to use.

• < font size="+2"> Change Size </font>

• <font size="+3" color="#8080C0"><b><I>
  Several at once
  </I> </b> </font>

I should point out that HTML does not recognize extra spaces or line feeds. You can format your source text any way it makes sense to you and keeps it clear in your mind. Upper and lower case have no effect on HTML commands.

If you want a clickable link:

Example 1 - the link goes to the web site address http://web-potentials.com

You type this:
<a href="http://web-potentials.com"> Return to home page </a>

It will look like this:
Return to home page

Example 2 - this time you want it to open in a new window (recommended whenever you want visitors to be able to return easily to your web site later). This is done by adding target="_blank" to the tag.

You type this:
<a href="http://web-potentials.com" target="_blank"> Return to home page </a>

It will look like this:
Return to home page

If you want to include a list of items:

<UL>
<LI> Item One
<LI> Item Two
</UL>

It will look like this:

• Item One
• Item Two

For a list with numbering, you type this:

<OL>
<LI> Item One
<LI> Item Two
</OL>

It will look like this:

1. Item One
2. Item Two

To get the dividing line you see above here put <HR> where you want it to be. This is one of the commands that can stand alone without a closing tag. A couple of others are <BR> for a line break and <P> for a paragraph break. Play with them in your editor and see how they work. In fact, that's the best way to learn any of this, just play around and click on the palette icon in the editor to see the effects.