HTML Basics SEARCH

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

Numbered Lists:

Code: Example:

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

  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five

There are other ways to make lists, but these are the two most supported ways. If you are interested in finding out the other ways to make lists you can find them in our HTML Tag Resource.

Making Links

Up until now everything has made sense. The bold tag was <B>, the italic tag was <I>, and the underline tag was <U>. Naturally you would make the link tag <L> right? Wrong, the link tag is <A>. It stands for Anchor. There is a good reason they made it an 'A' instead of an 'L'. The <A> tag is used for so much more than just making links, but making links is its most popular use.

The <A> tag can be used with the commands:

  • HREF - This is used as Hypertext Reference, and links an HTML document to another HTML document. This can be linked to a WWW address, HTML file, or NAME.
  • NAME - This is used for making the anchor the target of a link.

We will start with the HREF command. The three most popular uses of the HREF command are links, E-mail links, and downloads. We will give an example of each:

Link
Code: Example:
<A HREF="http://www.terrificwebhosting
.com">terrificwebhosting</A> 		TerrificWebHosting

To make the above link, we started the <A> tag and then put an HREF command separated by a space. HREF stands for Hyper REFerence, so we defined our HREF command by adding an ="http://www.terrificwebhosting.com". By changing that address, you will change the destination of your link.

E-mail Link
Code: Example:
<A HREF="mailto:george@bush.com">
George Bush</A> 		George Bush

To make an E-mail link, all you have to do is define the HREF command starting with the command 'mailto:' followed by the E-mail address (i.e. mailto:george@bush.com).

Download
Code: Example:
<A HREF="script.zip">Zipped Script</A> XXXXX

To make a link download a file just define the HREF command with the file name. If the browser can't read a certain extension (i.e. zip files, exe files, and some image files) it will think you are trying to download it.

The only other command left for the <A> tag is NAME. The NAME tag is used with the HREF command. The NAME tag turns the <A> tag into a target. This means you can link not only to a specific page, but a specific part of a page as well.

The best way to explain this is by example. This tutorial is just one big two-column HTML page. At the top I have links to the different sections of the tutorial, when you click on the links they jump to the section you clicked on. This is done with the NAME command.

Example:

First we need to make a target:

<A NAME="TARGET"> </A>

NOTE - In this example we've targeted an image, but you can target whatever you like. The most popular is text.

Next we need to make a link to the target. Linking to a target is a little different than making a regular link. To link to a target you must include the pound sign (#) before the name of the target. Since our target name is TARGET the link would be #TARGET.

The NAME command is extremely useful in a large HTML document.

NOTE - We made the link an image. You don't have to use an image. The most popular link is simple text.

You can link to targets that are in a different HTML page by just including the address followed by the pound sign and name of the target (i.e. http://www.DOMAIN_NAME.com#TARGET_NAME).

Loading Images

There are two formats of images you may use with the Internet; GIF's and JPEG's. JPEG's are high quality, but usually have a large file size (making them slower to load). GIF's have a smaller file size, but you give up some image quality (making them faster to load).

To load images you use the image tag (<IMG>). Just like the <A> tag, the <IMG> tag has commands you must define inside of the tag:

SRC - This is the SouRCe of the image. This would be the image name or location if not in the same directory as the HTML page that is calling it.

WIDTH - Use this command to define the width of the image in pixels.

HEIGHT - Use this command to define the height of the image in pixels.

BORDER - Use this command to set a visible border around your image (set it to zero when linking images if you don't want a visible border).

ALT - The ALT command stands for ALTernate text. Use this command to place a short description on the image (used for non graphical browsers and backup in case your image does not load).

ALIGN - By adding this tag you will make the text wrap around the image. There are three options (left, right, and center).

Now that we know the IMG tag and all the commands, we can learn how to put it together:

Code: Example:
<IMG SRC="search.gif" WIDTH="239" HEIGHT="70" BORDER="0" ALT="LOGO">

You do not need to have the image in the same directory as the HTML page to load it. You may place an absolute address in the source command and pull an image from another site:

Code: Example:
<IMG SRC="http://microsoft.com/library/
toolbar/images/mslogo.gif" WIDTH="112" HEIGHT="40" BORDER="0" ALT="MICROSOFT LOGO"> 		MICROSOFT LOGO

Making Image Links

Now that we can make links and load images, we can combine the two and make Image links. Image links are just images that are hyperlinked to another Internet site, E-mail links, or downloads.

To make image links, start with the <A> tag, define it just like you would a text link, but instead of typing text in between the opening and closing tags, load an image:

Code: Example:
<A HREF="http://www.terrificwebhosting.com
.com"><IMG SRC="logo.gif" WIDTH="189" HEIGHT="58" BORDER="0" ALT="LOGO"></A>

To make an image link for E-mail or downloads just modify the <A> tag like the Making Links section specifies.

FAQ

This section will answer some Frequently Asked Questions about HTML.

Q: Is HTML case sensitive?

A: No. I have typed all of the tags in this tutorial in uppercase to help separate them from the other text. This means that <HTML> is the same as <html>, <HtMl>, <hTmL>, etc... Even though it is not case sensitive, it is good practice to stay constant with what ever you pick through-out the HTML document. Technically "XHTML" - the next version of HTML - is case sensitive, so it's a good practice to adopt for the future!

Q: Does every tag require a closing tag?

A: No. As I mentioned earlier in this tutorial, not every tag requires a closing tag, but since there is no pattern to which ones require a closing tag and which ones don't, it's safer to include one if you don't know. Again, for the future, XHTML does require all closed tags.

Q: Do you have to enclose all parameters with quotes (" ")?

A: No. There isn't a pattern for this either, so once again, if your not sure if there needs to be quotes around something or not, it's safer to put the quotes. Also, it's good practice to stay constant with whatever you choose.

Q: Do you offer an advanced HTML tutorial?

A: No. But we do offer an HTML Tag Reference that explains most of the HTML tags, and HTML Guides which provides for links to sample code, tutorials, and more.