I did a simple HTML Tutorial on my Ryze page a while back. It became so popular I decided to include a generic version here as well. I have been helping some of you to install Xoops Content Management System, and this is particularly appropriate there.

A    T u t o r i a l
Last updated November 2, 2004

Using Simple HTML on Your Website

Cut and Paste Examples with detailed explanations
even newbies can understand, with no catches.

• Spice up your page for more attention
• Other newbies will think you're a pro!
• No complicated software required

Some new trends on todays Internet are Content Management Systems and RSS feeds like this one. This attracts many newbies who think all they can do is use the provided input tools and submit plain text for their content. I am about to dispel that MYTH right here and now.

Sure, you could keep it simple and use plain text for your pages, but it could be fun and have much more impact, if you learn some simple HTML. This tutorial is designed for the HTML challenged newbies, so you use it even if you are an absolute beginner.

HTML is not magic but a simple way to tell your web browser how to render the text on your page. In order to accomplish this, it uses special tags called 'markup tags' to send embeded instructions, hence the name H yper T ext M arkup L anguage. The HyperText refers to the way it links pages together.

The easy way to create HTML for your pages is to enter it into an editor that will test the code on your own computer, then cut and paste it into the update box when it's finished.

I use a free editor that you can download online and install on your own computer from This Link Use the link labeled 'arach_full' and not the mirrors at the bottom or contact me if you have problems.

The markup tags are enclosed in angle brackets so they do not get printed on the page but allow the browser to know what you want displayed and how.

---

As a simple example, if you want text to show up BOLD you enclose them in <B> BOLD </B> (bold markup tags). 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: #FFFF99"> Highlight </span>
  This is actually an inline CSS command. Don't worry, you don't need to know why it works but just that it does.

• <font color=#ff0000> Change Font Color </font>

• <font size="5"> Change Size </font>

• <font size="6" color="#800040"><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 to include a list of items with or without numbering, here's how:

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

• Item One
• Item Two

OR

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

1. Item One
2. Item Two
3. Item Three

---

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 pallete icon in the editor to see the effects.

---

You may notice that I like my text to be a little larger and justified on both sides of the page. To do this enclose each paragraph inside this set of tags:

<p align=justify>
<font size="3" color="#000000" face="Verdana">

YOUR PARAGRAPH TEXT GOES HERE

</font>
</p>

---

If you want to include a Hypertext Link to another page, use this:

<a href="http://the-page-you-want-to-link">Your Link Text</a>

If you want it to open in a new Window, add:

<a href="http://the-page-you-want-to-link" target="_blank">Your Link Text</a>

---

Here's another favorite little trick I use to get the mouse over highlighting on my links. Notice what happens when you roll your mouse pointer over THIS LINK. Here's how it's done:

As the very first lines of your page include:

<STYLE type=text/css>
A:hover { BACKGROUND-COLOR: #fff4a8}
</STYLE>

---

I hope this gives you some encouragement to spice up your pages a little. This only scratches the surface of what can be done with HTML but it should remove some of the "Black Magic" image for some of you. You can learn more by examining the HTML of other websites by clicking "View" and "Source" in your browsers menu and get more ideas of how things are done. There are many more in depth tutorials available online for free if you do a search on "HTML tutorials" with your favorite search engine.

Have fun and experiment

NOTICE: Be sure you remove all extra spaces and carriage returns from your code before you paste it into your page. Most online systems like that much better. Use the 'Tools' > 'Beautify' > 'Compress HTML' command in Arachnophilia.