Are you afraid of HTML? Do you think it is too much bother to learn? Well, don't be afraid; and think again! It's incredibly simple to learn the basics in a few minutes. This brief note concerns only basics. For the more powerful aspects --- and they are very powerful --- you will have to dig deeper (see the section on `Assistance'). But the material below will allow you to format, or HT-mellify, a simple document for inclusion on the HIRLAM Extranet site, and that will make the System Manager (and me) very happy!
A HTML file has three types of components
Text should be written first, then marked up with tags. Comments require no further comment, except that they should be used extensively to aid later comprehension.
Most tags have corresponding end-tags (same form, with an extra `/'), e.g, <b> switches boldface type on and </b> switches it off again. Many tags have attributes in the form property=value; some examples occur below. Tags can be in upper or lower case; it doesn't matter.
The first line of the document should always be <html>. The last line should always be </html>. Don't agonize over this; just do it!
Every HTML document should start with a header, starting with <head> and, naturally, ending with </head>. The only essential material in the header is a title, which appears in the window border, and can be the file name or other helpful name. Thus, the title of this document is "Learn HTML", and the first few lines of the document are
<html>
<head>
<title> Learn HTML</title>
</head>
The title does NOT appear in the window. You should also include a banner headline in the body of the document if you want one; this is described below.
We're half way there. The rest of the file is the body, starting, as you might easily guess, with <body>. Everything you want in the text follows. Finally, the last two lines should be </body>, signalling the end of the body and, as stated before, </html> for the end of the document. That's it, except for a few fancy frills, which are described below.
Most of the time, you just type plain ASCII text, which contains the information you wish to convey. Indeed, it is probably best to prepare your document first without considering formatting issues, and to put in the tags at the end. Compose first, mark up later!
Normally, everything is in roman type, at a sensible size. But other typestyles are easy in HTML. We can have italic, bold, underlined or teletype by enclosing text between tags as follows: <i> ... </i> for italics, <b> ... </b> for bold, <u> ... </u> for underlined, and <tt> ... </tt> for teletype. These are so obvious, they are impossible to forget!
Generally, HTML ignores multiple spaces and blank lines. It decides where to break lines, so forget about this. Unless you really need a break; then type <br>. For a new paragraph, a blank line won't do; you must insert <p>. (If you wish, put </p> at the end of each paragraph; but it's not required). Normally text is left-justified. If you want it centred, enclose it between <center> and </center>.
Different sizes are easy. The type gets bigger if you enclose it between <big> and </big>. Similarly the pair of tags <small> and </small> enclose smaller text. It could hardly be simpler.
It is simple to include banners and section headers of various sizes. For example, the top line of this note was produced by writing <h1 align=center> HTML in Less Than No Time </h1>. The effect of the attribute align=center is obvious. This type-size is too big and ugly for section headers --- maybe, even for the banner! The header of this section resulted from <h2>Section Headings </h2>. Smaller headers result from <h3>, <h4>, <h5> and <h6>. So, the full range of sizs is:
A reasonable practice is to use <h2> ... </h2> for sections and <h3> ... </h3> for subsections.
Lists are simplicity itself. Unordered (or bulleted) lists are bounded by <ul> and </ul>. List items start with <li> (strictly, they should end with </li>, but you can usually omit this). Thus, the matinal activities of the HIRLAM Project Leader are:
Ordered (or numbered) lists are just as easy, they are bounded by <ol> and </ol>. Again, each item starts with <li>. Thus, the vesperal activities of the HIRLAM Project Leader are:
The actual code used to produce this simple list is as follows:
<ol> <li> Turning off the TV <li> Putting out the cat <li> Going to bed </ol>More complicated lists are possible, but the simple ordered and unordered lists illustrated here should cover most common contingencies.
HTML ignores multiple spaces and line breaks. To force white space, you can use <pre> to preserve exactly what you type in. For example:
This sentence was enclosed between <pre>
and </pre> , with lots of
empty space which was preserved in the display .
This facility is very useful if you want to reproduce text literally, for example computer code listings.
A horizontal rule is produced by <hr>. If you want it half the page-width use <hr width=50%>. If you want it thick, try <hr size=10>. Thus <hr width=80% size=4> produces
HTML: The Definitive Guide, by Chuck Musciano and Bill Kennedy,
published by O'Reilly and Associates. It is up-to-date, comprehensive in scope and easily understood.
The HTML standard is maintained by www.w3.org, so here you'll find the full syntax. A more accessible introduction is found at http://www.cwru.edu/help/introHTML. The help function on Netscape's task bar may prove useful for further references.
Tools: Several tools exist that may make HT-mellification easier:
Perhaps the most important aspects of HTML are its power to link together information from different sources, and to combine material of various forms. Only the briefest example is possible here: suppose you wish to import an image of the HIRLAM logo, and to provide a cross-reference to the file containing it. This is easy: if the HIRLAM logo is in a file called hirlam.top.gif, you can display it in your document by typing, say
<img src="hirlam.top.gif" width=240 height=180 align=middle
align=left hspace=50 >
and you can include an anchor
(between <a ... > and </a>) which allows you to jump to it,
for example
<b> Click <a href="hirlam.top.gif"> here </a> to display the HIRLAM logo </b> .
The result of these two commands is to produce the following:
Click
here
to display the HIRLAM logo
The word here is highlighted. One click takes you to another file, another site, or another world.
The good news is: you don't have to type lots of abstruse control characters to begin. Just start Netscape or an equivalent [Nerdish: fire up your browser] connect to the HIRLAM Extranet (http://www.knmi.nl/hirlam/project), and select this file (named Learn_HTML.html). If you click on view on the menu-bar and then on source, the raw HTML will appear. You can download the HTML file if you wish. If you don't know how to use Netscape, ask someone to help you (the younger the better --- the time in seconds to understand is equal to the product of your ages in years).
One small word of caution: the Netscape editor tries to be too smart, and makes uninvited changes. For example, <big> ... </big> was changed to <FONT SIZE=+1> ... </FONT>, and lots of inessential </P>s and </LI>s were added. But you will soon get used to this.
You can start to experiment immediately, editing the file and displaying it with the browser and, when you are happy, printing it. If you have documents of general interest --- scientific articles, meeting reports, etc. --- why don't you HT-mellify them and send them to the Extranet for other HIRLAM participants to see. I urge you to make use of the Extranet; it is an enormous benefit for a dispersed project like HIRLAM. And it's great fun.