How to write HTML-documents

Main jan page

This text is thought as an introduction for newbies, but I hope it also proves to be useful for advanced users. It is not a complete list of all HTML commands. If you search a complete overview with all HTML features, try this link. My introduction also includes some hints about web design, and takes a logical route from the first minimal "Hello World"-page to more advanced topics.

Contents:

Chapter 1: How to get your files on the net: First, you need a server, otherwise nobody will ever see your great pages.
Chapter 2: The minimal HTML-document: Writing a HTML-document is quite easy. This chapter explains the minimal requirements for a legal documents, and presents the usual "Hello World!"-document.
Chapter 3: How to link: The possibility to link seperate pages is one of the main features of web documents. This chapter explains how this is done.
Chapter 4: Add some make-up: This chapter explains how to controll the appearance of your web page. About colors, fonts and that kind of stuff. It also contains a discussion of physical versus logial style, you can find some wise words about design, and even an explanation of those magic color code numbers.
Chapter 5: All about images: How to include images, how to use them as links. Also imagemaps are explained here.
Chapter 6: Tables: How to include tables...
Chapter 7: Lists: ...and lists in your web document.
Chapter 8: Frames: Although a web page can exist without frames, frames sometimes can be a useful tool. This chapter explains how to use them.
Chapter 9: Items not explained in this document: A rather short chapter that gives you some hints what else you could do with a web page, although it is not explained here.
Chapter 10: Design and content: About how to create not only a page that works, but also a page that looks good and is interesting.
Chapter 11: How to attract visitors: Now that we craeted a bombastic fantastic page, you surely want people to notice it.

How to get your files on the net

If you have written some HTML-documents, there are certain possibilities to get your web pages on the internet. The first is to built your own web server, a computer wich can handle requests from other computers. The second one is to use the server of your company, your university or your big brother, or anybody else you know to own a web server. The third is to pay a company to allow you to use their web server. There are many different companies with different prices: Geocities, for example, gives everybody under the sun some megabytes of free space if she or he, in exchange, includes some advertisment information on her or his web page. There are some restrictions if you use a Geocities membership: your disk space is very limited, you can't use cgi-scripts, and, since it is an american company, the use of nudity or the offering of information about sexuality is very restricted. Most companies offering disk space on web servers have more or less comfortable upload tools, so you won't have to worry too much about how to send them your files.

The minimal HTML-document

HTML stands for HyperTextMarkupLanguage and is a comparable very easy language: you don't have to have any knowledge about programming to be able to write HTML-documents. In fact, a HTML-file is just an ASCII-text file with some additional commands, so called tags, which are discriminated from the rest of the document by pointed brackets "<" and ">". To write a HTML-document, you can use any text editor, like emacs or WordPerfect, but you can also write your HTML-document with Windows notepad, if you want to. The only two things you have to observe are: 1. You must save your file as a text-only file. Several text editors use their own file format, for example, Word for Windows usually saves a file as .doc in a special format, so when you are saving your file, chose the option "As text document" or something like that (depending on your editor). 2. The name of the file must have the ending ".htm" or ".html", for example "mypage.html" or "sample1.htm".

There are two types of tags, simple commands and containers. A simple command is simply included in pointed brackets and incorborated into the text. A typical example is the "BR"-command, which forces a lineBReak. Example:

This is the first line.<BR>
This is the second line.
This is still the second line.

This code should have the following result:

This is the first line.
This is the second line.This is still the second line.

A container command is a command with a beginnig tag, a content and an end tag. The format is usually:

<COMMAND>Some content for the container</COMMAND>

A typical example is the "I"-command, which turns a passage of text into Italic text:

This is normal text. <I>This is italic text.</I> This again is normal text.

This should have the following result:

This is normal text. This is italic text. This again is normal text.

Also, some commands have additional parameters. They have the format

Container commands can be nested. For example, the "B"-command produces Bold text. It is legal to type

Normal text.<I> Italic text. <B> Maybe bold and italic text, depends on your browser software.</B> Italic text again.</I> Normal text again.

Also nested containers are legal, you should avoid to cut containers, like this:

<I>First container starts. <B> Second container starts. First container ends.</I> Second container ends.</B>

The fundamental container command for every HTML-document is the "HTML"-command. It contains the whole document:

<HTML>
Your document here
</HTML>

Every HTML-document consists of two parts, a head and a body (no limbs). Both are containers:

<HTML>
<HEAD>
This is the head of your document.
</HEAD>
<BODY>
This is the body.
</BODY>
</HTML>

The body contains the main information of your document, while the head can carry some additional information. The only mandatory part of the head is the title. The title again is a container. So we now have everything which is necessary to write a minimal HTML-document:

<HTML>
<HEAD>
<TITLE>
My first web page
</TITLE>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>

In the next chapter we will try to make things more complicated, but the above code is a full grown web document. A last remark: most HTML-commands are not case sensitive. So, it is really not important wether you type "<BR>" or "<br>" or "<Br>" or "<bR>". There are nevertheless some reason not to mix these possibilities: a document source can be read more easily if you use no mixed notation (by a human being: a browser doesn't care).

Before you send your file to a web server, you can test it on your own home computer, even if it is no web server: you can open files on your hard disk with your browser like any web document. This is a good thing to test your documents wether everything works properly.

Another good thing is to obtain the source code of interesting web pages. Whenever you find a page on the net with interesting features, you can use the "View document source"-command of your browser to watch the original code.

How to link

One of the most important features of HTML-document is the possibility to link from one document to another document. The command to link is the "A"-command, which stands (I guess) for Anchor. The anchor command is a container, that means, a part of the document is surrounded by the tag and works as the link. Also, the tag has an additional parameter, the "HREF" parameter, which denotes a Hypertext REFerence. The value of this parameter is the URL, the Unified Resource Location. The URL, in most cases, is something like "http://www.something.com/main/sub/sample.html". So the notation should be something like

The URL of a document is what appears in the location line of your web browser. Now let us assume the location of all your files is "http://www.myplace.com/User/", and you have a file with the name "myfile1.html" at this location. Now you are writing a new file, say "myfile2.html", and you want to include a link in this file to your first file. You could do this by typing

<A HREF="http://www.myplace.com/User/myfile1.html">Click me!</A>

but if your file myfile2.html resides in the same directory as myfile1.html, you can also use an abreviated URL, like this.

<A HREF="myfile1.html">Click me!</A>

Also, you can use

<A HREF="../myfile1.html">Click me!</A>

to link to the parent directory, or

<A HREF="subdirectory/myfile1.html">Click me!</A>

to link to a file in a subdirectory. You should always prefer abreviated URL's, since they link faster (and there is less room for mistypings). An example for a web site with a link:

<HTML>
<HEAD>
<TITLE>
My second web page
</TITLE>
</HEAD>
<BODY>
Another great page you can visit:
<A HREF="http://www.rzuser.uni-heidelberg.de/˜jthor/index.html">Jan Thor's web page</A> </BODY>
</HTML>

So this is all you have to know about linking. The rest of this chapter deals with advanced topics and can be skipped when reading this document for the first time.

If the directory your files resides is something like "http://www.myplace.com/Main/Sub/", and you have a file with the name "index.html" (or "index.htm"), you can use, instead of "http://www.myplace.com/Main/Sub/index.html", the abreviated URL "http://www.myplace.com/Main/Sub". It is recommended that every directory and subdirectory contains one file with the name "index.html". Usually, this file serves as the main entrypoint to your collection of web pages.

Your web documents form a network, and you should avoid isolated documents, that is, every document should be reachable from the rest of your network, and the rest of your network should be reachable from each file. To achive this, and to help your visitors to keep orientation, you should have one main top document linking to all the other documents, and a link back from every document to this main document. Remember that possibly a visitor does not necessairily first visit your main page and than walks to a second page: maybe she found one of your page using a search engine, and without a link back to your main page, she will be unable to find the rest of your pages. So, seperate you site into several domains: every domain should have a main page linking to all documents of this domain. Also, you should have a top page linking to all main domain pages. And in every single document, you should have a link back to the main domain page and to the top page.

You can not just link between different documents, but also between different parts of one document. To do so, you must give a part of your document a name. This works with the anchor tag and the parameter "NAME". Example:

<A NAME="jumppoint">This</A> is a paragraph which can be linked.

Now you can link to this passage by using the URL "#" plus the name of the passage, for example:

You can click <A HREF="#jumppoint">here</A> to be beamed to a different part of this document.

You can also link to special passages of other documents, provided it has its own name:

You can click <A HREF="http://www.somewhere.com/Main/Sub/sample3.html#jumppoint">here</A> to be beamed to a certain region of another document.

If your visitor clicks on a link to another document, your document will be replaced by this other document. You can avoid this by forcing the browser to open a new window for the new document: your document stays in the old window, the link gets its own window. You can do this by adding the parameter "TARGET" with the value "_blank" to the anchor command:

<A HREF="http://www.somewhere.com/Main/Sub/something.html" TARGET="_blank">Click me!</A>

Two warnings: First, not every browser supports this feature: if a browser is unable to deal with frames, it will ignore the "TARGET"-parameter. So built your page in a way that it is not essencial that this feature works. Second: if you use this parameter, you are assuming that your web page is that important that most visitors want to keep it while opening the link. This is a very strong assumption, and you should reflect if it is justified. It is very ennoying to surf on a mediocer home page with an interesting link, to click on that link and find that this leads to a new browser window, with that mediocer home page still loafing about. It can be a useful tool, but in most cases, it is not wise to use it.

Add some make-up

Most web pages have special settings of text and background color, and probably you also want to chose your own colors. If you do not, your web document will be viewed by each visitor with his default colors, that means usually black text, gray or white background, blue new links and violet old links (but you can customize a good browser to show your own default colors). To set your own colors, you add parameters to the "BODY"-command. The values of these parameters are color values in a special format: three hexadezimal numbers in the range between 0 and 255 to denote the values of red, green and blue. I will explain how this notation works, but it is a little bit of mathematics and physics, and so, if you dislike both, here is a short list with the most important colors:

#000000 black #808080 gray #ffffff white
#800000 dark red #ff0000 red #ff8080 light red
#808000 dark yellow #ffff00 yellow #ffff80 light yellow
#008000 dark green #00ff00 green #80ff80 light green
#008080 dark cyan #00ffff cyan #80ffff light cyan
#0000ff dark blue #0000ff blue #8080ff light blue
#800080 dark magenta #ff00ff magenta #ff80ff light magenta
#ff8000 orange #400000 brown #ff0080 violet

I will discuss later how to obtain these numbers. First, how are colors added? The color of the background is controlled by the "BGCOLOR"-parameter, the text color by the "TEXT"-parameter. The color of new links is controled by the "LINK"-parameter, and the color of the old links by the "VLINK"-parameter. Also, you can give a color for those links that are just clicked, the actual link, with the "ALINK"-parameter. It looks like this:

This will produce a white background, black text, green links, dark green old links, and red actual links.

Instead of choosing a background color, you can also use a background picture. This picture will be tiled, that means, repeated infinitly in rows and cols by the browser. You can add such a background picture with the aid of the parameter "BACKGROUND". The value of this parameter is the URL of a picture file. This picture file must be a GIF file.

As usual, you can abreviat the URL of this GIF. For example, the "BODY"-tag of this document runs like this:

Please note: although I have set a background picture, I nevertheless also set a background color. This is sensible for two reasons: first of all, not all browsers are capable to display graphical images (the "BACKGROUND"-parameter is only supported by the Netscape Navigator, the Microsoft IExplorer, and Arena). So, those other browsers would ignore the "BACKGROUND"-parameter, but they will perhaps use the "BGCOLOR"-parameter. Second, even if a browser is able to display graphical images, it will maybe take a few seconds until it is able to open the location of the GIF file and load it. So there will be a few seconds while the text will be displayed, but not the background image. During those seconds, the browser most likely will use the color set with the "BGCOLOR"-parameter as background color. The following is an example of a complete HTML-document with special color settings:

<HTML>
<HEAD>
<TITLE>
My colors
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#00B000" VLINK="#006000" ALINK="#FF0000" BACKGROUND="gkopf.gif">
This is a web page with customized color sheme.
</BODY>
</HTML>

How do you change colors in the middle of a web document? By using the "FONT"-tag, together with the "COLOR"-parameter, like

This sentence contains a <FONT COLOR="#FF0000">red</FONT> word.

Please not that the "FONT"-tag is an invention of Netscape. Although it works with many browsers, it does not work with all browsers. You can also use the "FONT"-tag to change the size of the letters:

<FONT SIZE=1>This is very tiny.</FONT><FONT SIZE=7>This is very large.</FONT>

The range of sizes is from 1 (small) to 7 (large). Instead of setting the absolute size, you can also set relative sizes:

This is the normal size.<FONT SIZE=+2> This is a little bit larger.</FONT><FONT SIZE=-2>This is a little bit smaller.</FONT>

In my opinion, relative sizes should be prefered. This allows a visitor to chose his own customatory letter size, while it allows you to emphasize sentences by using relative bigger letters. Please be polite and let your visitors chose what letter size they like most: some people prefer smaller letters, so they need not to scroll every few seconds, other people prefer bigger letters, since they can be read more easily. Some people have reduced power of vision, and need big letters.

You can also use the font tag to change the font of your letters, but this is, at the very moment, a little bit a hazardious thing. If you want to do this, use the "FACE" parameter and the name of the type font as a value, but note that nobody knows if a visitor of your page has your font installed on his system. To avoid this, you can define "<FONT FACE="myfont1, myfont2, myfont3">", meaning "set the font to myfont1. If myfont1 is not installed on the system, chose myfont2. If myfont2 is also not installed, chose myfont3". The alternative solution would be to send all the fonts used in a document along with the document, but this would not only slow down the download time, there are also some problems with copyright law. For example, the font I like most is an old renaissance font called Garamond. Of course, there is no copyright restriction in regard of Garamond, since the invention of this font ocurred some centuries ago. But computer implemantations of the Garamond are nevertheless protected by copyright law. So if I would send you the type font I use most times, I would do something illegal. Personnaly, I never use the "FONT"-command to set a type font, although I dislike very much the usual standard "Times Roman" or "Times New Roman" font (the Times New Roman is nothing than the attempt to squeeze as many letters together on a page as possible, with small upper, small lower and large middle parts, since the middle part of the letters contain most information).
Some further words about type fonts: the main difference between fonts is "serif" and "sans (without) serifs". Longer documents should always be written in serif fonts, like times or garamond. Sans serif fonts are not as comfortable to read. They are used for texts deserving special attention, for example, treaties. A possible setting could be:

<FONT FACE="helvetica, arial">This should be in sans serif.</FONT>

If you are using the "FONTS"-command, you can (and should) use the "BASEFONT"-commando to determine the appearance of those text parts not included in "FONTS"-container. This "BASEFONT"-tag should be at the beginning of a document. Example:

<HTML>
<HEAD>
<TITLE>Fonts</TITLE>
</HEAD>
<BODY>
<BASEFONT FACE="garamond, times">
To install the application, type <FONT FACE="helvetica, arial">setup</FONT> at the command line.
</BODY>
</HTML>

To align a paragraph, you can add the "ALIGN"-parameter to the "P"-command. The "P" or paragraph command initially started as a container, like this:

<P>This is a paragraph.</P>

<P>This is a second paragraph.</P>

forcing two line breaks (that means, one blank line) between two paragraphs. But you can ommit the </P>, and use the <P> like a non-container-tag. You can use the parameter "ALIGN" to align the paragraph. Possible values are "Left", "Center", "Right" and "Justify". Unfortunatly, some browsers do not understand the <P ALIGN="Center">-command properly (for example, in the context of a table). Alternatively, you can use the <CENTER></CENTER>-container to align one or several paragraphs. This is a Netscape non standard extension. Example:

<P ALIGN="Left">
This is a standard paragraph.<P>

<P ALIGN="Right">
This is not a standard paragraph.</P>

I mentioned above the "I" and "B"-container tags, changing the font to italic or bold. Another similar command is the "U"-container, underlining the letters, and the "TT"-container, changing the font to a fixed-wide "Typewriter Type"-type.

The pointed brackets "<" and ">" have a special meanding, so you are not allowed to use them in your text. But what should you do if you need them? You must use a special escape sequence, starting with a "&", followed by some code and ending with a ";". The code for the pointed brackets are: "<" for "<" and ">" for ">". "lt" stands for "lower than", "gt" stands for "grater than". Since the "&" denotes the beginning of an escape sequence, it also has a special meaning and cannot be used. Instead, you have to type "&" for "&".

You can use this feature also to produce some special letters for some european languages. For example, "á" is produced by "á". The same way, "é" produces the letter "é". An "à" is produced by the escape sequence "à", and "â" is "â". A diresis or "umlaut" like "ä" is produced with "ä", a sz-ligature "ß" with "ß". Other special letters are "ç"="ç" and "ñ"="ñ". Also quite simple is the code for a capital letter: for example, "À" is "À". "æ" is "æ", "Å" is "Å", "Ø" is "Ø", "þ" is "þ", "Þ" is "Þ" and "ð" is "ð".

You can get every letter of the ascii table if you know the ascii number of that letter. For example, if you want to produce letter number 172, you must use the escape sequence "¬", to produce 65, you must use "A". But you should use the above codes instead whenver possible. When you type "á", this may produce an "á", but it can also produce an other letter, depending on what software your visitor is using. If you use "á", it is the task of the browser to find the correct letter. A list of the ASCII table and the Latin 1 are on the net. An example:

Some foreign quotes:<P>

En el cristal de un sueño he vislumbrado el Cielo y el Infierno prometidos.<BR>
<I>Borges</I><P>

Ce n'est pas le don qu'on aimerait faire d'une seule pièce de ce trésor déterré qui n'est pas la vie qu'on aimerait avoir reçue puisque aussi bien le ventre long de la femme est son ventre et que le rêve, le seul rêve est de n'être pas né.<BR>
<I>André Breton/Paul Éluard</I><P>

Bebend vor Liebe und Todesnähe neigte sich der Ritter ihr entgegen, sie küßte ihn mit einem himmlischen Kusse, aber sie ließ ihn nicht mehr los, sie drückte ihn inniger an sich und weinte, als wolle sie ihre Seele fortweinen.<BR>
<I>Friedrich de la Motte Fouqué</I><P>

Result:

Some foreign quotes:

En el cristal de un sueño he vislumbrado el Cielo y el Infierno prometidos.
Borges

Unfortunatly, many letters are not supported. For example, " ", the code of the nonbreaking space, is not widely suppoerted: Sometimes you write seperated words you do not want to become split by a line break, like "Dr No" or "p. 121".The "nonbreaking space" should be a letter for such a case,but unfortunatly, few browsers support this letter. There is a non standard extension of HTML, supported by Netscape and IExplorer, the "NOBR"-container, to deal with this:

And <NOBR>Dr No</NOBR> said: "nothing will split my name!"

You can add a "WBR"-tag inside a "NOBR"-container to set a point were a line may, but not must break. Unfortunatly, not all browsers support this feature.
Sad to say, only the ascii letters 192 to 255 are widely supported (minus some exceptions, like the letters 215, 208 and 247). The other letters must be called with the "&#nnn;"-escape sequence. Even sader, many important letters are not part of the standard ascii table. There is a larger letter table, the ISO-8879, containing this letters, like the scaron or typographical quote marks, the infinity sign or the OE ligature, but this table is not commonly supported.
Some way to emmulate typographical quotation marks is to use two commas as start mark and two apostrophes as end mark. I sometimes do this in my german texts, but it's horribly ugly, compared with real typographical quotation marks.

Two last commands: "<HR>" produces a Horizontal Ruler. You can modify the ruler by setting its size and its width. Its width can be an absolut value, or a relative value in regard to the size of the browser window:

To include comments in your source code, you can use the ""-tag. Replace "blablabla" with your own comment. It will not be shown in the final document your visitor views.

So now you know all major commands to style your text. The rest of this chapter will deal with three subjects: physical versus logical style, good typographical design, and color code numbers. If none of them find your interest, you can skip the rest of the chapter.

physical versus logical style

If you want to mark a sentence as a headline, you could do this by increasing the letter size and using bold letters, for example. Another possibility would be to send the browser of your visitor a message "This is a headline, do with it whatever you want". Then your visitor or his browser could decide wether he or she or it wants headlines to be bold or italic or with bigger letters. This is called a logical style, while telling the browser "use bold face and increase the size by 2 points" is called a physical style. To mark a text as a headline, you could use the "H1"-container or the "H6"-container. Like this:

<H1>Very important Headline</H1>
<H2>Chapter One: Trees</H2>
<H3>1.1. The larch</H3>
<H4>1.1.1. The larch in the south-east of Wales</H4>

There are some other logical styles, you will find a complete list in every other introduction to HTML. I find these logical styles very problematic: you never know what the result will be. And although there are many different logical styles, in the end it is always bold, italic or different size. Except for the "ADDRESS"-container, another logical style, I hardly ever use a logical style, and as far as I know, nobody else does. But I thought I should mention that all this exists. Logical styles are a result of the attempts of the W3 group (the guys establishing the HTML standard) to give the visitors the opportunity to customize and controll the appearance of web pages, while the philosophy of Netscape tends to enable the writers of HTML documents to controll every aspect of the outlook of their document. Most writers seem to prefer this writer-centered view instead of a viewer-centered view.
The only logical style you find often used is the "H1"-tag. But please note that "H1" usually, with most browsers, produces a real big headline, in many cases a far too big headline. The look of your headline should fit with the look of the rest of your text, and the "H1"-tag often produces an ugly and unbalanced result.

[Additional remark: some search engines search for "H1"-headings. Words within heading-tags have more importance than other words for some search engines. So you should add one headline with some keywords at the top of your page if you want to attract search engines.]

some words about design

How should you chose your text and background and link color? You should chose it in a manner that your text is easy and comfortable to read. That means, there must be a strong contrast between text and background, and the most important contrast is the contrast in brightness. Since they are complementary colors, there is a very strong contrast between green and magenta, but since they differ only little in brightness, it would be a bad idea to chose magenta letters on a green background (and for people with red-green blindness, your text may become nearly invisible). Chose a very, very light text color and a very, very dark background color, or vice versa. Of course there can be usefull exceptions from this rule, but the more longer your documents are and the more text they contain, the more important it is that your visitors do not become tired from reading them.
If you use a background image, the image should be not too irritating. If you have chosen a dark text color, the background picture should contain only light colors, and if have chosen a light text color, the background picture should contain only dark colors. Again, there may be exceptions, but never with long texts.
Also, the color of your new and old links should contrast with the background. And they should be distinguishable, so the visitor easily sees what is plain text, what is a new and an old link.
It is a good thing to give all your pages a similair appearance, some sort of corporate identity. You should, if possible, use the same set of color settings and the same background picture on all your pages. This allows your visitor to recognize your page easily, to remark that she is still on your site, and to distinguish what is text, what is a new and what is an old link. If you change the color setting from page to page, your visitor will have to check out which color means what on every page again. Also, your page will load remarkably faster if you use only one background image for all your different pages, because the browser will have to download the picture only one time. It is also a good idea to use one and the same ruler on all your pages (see next chapter). So do not use different color shemes or different background pictures in different web pages, unless you have a real good reason to do so.

You can use letters with different colors or sizes or bold or italic letters, but you should have a reason to do so. Generally, it is no good idea to use everything you know about HTML, you should use only those features making sense: less is more. For example, you can make the first letter of each paragraph greater than the rest, like this:

<FONT SIZE=+2>O</FONT>nce upon a time...

But if you do so, you should reflect wether this is a useful thing or not. I, for example, once wrote a little tale, and I used this trick to enhance the first letter of each paragraph, I think it supports the air of ancienty and, at the same time, modernity my tale has, but I wouldn't use it with all my pages.

Another design tip: never use the "U"-tag to underline something. First, most browsers underline link text, and underline text confuses with links. By the way, you can not be sure that every browser underlines links: some of them don't use underscores, some of them allow their users to chose wether they should mark links with underscores or not. Second, you should avoid underlined texts anyway. The thing is, that, correctly used, underscorse should avoid letters like "y", "g", "p" or "q":

This is a good example
This is an ugly example

If you use the underscore, make sure that you do not underline those critical letters. Third, some browsers don't support the "U"-tag. But it is unnecessairy to use the underscore at all. If you want to emphasize text, you should first use italic letters, since this is the most beautiful and elegant way of emphasize something. The next you should use are bold letter. Please note that bold letters are more striking than italic letters. In most cases, one way of emphasize should be sufficient, and you should only use two methods of emphasizing if you have some good reason. So you need neither the underscore nor capital letters.
Once again, do not use everything you have.

If you decide to use type fonts, rescrict the number of fonts you are using. Most documents can be written with one font, and I hardly ever use more than two fonts printing my documents, although I have a huge collection of fonts. Choose a font that is easy to read, not an ornamental font, except for special purposes, like the headline of an introductory page.

If you have a reason to do so, you can make letters smaller, but the value for the "SIZE"-parameter should never be smaller than "-2" or "2". Something like "<FONT SIZE=-4>" or "<FONT SIZE=1>" will have horrible results. Many web pages have unreadable small letters, usually as bottom line. But your pages should be readable, or you should be mute at all.

Those magic color code numbers

The sun sends light rays to the earth with almost all kind of wave length, except for the Fraunhofer lines. The visible light is something between 400 and 800 nm (=nanometers). White light is a mixture of all kinds of light. The human eye carries three kind of light receptors: for red light (about 800 nm), green light (about 500 nm) and blue light (about 400 nm). Now if a ray of red light hits those receptor, only the red light receptor reacts. If a ray of light with 600 nm, that is a ray of yellow light, hits the eye, than both the red light receptor and the green light receptor react. So the human eye can not distinguish wether it was hit by a ray of yellow light or by two rays, one of red and one of green light. Therefore, yellow light can be regarded as a mixture of red and green light. And white light can be regarded as a mixture of red, green and blue light. Every color the human eye can percept can be emulated with a mixture of red, green and blue light with different intensities. To describe a color, you only have to say "that and that intensity of red, of green, and of blue". So every color can be described as a triple of numbers. If you denote the maximal intensity with 255 and the minimal intensity with 0, then (255, 255, 255) denotes a color with a maximal amount of red and green and blue, that means, it denotes white, while (0, 0, 0) denotes a color lacking any amount of red and green and blue, therefore it denotes black. (255, 0, 0) denotes red, (0, 255, 0) denotes green and (0, 0, 255) denotes blue. (128, 0, 0) denotes red, but less intense, that means dark red. (255, 255, 0) denotes the mixture of red and green, that means yellow, as we know. (255, 128, 128) denotes a color with red dominant, but also green and blue present, that is, a mixture between red and white, that is, light red.
Why is the maximum of intensity of a prime color denoted with 255? Because that enables to encode an intensity in one byte, and a color can be represented with three bytes (or 24 bits).

So we could represent yellow by (255, 255, 0). But you may remember, the code for yellow is instead "#ffff00". The decimal numbers are translated in hexadecimal numbers. The hexadecimal number system is a system with the number 16 playing the same role as 10 in the usual decimal system. There are 16 digits in the hexadecimal system: "0" denotes 0, "1" denotes 1 and so on, "9" denotes 9, "A" denotes 10, "B" denotes 11, "C" denotes 12, "D" denotes 13, "E" denotes 14, and "F" denotes 15.
How is a number like 123 represented in the decimal system? Like this:

1x10x10 + 2x10 + 3x1 = 123

Now, how is this number represented in the hexadecimal system? Like this:

7x16 + 15x1 = #7F

Another example:

691 = 6x10x10 + 9x10 + 1x1 = 2x16x16 + 11x16 + 3x1 = #2B3

Okay, now how do you transform a decimal number n like, for example, 61, into a hexadecimal number #m? First of all, divide the number n by 16. The result of this devision be d. Example: 61 divided by 16 is 3.8125. Now you take only the integer part of this number and skip the rest, and this integer number i is your first digit. Example: The integer part of 3.8125 is 3. Perhaps i is greater than 9, but remember that everything between 0 and 15 is a digit in hexadecimal arithmetic. Now we have the first digit, how do we obtain the second digit? Multiply your number i with 16, and make the difference between this number and number n. Let's say, the differnce may be j. Example: 3 times 16 is 48, and the difference between 48 and 61 is 13. Now j is your second digit. Example: 13 is the hexadecimal digit "D". So #ij is your hexadecimal number. Example: The hexadecimal version of 61 is #3D.

Further examples:

n=80
Then d=5, i=5, j=0, result: #50

n=7
Then d=0.4375, i=0, j=7, result: #07

n=171
Then d=10.6875, i=10, j=11, result: #AB

Now we have the necessary tools to compute color codes. For example, the color (251, 196, 158) (some kind of skin color) can be translated into

251=#FB, 196=#C4, 158=#9E
(251, 196, 158) = #FBC49E

the color code "#fbc49e". By the way, you do not have to do all this math yourself. For example, if you are using Windows, the calculator, part of the Windows package, in its "scientific" version, has a tool to translate decimal numbers into hexadecimal. Also, many image processing programms (even bad old paintbrush) have a tool to fiddle with some controls to select a color, while the color code is displayed. And most unix image editors (like xpaint) even let you chose a color by playing with some control knobs while displaying the hexadecimal color code.

Finally a word of warning: most browsers use only 16 colors for type faces. So you could asign your font a color like "#ff1217", and then embed a word in the color "#e20000", but most likely, the browser of your visitor will reduce both to the same "#ff0000". Here you can test what your own browser is doing:

#000000
#1f0000
#3f0000
#5f0000
#7f0000
#9f0000
#bf0000
#df0000
#ff0000
#ff1f1f
#ff3f3f
#ff5f5f
#ff7f7f
#ff9f9f
#ffbfbf
#ffdfdf

According wether text colors are displayed with 16, 256 or 24-bit color, this should be displayed in 5, 8 or 16 different colors.

All about images

Most likely, you want to include some images in your web page. The command to do this is "IMG". You will also need the image SouRCe parameter "SRC", with the URL of your picture. Like this:

There are two kind of image files browsers can understand and display: GIF and JPEG or JPG. But that doesn't mean that all browsers can display images. I will return to this subject later. Both GIF and JPEG pictures are compressed, but in a rather different manner. The GIF compression is a compression without loss, that means, compressing and decompressing does not result in a loss of data, while the JPEG compression do lead to a loss of data. On the other hand, the GIF compression isn't very effective on some kind of pictures: scanned photos are usually compressed much better with the JPEG compression. Another difference: GIF pictures are usually in 16-256 colors, while JPEG pictures are in 24 bit colors. Yet another different: a GIF picture can have a transparent color, that means, some regions which are transparent, so you see the background image through it. And GIF pictures can be animated, that means, a GIF file can contain several different pictures. So, if you have a picture in another format, like TIFF, you have to decide wether you transform it to a GIF or a JPEG file, if you want to use it on your web page.

If you want to do some animation or some tranparency tricks, make it a GIF file.

If it is a scanned photo or a scanned painting with many different color values, make it a JPEG file.

If it has only few colors, like 16 colors, make it a GIF file.

If it looks bad with less than 24 bit colors, make it a JPEG file.

If it has large regions with only one color (that means, exactly one color, not different similar colors), make it a GIF.

If you don't know wether it would be better to make it a GIF or a JPEG, try both. If both files are nearly of the same size, chose the JPEG file. If it is a scanned photo, always make it a JPEG file.

The "IMG" command has some more parameters. The most important parameter, I think, is the "ALT"-parameter. With this, you can set some ALTernative text in case your image is not displayed. Why should your image not be displayed? Perhaps because the URL is wrong or became wrong. Because the pipe broke down while transfering your web page to your visitor. Because your visitor does use a text-only browser.
Why should someone use a text only browser? There are several reasons. One could be: your visitor wants to speed up the download time of the web document she or he is visiting. The most common reason why many web pages load down slow is that they contain images, so using a text only browser can speed up surfing immense. A second reason could be that your visitor can't use a graphical browser for some technical reason. Maybe her hardware does not allow her to use a graphical browser. Maybe her software is outdated. So she should buy a new machine, you say. But perhaps this is impossible for some reason. Maybe your visitor is very poor and can't afford a new computer every other year. A third reason could be that your visitor is blind. So she can use her computer only by a device translating all text lines of her computer into a line in braille font. And everything which is not simple text will be lost on her.
Now do you want to exclude all those people from your web page? If not, than you should write your HTML document in a manner that it can be apreciated with a text only browser. For example, you could use an image as a horizontal ruler between different paragraphs, lets say, an image file "flourish.gif". Than your file should run like this:

This is a paragraph with important information.<P>

This is another paragraph with important information.<P>

You can use an image as a link: to do so, include the "IMG" command within the "A" container:

Again, you should use the "ALT"-parameter to give the text-only-browser-user some hints what this link is all about.
There is a company distributing records with a start page containing nothing but six graphical links. These images consists of some text in nice typographics, so every user with a graphical browser can decide which link she or he wants to follow. But since they omitted the ALT-texts, a user with a browser displaying only text only knows that the page contains six graphical links. According to this company, the blind shall also be deaf.

If you are using an image as a link, it will be surrounded by a border in your link text color. For example, if your "new link text color" is blue, the image will have a blue border. This can be usefull, as it allows a visitor to see wether the image leads to a new or an old place. But if you dislike this feature, you can set the thickness of this border to zero:

This parameter is only usefull if the image serves as a link, that means, is embedded in a "A"-tag. If it is present in "IMG"-tag not included in an "A"-container, it will be simply ignored. Also note that the "BORDER"-parameter is a Netscape non standard extension, that means, it is not necessarily supported by all browsers.

An image can not only be part of a web page, it can also be the target of a link. Like this:

Click <A HREF="http://www.sw.com/painting.jpeg">here</A> to see a picture.

If your visitor click this link, there can be two possible consequences: the first possibility is that the browser spans some external viewer. That means another programm in a new window starts and show the picture. For example, if I would click on that link, using Netscape Navigator as my browser and xv as my picture viewer, the Navigator would load the picture, and than xv would show the picture in a new window. The second possibility is that the browser interprets the picture file as a web document and opens a new HTML document, containg nothing but the image. For example, if I would click the link with Netscape Navigator and no external picture viewer set, the Navigator would load the picture and replace the original document with the link in it with a new document, containing nothing than the picture. There is no way to determine what different visitors of your page and their browsers will do. If there is no external viewer installed, the original document will be replaced, and the visitor will have to use the "Back"-button to go back to your page. You should define a quick picture viewer application as your external viewer when surfing ("quick" means: not Corel PhotoPaint, but something like LView Pro, or xv) to avoid this, but different users have different settings.

Another thing you can do is to use an image to link to another image, like this:

Usually, this is used to link to a large image with a small sample of this picture, called "thumbnail". If you want to built a picture galery, you should use thumbnails. If you put the large version of your picture on your page, this will slow down downloading immensely. If you don't put the small version of your picture on the page, there is no hint for your visitor wether downloading your large picture is worth all the trouble. The size of your thumbnail should be as small as possible to speed up downloading your page, but it should be large enough so that your visitor get some impression about how the large picture will look like. Again, you should use the "ALT"-parameter, and if you want to built a picture galery, you should also include some text describtion of the picture. Why? If the visitor is blind, she or he won't download a picture anyway, so she won't need the describtion to decide wether the picture is worth downloading or not, and if the visitor can see the thumbnail picture, she won't need the text describtion, you may say. But remember the visitor who is using a text only browser to speed up download time. Maybe she is viewing your page with a text only browser, but she is able to download your picture and view it with some external viewer. And anyway, someone unable to see the picture for whatever reason may be glad to get at least some description of the picture. In any case, even if you omit the detailed text description of your picture, use the "ALT"-parameter and a thumbnail.

Another note about thumbnails: since they are usually smaller versions of the main picture, you should know how to obtain a nice looking smmaler version of a picture. Most image processing programs have a feature "resize", but usually the make a picture smaller by keeping some pixels and omitting some pixels. For example, if you resize a picture to 50 % of the original size, than the new picture consists of every other row of the original picture, leaving away every other row, and every other pixel in the rows, leaving every other pixel. This can result in a picture with very harsh transitions. So to improve your result, you should first smooth (or "unsharp" or "diffuse") your picture, before you resize it (if you enlarge a picture, you should do it the other way round: first resize it, then smooth it). If you are using, for example, CorelDraw, and you want to resize a picture to 50 % of its original size, than "smooth" with 70 % could be a sensible setting.

There are some more possible parameter for the "IMG"-tag. One is the "ALIGN"-parameter. This can have the values "Bottom", "Middle", "Top", "Right" or "Left". This is important if you want to mix pictures and text. If you are using a picture as an illustration embedded in a text, you should use the values "Right" or "Left". But note that it is not recommendable to do this with very large images. If you want to include a large picture on your page for whatever reason, it should have its own seperate paragraph. Otherwise, if the picture is larger than the window of the browser, the text is attached to the picture in a thin column, likely outside the window. The values "Left" and "Right" are part of HTML 3, the third version of the HTML standard, that means, older browsers will ignore them.

Another parameter is the "LOWSCR"-tag. Imagine you included, for whatever reason, a very large image on your page, taking a lot of time for downloading. Then you can set another smaller image file of the same dimension, and this file will be loaded first and then afterwards be replaced by the real picture. For example, you have a picture big.jpeg with lots of bytes. You have another version of this picture, using only 16 colors (for example, 16 grayscales), being therefore much smaller, and this image file is called small.gif. Than you could include the following code:

So the browser will download first the small.gif, which is done fast, and display it. And than it will start to download the big.jpeg, which will take some time. But your visitor won't get tired or nervous, since she already has a picture to look at.
Note that the picture defined with the "LOWSCR"-parameter must not have anything to do with the original image, it can be a completly different image, but it should download really fast, otherwise you are replacing one real slow pictures by two real real slow pictures, and both pictures should have the same dimensions. And since this a Netscape non standard extension, do not expect this feature to work with all browsers.

The rest of this chapter deals with imagemaps. If you are not interested in imagemaps, you may skip this part.

Imagemaps

Image map means an image with different parts, and according on what part you clicked, you are linked to different places. There is one very brute method to make an image map: split the image in several parts and display it as a table (a table will be explained below). The usual way to display an image map is to use a cgi application. You must have a programm imagemap, and you must have a MAP file with the map information. Let us assume that the abreviated URL for the Imagemap application is "cgi-bin/Imagemap". Your own loaction is "myloc", and it contains a file "myplan.map". Then the URL to activate your imagemap is something like "cgi-bin/Imagemap/myloc/myplan.map". Sorry, it depends on how the imagemap programm is implemented. If it is not implemented at all, you won't be able to use imagemaps. To activate the script, you will also have to add the "ISMAP" parameter to the "IMG"-tag. This parameter has no value. So the whole thing should be something like this:

How do you know the correct path for your URL? You have to ask for it. How do you write a MAP file? The most easy way is to use a programm like mapedit. You have to save it in your cgi directory, assumed you have one. If you are using a web server like geocities, you are not allowed to use cgi binaries.

So using an imagemap is a little bit more complicated than the things we have done so far. You should know something about cgi scripts before using an imagemap. Maybe you are wondering: why do I have to use a cgi-script for such a common feature like an imagemap? Why is this not a feature included in the browser? And you are perfectly right. Netscape and Microsoft both added a non-standard extension of the HTML language to allow browser supported image maps. This non standard extension is much more easy to handle, you can use it without knowing anything about cgi, and it's even faster. But you should remember that it is a non standard extension of the HTML language, so it is not supported by every browser. In fact, the most important graphic browsers do support this command. It works as follows: You include a new parameter in your "IMG"-tag, the "USEMAP"-parameter. The value of this parameter is a "#", followed by the name of a map, like "mything". This map is included in the HTML document itself, as a container, the "MAP"-tag. The "MAP"-tag contains some "AREA"-tags defining special areas with special links. The "MAP"-tag has the parameter "NAME", with the name of the map as its value, like "<MAP NAME="mything">". The "AREA"-tag has the "SHAPE"-parameter, defining a type of shape for the area, with possible values "rect", "circle" and "polygon", the "COORDS"-parameter, with a list of coordinates, seperated by a comma, as its value, and the "HREF"-parameter, with a URL of a web document as its parameter.
If the value of SHAPE is "rect", than the value of COORDS is a list formed by four numbers, "x1, y1, x2, y2", denoting two opposite vertices of a rectangle. If the value of SHAPE is "circle", the value of COORDS is a list of three numbers, "x, y, r", denoting the center of a circle and its radius. If the value of SHAPE is "polygon", the value of "COORDS" is a list "x1, y1, x2, y2, ... xN, yN" of vertices of a polygon.
Let us assume that square.gif is an image with 100x100 pixels. Than the following is an image map:

This will result in an image, divided into four parts, every part linking to another location. Another example:

This will produce an image, divided into two triangles, both linking to different locations.

Remember, this doesn't work with all browsers. Also remember, some people cannot use graphics, so if you are using an image map, make sure that there is some text only alternative. And finaly remember, every image you add to your page will make downloading slower.

Now you know everything important about web images, and also everything important about HTML, and you will be able to write nice looking documents. The next two chapters will deal with tables and lists, if you are not interesting in using tables or lists, you may skip them.

Tables

Tables are included in the "TABLE"-container. Since the "TABLE"-tag was no part of HTML 2.0 or earlier versions, older browsers will be unable to display tables. An alternative way to display tables is to use the "PRE"-tag. Text included in the "PRE"-container will be displayed (most likely, not necessairily) in a fixed-width font and with all line breaks and additional spacing the source code contains. Example:

Result:

+-----+-----+
I 123 I 456 I
+-----+-----+
I abc I def I
+-----+-----+

But probably you are not willing to include both, an ugly "PRE"-table and a "TABLE"-table, in your document.

A table consists of rows, and each row consists of cells, containing the table data. A Table Row is, as you may have guessed, a container, included by the "TR"-tag, and a cell is also a container, included by the "TD"-(like Table Data)-tag. You do not have to tell the browser how many rows a table, or how many cells a row include. So this is a valid table:

The end tags can be skipped, but you shouldn't do that, at least not if you are nesting tables.
The above code is sufficient for adding a table to your web document, but there are also some further options. You can add a parameter "BORDER" to the "TABLE"-tag. This will produce a border of the table. You can also asign this parameter a numerical value, thereby setting a thickness of this border: "<TABLE BORDER<" or "<TABLE BORDER=10>". The thickness is expressed in pixels. You can also add a parameter "WIDTH" controlling the width of the border. The value can be an absolut, expressed in pixels, or a relative, expressed in percentage of the windows width:

Result:

a11 a12

a21 a22

Another feature is that you can align the content of a cell. You can align the content of all cells of a row, by adding the "ALIGN"-parameter to the "TR"-command, or you can align the content of a single cell by adding the "ALIGN"-parameter to the "TD"-tag. The "TD"-parameter overrides the "TR"-parameter. The same is possible for the "VALIGN"-parameter, wich enables you to align the content of a cell vertically. The possible values of the "ALIGN"-parameter are "left", "center" and "right", and the possible values for the "VALIGN"-parameter are "top", "middle and "bottom". The default alignment is left and middle.
This alignement is a new feature that doesn't work with some browsers. Netscape invented the "CENTER"-tag to deal with the impossibility to align table text in earlier versions of the HTML standard.

Instead of the "TD"-tag you can also use the "TH"-tag. This indicates that the content of the cell is a table header, and it is usually marked bold. The default alignement of a "TH"-container is center middle. Example:

Result:

a11 a12

a21 a22

a11	a12
a21	a22

Another possible content of the "TABLE" container is the "CAPTION"-container, containing a major caption of the table. It can be aligned at the top or the bottom of the table:

<TABLE BORDER=1 >
<CAPTION ALIGN="top">This is a table</CAPTION>
<TR><TD>a11</TD><TD>a12</TD></TR>
<TR><TD>a21</TD><TD>a22</TD></TR>
</TABLE><P>

Result:

This is a table
a11 a12

a21 a22

This is a table
a11	a12
a21	a22

You can also controll the distance between the single cells, by adding the "CELLSPACING"-parameter to the "TABLE"-tag. And you can controll the distance between the content of a cell and the border of a cell by adding the "CELLPADDING"-parameter to the "TABLE"-tag. Example:

Result:

a11 a12

a21 a22

A last feature: cells can be melted into bigger cells. To melt cells of one row into another, add the parameter "COLSPAN" to the "TD"-tag. The value of this parameter is the number of merged cells. Example:

Result:

A1 A2 A3 A4 A5

B1 B2 + B3 + B4 B5

C1 C2 C3 C4 C5

The same trick can be done with columns, the parameter name is "ROWSPAN". The merged cell cluster is placed in the first row occupied by the cluster. Example:

Result:

A1 A2 A3 A4

B1 B2 B3 + C3 B4

C1 C2 C4

You can include everything you want in tables, like links, images, or other tables.

Lists

You can make a list by seperating the list elements with a line break, and by marking the beginn of a new list element with a special letter, like "o" or "-". Or you can seperate list elements with a line break and mark the beginn of every new list element with a little image, for example a little GIF showing a ball changing its color (many people seems to love this GIF, you can see it quite often on the web). But there is also a built-in feature that allows you to include lists in your web document rather easily, the list tag. This is a container, the command is "UL" or "OL", depending on wether you want an Unordered List or an Ordered List. The beginning of an unordered list is usually marked with a little bullet, depending on the browser your visitor is using, while the ordered list element starts with a number. The list elements are seperated by the "LI"-tag. List can be nested. Example:

<UL>
<LI>herbs
<LI>trees
<LI>mushrooms
</UL><P>

<OL>
<LI>herbs
<LI>trees:
<OL>
<LI>the larch
<LI>the beech
<LI>the yew
</OL>
<LI>mushrooms
</OL>

The result:

herbs

trees

mushrooms

herbs

trees:

the larch
the beech
the yew

mushrooms

Another kind of list is the Definition List "DL". This list can carry two types of list elements: Definition terms, marked by a "DT", and Definition list Definitions, marked by a "DD". Example:

<DL>
<DT>Definition list
<DD>A list with two kind of Elements: definition terms, a line containing a term to bedefined, and a definition, defining the term of the definition term line.
<DT>Ordered list
<DD>A list with only one kind of Elements. The elements are numerated automatically, so adding a new element will change the numeration in the correct manner. Lists can be nested, even lists of different kinds.
</DL>

The Result:

Definition list: A list with two kind of Elements: definition terms, a line containing a term to bedefined, and a definition, defining the term of the definition term line.
Ordered list: A list with only one kind of Elements. The elements are numerated automatically, so adding a new element will change the numeration in the correct manner. Lists can be nested, even lists of different kinds.

A possible parameter of the "DL"-tag is the "COMPACT"-parameter. This is usefull if the definition terms are very short, since definition term and definition starts on the same line in the compact form. Example:

<DL COMPACT>
<DT>i
<DD>Hitting this key makes you invisible.
<DT>g
<DD>god mode: invulnerability.
<DT>f
<DD>gravity is set to zero: enables fly.
</DL>

The Result:

i: Hitting this key makes you invisible.
g: god mode: invulnerability.
f: gravity is set to zero: enables fly.

And that's all about lists.

Frames

Frames are again a tool developed by Netscape, what means that not all browsers are able to understand them. It is possible to write good web pages without frames, and many people even with frame capable browsers find frames ennoying. So you should in any case construct your pages in a manner that it can be viewed without frames, and it is absolutly not necessairy to include frames at all. I will return to this subject. In some cases, though, they can be useful tools. So what are frames? A frame HTML document is a HTML document containing other HTML documents. Ususally, a framed page contains one frame serving as content windows and another frame serving as navigation tool. The idea is that visitors can change the content of the content frame while keeping the content of the navigations frame.
A framed document can be divided in frames, either in columns or in rows. Each frame can include further frames. A frame document basicly consists of a container tag with the framesets, the "FRAMESET"-container. It must carry either the "ROWS"- or the "COLS"-parameter, together with the messures of the frames as values. The "FRAMESET"-container carries "FRAME"-tags, with the URL's of the framed documents as the "SRC"-parameter. An example: let us assume, your directory on your web servers contains two HTML documents, "start.html" and "nav.html". Than you could write another HTML document, with the name "frame.html", that runs like this:

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="50%, 50%">
<FRAME NAME="mymainframe" SRC="start.html">
<FRAME NAME="mynavigationframe" SRC="nav.html">
</FRAMESET>
</HTML>

So what happens if somebody visits the page frame.html? The browser window will be divided into two rows, both taking 50% of space of the window. The upper part will display the contents of the file start.html, while the lower frame will show the contents of the file nav.html. At the same time, both frames have internal names, the upper one has the name "mymainframe" and the lower one "mynavigationframe" (completly arbitraire names).
Now let us assume that the start.html-document contains a link, for example a link to the document "another.html". Since the content of start.html is displayed in the upper frame, the visitor can click this link. Then start.html will disappear and be replaced by another.html, so that the upper frame contains the content of another.html, while the lower frame still contains the content of nav.html.
Some words about the "ROWS"- and "COLS"-parameter: The values given here can be absolute values, given in pixel, or relative values, in percentage of the according windows dimension, or it can be the "*". If only one "*" is present, it means "take all the rest". Two asterisks will share the rest. So "<FRAMESET COLS="100, *, 50"> will produce three frames, one 100 pixels wide, the third one 50 pixels wide, and the middle column taking the rest. "<FRAMESET COLS="40%, *">" will produce two frames, the left one taking 40% of space, the right one taking 60% of space (the rest). And "<FRAMESET COLS="*, *, *">" will result in three frames, each taking one third of the width of the browser window.
As already mentioned, frames can be nested. So the following code

and

will have almost the same result (the only difference will be how the borders of the frames are attached).
There is obviously another way frames can be nested: remember our document frames.html, containing the documents start.html and nav.html. If start.html would be, by accident, also a HTML document with framesets, than one frame of the frames.html would show the frames of start.html. This is legal, but it can lead to certain abuse. For example, we could imagine a file named zenon.html, containg a frameset with a frame with the SRC "zenon.html" itself. Then zenon.html would conatin a frame whose content would be zenon.html itself, with all its frames, icluding zenon.html itself... and so on. You should avoid this nesting of frames leading to invinite loops.

What will happen if a visitor with a non frame capable browser loads the frames.html-page? Well, his browser will search for a "BODY"-tag, and since our page does not contain such a tag, it will display nothing. To avoid this, we should include the ordinary "BODY"-container in our document. There is a special container, the "NOFRAMES"-container, to include the "BODY"-container without confusing frame capable browsers. The "NOFRAMES"-container should be included in the basic "FRAMESET"-container. So this is our second version of the frames.html file:

<HTML>
<HEAD>
<TITLE>Frames, second version</TITLE>
</HEAD>
<FRAMESET ROWS="50%, 50%">
<FRAME NAME="mymainframe" SRC="start.html">
<FRAME NAME="mynavigationframe" SRC="nav.html">
<NOFRAMES>
<BODY>
Obviously, your browser is unable to display frames correctly.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Instead of telling your visitor just that her or his browser is unable to display frames correctly, you should also give her a link to your non-frames-version of your page.

Now what is the result of our efforts so far? We have a frame page frames.html, it contains a frame with start.html and another frame with nav.html. If we click a link in start.html, start.html will be replaced with the linked file, and the same goes for nav.html. So what's it all about?
The idea is, that clicking a link in the nav.html document should not replace the nav.html itself, but the start.html. That is, the upper frame should show changing contents, while the content of the lower frame should always stay the same. This is done by targeting the links. Remember that both frames have names, "mymainframe" and "mynavigationframe". Now we edit all the links in nav.html that they do not affect the content of the "mynavigationframe", the place where nav.html resides, but the content of "mymainframe". This is done by adding a parameter "TARGET" to the "A"-tag (or a "FORM"-tag), with the name of the target frame as value. So nav.html could look like this:

<HTML>
<HEAD>
<TITLE>This is a navigation tool</TITLE>
</HEAD>
<BODY>
<A HREF="start.html" TARGET="mymainframe">Page 1</A><BR>
<A HREF="two.html" TARGET="mymainframe">Page 2</A><BR>
<A HREF="three.html" TARGET="mymainframe">Page 3</A><BR>
<A HREF="four.html" TARGET="mymainframe">Page 4</A><BR>
</BODY>
</HTML>

So what will happen now if a visitor loads the frame.html document? The browser will display two frames, an upper frame with the content of start.html, and a lower frame with the content of nav.html. If the visitor clicks on a link of the upper frame, the content frame will be replaced with a new document. If the visitors clicks a link in the lower frame, the content of the upper frame will be replaced with a new document, while the lower frame stays unchanged.
Instead of adding the "TARGET"-parameter to every single "A"-tag, we can also add the "TARGET"-parameter to the "BASE"-tag at the beginning of the "BODY"-container. Like this:

<HTML>
<HEAD>
<TITLE>First menu</TITLE>
</HEAD>
<BODY>
<BASE TARGET="mymainframe">
<A HREF="start.html">Page 1</A><BR>
<A HREF="two.html">Page 2</A><BR>
<A HREF="three.html">Page 3</A><BR>
<A HREF="four.html">Page 4</A><BR>
<A HREF="nav2.html" TARGET="mynavigationframe">Second menu</A><BR>
</BODY>
</HTML>

Note that a "TARGET"-parameter in an "A"-tag overrides the "TARGET"-parameter of the "BASE"-tag.

Instead of writting "TARGET="mynavigationframe"" in the above code, I could also write "TARGET="_self"", since "_self" is a special frame name meaning "the frame the document is actually residing in". "_self" is the default value of the "TARGET"-parameter. We already know another special frame name, the "_blank" frame name. As the reader may remember, this forces the browser to display the content of the link in a seperate new window. There are two more special names: the "_parent" frame, the name of the frame containing the actual frame, and the "_top" frame. A link targeted to the "_top" frame will be displayed using the whole browser window. Let us assume the content of start.html would run like this:

<HTML>
<HEAD>
<TITLE>Page one</TITLE>
</HEAD>
<BODY>
<A HREF="two.html">Continue with page 2</A><BR>
<A HREF="http://www.rzuser.uni-heidelberg.de/˜jthor/index.html" TARGET="_top">Another great page you could visit</A><BR>
</BODY>
</HTML>

So now what would happen if a visitor loads frames.html? The browser would display two frames, the upper containing start.html, the lower containing nav.html. If the visitor clicks a link in the lower frame, the the content of the upper frame will be changed, except she is clicking the "Second menu" link. If she is clicking the "Continue with page 2" link, than the upper frame is replaced with the content of two.html. If she is clicking "...page you could visit", than both the upper and the lower frame would disappear and be replaced by the content of the index.html page of the specified directory.

So this is a way you could use frames: built a menu document with links to all your major documents. Built a frame document with two frames: a larger main frame and a smaller navigation frame. Initiate the larger page with some start document, and the smaller frame with the menu document. Target all your internal links to the main frame. That way, the navigation frame will always contain the menu document.
External links should be targeted to the "_top" frame. Why? Well, imagine everybody would use frames, and nobody would target external links to the "_top" frame. So you surf on a page and find an interesting link. You follow the link, and one of the frames is replaced with another framed page. On this page, you find again an interesting link, and following it, another page with its frames is squeezed in a small frame within frames. And so on. It can be very ennoying to surf on a web page, follow a link and find that the new location is just opened as a small frame, while the old navigation frame is willing to stay for the rest of the session. You should give your visitors a chance to escape from your frames, if they wish to do so.

The rest of this chapter deals with some parameters of minor importance, and later on, we will discuss advantages and disadvantages of frames.

A visitor usually can change the size of your frames, by click-and-move the border of the frames. You can disable this by adding a parameter "NORESIZE" in the "FRAME"-tag. Since this is a restriction of the freedom of your visitor, there should be some reason for doing this. It is impolite to disable resizing sweepingly. Maybe you set some very inconvenient values for your frame sizes, so the possibiliy of resizing is a useful tool.
You can also set the thickness of the frame borders, with the parameter "BORDER" and the thickness, expressed in pixels, as its value, within the tag "FRAMESET". By setting "BORDER=0", you can construct borderless frames. This is the Netscape version of things. Microsoft invented even two parameters to achieve borderless frames: by adding a parameter "FRAMEBORDER" with the value "no" or by adding a parameter "FRAMESPACING" and the value 0. With Netscape, you can also set the color of the frameborder, with the parameter "FRAMECOLOR" and a color code as value.
If a document is larger than its window or its frame within its displayed, usually a scroll bar appears. With a parameter of the "FRAME"-tag, you can control wether this is allowed or not, by setting the parameter "SCROLLING" to the value "yes", "no" or "auto". "yes" will force a scrolling bar, wether it is necessairy or not, "no" will disable a scroll bar, and "auto", the default value, will display a scroll bar only if it necessairy. Setting the "SCROLLING"-parameter to "no" can be usefull if a frame doesn't contain any important information, for example, if it only contains a logo. But usually, you should not use the "SCROLLING"-parameter (and the usual refrain: it also will not work with all browsers).

Some words about the use of frames: remember that some browsers can't display frames, and that it is just a non standard extension of Netscape. So you should always keep two versions of your page, a frame version and a non frame version (or you just keep a non frame version). This doesn't mean you have two re-write all your files: many files can be used both in the frame and the non frame version. Remember our example with the files frames.html, nav.html, start.html, two.html, three.html. You could built a page with the name "entry.html" (or "index.html"), with two links: one poiting to frames.html, the other poiting to start.html, the first one labeled "Version with frames", the other labeled "Version without frames". So a visitor who wishes to get the Version without frames can follow the according link and will get to the start.html page, and on this page, there are other links to two.html, three.html and so on. So you don't have to write two versions of start.html, two.html, three.html and so on, but only have to write the frames.html, the entry.html and the nav.html. The only thing you should bear in mind is that you should target your external links to the frame "_top". If your visitor is viewing the non frame version, this target parameter will be simply ignored, so it will be harmless in the non frame version.
Every frame HTML document should contain a "NOFRAMES"-container, with a link to the non frame section. And the default entry point to your page should link to both alternatives, the frame and the non frame version.
But this doesn't ensures that your visitor will find the frames version. Perhaps the visitor found your page with the aid of a search engine. Than it is most likely that the search engine wasn't pointing to your main entry page, but to some other page, so you should expect your visitor to start with any arbitrary page -that is why every page should carry a link to some kind of index page, and that index page should have a link to the frames page.

Don't try to catch your visitor by omiting the "_top" target in external links. Many people dislikes frames and prefer the non frame version, and the main reason, I think, is that many web pages with frames are poorly designed and omit the "_top"-targeting of external links. If a visitor discovers that your external links are displayed only in a frame and not in the whole browser window and that she cannot get rid of your page, she probably will not bookmark your page or return to it ever again, since she remembers your page as troublesome and badly designed.

Construct one frame for the main content display, and make this frame as large as possible. That also means that you should restrict the number of frames. For example, you could have a frame for the main content display, one frame with a text links menu, one frame with a graphical links menu, one frame with a logo and one frame with your address and some copyright information. That means, your page contains five frames, and that will restrict the possible size of your main content display frame. So it could be a good idea to just keep two frames, a main content display frame and a menu frame, with the menu frame as small as possible. As small as possible means that even on a screen with small resolution the menu frame should display the navigation menu completly, if possible, without scrolling.
The Elephant Talk page of King Crimson gives you some idea of what I mean: it is a very well designed page.
Another frames introduction explaining frames in full detail.

Items not explained in this document

Something I didn't mention so far are forms. Forms allow you some kind of interaction between visitor and server, but you need cgi scripts to process the data send to you by a visitor. There is one way allowing a visitor to send you data without the need of a cgi script, that is, to include a mail address. A mail link can be included like any other link, the only difference between a mail adress and another URL is that it starts with "mailto:" instead of "http://". Example:

Writing a cgri script is not that complicated (although it is a little bit more complicated than writing a HTML document), but the problem is that some server (like geocities, for instance) do not allow you to include cgi scripts. Also, explaining the art of programming would be too detailed for this short introduction.

Unfortunatly, some of the most popular applications need cgi. For example, an access counter. Some server allow you to write your own access counter, other, like geocities, allow you to include some code poiting to their access counter. Another application deserving cgi is a guest book. If your server don't allow you to keep cgi scripts, and also does not support a guest book, you can use another server running your guest book (there are some doing that for free, as far as I know. But those free servers sometimes tends to disappear). An introduction into cgi can be found here.

Another thing not mentioned yet are java applets. Java applets are somewhat problematicly: not only do not all browsers support them (you know, you know), but also some users disables java applets for security reasons. And also, although there was much shout about java, there seems to be few cases were java applets can be invoked in a usefull manner, at least to me. So far, I never saw a page with a good java application and thought "o, that's a great thing, I need that too". And again, a complete summary of java would be too detailed for this short introduction.

[Additional remark: there is an alternative to java applets, java scripts. I changed my mind about java scripts somewhat since I wrote my own lines of code (see my Main Index Pagefor an example).]

Instead of downloading HTML documents or GIF's or JPEG's, you can link also to other file formats, some of them being supported by some browsers, like AU or AIFF or MPEG. You can also compress your files and let visitors download them, or you can put plain ascii text on the net, without HTML tags.

The new version of the Netscape Navigator, and the coming version of the HTML standard bear new features I didn't mention, mainly since the are not widely supported, and that for, I would not recommend their use.

Design and content

Three golden rules for design: Do not make your page too messy. Improve the download time. Stay compatible with as many browsers as possible. Compressed in one rule: Do not everything you can do.

Keep an eye on other pages, but try to develope your own style. Keep your pages unique and uniform.

Do you have to say something? Is there any reason somebody else should visit your page? Many private home pages exhaust their content in "Hi, my name is x, I am y years old an life in z." How boring. Many companies have an internet page "This is the web page of XYZ. Point. It does not have any Content". How useless. You should at least give some information not found on other pages, or at least, some information not found on every other page, or you should give your visitor the possibility to order something. There should be something attracting visitors.

One way to fill your page is to put things on it invented by other people. For example, buying a magazine and scan the pictures and put them on the net. But that is a very problematic way of making your page interesting: most likely, it is a violation of copyright law. Somebody else worked hard for creating all these things, and you spoil her or him by putting it on the net for free.
And than, there are companies searching the web for information, copying it and selling it. That means, the picture you scanned from a magazine and put on the net for free will sooner or later be copied by comanies selling the picture for a fee. That's the way all the "10.000 pictures of cocksucking ladies for only ten dollars a month"-companies get all their pictures: without paying the makers of the pictures. So it's not only illegal to put information on the net without owning the copyright law, it is also immoral. Put only those things on the net you have the copyright, or you know that the copyright expired, or you know that it is free and was intended to be free by its maker.

How to attract visitors

The most important thing to be reachable in the net is to be visible via search engines. There are many different search engines, but only a few important ones. Sometimes you find adds promising "we will send your page to more than 100 search engines for only a small fee", but ask yourself: how many search engines are you using? How many search engines do you actually know? Probably you will know not more than that half dozend of the most important search engines, and so do most other internet users. So it will be sufficient to send your page to Yahoo!, Infoseek, Excite and maybe Lycos.
There are two main different concepts of search engines: the concept of Yahoo, and the concept of all the other engines. The concept of Yahoo is that all pages are viewed and classified by human beings, and stored in a logically ordered search tree. That means a lot of work, and it means a well organized index and the most popular search engine at all. The other search engines prefer a mechanical evaluation of web pages, indexing them in regard of keywords.
There is not much to say about adding a page at Yahoo: you chose the section you think matches the topic of your page most, click the "Add URL"-buttom, fill in the form, type in a description of your page that meets the guidelines of Yahoo and is attractive for potential visitors. If you are asked wether there are other sections your page would fit in, chose as much additional sections as possible.
You have to send only one page to Yahoo (unless you have two or more completly different domains). There is not much sense in trying to spoil Yahoo: it is all checked by human beings, and the best thing is to make just a good page. Yahoo sections are sorted alphabetically, but since Yahoo has now a very differenciated tree structure and small sections, it is not that important to have a page title starting with an "A".
Other search engines surf the web and index every page in regard about what keyword appeared how often on a page. For example, a web document with the content

keyword keyword keyword
keyword keyword keyword

would have a frequency of 100% of the keyword "keyword" (and a frequency of 0% of any other keyword). But most search engines peanalize too high frequencies of keywords. The ratio keyword/text should be near to an optimum ratio, and that optimum ratio differs for different search engines. One way to achieve a good keyword/text ratio is to split your web site in many many different tiny web documents, hoping that one of them would have a good keyword/text-ratio (so this rather long document is not a good example: to be more attractive, it should be split in small parts. But note that nobody can permitt search engines to penalize short webpages, if they want to).
Many search engines use a spider or a robot, that means, if you send them one of your web pages, the will visit it and follow all the links on that page. So if you have an index page linking to all your pages, it will be sufficient to send the URL of this index web page, and all your other pages will be detected automatically. It would be no good idea to send the URL's of all your web pages to a search engine of that kind, since some of them penalize sending too much URL's within a certain amount of time.
To determinate wether your page matches a certain topic, some search engines not only detect the keyword/text-ratio, but they also search for some kind of header information. This information is added to the "HEAD"-container as a "META"-tag, with a parameter "NAME" and a parameter "CONTENT". One possible value of "NAME" can be "description", another one is "keywords". The value of the parameter "CONTENT" is some text. You can use the "META"-tag to make some statements about the content or the keywords of your page, invisible for your ordinary visitors, but readable for search engines. Like this:

<HTML>
<HEAD>
<TITLE>Fantastic bombastic page about red herrings</TITLE>
<META NAME="description" CONTENT="This is free noncommercial page about red herrings with lots of pictures and information!">
<META NAME="keywords" CONTENT="red herring, gold fish, false scent, red herring, diversion, red, herring">
</HEAD>
<BODY>
Somehow, this page doesn't contain lots of pictures and information. But for only a small fee, you will get a lifetime access to over 100.000 pictures of red herrings.<P>
</BODY>
</HTML>

Some search engines use the content of the describtion to display it together with the title and the URL of your page when displaying their search results. So this describtion should lead viewers to chose your page. It need not to repeat the keyword. The content of the keywords will be used by the search engine to determinate wether your page matches a specific search or not. You can repeat keywords, but you should not repeat your keywords too often.
Try to imagine what kind of keywords potential visitors of your page could use. You should use more keywords and a longer describtion than in my example, but on the other hand, if you use too many keywords, the ratio of appearance of a certain keywords and number of keywords altogether will be smaller, and a long description will be abridged by the search engines.
Note that some search engines gives you a bonus if the keyword appers in the title of your page, or if the keyword appears in your URL, like "www.keyword.com/keyword/keyword.html". Some search engines also give your page a bonus if it is an "index"-page.

Another way to become famous is to be mentioned and linked by other pages. But probably the best way to be linked by other pages is to built a good web site and add the page to all major search engines. Of course you can leave a link to your page on every guestbook you find on the net, but the chances that anybody clicks your link on a guestbook on a page visited by 300 people is close to zero. Another way to become linked is to participate in a link exchange programm. That usually includes that you have to put a banner on your page. And this can have some serious disadvantages. A dozen banners on your page will noticably slow down the download time of your page, especially if the banners are large animated graphics. Some visitors finding that your page just reveals banners will leave your page before your own content appears. Also, it can be confusing for your visitors to find your own content between all the banners (your own logo can become indistinguishable from just another banner). And pages with lots of banners look rather messy. So I hereby declare: the maximum number of banners on top of a page is one, the optimum number is zero. The maximum number of banners on the bottom of a page may be three, the optimum number is zero. Avoid banners, if you can. The positive effect of exchanging a banner usually does not cover the negative effect, so its just not worth the trouble.

More information about dealing with search engines here.

So this is the end of my introduction in writing HTML documents. Have fun.

Main jan page

Jan Thor
www.janthor.com
jan@janthor.de

#000000	black	#808080	gray	#ffffff	white
#800000	dark red	#ff0000	red	#ff8080	light red
#808000	dark yellow	#ffff00	yellow	#ffff80	light yellow
#008000	dark green	#00ff00	green	#80ff80	light green
#008080	dark cyan	#00ffff	cyan	#80ffff	light cyan
#0000ff	dark blue	#0000ff	blue	#8080ff	light blue
#800080	dark magenta	#ff00ff	magenta	#ff80ff	light magenta
#ff8000	orange	#400000	brown	#ff0080	violet