How to do basic html

First of all, you should look at the page source or this page won't make any sense. To find the page source (which is to say, to view all of the HTML used to make this page look the way it looks) on most browsers, pull down the "view" list along the options bar at the top, and click on "view source", or "source", or something similar to that.

So, terminology. "Tags". In HTML, tags are things within greater-than and lesser-than symbols around them, like the word "strong" around "Tags" earlier in this paragraph. For the purpose of this page, when I'm trying to refer to using tags without using them, I'll use parenthesis "()" instead of greater-than and lesser-than symbols "< and >" (< and > if you want to have them appear in the browser window) because if I use those, it'll actually be a tag, and would make this page look even funnier when you're not viewing the source. And that won't do, cause you need to be able to see what the tags do clearly by referencing what this looks like displayed in a browser.

Tags define sections of text. At the beginning of each of these paragraphs is a (p) and after is a (/p), the "p" fairly obviously, stands for "paragraph". The "/" is to close the tag; to end that section of text. Same goes for (strong), which is, for reasons I'll get into later, the proper tag for making text bold. In between the opening tag and closing tag is srong, or the contents of that paragraph.

For some tags, there isn't a clear "begins here, ends here" sort of thing, it's just defining one thing. Like a line across the page:

For more recent versions of HTML, (which is to say, versions that are finally really starting to be standardized, which we like, cause it means different browsers show things the same way as each other, so people see your page how you want them to.) it's rather important to always close your tags. That means, like with that line, it's (hr /) not just (hr).

Now, on to some other useful things.

Oh, first - note that headings (h1), (h2), etc, don't need (p) tags. Neither do lists:

(ul) and (/ul) surround the entire list, and (li) and (/li) surround each line on the list.

Here's some simple stuff people use constantly:
The (em) tag stands for "emphasize", which in text appears as italics.
The (strong) tag makes text bold.
The (u) tag does underlining.
The (br /) tag I just used four times, ends the line but not the paragraph, so there's no empty line before the next text. You just use a single opening and closing tag for this.
(font size="5") makes text a different size, more on your options there later.
(font color="#55BB33") makes the text some different color. More on why the funky code for colors and how to use it later.

This tag is really hard to grok, eh? (it centers the text)

This one is a bit less obvious I suppose.
It makes the text stick to the right side of the screen, rather than the left.
Also notice, I'm using (br /) here, that's a line brake that doesn't end the paragraph, i.e., no empty line before the next line of text
It's pretty useful.

Links and Pictures:

Now by now you're probably thinking "what about links! I want to make links! Links! Links! Links! and I want to have graphics!"

Links:

Okay, so links it is. To make a link, you do this: The words that appear for you to click on go here. There's two sorts of things you can do for where I wrote "The URL goes here". You can put a full URL for the page you're linking to, which would look something like this. Or, if you're linking to another page on your own site, you can do it like this. To do the second option, the file your linking to has to be in the same folder on the server... or, uh... you can also do something like this to link to a file in a different directory.

At any rate, the tag is always (a href="wheretolink")words you click(/a), and using the full URL should always work, so long as you spell it right. (I suggest cutting and pasting from a browser if you have doubts.)

Pictures:

The tag to link a picture looks like this: (img src="nbtsc.gif")

And here's what happens when you really use it:

The name of the image file (usually a .gif or .jpg file) goes between the quote marks, and make sure to have said image file in the same folder with the file you're putting it in.

You can also add (alt="foo."), i.e., it would look like this: (img src="nbtsc.gif" alt="foo.")

Go to the browser window and hover your mouse cursor over this photo: foo.

Also, to get real fancy, you can surround the whole thing in (a href="linkythingy") (/a), like this:

foo.

Now the image itself is a link. It would be a more useful one if alt="foo." was alt="booya", so you knew where you were going, but I wanted it to be clear which tag does what.

Other important stuff:

Make sure your file begins with (html) (head) (title) (/title) (/head) (body), before any of the text for your page, and (/body) (html) after all the text is done. Between the two (title) tags goes the text that appears at the top of the browser. Between the (head) tags goes some other useful stuff like telling your browser if it should look for a Cascading Style Sheet. As for (html) and (body)... you want the very first thing, and the very last thing in every html file, to be (html) and (/html) that tells browsers and such what kind of code it's looking at - what language you're using - so it can display it properly.

Between the opening and closing (body) tags is where all the html tags and text for your page goes. Also, there are some things you can set for the whole body of the text. For instance, if you add bgcolor="#000000" inside the opening (body) tag, the background color for the whole page will be black. And if you do that, you'll probably want to change the text color, so you can read it. Perhaps to white: text="#FFFFFF". So the (body) tag at the beginning of your page would look like this: (body bgcolor="#000000" text="#FFFFFF")

So, remember, where I had (parenthesis) around tags, you need to use greater-than and lesser than symbols: < > < >. And remember to close your tags.