HTML Basics

Getting Started with HTML:

Skeleton of an HTML Document

HTML stands for Hyper Text Markup Language. HTML is one of the easiest programming languages to learn. One of the best things about HTML is that it is "open", meaning if you see someone's page you like, you can view their source code and see exactly how they made it (which is sometimes the best way to learn HTML).

HTML documents are made up of "tags". A tag is a command enclosed in <, and > (i.e. <HTML>). There are opening and closing tags:

Opening Closing
<HTML> </HTML>

Notice how the closing tag has a "/". Not all HTML tags need a closing tag, but if you're not sure, it's better to include one.

There are a few tags necessary for every HTML document (the skeleton of an HTML document). The following will show you the format of the skeleton and explain each tag:

  1. <HTML>
  2. <HEAD>
  3. <TITLE></TITLE>
  4. </HEAD>
  5. <BODY>
  6. </BODY>
  7. </HTML>

NOTE: We numbered the skeleton to make it easier to refer to each line, but DO NOT number your lines when you make your HTML document.

1. <HTML>

The <HTML> tag is the first tag in your document. It tells the Internet browser that it is reading an HTML document (without it, the browser would think it was viewing a text document).

2. <HEAD>

We will not deal with the <HEAD> tag too much in this basic tutorial. It is used for frames, style sheets, META tags, and scripts. We will only use it for our Title.

3. <TITLE></TITLE>

This is the only tag we will use in the <HEAD> tag. It is used to make the title of the page. The title of the page will appear in the blue bar across the top of your active window (the title of this page is " Basic HTML Tutorial"). To use this tag, you type your title between the opening and closing tags.

Example:

<TITLE> Basic HTML Tutorial</TITLE>

4. </HEAD>

This is the closing <HEAD> tag.

5. <BODY>

The <BODY> tag is where the bulk of your web site will be. You will put all your text, images, and links between the opening and closing <BODY> tags.

Before you add your text, image, and links you need to define some parameters inside the <BODY> tag:

  • TEXT - this will determine the color of your text throughout your page.
  • LINK - This will determine the color of your links through-out your page.
  • VLINK - This will determine the color of your visited links through-out your page.
  • ALINK - This will determine the color of your active links through-out your page.
  • BGCOLOR - This will determine the color of your background through-out your page.
  • BACKGROUND - This will determine the background image you load through-out your page.

NOTE: None of these are required, if you do not set them the default is TEXT=black, LINK=blue, VLINK=purple, ALINK=red, and BGCOLOR=white. Also, when you define these, it is not necessary to use all of them. If you set a background image then you would not need to define a background color etc...

Example using BGCOLOR:

<BODY TEXT="green" LINK="black" VLINK="red" ALINK="purple" BGCOLOR="yellow">

Example using BACKGROUND:

<BODY TEXT="green" LINK="black" VLINK="red" ALINK="purple" BACKGROUND="image.gif">

6. </BODY>

This is the closing tag for the <BODY> tag.

7. </HTML>

This is the closing tag for the <HTML> tag. This should be the last line in your HTML document.

Now that you know the format of the skeleton, you're ready to start making your web page. It is always a good idea to start out new HTML documents with the skeleton (opposed to just filling it in as you do it). See if you can remember all the parts of the skeleton and go start your HTML document now, or copy and paste the code below.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Formatting Tags

Formatting tags are used to format your text. If you've ever used a word processor before, there are usually three buttons on the top tool bar. The three buttons contain one letter each; B, I, and U (Bold, Italic, Underline). Formatting tags will let us perform those same functions, but with our web pages instead of our word processor documents.

We will start with Bold. Since you already understand the concept of opening and closing tags, this won't be hard.

Bold has it's own tag: <B>. It works this way:

The text will become bold <B>now and will stop being bold</B> now.

Notice how everything between the <B> and </B> looks bold? That's all there is to it, just enclose everything you want bold in the bold tags.

The tag for italics is <I> (there is a pattern developing here). The same rules that applied to the bold tag apply to the italics tag:

The text will become italicized <I>now and will stop being italicized</I> now.

The same thing happened. Everything enclosed in the italic tag was italicized.

The last tag is the underline tag; <U>. The same rules that applied to the bold and italic tags apply to the underline tag:

The text will become underlined <U>now and will stop being underlined</U> now.

Once again, everything between the opening and closing underline tag is underlined.

Now that we know how to change the look of your text, we'll learn how to change the size.

Changing the size of your text is similar to changing its appearance. There are six different tags we will use, <H1> through <H6> (largest to smallest). They work exactly like the <B>, <I>, and <U> tags. Just enclose the text you want it to change with the opening and closing tags.

Example:

  • <H1>This would be the largest text </H1>


  • <H2>This would be the second largest text </H2>


  • <H3>This would be the third largest text </H3>


  • <H4>This would be the fourth largest text </H4>


  • <H5>This would be the fifth largest text </H5>


  • <H6>This would be the smallest text </H6>

So now we know how to change the appearance and size of our text, the only formatting tags left to cover are the <P> and <BR> tags. These tags are different than the other formatting tags. These tags change the text hard returns and spacing of sentences and paragraphs.

Hard returns:

Line one<BR>
Line two<BR>

Notice how the line ended after the <BR> tag and a new line started. It basically performs the duties of the "Enter" or "Return" key in a word processor. Without that <BR> tag, 'Line two' would stay on the same line as 'Line one' (HTML editors do not recognize traditional formatting. You have to tell them when to end the line and when to start a paragraph).

NOTE: Your HTML Editor will "wrap" your text. That means your HTML editor will fit your text to the computer screen. You do not need to type a <BR> every time you think that the text is getting too long for the screen, only when you need the line to stop.

Paragraphs:

<P>This is a new paragraph.</P>

The paragraph tag puts a blank space above and below the text enclosed in its tags. It is not completely apparent in the example above, but if you look at the text through out this tutorial you will notice all the paragraphs have a blank line dividing them.

The ALIGN command can be used within the <P> tag. It has three options (LEFT, CENTER, and RIGHT. LEFT is the default.).

Example:

<P ALIGN="CENTER">This paragraph will be centered</P>

These are the only formatting tags we will cover in this basic tutorial, if you're interested in learning more formatting tags, visit our HTML Tag Reference Page for a growing list of HTML tags.

Making Lists

In this section we will show you how to make bulleted and numbered lists.

The HTML tag for bulleted lists is <UL>. It stands for Unordered List. The HTML tag for a numbered list is <OL>. It stands for Ordered List. Both the bulleted lists and the numbered lists need another HTML tag to work; the <LI> tag. It stands for List Item.

Bulleted Lists:

Code: Example:

<UL>
<LI>Item one
<LI>Item two
<LI>Item three
<LI>Item four
<LI>Item five
</UL>

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five