Structure of a HTML Document

HTML document structure outlined.

Skeleton of an HTML Document

HTML stands for H yper T ext M arkup L anguage. HTML is one of the easiest programminglanguages to learn. One of the greatest things about HTML is nothing is sacred,meaning if you see someone’s page you like, you can view their source code andsee 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. ). There areopening and closing tags:

Opening Closing

Notice how the closing tag has a “/”.Not all HTML tags need a closing tag, but if you’re not sure, it’s better toinclude one.

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

NOTE: I numbered the skeleton to makeit easier to refer to each line, but DO NOT number your lines when you makeyour HTML document.

1.

The tag is the firsttag in your document. It tells the internet browser that it is reading an HTMLdocument (without it, the browser would think it was viewing a text document).

2.

We will not deal with the tag too much in this basic tutorial. It is used for frames, stylesheets, META tags, and scripts. But we will only use it for our title.

3.

This is the only tag we will usein the tag. It is used to make the title of the page (hence thename). The title of the page will appear in the blue bar across the top of youractive window (the title of this page is “DogGear.Net: Basic HTMLTutorial”). To use this tag, you type your title between the opening andclosing tags.

Example:

DogGear.Net: Basic HTML Tutorial

4.

This is the closing tag.

5.

The tag is where thebulk of your web site will be. You will put all your text, images, and linksbetween the opening and closing tags.

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

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

NOTE: None of these arerequired, 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 isnot necesarry to use all of them. If you set a background image then you wouldnot need to define a background color etc…

Example using BGCOLOR:

Example using BACKGROUND:

NOTE: If you do notunderstand the “image.gif” from the BACKGROUND command, don’t worry,we will cover images in the Loading Images section.

6.

This is the closing tag for the tag.

7.

This is the closing tag for the 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 startout new HTML documents with the skeleton (opposed to just filling it in as youdo it). See if you can remember all the parts of the skeleton and go start yourHTML document now, or copy and paste the code below (as long as you memorize itlater).









Formatting Tags

Formatting tags are used to format your text.If you’ve ever used a word processor before, there are usually three buttons onthe 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 alreadyunderstand the concept of opening and closing tags, this won’t be hard.

Bold has it’s own tag: . It works thisway:

The text will become bold now and will stop being bold now.

Notice how everything between the and looks bold? That’s all there is to it, just enclose everything youwant bold in the bold tags.

The tag for italics is (theres apattern developing here). The same rules that applied to the bold tag apply tothe italics tag:

The text will become italicized now and will stop being italicized now.

The same thing happened. Everything enclosed inthe italic tag was italicized.

The last tag is the underline tag; (yes, youguessed it) . The same rules that applied to the bold and italic tagsapply to the underline tag:

The text will become underlined now and will stop being underlined now.

Once again, everything between the opening andclosing underline tag is underlined (I told you this was one of the easiestprogramming languages to learn).

Now that we know how to change the look of yourtext, lets learn how to change the size.

Changing the size of your text is similar tochanging it’s appearence. There are six diferent tags we will use,

through
(largest to smallest). They work exactly like the ,, and tags. Just enclose the text you want it to change withthe opening and closing tags.

Example:

Thiswould be the largest text


This would be the second largest text


This would be the third largest text


This would be the fourth largest text


This would be the fifth largest text

This would be the smallest text

So now we know how to change the appearance andsize of our text, the only formatting tags left to cover are the

and
tags. These tags are different than the other formatting tags. Thesetags change the texts hard returns and spacing of sentences and paragraphs.

What I mean by this is that HTML does not payattention to an editors hard returns and spacing (I know this sounds prettyconfusing but it’s not). This is best explained by example:

Hard returns:

Line one

Line two

Notice how the line ended after the
tag and anew line started. It basically performs the duties of the “Enter” or”Return” key in a word processor. Without that
tag, ‘Linetwo’ would stay on the same line as ‘Line one’ (HTML editors do not recognizetraditional formatting. You have to tell them when to end the line and when tostart a paragraph).

NOTE: Your HTML Editor will “wrap”your text. That means your HTML editor will fit your text to the computerscreen. You do not need to type a
everytime you think that the textis getting too long for the screen, only when you need the line to stop.

Paragraphs:

This is a newparagraph.

The paragraph tag puts a blank space above andbelow the text enclosed in it’s tags. It is not completely apparent in theexample above, but if you look at the text through out this tutorial you willnotice all the paragraphs have a blank line dividing them.

The ALIGN command can be used within the

tag. It has three options (LEFT, CENTER, and RIGHT. LEFT is thedefault.).

Example:

This paragraphwill be centered

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


MakingLists

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

The HTML tag for bulleted lists is