HTML Made Easy

This is my little tutorial to the world of HTML. I'm not going to teach you how to do frames or java (both are difficult to get to work correctly), but if you're interested there are lots of other great tutorial pages out there. Two of the best are HTML Source and HTML Goodies. My best advice is to just experiment a little, and see what happens.

The Very Basics:

All commands go between pointed brackets (<command>)
To take off a command, put a slash before the command (</command>) --not all commands need to be taken off manually

I recommend using Notepad to do all of your HTML work, but Word Perfect works too (use Word Perfect for tables). Just remember to save as ".html" or ".htm"

Hex codes (#cc0c0c0 and others) are confusing, and mostly unnecessary. You can substitute color names in for most of them, and I know you know the names of your colors!

Getting Started

First, put <html> at the top of your page
Then, make a title:
<title> Your Page's Title</title>
Then, format the body:
<body background="backgroundname.gif(or .jpg)" text="text color" link="link color" vlink="link color"> If you want a color for a background, and not a picture, write 'bgcolor="backgroundcolor"' instead of 'background="backgroundname"'

These facts will help you:
'background' refers to an actual picture file (.gif or .jpg)
'bgcolor' refers to the plain color of the background
'text' is the color of the words
'link' is the color that the links on your page will be
'vlink' is the color that the viewed links will be

The format for my page looks like this:
<html>
<title>So You Want To Make A Home Page </title>
<body bgcolor="white" text="black" link="blue" vlink="purple">

Don't forget to put </body> and </html> at the bottom of you page

Fun With Text:

Bold
Italic
Bold Italic
Underlined
<blink>Blink</blink>
Change the Color Information on colorcodes can be found HERE
Change the Face

<pre>Preformatted Text</pre>

<center>Center the Text</center>
Changing the Text Size: <h#>blah, blah, blah</h#>

h1

h2

h3

h4

h5

h6

blah, blah, blah

Lists

There are 3 main types of lists: Bulleted, Numbered, and Definition

Bulleted Lists:

This is an item
This is an also item
This is yet another item

<ul>This is a Bulleted List
<li>This is an item
<li>This is an also item
<li>This is yet another item
</ul>

Numbered Lists:

This is item number one
This is item number two
And this is item number three

<ol>This is a Numbered List
<li>This is item number one
<li>This is item number two
<li> And this is item number three
</ol>

Definition Lists:

: This my text. It can go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on forever

<dl>This is a Definition List
<dt>
<dd>This is my text. It can go on and on and on and on and on and on and on and on and on and on and on and on forever
</dl>

Images:

<img src="image name.gif(or .jpg)">
<alt="text that appears while the image is loading">
Sizes can be changed by placing 'width="#of pixels" height="#of pixels"' after the image name

Aligning Images:

You can align images compared to the text by putting 'align="placement"' (for horizontal placement) or 'valign="placement"' (for vertical placement) after the image's name, or after the size
Examples of Placements are: left, right, center, top, bottom, and middle

An example of image coding would be:
<img src="imagename.gif" width="350" height="300" alt="my message">

Links:

Links to Other Pages:
<a href="link url"> Link Name </a>
It will look like this on your page:
Yahoo!

E-mail Link: (sends e-mail to the named account)
<a href=mailto:someone@somewhere.com> Person's name </a>
It will look like this:
Caroline

Note: All links will appear underlined

Other Stuff:

HR Bars:

<hr> makes a bar like this:

<hr noshade> makes a bar like this:

You can change the size: <hr size=#>

You can change the width: <hr width=#%>

And you can use those in any combination: <hr noshade size=# width=#%>

Back to Fiction Page