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:
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
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.
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
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.
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 "123 Cheap Hosting: Basic HTML Tutorial"). To use
this tag, you type your title between the opening and closing tags.
<TITLE>123 Cheap Hosting: Basic HTML Tutorial</TITLE>
This is the closing <HEAD> tag.
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
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
- ALINK - This will determine the color of your active links through-out your
- BGCOLOR - This will determine the color of your background through-out
- 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
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">
NOTE: If you do not understand the "image.gif" from
the BACKGROUND command, don't worry, we will cover images in the Loading Images
This is the closing tag for the <BODY> tag.
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.
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
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
The same thing happened. Everything enclosed in the italic tag was
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
Once again, everything between the opening and closing underline tag
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
- <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.
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.
<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.).
<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.
In this section we will show you how to make bulleted and numbered
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
- Item one
- Item two
- Item three
- Item four
- Item five
- Item one
- Item two
- Item three
- Item four
- 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.
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:
| <A HREF="http://www.123cheaphosting
.com">123 Cheap Hosting</A>
| 123 Cheap Hosting
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.123cheaphosting.com". By changing that address, you will change the destination of your
| E-mail Link
| <A HREF="mailto:firstname.lastname@example.org">
| 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:email@example.com).
| <A HREF="script.zip">Zipped Script</A>
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.
First we need to make a target:
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).
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
|<IMG SRC="search.gif" WIDTH="239" HEIGHT="70"
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:
WIDTH="112" HEIGHT="40" BORDER="0" ALT="MICROSOFT
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:
.com"><IMG SRC="logo.gif" WIDTH="189" HEIGHT="58"
To make an image link for E-mail or downloads just modify the <A> tag like the
Making Links section specifies.
This section will answer some Frequently Asked Questions
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.