<<LEARNING HTML BY EXAMPLES>>

---- The following procedure is based on windows xp browser.

Welcome! You are here because you heve the desire to learh how to write fancy text and place those beautiful pictures on a web-site you are hoping to build I presume. If so allow me to start at the begining as I had to learn the hard way and hopefully help you to save a lot of time by avoiding some of the half-ass presentations which have no comprehensible begining for the new comers.

If you been looking around the internet you most likely found sites more apealing than this one. You most likely found HTML codes you would like to work with, but nobody told you where to shove these codes.. or did they.

From my experience the best place to start is right in your own computer. For this you will need to create an editor the place where your codes belong.

The procedure below will guide you step by step how to do this.

1. Go to START point to Programs then Accesories then Select and click Notepad.

2. When the notepad opens point to file and click "save".

3. Now you will be prompted to make some choices on a form.

A. On line "Save In" select the file area where you want the document to be saved. For example "my documents".

B. On line "File Name": name your document as for example; "notepad-editor".

C. On line "Save as type": select all files.

D. On line "Encoding" select UTF-8. and "click save".

Now go to the area where you saved your "notepad-editor", and make several copies for your future html documents so you don't have to repeat this procedure again.

Name one of your new html templates "somename.htm" click to open it and type or copy and paste the following:

<html>
<head>
<title>My First HTML Document</title></head>
<body>
This is the body of your document. Here is where you can show your stuff with text and images. </body>
</html>

Click file and save this work, then reload/refresh the page.
You should see the text written in the body section; This is the body .... text and images.

If you can see this you are on your way to fame, ... well at least feel good.

Below are most of the essentials you'll need to practice.

The color of text is defined by the "font" element and the attribute "color".

This will be my first attempt at making a blue colored paragraph.

This will be my first attempt at making a blue colored paragraph.

Controlling the size of text.

A green color sentence font size 4.

A green color sentence font size 4.

IMPORTANT
1. The font sizes can vary from -3 to 7. Size 3 is the default value.

2. Each example has an opening tag for example and a closing tag It is very important that the closing order be done starting with the latest closing tag and working backwards to close each tag in the correct sequence.
In the above example the closing tags were; the correct order.
3. Here I used colors by their name for the purpose of demonstration. I encourage you to use the hexadecimal numerical color codes for good reasons as you will learn later in your journey.

That's all there is to font essentials; "color" and "size". Now let's see how we can incorporate the various styles availabe to spruce things up a little.

Adding style. There are several style elements to choose from: they are: b, i, tt, big, small, strike, s, and u elements.
The b style; bold text.

This is a maroon color sentence using the "b" style element.

This is a maroon color sentence using the "b" style element.

The "i" style: italic text.

This a is color purple sentence using the "i" style element.

This a is color purple sentence using the "i" style element.

The "tt" style: typewriter text.

<tt> This a is color darkred sentence using the "tt" style element.</tt>

This a is color darkred sentence using the "tt" style element.

The "big" style: big text.

<big> This is a color dodgerblue sentence, using the "big" style element.</big>

This is a color dodgerblue sentence, using the "big" style element.

The "small" style: small text.

This is a color darkblue sentence, using the "small" style element.

This is a color darkblue sentence, using the "small" style element.

The "strike" style: a line thu text.

<strike> This is a color darkorange sentence, using the "strike" style element. </strike>

~~This is a color darkorange sentence, using the "strike" style element.~~

The "s" style: a line thru text.

<s> This is a color black sentence, using the "s" italic style element. </s>

~~This is a color black sentence, using the "s" italic style element.~~

The "u" style: underlined text.

This is a color navy sentence, using the "u" style element.

This is a color navy sentence, using the "u" style element.

Now that we know how to decorate text let's proceed to learn how to form sentences and paragraphs.

To start a new line in your document use the line break 
To start a new paragrap use two line breaks. 

EXAMPLE SENTENCE
This is an example sentence. 
This sentence begins a new line.

EXAMPLE PARAGRAPH
This is an example paragraph. 

This is the begining of a new paragrahp.

As time allows I will suplement this tutorial by showing you how to transfer the pages you created in your computer to the internet.