General HTML Guide: Basics of HTML

BASICS OF HTML
Introduction
Common Tags
Not Covered

INTRODUCTION

Some things to remember:

All HTML pages are built with predefined tags.
HTML tags come in pairs; opening and closing.

e.g. - <html> ..... </html>

As you can see, closing tags are basically a mirror of the opening tag but with a backslash added. It is, however, very important that you include a close tag for every open one. Miss one and the web page falls apart. There are a few exceptions though.
All web pages are built with the <html> tags. It signifies that the document is a HTML document. Without the <html> tags the document becomes a text document.

Here is the basic layout of a web page:

    <html>
    <head>
    <title> ..Title Goes Here.. </title>
    </head>

<body>

..Contents Go..

</body>
</html>

<head> and <title> tags are actually optional but almost all pages have them.
Most new HTML Editors also include the <meta> tag in between the <head> tags. It's used to identify the subjects of your web page to search engines. More on this in EXTRAS.
Note that all actual web page content will be enclosed in the <body> tags and is itself enclosed in <html> tags. The <body> tag, while it's a must, may be switched with the <frameset> tags. More in TABLES & FRAMES.

COMMON TAGS

Now we come to the more interesting part of web publishing; the <body>.
Here is an impromptu list of tags we will cover here:

The <h#> and <font> Tags

The <h#> tags are generally used to create headings of different sizes. <h1> being the biggest and <h6> the smallest. Another way of changing font size (and color, type while you're at it) simply by using the <font> tags. Here's how:

To change size:

fill in the # with a number preceded by a + or - sign
to indicate an increase or decrease in font size

To specify font type:

To change font color:

follow this link to a page with colors and their respective values.

The <ol>, <ul>, and <li> Tags

The <ol> and <ul> tags are used to create lists. The first is for Ordered Lists, hence <ol>. The second is used to create Unordered Lists, hence <ul>. The <li> tag represents the dot or number before the item listed and DOES NOT REQUIRE A CLOSE TAG. This is one of the few exceptions mentioned at the beginning. A list would look like this:

The <br> tag is the equivalent on hitting ENTER on your keyboard.

The <pre>, <u>, <b>, <i>, and <p> Tags

<u> - underlines whatever text enclosed.
<b> - text becomes bold.
<i> - change text to italics.
<p> - indicates a new paragraph. DOES NOT REQUIRE A CLOSE TAG. Add the </p> anyway, just in case.
<pre>- Used for preformatted text. Prevents the HTML Editor from doing anything to it.

The <blink> and <center> Tags

<blink> speaks for itself. Makes text blink on and off. Great way to attract attention and annoy people.
<center> also speaks for itself. Used to center just about anything.

The <a> Tag :)

Now here is a very important tag. All links you see surfing the web use it.
With this tag, you can make just about anything into a link.
Example:

Note that it is used along with 'href'. 'href' is basically the pointer (points to the destination), and <a> is like the anchor to this site. Only the text 'OU Home Page' will appear on the site, highlighted to indicate it is a link.
Image links are covered in IMAGES.
Linking within the same page (ever wondered?) is in EXTRAS.

NOT COVERED

Advanced uses of the common tags (try experimenting).
Newer and obscure tags.