the basics

by farlane

aka andrew mcfarlane

There will likely come a day when there is as little need to know HTML, the "code" for programming web pages, as there is today to know the code required to turn bold into bold in your favorite word processing program. Just push the key, and it will be done.

That day has, sadly, not yet arrived.

Although there are a number of adequate HTML editors on the market that produce adequate results, none of them seems to be able to everything that you might need to do.

And so, here we'll go over the basics involved in creating a web page. Everything that "happens" in an HTML page happens in the tags, between what the technically saavy call "carrot-tops". These things: < > Note that all HTML tags defined will be written with all caps. This is not required, but it makes it easier for you while editing so you can easily tell them from the rest of the text in your pages.

<HTML>
Every page has to begin with the <HTML> tag. This tag tells the browser that the page is written in HyperText Markup Language and should be interpreted according to the rules of HTML. All tags must also be "closed". This means that a document that starts with <HTML> should end with </HTML>
</HTML>
NOTE: This tag isn't closed until the very end of the document!!

<HEAD>
Within the <HEAD> tag you can give a large number of "private" instructions to the viewer's browser. For the sake of simplicity, we will limit the discussion to 2.

<TITLE>
The <TITLE> tag tells the browser what to call the page. If the <TITLE> is left out, the page name at the top of the browser window will be: filename.htm(l). As this name is also the one which will show up when a viewer bookmarks your page, it's a good idea to have a title which sums up your page without being so long that it will be cut off. <TITLE>Jenny's Amazing Cat Picture Page</TITLE> is probably OK. <TITLE>A Place for Jenny (aka Nenno@leelanau.com) Stewart to Put a Large Number of Feline Enhanced Photos</TITLE> is probably stretching things a bit.
</TITLE>


The comment tag is one that is self-contained: it contains an open and a close command. Any tag that is proceeded by a , no one will be able to read anything after it. The comment tag is handy because you can put information for people who are viewing the source of the page like .

The complete head:
<HTML>
<HEAD>
<TITLE>My Amazing Page</TITLE>

</HEAD>

</HEAD> makes a page that looks like this

<BODY>
The <BODY> tag is where things really begin to happen. This is where the meat of your page resides. Within the body tag you set a number of parameters for your page as well. If you choose to begin your document with simply, <BODY>, then your page will display with a gray background, black text, blue links, purple (green in Internet Explorer) visited links and red active links.

BACKGROUND calls an image to serve as the background image on your page.

BGCOLOR denotes the background color. Colors are give in #RRGGBB format, the first two calling reds, second two greens and final two the blues. FFFFFF.html is a document I have found to be invaluable in selecting colors for background, text and links.

TEXT is the color of your text in #RRGGBB format.

LINK is the color of your non-visited links in #RRGGBB format.

VLINK is the color of visited links.

ALINK is the color of the active links, while the user is clicking on them. Only the most finnicky need to worry about this color.

The inhuman body:
<BODY BGCOLOR="#FFFFFF" BACKGROUND="background.gif" TEXT="#000044" LINK="#006600" VLINK="990000"> makes a page that looks like this

</BODY>
NOTE: This tag isn't closed until the very end of the document (just before the </HTML> tag)!!

TEXT
The bulk of most pages are text, and there are a large number of ways to format both individual pieces of text and blocks of text. Text items can be of two basic types, headings and font size.
<H#>
Headings are always bold. Thus the tag for bold, <B>, has no effect on text in an <H#> tag. Headings can be influenced by the italic tag, <I>. Here are the six heading tags (for some, unknown reason, the larger the number in the <H#> tag, the smaller the text):

<H6>

Smallest

<H5>

Smaller

<H4>

Small

<H3>

Big

<H2>

Bigger

<H1>

Biggest

It is important to note that use of an <H#> tag

automatically causes a line break

<H#> tagS should also not be used inside text alignment tags.
</H#>

<FONT>
The <FONT> tag affords more control. You can change the font size within paragraphs, sentences and even from letter to letter without forcing a return. Of course, doing so can make your document unreadable....

<FONT SIZE="1">
This

<FONT SIZE="2">
This

<FONT SIZE="3">
This

<FONT SIZE="4">
This

<FONT SIZE="5">
This

<FONT SIZE="6">
This

<FONT SIZE="7">
This

You may also use <FONT SIZE="+1"> (or +2 to +4, makes it bigger) or <FONT SIZE="-1"> (or +2 to +4, makes it smaller). These are supported by Netscape and IE, but are not official HTML tags.
</FONT>

<OTHERS>

<B> </B>
Bold Text

<I> </I>
Italic Text

<U> </U>
Underlined Text

<SMALL> </SMALL>
Small Text

<BIG> </BIG>
Big Text

<BLINK> </BLINK>
Blinking Text (shudder)

There are others, but this should suffice for now.
</OTHERS>

<P>
The final way to format text is to format whole paragraphs of text. If you decide that you want a hard return which will not interrupt your formatting
then use <BR>. Two <BR>
<BR>
<BR> Give you a nice gap to separate paragraphs.
If, on the other hand, you decide that the particular line must go on and on on and on on and on on and on on and on on and on on and on on and on on and on on and on and most certainly not break, then the <NOBR> tag is for you.
The rest of these are on another page to show you how they can center, indent and otherwise influence text.
The Other Page
</P>
Let's add some text to our homepage /TEXT

<IMG SRC>
Now we're starting to get somewhere. Most people like to put a graphic up near the top, so we'll do that next. The <IMG SRC> tag tells the browser where the source of the image is (amazingly complex, isn't it?). You can put the images in the same file as the pages, or you can make a separate folder for them. What is important is that you call the image from the correct path. If not, all you'll get is the dreaded:

Broken Image Symbol
Do it right, and you are rewarded with

Within the <IMG SRC> tag, you can control the size, border, and the behavior of the text or images next to the image. Images can very complex, so here's an image page to demonstrate some of the options. Let's add a picture to our homepage
</IMG SRC>

<A HREF>
Now we're cooking with gas. The tag which really makes the web is the <A HREF> tag. With this tag, you can link to pages both on and off your web pages. Like the <IMG SRC>, the <A HREF> calls for the proper path. To link to your own pages, you only need to provide the path (or URL -- Universal Resource Locator) to the page from the current page. URL's are CASE SENSITIVE.
Typing: <A HREF="pagetwo.htm">Page Two</A>
Produces: Page Two (a link to page two)
Typing: <A HREF="http://www.leelanau.com">Leelanau.Com</A>
Produces: Leelanau.Com (a link to Leelanau.Com)
This tag must be closed with a </A>, or everything beyond the intended link will show as a link as well. Other bad things may happen too.

<A HREF="#anchor">
Anchors allow you to direct users to specific locations on your pages, especially useful on really long pages like this one. Suppose I wanted to send you back to the beginning of this section.

The first thing I would do is place an anchor just above the location I want to link to by typing: <A NAME="start"></A>
This gives me a target. Since it's on the same page, all I would have to type for the link would be:
<A HREF="#start">the start of this section</A>
Which would produce a link to: the start of this section.

Remember to close both the <A NAME=" "> and the <A HREF="#start"> with a </A>!

<A HREF="mailto:">
A minor pet peeve of mine is when people simply type their e-mail address on their page like so:
farlane@leelanau.com
I guess I'm lazy, but I much prefer the e-mail to be a hot-button. It's also very simple:

Typing: <A HREF="mailto:farlane@leelanau.com">farlane@leelanau.com</A> Produces: farlane@leelanau.com

For more information on using your browser to copy link and
image location, see webwise v 1.0. Let's add some links to our homepage </A>

OTHER STUFF <HR>
Rules are easy ways to break up your pages a bit. The basic <HR> tag makes a horizontal rule accross your page:

The also force a return and are always centered within the format tag. You can add <HR SIZE="5"> to make a thicker rule:

And also influence the width, either in pixels <HR WIDTH="33">:

Or percentage <HR WIDTH="80%">:

This tag isn't closed.

File Names
As stated above, URLs are case sensitive. Generally, it is easiest to use lower case file names to avoid confusion, but not required. Bear in mind that index.html is a different file from INDEX.HTML and both are different from index.htm. Most servers use index.html as the default page for every folder. If that page isn't in a folder, then the browser will generate one. To see this in action, try looking in my images folder.
</OTHER STUFF>

Now let's check the source of our demo home page.

I could certainly go on and on, with things like tables, forms and even frames. An important thing to remember when creating HTML pages is that they will probably never be done. Best to get them up when you can. Check the links below for more resources.

The Bare Bones Guide
Just the facts. A great cheat sheet.

webreference.com
(in my opinion) simply the best HTML site there is.

Hagan's HTML Help
is another good basics site.

FFFFFF.html
for colors.

Guide to Special Characters
like [&], ["] and [©]

HTML Editors
...why not?

Why the web sucks II
is a thought provoking piece on designing web pages.

webwise - my homepage