TABLE OF CONTENTS
2. Basic Structure – Outline
3. Header Section
4. Body Section
5. Section Headlines
6. List Creation Tags
7. Typography and Appearance
8. Hypertext Links
9. Image Tags
10. HTML Tag Glossary
HTML is Hypertext
Markup Language. The language used to create and design Web sites.
HTML is a standard text file with specific tags that a browser
reads and interprets into a Web page.
There are two elements to an HTML document: the
portion seen by the user, known as document content, and the portion
used to create the document, comprised of tags. These latter are
the codes that define the document, and it is these that this
manual will address.
The basic syntax for an HTML tag is as follows:
<Tag Name Properties> Document Content </Tag Name>
Tags are always enclosed in brackets (<>), and most commonly
come in pairs: an opening tag that 'turns on' the instruction,
and a 'closing tag' that turns it off by means of a forward slash
(/) as shown in the above illustration. Curiously enough, such
tags are known as two-sided tags, while those requiring only an
opening tag are called one-sided tags (go figure).
Tags are not
case sensitive, but are conventionally capitalized, and multiple
tags must be correctly nested to ensure proper interpretation
by the widest possible range of browsers.
2. BASIC STRUCTURE – OUTLINE
An HTML document at its most basic level uses
only four two-sided tags:
<HTML></HTML> <HEAD></HEAD> <TITLE></TITLE>
are explained below, and are followed by a sample page outline.
While not strictly necessary in most cases, the inclusion of starting
and ending HTML tags is considered good form.
<HEAD> <TITLE></TITLE </HEAD>
The Head tags will encompass your document's title as it appears
on the browser's title bar as well as the heading you choose to
appear at the top of your document.
Whatever text or message you wish to be included in your document
will appear between the Body tags.
So far, our document looks like this:
<TITLE>Sample Web Document
A Sample Web Document
The text of our document will appear here.
At a minimum
the <HEAD> section of your document should
include a document title enclosed in <TITLE></TITLE>
This title is the one that appears at the top of the browser
window to identify your document, and it is also where web
search engines and indexing programs often obtain information
about your document.
You can enhance your <HEAD> section using
<META> tags to
provide further information about your document to human
readers of your HTML and to mechanical indexing programs that
may encounter your document on the web. The <META> tag has
end tag and no content other than attributes. Two typical and
useful attributes are keyword, used to provide a set of terms
describing the content of your document, and author, used to
indicate the name(s) of the author(s) of your document. For
<META NAME="keywords" CONTENT="HTML,
homepage, tags, SEL,
<META NAME="author" CONTENT="Earma
Additonally, if you would rather not have your
indexed by any web search engine service, place the following
robot exclusion tag in the <HEAD> section of your page:
<META NAME="ROBOTS" CONTENT="NOINDEX,
Keep in mind that not all robots are not created
equal and may
ignore your instructions, despite including the NOINDEX,
You can also use the <META> tag to transfer
from one document to another after a specified amount of time
(expressed in seconds). This can be useful if you want to
transfer someone from an outdated page to a new one, or if
you have a visually exciting "splash" page to get someone's
attention before moving on to the first content page. This is
called meta refresh and looks like this:
<META http-equiv="Refresh" CONTENT="15;
4. BODY SECTION
The <BODY> tag serves to indicate where
the content of your
document begins. A closing </BODY> tag should immediately
follow the last line of content in your document.
The <BODY> tag can be used "as is"
or you may include any of
several attributes which give you some control of the overall
appearance of your document. You may include more than one of
the following attributes in a single <BODY> tag as long
they do not produce conflicting results in your document.
The BGCOLOR attribute allows you to specify a background
color for your document. You can use most common color names
(e.g. red, blue, white, etc.) or you can express the color as
its hexadecimal code preceded by a # sign. Here is a list of
acceptable color names
(URL = http://www.lib.virginia.edu/science/guides/html/color.htm)
and you can obtain hexadecimal color codes from many sites on
the web. Many of the color names listed at the above site are
Netscape specific and may not be recognized by other web
browsers. Note, too, that older monitors may not be able to
display all colors and may produce undesirable results when
attempting to display a particular shade or variant,
irrespective of how it may appear on your own monitor. With
improvements to monitor technology this is not the issue it
once was. However, if you would like to be sure that the
color(s) you choose are "browser safe" and will appear
regardless of the monitor displaying your document, refer to
this browser safe color chart
(URL = http://hotwired.lycos.com/webmonkey/reference/color_codes/).
The downside to browser safe colors is that you are limited
to a maximum of 216 colors, but these are optimized for cross-
platform use. You can also learn more about browser safe
colors at Lynda Weinman's Coloring Web Graphics (URL =
http://www.lynda.com/hex.html) web page.
The BACKGROUND attribute allows you to specify an image file
to use as the background for your document. Typically, this
is used to give a document a textured look or some other
special effect. Generally, a small image is tiled over and
over to produce the background. You must specify the full
pathname, enclosed in quotes, to the location of the image
file you want to use.
The LINK attribute allows you to specify a color for the
hypertext links that appear in your document. The same names
or codes used for BGCOLOR are used here.
The VLINK attribute allows to you specify a color for any
hypertext link which has been visited (i.e. used) by someone
reading your document. The same names or codes used for
BGCOLOR are used here.
The TEXT attribute allows you to specify a color for the
text of your document. The same names or codes used for
BGCOLOR are used here.
of other <BODY> tag attributes exist, but their use
is outside the scope of this class. When using the various
color attributes of a document, keep in mind that the
background and text should contrast well to insure easy
readability. Also, keep in mind that users of your document
may choose to set their browser's preferences for colors of
their own liking, over-riding your own specified colors. They
may also turn off the loading of image files, thus defeating
your attempt to specify a background image. Here is an
example of a body tag with multiple attributes:
<BODY BGCOLOR=WHITE TEXT=BLACK LINK=RED VLINK=BROWN>
Possibly the easiest way to add punch to a document is with headerlines.
Headers are bold in appearance, and HTML provides for six different
sizes. An H1 Header is the largest, H6 the smallest. Syntax follows
the HTML standard for two-sided tags:
<H1>Heading</H1> <H2>Heading</H2> <H3>Heading</H3>
The actual headings appear as follows:
This is an H1 Heading
This is an H2 Heading
This is an H3 Heading
This is an H4 Heading
This is an H5 Heading
This is an H6 Heading
Text can be aligned right, left or center with the ALIGN command.
(This command also works with graphics, but one step at a time...).
Note that the ALIGN tag is one-sided. It must also be defined
with another tag such as a HEADER <H#> in order to work.
(See example below.
Combine the ALIGN tag with a HEADER tag like this:
The above command will look like this in your document:
This is a centered H2 Heading
Paragraph & Break Tags
The paragraph <P> and break <BR> tags perform very
similar functions in that they both create line breaks, though
in slightly different ways.
The following line carries no tags:
I think that I shall never see a poem lovely as a tree.
The same line with the <P> tag inserted after 'see':
I think that I shall never see
a poem lovely as a tree.
The same line with the <BR> tag inserted after 'see':
I think that I shall never see
a poem lovely as a tree.
As you can see, the <P> tag not only broke the line, it
added an additional space, and for that reason is more commonly
used to define where a paragraph starts and stops. Both of these
tags may be used one-sided, though convention dictates closing
the <P> with a </P> tag to ensure support by all browsers.
Block quotes provide a refinement on the paragraph in that they
allow you to set off text with margins on both sides. This is
an ideal feature for showcasing a special quote, and is easily
achieved by inserting the two-sided <BLOCKQUOTE> tag before
and after the text you wished indented. Block quote tags may be
nested inside each other for two or more indentations, as illustrated
On finally having survived the transition from living to undead,
the protagonist of Anne Rice's novel The Vampire Lestat observes:
"And there I saw myself as a man might expect,
except that my skin was very white, as the old fiend's had been
white, and my eyes had been transformed from their usual blue
to a mingling of violet and cobalt that was softly iridescent.
My hair had a high luminous sheen, and when I ran my fingers back
through it I felt a new and strange vitality there."
Here we see the beginning of the sensuality rampant
in so many vampire stories, wherein the victim cedes complete
control of his/her life to the demon lover. Yadda yadda...
Note that use of the <BLOCKQUOTE> tag not only indents,
but also adds a line feed.
To insert horizontal lines all or partway across a page, you use
the <HR> tag. Within the <HR> tag, you insert alignment
instructions, a thickness designation based on pixels, and a width
parameter based on percentage of page width. The <HR>tag
To create a line 6 pixels thick across 25% of
the page, aligned with the left margin:
<HR ALIGN=LEFT SIZE=WIDTH=25%>, et voila
Note that a pixel is 1/72nd of an inch. Twelve
of them will make a line 1/6th of an inch thick which is probably
as thick as is likely to be needed for any normal formatting application.
The lines delineating topics on this page are 3 pixels thick.
The Preformatting tag <PRE> is used when you wish the text
on a page to appear exactly as laid out in the HTML file, including
extra spaces and blank lines. The downside of this attribute is
that text so enclosed will appear in a monospace font like Courier.
The upside is that the <PRE> provides a quick and easy way
to present table text. Note that the <PRE> tag is two-sided.
Romans 4 6
Barbarians 6 4
Christians 0 10
Lions 10 0
HTML PRIMER CONT.
up-to-date news, articles, tips, special offers all designed
to improve your
Site to Success? Send any email to email@example.com
our monthly newsletter and special reports. View a current
Thank you for visiting our site. Please come again. We update