H.T.M.L.

Neil Jones-Rodway introduces a regular new series getting to grips with HTML coding...

CAB is fast becoming one of the most talked about packages on the Atari platform.
Not only is CAB being used in conjunction with STiK and MiNTNet to browse the
World Wide Web, offline it is becoming a popular publishing medium for disk magazines
with both AtariPhile and ST Applications published as HTML documents.

HTML stands for 'HyperText Mark-up Language', and it's a method of describing
how pages of text and images should be formatted and linked together
- that's the Mark-up bit.
HTML also provides a way of linking pages together
- that's the Hypertext bit.

HTML was conceived as a standard language capable of being displayed irrespective
of the hardware/software used - so a document created using CAB on an Atari would
look the same when viewed in Netscape or Explorer on a Mac or PC etc.
Things rarely turn out as planned, and thanks to individual companies adding
non-standard HTML tags which require particular browsers and/or hardware we
are left with a fairly 'unstandard' standard. However, with a bit of planning and
common sense it's possible to write HTML documents which display fine in
most web browsers.

Ingredients

What do you need to get started? Surprisingly not much - and you probably
have most of of the software already. You'll need a plain vanilla text editor.
Everest, Edith, QED, or similar will do fine. An HTML browser to view your work
- CAB is currently the best choice. You'll need to source some images, naturally if
you're creative you can create your own.
A multitasking operating system such as MagiC, MultiTOS or Geneva will make
development easier but it's not essential.

Where to start

You need something to write about. Contrary to popular belief, the most difficult aspect to creating a good set of Web pages is deciding on the content. Compared to that, the actual HTML coding is easy! Before writing the pages establish as clearly as possible WHAT you want in your pages and HOW you are going to organise it. Remember, linking pages together is one of HTML's founding principals, so make good use of it.

The decisions are down to you, but just to illustrate a few examples I've entered some lyrics into the text editor, saved it as SONG.HTM and loaded it into CAB.

This initial mess is, believe it or not, one of the good features of HTML.

Because HTML is designed to be displayed in windows that can change size, you can't use the formatting that is imposed by an 80 column text editor. The browser will completely ignore carriage returns, and reformat the text to fit the window - unless you tell it otherwise.

Tags

Tags are wonderful. They sit in the text and tell the browser to do all sorts of snazzy things. One of the most basic tags is the <P> tag. Putting this in the text tells the browser you'd like to start a new paragraph at that point. Similarly, a <BR> tag will force the browser to insert a line break - perfect for separating the lines of the song.

There are so-called 'container tags' which travel in pairs and surround text segments. They consist of an opening tag <...> and an equivalent closing tag </...>. One such tag is the <TITLE>...PageTitle...</TITLE> tag. This declares a title for the page, and this appears in the window title bar. Every page should have one of these at the very top.

Another common tag is the <H1>...Header...</H1> which declares a heading. Differing strengths of this tag are available, ranging from H1 (strongest) to H6 (weakest).
A mild splattering of the above tags turns the jumbled mess of lyrics into something perfectly readable.

A sprinkling of tags makes all the difference

Images

Our formatted page is a definite improvement over what we had before but it's still a little drab. We could add an image or two to spice it up a bit. Adding images is a piece of cake, all taken care of by adding another tag.

Images are typically in either JPEG format or GIF format. JPEGs are ideally suited to photographic style images, whereas GIFs
are ideal for icons, logos and banners.

To place an image on the page use the tag <IMG SRC='...'>. So let's put an image of the singer along with the lyrics. We'll add it at the top of the page by using <IMG SRC='tori.gif'>.
 

An image adds a new dimension to most pages

The HTML which created the previous page

Now, the IMG tag can take all sorts of extra attributes. One which you should always include is ALT='...'. This defines some substitute text to be used if the browser is working with images switched off. If you omit this the browser will use [IMG] as default which looks really tacky, so you really should define a decent replacement. With this in mind, we'll change the tag to <IMG SRC='tori.gif' ALT='Tori Amos'>.

However, if the image is unimportant, use ALT='' and the browser will purposely omit displaying the [IMG] bit and maintain a pleasing appearance when viewed as text only.

Linking

Links are the backbone of HTML and let you travel around between
documents. When used on-line, the possibilities are endless - you can link your page to other pages physically located anywhere in the world.

Targets for links are added using a URL (Universal Resource Locator) which specifies the name of the file you are after and where it is located. If you are linking to another page on your site (either an on-line web provider or on a disk on your computer) then you just specify the filename.

The link tag itself is quite simple: <A HREF='...'>...SomeText...</A>. A link to the page described above would look like <A HREF='song.htm'>Doughnut Song</A>. When viewed in CAB, the words 'Doughnut Song' would be highlighted, and clicking on them with the mouse would make CAB load up SONG.HTM and display it. We could quite easily have several song files, and create a menu page with links to each one.

A page demonstrating two links, along with the HTML source

Going one step further you can add bookmarks in your pages, which makes it possible to link to any desired position within a page. Bookmarks are defined using the <A NAME='...Mark...'>...</A> tag and you can then specify it along with the filename. For example, if our page contained the lyrics to several songs the title of the song could be marked with <A NAME='Doughnut'>Doughnut Song</A>, then link directly to this song by using <A HREF='SONG.HTM#Doughnut'>.

If your pages are intended to be read on-line, you can link to any other site by specifying a complete URL - a link to the STiK Home Page would look like <A HREF='http://www.flinny.demon.co.uk/'>STiK Home Page</A>. You can also use URLs to specify an image on a remote site, but in most cases it's considered bad 'Netiquette'.

Images can also be used as links. Insert an <IMG...> tag and the image becomes part of the link. Being able to mix and match tags like this is a another major plus point in HTML favour.

Finally...

By now you should have a basic idea of how HTML is bolted together. Next issue, we'll get into formatting and show you how to make your pages look really good. For now, here are a few more simple tags you may like to play around with:

<B>...</B> The enclosed text is displayed bold

<I>...</I> The enclosed text is displayed as italics

<HR> Draws a horizontal ruler (line) across the screen.

Got the idea? See what you can come up with...