HTML How-To Guide For Beginners

First of all, remember that HTML is very simple,anyone can do it! It only looks hard, but that's just so that the computer nerds can look smart. The trick is to remember a few key points. Once you get started, it's hard to forget which tag means what.

#1- IMPORTANT!!!
• HTML stands for Hypertext Markup Language. This may seem trivial. But don't you feel silly when everyone makes you out to be an HTML wiz after reading this and some smart alecky kid asks you what it stands for. Dumbfounded. So, if you're to be a true computer nerd- at least know what this means!!!

A Note About This Tutorial

HTML tags are letters enclosed in < and >. But if I used examples like that, your computer's browser would interpret that as HTML and you wouldn't have any examples to follow. Now that would be silly! So, in order for you to see what you'd actually type in I have changed all the examples < > to [ ]. Sorry for the confusion! Just as a note, when copying tags, just change these!

#2- IMPORTANT!!!
• When typing in the letter case DOESN'T matter!!! So for example:
  [BLA BLA BLA] , [bla bla bla] and [BlA bLa BlA] would all mean the same to your browser! By the way, these are not REAL HTML tags that I know of...

#3- IMPORTANT!!!
• If your browser sees something between [ and ], it puts it into HTML. If it is not a known HTML tag, it is ignored. Don't accidently write important stuff between [ and ] then because it will not appear on your web document.

#4- IMPORTANT!!!
• HTML works by starting and ending tags. A starting tag looks like [BLA], and ending tag would have a slash in front of it like this: [/BLA]. If the ending tag is not there, it could royally mess up your HTML document. Your browser may read it wrong, or your page may not show up at all! The only tag that doesn't really need an end tag is the [P] tag. (More about that later!) When your browser sees another [P] after a previous one, it automatically begins a new piece of text.

The First Basic Tags You Will Use:

These are the very bones of every HTML document!
1. At the very beginning of a document (first tag) should be a tag like this. [HTML] This informs your browser that it should translate the HTML into what you see.
2. Similarily, the last tag in your document should be [/HTML]. this tells your browser that the document has ended.
3. If you look at the blue bar on top of your page, you will notice that a brief description of the page is written there. You control that with the title tag. Assuming I wanted the title to be "Barf is Disgusting", I would type: [TITLE] Barf is Disgusting [/TITLE]
   *NOTE*- The casing of the text inside tags DOES matter! That's how it appears on your final web document.
4. After the title tags, there should be a body tag [BODY]. This means that you have reached the bulk of the webpage. There is usually only one body! Your second last tag should be [/BODY] !
5. The paragraph tag controls when the browser shows a new paragraph. It looks like [P]. At the end of a paragraph, there SHOULD be a [/P] tag.
   *NOTE*- There doesn't always have to be an end paragraph tag, but it's useful for a few reasons:
   It helps you keep track of what piece of HTML starts and ends where.
   It helps browsers run things smoothly.
   It's useful for anyone reading your HTML, they can read it much easier!!!
6. The last basic tag would be the line break tag- [BR]. It is used whenever you want a new line, but not necessarily a new paragraph. I use it mostly for around pictures, links and other things. You DO NOT need an end tag for this. So do not ever put a [/BR] tag. This is an exception to the rule!!!

Below, is a simple HTML document without any of the added extras.

[HTML]
[TITLE] I Like Cows! [/TITLE]
[BODY]
[P]Cows are amazing animals, they look like this:[BR]
-They are white with brown or black spotts. They have horns too![/P]

[P]I once saw a cow. It licked my hand. It was kind of gross though, because it had a big booger coming out it's nose. Eeew! [/P]
[/BODY]
[/HTML]

Here is what the same HTML document would look like below when finished. (Just imagine that you see 'I Like Cows!' in the blue bar overhead!) Here it is:

Cows are amazing animals, they look like this:
-They are white with brown or black spotts. They have horns too!

I once saw a cow. It licked my hand. It was kind of gross though, because it had a big booger coming out it's nose. Eeew!

#5- IMPORTANT!!!
• When writing HTML, try to keep groups of tags seperated into chunks. That way, when you look at the page, it's clear and easy to read. It you've made a mistake it's very difficult to find it if everything is squished together! So start new paragraphs when you start a new HTML segment! You can add as many new lines as you want, your browser ignores them, unless they're made by paragraph or line break tags!

Headings

You can add headings too! They rely on a relatively simple range of tags. The first tag should be around the title tags. It looks like this: [HEAD] and [/HEAD]! So: the tags should be like this:
[HEAD]
[TITLE]COWS ARE COOL[/TITLE]
[/HEAD]
The basic heading tag for the rest of your document has six levels. 1 through to 6. 1 being the largest. You shouldn't skip levels of headings. So, if you start with a level 1 heading, don't use a level 3 heading next! The tags look like this:
[H1] [/H1] [H6] [/H6]
You just add your text inside the tags, like paragraph.

If the headings confuse you, you may like the emphasis tag. It usually displays the text larger and in italic. It looks like this:
[EM] text [/EM]
You don't have to put a space at the start and end of your text, but it looks cleaner when you read the HTML!

ALIGNMENTS

For example, you wish to align text. You have to start a new paragraph for this. (Your whole paragraph will be centered!) Simply type:
[TT] [P ALIGN=CENTER] [/TT]
Isn't my text beautiful!!!
[/P]
When displayed on a monitor, it will look like this:

Isn't my text beautiful!!!

#6- IMPORTANT!!!
• You can change the tag to align right also. Just switch the word center with right. You can do the same for left, but it's quite pointless! The default on your browser is to align left, so there is no need to tell it to do so!

LISTS!
You can make bulleted, numbered and definiton lists with HTML. The tags are relatively easy to remember.
Bulleted (Unnumbered) Lists use the [UL] and [/UL] tags. To add an item to the list, use the [LI] tag, like this:
[UL]
[LI]apples
[LI]bananas
[LI]oranges
[/UL]
The result would be:

• apples
• bananas
• oranges

1. apples
2. bananas
3. oranges

Grapes

Purple or green fruits that grow on a vine. The best ones come from California!

Oranges

Orange fruits from trees. They have a peel. They are cut up and eaten! Always buy Florida oranges!!!

Formatting Text

To make your text bold, italic or typewriter style, use the following tags, respectively: [B] cow [/B] , [I] cow [/I] , [TT] cow [/TT]
It will look like this:
cow, cow,cow

LINKS!!!

One of the many great, grand, wonderful things about HTML is that you can make links!!! It is relatively simple to do, using the anchor tag! Check out the- you guessed it- sample below!
[A HREF="http://ca.geocities.yahoo.com/"] Geocities [/A]
You can change the link and the 'Geocities' text to whatever you want. The link is inside the actual tag. What you see is BETWEEN the tags! That's important. You can also put filenames in that space. ex.
[A HREf="jswd.mp3"]Joydrop- Sometimes Wanna Die MP3[/A]
One the screen these look like:
Geocities
Joydrop- Sometimes Wanna Die MP3
These links work. Try them! But- if you put filenames in your link- be sure that they are in your website's File Manager!!!

MAIL-TO
If you want someone to be able to e-mail you from your webpage, simply insert the following link:
[A HREF="mailto:youremail@whatever.com"]TEST HERE[/A]
This would look like this:
MAIL ME!!!
The previous was an actual link to my own e-mail. E-mail me if you have questions!!!

ADDING IMAGES!!!
Same as with the links, you need to have the image in your site's File Manager, but you use this tag:
[IMG SRC=yourimage] Which equates to this:

You can also have images as links, like this:
[A HREF="http://www.yahoo.ca"][IMG SRC=starnight.jpg][/A] which turns to this:

BACKGROUND, LINK AND TEXT COLOR

The default settings for your browser are probably black text, greay background. Don't despair, the drabness can be changed!!! Just enter the following tag after your BODY tag:
[BODY BGCOLOR="#000000" TEXT="#FF0000" LINK="#0000FF"]
The tag is fairly straightforward- background, text and link colors!
These color-number codes are hard to remember, but some basic colors are:

• BLACK=#000000
• WHITE=#FFFFFF
• RED=#FF0000
• BLUE=#0000FF
• SILVER=#9690CC

To change the font:
[FONT FACE="font"] at the start of the text, and at the end: [/FONT]!!!

This was only a very basic HTML introduction! There is alot more to learn. Check out this list of websites for more information:

• TUTORIAL 1
• TUTORIAL 2
• TUTORIAL 3
• TUTORIAL 4
• MORE COLORS