This is by no means a complete guide to HTML. It is something I put together for a couple of friends to help them start off. They commented favourably so I decided to put it here for general consumption.

You don't need any special software to write HTML. Any word processor will do. You will need to save the finished product as ASCII text, which is an option available on most, if not all, word processor programs.

HTML operates with instructions called "tags", which you will recognise easily because they are always <sandwiched> between two chevrons. They usually come in pairs, one where they start and one where they stop. The second tag is identical to the first, except that it has a "/" added before the text.

So, if you are creating an HTML document, the first thing you need is a pair of tags to say "this is in HTML". They look like this:-

The page has two sections, a "head" and a "body", each of which has a tag at beginning and end. So now the code looks like this:-

The Head

The main item that appears in the head is the title, which is what appears in the blue band at the top of your browser screen. This obviously needs to be kept short and sweet if you want it all to appear. It will not appear in the main part of the screen. In the source code it would look something like this:-

If you use JavaScript you will sometimes find scripts that have to go in the head. However, JavaScript definitely comes under the heading of Advanced Topics. So much so, in fact, that even Prospero has not yet found time to learn it.

The Body

Text

If you want a title in the main screen as well, you need to add it in the body. There are special tags for this, known quite reasonably as heading tags. They have a number included, between 1 and 6. This determines the size of the heading. The format is <h(number)>...</h(number)>.

<h1>This is the biggest heading.</h1>

<h6>This is the smallest.</h6>

You will notice that these headings are not centred. You can centre anything in the document by adding <center> and </center>. Remember to use the American spelling, if you're a Brit.

Once you have your headings in place you could just type any text in as is but any spacing will be ignored. There are three main ways to get around this.

The simplest is <pre>...</pre>. This leaves the text exactly as you put it in, complete with spacing. The snag is that you cannot use other tags in such text, which rather takes the fun out of it.

Then there is the paragraph tag, <p>...</p>. This puts a blank line at either end of the passage it surrounds.

Lastly, there is <br>, which is a line break. This is one of those rare tags which have no opposite.

Another feature you need to build into your text manually is bold and italic text. Bold uses <b>...</b> and italic uses <i>...</i>.

Images

There are two types of images currently in wide use in HTML documents. GIFs are normally used for artwork created on a computer, while JPEGs are used for photographs and scanned images. Both are treated in the same way in a document.

An example of the simplest kind of image reference would be:-

This will be easier to remember if you know that "img" is short for "image" and "src" is short for "source". "tulips" is obviously the filename and "gif" is the suffix, which indicates the type of image file referred to. The other possible suffix is "jpg", for a JPEG file.

In order to place an image where you want it in relation to the text, you can use the "align=" command within the tag. Thus, if we alter our tag to:-

the image will appear on the left of the page and the text will flow around it.

If we change it to:-

we get much the same thing on the right. In both cases, I placed the image tag before the text I wanted beside it. The vertical alignment is with the top of the text.

You could also use top, middle, or bottom, to align the image. Notice that left and right start a new line, whereas top, middle and bottom do not.

Image Dimensions and Alternatives

These are useful for two reasons. Firstly, they mean that when someone is downloading your page, their browser knows what size of image to expect and can display the page before it has downloaded all of the images. This might not sound that important but if the server at either end is very busy it can make a big difference.

The second reason is that the browser applies the given dimensions. This means that you can choose the size of the image. For instance, on the lesson pages of this site I have used the same images as elsewhere for the links. I wanted to put five links in instead of four, so I resized them. So, with its dimensions put in, our image tag might look like this:-

Another addition to the image tag takes the form alt="...", which stands for "alternative". The purpose of this is to give the image a kind of caption, which will show up in place of the image while it downloads or if the browser has images turned off. If and when the image is in place, this caption will show in a little yellow box under the pointer when you move the mouse onto the image. So finally our image tag looks like this:-

Links

These are what makes HTML more than just an overcomplicated word processing format. They allow you to move easily within a page, within a site or between sites which may be nowhere near each other in either physical or cyberspace.

The basic tag is <a href="somewhere">, followed by </a>. The "a" stands for "anchor" and href is an abbreviation of "hypertext reference". Where I have put "somewhere" is the part that says where to go.

So if I put a tag in this document that says:-

<a href="http://www.draconis.co.uk">click here</a>

the result is that you can click here and be transported instantly, or as nearly so as the technology allows, to the exceedingly wonderful Draconis Trading site.

If you like, you can use an image instead of text as an anchor, like this:-

The result is this:-

The links you use to move between pages in the same site are simpler. Assuming that the pages on the site are all in the same directory, you just use the filename for the page you want to go to. So if I wanted a link here to go to the Tarot Decks page, it would look like this:-

<a href="decks.htm">Tarot Decks</a>

Tables

You may be familiar with tables as they exist in word processors and spreadsheets. HTML tables exist for much the same reason; to keep things in a given spatial relationship to each other so that they can be seen the same way on different machines.

For instance, I could put a caption under a picture and have it look perfect on my machine but you might have a different size of screen or have your fonts set differently, which would throw the whole thing out. Tables stop this happening.

The basic tags for a table are <table>,<tr>, <td> and their opposites, </table>, </tr> and </td>. <table> starts the table off, <tr> starts a row within it, and <td> starts a cell within the row. So this piece of code:-

<table><tr><td><img src=tulips.gif></td></tr><tr><td>A vase of tulips</td></tr></table>

creates this table:-

A vase of tulips

Or, if we chop a bit out of the middle, like this:-

<table><tr><td><img src=tulips.gif></td><td>A vase of tulips</td></tr></table>

we get this:-

A vase of tulips

This is where it ends for now. Hopefully it will give you enough to make a start. As I said at the beginning, it isn't all-inclusive, though I will add to it as my own knowledge increases. In the meantime, keep in mind that you can look at the source code for any page on the web. In Internet Explorer you use Source from the View menu. I believe something similar exists in other browsers.