But regardless of everything else the best way to learn HTML is to use it.
So now on to the basics...
HTML documents consist of a head and body put into the proper form.
This form usually looks something like this:
<HTML> -opens the document
<HEAD> -begins the document
<TITLE>
The title will not appear on the page itself, but is usually displayed in the browser window
</TITLE>
</HEAD> -closes the head of the document
<BODY> -begins the main part of the document
In here is where you place everything
</BODY> -closes the main part of the document
</HTML> -ends the document
Opening codes are surrounded with brackets (<>), closing codes are in brackets too but with a backslash (</>).
HTML is not case sensitive, there is no difference between <BODY>, <Body>, or <body>.
This is the <BODY> tag for this page: <body bgcolor="660066" text="99CCFF" link="0066FF" vlink="009999">
You can include any of the following items in the tag; bgcolor(background), text, link, vlink(visited link), or alink(active link); or you can leave any of them out.
to give your page a background image instead of a flat color you replace bgcolor with background="your_image_here.gif" any .gif or .jpg image can be used as a background.
The numbers and letters within the quotation marks represent the hexidecimal value of the red/green/blue combination
that make up that color. Here are a few common colors:
If you want more colors try this RGB guide it has hexidecimal values and an example of the color
Or if you find a color you like on another page, just view the page source to see the value for that color.
To change the color of text from the document default color to another color use the <FONT> tag. This is a good way to draw attention to something. This tag: <font color="FF0000">This is red text</font> will look like this:
There are two ways to tag HTML text, Logical style and Physical Style. If you tag something in a physical style it will always be displayed that way. Whichever one you use Physical or Logical, make sure you use it throughout the document, dont mix the two. Physical style is what i use so its what i am going to explain.
Bold
To make text bold you use the bold tag. This tag: <b>This is bold text</b>; will look like this:
Italic
To make text italic you use the italic tag. This tag: <i>This is italic text</i>; will look like this:
Typewriter text
I dont really use this one much, but anyways...this tag: <tt>Typewriter text, i.e. fixed-width font</tt>; will look like this:
So much for text styles.....when you want your current line of text to end and start a new one below it use the <br> tag.
When you want to end the current line and then skip the next line use the <p> tag.
To change the text font you use the <FONT> tag. This tag: <font face="Comic Sans MS">This is the Comic Sans font</font> changes the font to Comic Sans (of course you can use whatever font you prefer) and looks like this:
The <FONT> tag can also be used to change the size of the text(without using headers). You can use any size, try a number and see if you like it, but remember not to make page text too big, this is good for drawing attention. This tag <font size=+3>This is the font 3 sizes bigger</font> makes the font bigger (or smaller) and looks like this:
Headers
There are six levels of headers:
<h1>Level one header</h1>
<h2>Level two header</h2>
<h3>Level three header</h3>
<h4>Level four header</h4>
<h5>Level five header</h5>
<h6>Level six header</h6>
headers appear like this:
Oh and one last little tag...the <Blink> tag. This tag draws attention too...but it can get very annoying, so use it carefully, it can also be used with images. This tag: <Blink>This is blinking</Blink>; will look like this:
Of course you can use any of these tags together to get whatever result you wish. Like these:
Of course if you want your text to appear exactly as you type it with tabs, multiple spaces, and line feeds. Use a <PRE> tag and your text will display exactly as you enter it in a fixed-width font. Example:
Using the pre tag will keep everything where you put it.
It will keep line breaks, tabs.....stuff like that
And especially spaces like this.....
This is a Bullet list:
<ul>
<li>item one
<li>item two
<li>item three
</ul>
and appears like this:
This is a Numbered list:
<ol>
<li>item one
<li>item two
<li>item three
</ol>
and will appear like this:
You can control the appearance of the line. Thickness is controlled by size=number, alignment by adding align=left/center/right, and width using width=number%. You can create a black line by adding noshade. Note: most of the seperator bars used on web pages are not made with the <hr> tag but are graphic images like this one:
this tag: <a href="#index">Index</a> will appear like this:
this tag: <a href="wav.html">Wavs, Wavs, Wavs, and well you know</a> - my wav page will appear like this:
Wavs, Wavs, Wavs, and well you know - my wav page
You can also use an image as a link in place of text or in conjunction with it as shown in the image section.
This tag will display the graphic "YIN_YANG.GIF", so long as it is in the same directory as you are reading from. And it will display like this:
I have the above image centered (as with all my examples), but you can align it to the right or left. You can combine images with other elements of your page such as links and text, they can be aligned top/middle/bottom with surrounding text.
This is Yin & Yang
This button is a link to the Index with the border visible
You can display the image as a link without the border by including border=0 in the img tag
When displaying images it is usually best not to include to many on your page. They can cause your page to load very slowly.
Including the image width and height (given in pixels) in the image tag gives the illusion of the page loading faster, when a browser reads the image
it will start to load it but will skip down and continue to load the rest of the page without having to wait untill the image is fully loaded.
It is also good to include the ALT command in the image tag, this displays whatever ALT equals and is lets someone with a text only browser
or someone with graphics turned off know what they are not seeing. A tag with these looks like this:
is a link to the Index
You are visitor #
Oh and why your here...please sign the guestbook and tell me what you think of my HTML page
Sign the Guestbook
View the Guestbook
This page hosted by 
Get your own Free Home Page