Basic Understanding of HTML

Basic Understanding of HTML

If you think that all the code looks like 'cave paintings' and your worried you might 'crash your computer', then don't. If you type the wrong code, forget to 'close a tag', or forgot to end a command; you will cause absolutely NO Damage to your system. You might, however, learn something!
The worst thing you can do is delete something you wanted to keep and Not Have A Back Up Copy!
So this is the only Golden Rule you need remember: Alway keep a 2nd copy of your work and while working, hit "Save" often.
With this in mind just use my favorite Einstein's method of learning. Don't try to memorize what is already documented some where, just know how to look it up. Now let's take a look at what makes a web page work and how you can build and post your own on "The Web".

OK, now the idea here is to use the KISS principle, Keep It Sweat 'n' Simple. Remember, we are just building a freebie web site, some where you can call 'HOME' on the Wold Wide Web, some where you can share some photos and ideas, just a little piece of real-estate on the web you can call Your Own.

HTML (Hyper Text MarkUp Language) is the common language of the World Wide Web. It lets all our different computers and Operating Systems come together and communicate in a common language they can all understand. HTML is nothing more than a set of "Tag Commands and their Parameters" placed within < and > marks. These "Tags" and the parameters we assign them will tell the browser how to display the page and it's contents.

For example, if we remove all the contents on this page except for the background stationery, we would have a simple HTML web page skeleton script that would read like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" CONTENT="Arachnophilia 3.9">
<META NAME="FORMATTER" CONTENT="Arachnophilia 3.9">
</HEAD>
<BODY BACKGROUND="side.jpg" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK=ALINK="#00ff00">
(The text and any images, forms, links, etc. would appear in this area
along with their <Tags> to inform the browser how they should be displayed.)
</BODY>
</HTML>

Keep in mind the Arachnophilia color code I mentioned in Section 1; BLUE is for the Tags, GREEN is for the Tag's Parameters. Since we have stripped the text and any pictures, I have indicated in RED where the page contents would be have been located (like..........between the <BODY> and </BODY> tags?! Are we starting to make some sense?)

Let's take a quick look at each tag:
Tag #1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
This line starts with <! and is called a "Comment Entry", this will be invisible when opened in your browser. It simply identifies the particular type of HTML document and is usually filed in by your editor so don't worry about it for now. However you can use the <!............> markers to include hidden comments, reminders, or instructions anywhere within your HTML document.
Tag #2
<HTML>
This is the begining of the HTML code. All beginings have to end some where so the very last two lines of your document will always be </BODY> followed by </HTML>. The "/" symbol is called the "Not" sign in this case and is used to terminate the origonal Tag Command.
Tags #3 ~ #7
<HEAD>
<TITLE>(give your page a title here)</TITLE>
<META NAME="GENERATOR" CONTENT="Arachnophilia 3.9">
<META NAME="FORMATTER" CONTENT="Arachnophilia 3.9">
</HEAD>
This area is called the "Document's HEAD". For now you won't need to worry about this section either and most will be filled in by your editor. Another type of tag will also appear within the <HEAD> and </HEAD> called META tags, you will discover their uses later. Just remember that everything btween <HEAD> and </HEAD> is invisable when displayed in the browser. You can however fill in a title between the <Title> and </Title> tags, however this is not text that will show in the browser; that's next.
Tags #8 and #9
<BODY BACKGROUND="side.jpg" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK=ALINK="#00ff00">
(The text and any images, forms, links, etc. would appear in this area
along with their <Tags> to inform the browser how they should be displayed.)
</BODY>
These are the HTML tags you will be working between (where the RED notation is). This is the 'meat' of your web page! Between these tags you can add all kinds of stuff like text, tables, pictures, forms, links, embed other language scripts like Java and Visual Basic.
Now remember we did not remove the background image. This is considered a 'Tag's Perimeter', telling the browser how to display the body's background and will be listed inside the <BODY> tag (remember the 'perimeters' above are listed in green). You should be able to find it listed as "side.jpg" inside Tag #9.
The other parameters you see inside the Body Tag refer to the default color of the background, text, and any links you add to your page. Also note at this time how all the parameters are listed inside "....." (quotes). Don't forget to close all your parameters with that second " and close all your tags with the a right facing >.

Fonts

Now let's examine the most basic of all tags, the  tag. This is the tagging system that will control how the browser displays text on your web page. You can control the text face (type of font), size, color, make it bold or italic (always remember to terminate your tags with a coresponding </....> before changing to differnt perimerters).
Just remember that you need to use a font type that you are pretty sure your visitors will have on their computer. The most common to go with is "New Times Roman" or "Arial" (also commonly used is "Comic Sans MS"). Fonts to do not get transmitted and if your visitors do not have what you select then their computer will switch to it's default font, this can drasticaly change what you thought they where going to see. For now, the only why you can use a fancy font it to create is as an image. Remember images take up a lot of disk space and dramaticaly slow down transitions (hint: K.I.S.S. it).

Here's how it works, you type and your text changes to the 'Comic Sans MS' font and in Red. Then you type and it returns to the font's default (in this case Times New Roman and black). Where  and  is the HTML Tag Command and "Comic Sans MS" and "Red" are the command's parameters.
Currently this font is size "3" but if we change the HTML code to read then we get size 1 until we type the code and we return to default.
(hint: I set the default size between the <Head> tags at the top of this page's code. The <Style> tag we'll just consider "Advanced" for now as you don't really have to use it.)
So, is any of this making sense yet? Now if you wanted to change the font to bold just type and bold you get, until and we're back to normal.

Test time! What do you think and would control?
(If you give up, you go to the bottom....of the page)

Paragraphs

Now we know how to control the font; it's color, size, weight, italic, and under line. But we also need to control spacing and paragraphs. As mentioned a moment ago there is a tag called <STYLE> and there is a technique called Cascade Style Sheets (CCS), but these are a bit heavy if this is the first attempt to build a web site. There is also some browser compatability issues with some of these styles, but there is a simple way using some very basic tags.
In HTML the begining of a paragraph starts with and ends with . This will cause the type to end the line at the , skip a line and begin the next sentence at the next (forget to start the next text without the , and it's anybody's guess where it will align itself).
If you want to begin a new line but with No blank line between then force it down with a "BReak" command like this: .
I'm going to add another one right here 
and now I'm down here, got it? Now I will use the

and we pick back up here. Now remember, some of these tag commands can be further detailed by adding parameter definitions. To align the text to the left side of the page, as we have been doing in this document, we add the parameter like this

Type your paragraph 
into this area here.

The other alignment parameters would be "center" and "right".

Now it gets a bit tougher (untill you take the time to learn 'style sheets'). Basic HTML does not recognize the "TAB" key on your keyboard the way a word processor would. But it does have a "character string" that the browser processes as a 'blank space'. If we type & n b s p ;(without any spaces), we would have and extra blank but the browser will not put the   on the screen (oops, then why did that one just get printed? we'll get to that in a moment).
To create multiple spaces, just keep adding        . And to make it easier, just type it out once and then use the "COPY" and "PASTE" features of your editor. You'll find your self doing a lot of copy and paste, let your 'tools' do as much of the work for you as they can. You may find (on lucky days) that to add a new page to your web site, half the 'work' was already done on your previously completed page. Just copy and paste away!
Big Hint: You can look at the HTML Source Code of most any web page on the World Wide Web. Start looking at what others have done, unless there is a trademark waning, just copy and paste from others and you will begin to pick up on it. But if you are not sure if something is trade marked you should always ask the owner. Most web site owners are more than happy to share with newcomers, especially if you offer them a link on your pages! But always show your respect and 'give credit where credit is do'.

Character Reference Codes

Now before we start working with something fun, like adding a photo to your web page, let me explain why the   above wasn't hidded by your browser. HTML has a small set of 'Special Characters' that it reservers for Tag Commands. These Special Characters are as follows:
< and >
And under some conditions: &(ampersand) and "(quotes)
When these characters are required as text on your web page (remember that & and " will rarely be a problem) then you will have to use the following "Character Reference Codes":
< = <
> = >
& = &
" = "
And to force the   above to print on your screen, I just typed &nbsp; (take note how all of these begin with an & and end with a ; .

Inserting Images

Now let's put a picture on your page!
We will use the <IMG> tag. Note: there is No < /IMG > required for pictures, all the picture's parameters will be inside a single <tag>.
First we need a photo for examples. I just happen to have a naked photo of my girl friend we can use:

Darn! I can't find it but I do have this photo of Godzilla wearing only a leather harness:

That's what he thinks. Come on baby, Kiss me, I'm Cuban!

(Calm down ladies, I believe Godzilla already has a crush on this little squirrel that's been hanging around)

The code used to insert Godzilla's pic is:
<IMG src="godzilla.jpg" WIDTH="150" HEIGHT="89" border="0" align="middle" alt="That's what he thinks. Come on baby, Kiss me, I'm Cuban">
(Notice the alt= parameter, then hold your mouse over the picture.)

Note the different parameters (values inside the quotation marks) you can assign to your images. It is best to always fill in the Width and Height of your images, you can get these values from most good art programs and from most browsers you can Right Click and click on "Properties". The Align values are: "right", "middle", and "left". You can also get some interesting effects playing with the border, width, and height values. Go ahead and experiment, you can't hurt anything as the worst that will happen is you get the "Missing Image" symbol like the one where my 'girl friend' was going to be. Don't forget you can also use Animated .GIF pictures, like this one:

(If you use Win95 or higher, Microsoft now offers a Free GIF maker)
(There are also several On-Line GIF makers for all to use!)

Basic Cut-n-Paste Template

That's all there is to it! If you have kept up than you are now familiar with the bare bones BASICS of a simple, yet effective Web Page. My recommendation now would be to start your own page (if you haven't already done so).
To get you started just open up your text editor of choice (Note Pad, Note Tab, Simple Text, Arachnophilia, or what ever you find best), then highlight and copy the following code and paste it on your new web page in the editor
{this will not work in a WYSIWYG editor unless you are in the code editting screen - try it Both ways, see what happens, You Can't Hurt Anything!}:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BACKGROUND="" BGCOLOR="white" TEXT="black" LINK="blue" VLINK="orange" ALINK="green">

</BODY>
</HTML>

The first thing you want to do before editing is "File" "Save As" and give your page a file name (probably 'index.html'). Then, using the Paragraph and Font tags, type in your text. Use the Image tag to add a couple pictures. You can change the background color by editing the BGCOLOR parameter or add your own background picture by placing the file name between the " " where you see BODY BACKGROUND=" ".

One last note on colors. While you can just type 'red', 'blue', 'yellow', etc., you should really get used to using the HEX Code for these colors. You can download a FREE Color Prieviewer at Sven's Stationery that will run in your browser or download a cool little FREE Color Picker program that lets you copy and past the HEX right into you HTML code, you can find it at:
Rimrock Software
http://www.rimrock.com

Now we are ready for some real fun in Section 3 where we'll livin your pages up! And then we'll get them on the web in Section 4.

But above all, Have Fun!

How to build.... | Section 1 | Generic Tool Bars | Section 3 | Section 4 | Index {Resource Links} | My Home Page

Answer to font tag question:
 changes your text to italic
 will under line your text

HTML Page 3 of 8