Siphor's HTML Guide

The purpose of this tutorial is to put an end to the belief that HTML is some foreign language that only the geekiest of the geeks can understand. In reality, programming with HTML is the equivalent of talking to a five year old.

With that in mind.. lets begin.

First off a little history lesson. Now dont freak out, I'll make this quick..

First, there was no internet

Then, there was the internet

People needed a way to make web pages standardized

Nerds create HTML

See, that wasnt so bad now was it?

What is HTML?

Hypertext Markup Language

HTML is the text that a web browser (internet expolorer, netscape, etc) uses to put together a web page. HTML code is put into a HTML file. All an HTML file is is a text file with the ".html" extension. You can also use .HTM, but that was from the ghetto days from windows 3.1 where you could only have 3 character file extensions.. so I dont use it. Does it change the file? No, not at all. But like I said, its ghetto.

HTML code is a bunch of commands that you put into the text file. These commands correspond to what you want your web page to look like. All html codes, which are more commonly known as HTML Tags will look like this:

<stuff goes in here>

All HTML tags begin and end with < and >

Starting to build a page

A basic HTML file looks like this:

	<HTML>
	<HEAD>
	<TITLE>Page Title</TITLE>
	</HEAD>
	<BODY>

		(all your tags that build the page go in the body section)

	</BODY>
	</HTML>

Now, lets look at a breakdown of what all this means:

<HTML>
The <HTML> tag tells a web browser that the page it is loading is an HTML page.  The
browser then begins to process all the the HTML tags in the file, since it now knows it is
dealing with an HTML file.

<HEAD>
The <HEAD> tag sepcifies the beginning of what is called the "header" of the HTML file.  
The header contains information such as the page title, javascript commands and meta tags (both
of which will be described later).  And of coure, </HEAD> deliniates the end of the header.

<TITLE>
This specifies the title which appears on the taskbar of the browser window.  For example, at 
the top of this page it says "Siphor's HTML Guide".  That is what is in my title tag.

<BODY>
This is by far one of the most important tags in your page.  It marks the beginning of
the body of your HTML file.  The body section is where the party is happening.  In the body
you define all of your tags which makes an HTML page look the way it does.  Everything from 
links to pictures to tables, this is where it all happens.  In the body tag is also where you
specify what colors your site has, but we will discuss that later.

</BODY> and </HTML>
These tags close off the body and end the HTML file.

Getting Started

I'm sure that you've all heard of these nifty wam-bang programs for creating HTML files.
I'll tell you this right now, they are all crap if you are trying to learn true HTML. When
you actually learn HTML, these programs will make it simpler, but what good is it to use them
if you dont know what the hell you are doing, or what the program is doing? That is why I'm
going to make you learn the hard way: with notepad. So to get started, open up notepad..

And there is is ladies and gentlemen: your HTML creator. Yep, spiffy isn't it? So, after
all that excitement, lets get started..

As I said earlier, all an HTML file is is a text file with the HTML tags in it, and that is
what we are about to create, a text file (the reason for using notepad) with HTML tags in it.

Step one, lay out the basics
As I showed you earlier, there are a few tags that all html pages have, the html,
head, title, body tags. Go ahead and put those into notepad, or you can just cut and paste my example.

Once you have done that, go ahead and save. Now when you save, you need to add that .html extension,
otherwise the page wont load as an HTML page. To do this, when you go to save and it comes up with the line
for putting in the file name, simply put a .html after it. Example:

Hit save, and you're done.

Step two, make your presence known

Now lets start customizing this page. In your body section put some text, and text, a
simple "Hello World" will even do. Once you have done that, save it and open the file. Open it
by going to the directory and double-clicking the file you saved it as. Since you saved it with the
.html extension, windows now knows that it is an html file, and it opens it up into internet
explorer (or whatever your default browser is). Your page as of yet should look like so:

..Terribly exciting. But dont worry, we're getting there.

Step Three, colors

For those of you that buy orange backpacks and yellow shoes, this is section is for you: setting up some basic clors.

To setup the basic color scheme for your site, we will be putting paramaters into the <BODY> tag. A paramter
is something you put into a tag the specifies some extra settings for that tag. In thise case, we are going to be using the
following paramaters of the body tag:

BGCOLOR - This paramater defines the background color of the page.
TEXT - Defines the overall color of the text on the page.

Now, you're probably wondering what to do with these paramaters. It is best shown by example:

This shows how you add the BGCOLOR paramater to the <BODY> tag. Inside of the " " is where you specify the value of
the paramater, in this case, the color. Using the text paramater is just the same:

Now, for simplicity, the people who designed HTML were nice to us, and made it so that you can put more than one paramater into
a tag at a time, like this:

Go ahead and add these paramaters to your file. Hit save, and then refresh/reload your browser to see the changes. And,
voila:

Now, for you art nuts out there, HTML isn't very smart, and it doesnt know what the color toupe is.
For that, you have to use hexedecimal numbers, or Hex Codes. These are 6-character
codes for specific colors. For example, here is a dark blue with hex colors:

It is not practical to explain the breakdown of these numbers, so some people have been nice enough
to create a table of common colors and their codes. Go to this link and take a look at the colors
and their codes: http://hotwired.lycos.com/webmonkey/reference/color_codes/

You can then take these codes and use them to get that specific color that you want. Note that you must
put the # in front of the number within the quotes, otherwise there is a chance that your color
will look like poop instead of pink.

Step Four, text formatting

This is the part where we start putting some content into your page, so I hope you have a lot to say. There are several different
ways to put text into your site. The first and easiest way it to just type it into notepad, and it will show up, as you found
out with our "Hello World" example. Now if you havent noticed it by now, notepad does not give carriage returns when it hits
the end of the screen, rather it just keeps going. That is fine, because if you are just typing text in, it will automatically
wrap the text to the next line when it hits the edge of the browser window. Example:

As you can see, I made the browser window smaller to demo the fact that it will wrap the text at the end of the browser window.

Now here is the tricky thing about just pounding away at the keyboard: If you put in a carriage return yourself,
like so, it wont show up in the web browser:

Why not? Because you have to put in a carriage return with the <BR> tag, like so:

asdf