Side bar

  Colour editing
  Image creation
  JS Tricks
HTML³: Headers |


The header of a web page sets up attributes which will be used throughout the page, and also gives the page its identity in other ways - the title in the titlebar of the browser, how the page is categorised by a search engine and so on. Even though the average user won't see most of what you set up in the header, it's probably the most important part of the site.

The Headers section of HTML³ is large and complicated, simply because there are so many things I wanted to take into account when starting to create a new site. The simplest header though is basically this:

<html><head><title>Title of page</title></head>

(in HTML) although you'll probably want to set up colours for the background, text and links as well using a <body...> tag. You can get this simple form of header from HTML³ by switching off all the other options (although it also adds another tag to identify the top of the page), or if you want to play around with different colour schemes you can get it to just output the <body...> tag.

In WML mode a bare minimum for a workable header is:

 <?xml version="1.0"?>
All of which HTML³ can do - and more!

Naming your site

The first two boxes on the Header window are for describing your site; the first, Title, must be filled in so that the title bar of the browser window describes your site (see also the section on search engine attributes for information on how this can affect how easily people can find your site). This is implemented in WML mode, although it's the card that gets the title, not the whole file (not important as HTML³ pretty much assumes a one-card deck).

The second box is optional, and can be turned off or left blank; it's a piece of JS (JavaScript) that changes the text in the bar along the bottom of most browsers so that instead of saying something dull like Done or Download complete you can welcome people to your site. No Acorn browsers support this yet (20/09/98) but it's so simple to do it's nice to put it in for our PC/Mac/UNIX using friends. Some sites have longer messages that scroll using slightly more complicated versions of the same code, but as these are generally very flickery I've not added this ability yet.

Note that both of these boxes have little Grab icons next to them; this means that you can grab text from one to the other, or even from a completely different window. This is because I hate having to type the same thing over and over!

There's also two tick boxes to include the Author and Language info in the headers of your page; this helps identify the document when you or some else is looking at the source, but other than allowing you to figure out when the page was created and by whom it's not essential. As language data is already entered as a prerequisite for a WML header, only author infor is implemented in WML mode.

Colour schemes

When I started thinking about extending HTML² I looked at the PC market to see what tools were available to PC users, and one thing that was really popular amongst authors there but completely lacking on the Acorn platform was a colour editor for the <body...> tag - which shows you how a certain colour of text would look on a certain background colour and so on.
Body colours
To change the colour you can either click directly on the part of the display you want to edit - the bit that says Link for instance - or one of the grey buttons to the right, or the little colour preview next to these grey button. All of these will bring up the HTML³ colour editor - this is the standard way of changing colours throughout the program, and allows you to use the standard RISC OS colour picker to editor colours, or choose from a list of named colours, lighten or darken the colour, make it Net safe, and even grab a colour from another part of the program or send the current colour there instead. Click here to view the documentation on colour editing.

Body animationNote that you can click on the little F icon next to the display to change the font used in the display, just so that it's easier to judge how the scheme will look in different browsers - although colour handling is different across platforms so it's only an indication of how it might look.
Homerton.Bold, Trinity.Medium and Corpus.Bold are used in this feature; plus Chicago (converted Mac font) and AvantG.Demi (ArtWorks font) if present.

The background and foreground (or "text") attributes should be pretty obvious in what they do (set the background and text colours of the page); the link colour is the colour an unvisted link will look like; the active link is the colour the link will turn when it's clicked on (in some browsers); and then it should go back not to the link colour but to the visited link colour. Finally, the Hover option is a little bit of fun that only works on Microsoft Internet Explorer 4; I've set it so that when you move the mouse pointer over links they light up to the active link colour until you move the pointer off (or you actually click on the link).

The Invert button makes all the colours negatives of themselves, so if you're bored with plain white backgrounds with blue links you can invert and hey presto! you've a gold on black scheme. To be honest it's more useful when you're trying to build up a large number of schemes, for instance if you have my predesigned set installed then take a look at the HotLinks scheme inverted, then look at the Space scheme...

Once you've defined your colour scheme use the middle mouse button on the Header window away from the colour editor and you should be able to select a save box; just type in up to ten letters and click on OK and the colour scheme will be saved inside !HTML³ for future use - the menu button to the right of where it says Colours will scan for any new colour schemes whenever it's clicked on before creating a list of them for you to chose from. Clicking on this with the right mouse button opens the directory for you so you can delete and rename the files.

You can also do proper drag-and-drop saving of the body palette, although it can't be used in any other program than HTML³; you can collect them elsewhere though. You can also save an ArtWorks colour table of all the colours in HTML³ for use in ArtWorks, PhotoDesk and Vantage - if you just specify the name without any directory or filing system information it gets dumped to the options directory and then loaded into a text editor. Note that in this case the name will always be HTML3Options:AWFile to prevent you overwriting other files in the resources directory.

Colours do not work in WML mode of course.

Background graphics and sounds

The background graphic is actually part of the <body...>, but as both of these sections require files to be either dragged on to them or their locations typed in it was logical to lump them together.

The first thing which should be explained is the Make dragged files relative option at the top of the window; this handy tool works out the relationship between two files, so if they're not in the same directory the program can figure out how to get from one to the other. This is explained in detail in the Choices documentation, but basically to make this work you drag the HTML file you're working on or the directory it's in on to the Choices window (or on to the HTML³ iconbar icon, you'll hear a beep) and that tells the program where to start working out from; then drop a graphic or sound file onto the Headers window and the program works out how to get from the web page to the graphic or sound.

As an example, you might have a file called index/html and buried in a directory called gfx you have a GIF file called back/gif; the program knows to call this gfx/back.gif so that a web browser can find it; if you fall foul of the Risc OS ten character filename limit and you have an image file called backpic/gi the program can even work out that this should be backpic.gif when you upload your site using, for instance, ArgoNet's WebLoad software - again, see the Choices documentation for more information on the Extensions options.

The background graphic is just a simple matter of dragging an image file on to the window or typing in a filename, and it will be added to the <body...> body command so that the image is put behind the text and images on your Web site. This background will be tiled, that is if it's not wide enough or tall enough to fill the whole window then a second copy will be placed right next to the first so you get a seamless extension to the image however many times it takes to fill the whole browser window. Obviously if your background image is not designed to tile properly you will see the joins though!

Backgrounds are usually GIF files, sometimes JPEGs, and you can use Acorn Sprite files but obviously these won't work on non-Acorn browsers and so should only be used on sites that you know are Acorn only - for instance, help pages for a program will probably only ever be run straight from someone's hard disc.

The Fixed option will only work on versions of Internet Explorer 4 or above; this makes the backdrop "fixed" so that when you scroll the page, the background remains where it is - the content scrolls over it like your text is floating. A bit tarty, but someone asked for it :-)

The background sound option is more extensive, with options to get the sound effect or piece of music to loop and have a large or small control console similar to one found on a CD player of a video recorder. These are PC only options, nothing on the Acorn range can handle this sort of thing (although NCFresco will play an embedded .WAV file it won't show a console).

The sound option should work with sound samples (especially .WAV files) and MIDI music files; sound tracker music files have been included too, but I don't think a player is standard on most machines.

No background attributes can be used in WML mode.

Font attributes

This section has been recently updated to include both solutions to setting the default font face (both <basefont face="..."> and stylesheets), although sadly at the time of writing neither option works in any RISC OS browser. However, on recent PC (Mac, Linux etc.) browsers you should be able to, say, make sure that all text in a document is rendered in a sans-serif font (the CSS sets the font for both the body text, and any in tables). The size is not set in the stylesheet version as this can affect the size of other bits of text - <big>, <small>, headlines etc. However, the <basefont... tag attempts to change both the style and size of the default text, which not only helps set the font face in older versions of Internet Explorer, but might just alter the size in newer browsers too.

To do all of this properly, with control over the size of the regular text, headlines, plus lots of other useful controls (all headlines in colour for instance) will require a fairly hefty chunk of HTML³ being re-written to have a new header section with proper stylesheet controls. This will probably happen. Just don't ask when.

No default font attributes can be used in WML mode.

Search engine attributes

Getting your page noticed on a search engine is a sure fire way of getting people to visit from all over the world, so you want to be able o provide the engine with enough information to categorise your site properly. You shouldn't rely on it totally, as links form other sites of a similar nature are also vital for a site's hit rate, but you should at least visit AltaVista and add your URL to their list of sites to be added. Using a multiple submitter like Submit It might get you on more search engines, but be ready for the junk mail that some of these engines send out trying to get you to pay to upgrade to a more prominent listing.

There's two approaches to submitting to a search engine; a scattergun approach, and a more targeted one. The targeted approach is basically to get a higher score with the search engine, and hence get higher up the list, by having a very narrow set of data, duplicated in lots of areas; you should have the same phrase repeated in the title, the search description, somewhere in the body of the text (perhaps the first headline), and in the search keywords - and keep it short. If someone then looks for exactly that information, you'll come out near the top.

However, if someone doesn't look for exactly your data, they might miss your site; some say a better approach is to have lots of data in the hope that some of it may get a hit. For instance, many times I've entered the name of a famous person, for instance Sarah Michelle Gellar, found a link, and then ended up at a porn site - with no Sarah Michelle Gellar pictures I might add. A common trick for such sites is to load their search keywords with names of famous people in the hopes of tricking the unwary. Search keywords can be entered either just separated by spaces, or you can separate words and phrases with commas.

If you want to fill in all of this information - and you should - then make sure that the Make visible option is selected; otherwise, select Not bothered and no data will be used. The third option, Hide, tells certain search engines that you do not want that page indexed at all, but they should follow the links on that page to see if there's any other pages that can be indexed; this is handy when you have a frames site - you don't want people jumping straight to the navigation frame, but do want them jumping to the content pages leading off of that page. Another way to do this is to upload a file called robots.txt which contains instructions for whole directories not to be indexed, but that's not really in the scope of this document.

All of this section is implemented in WML mode.


This fun little section allows you to set a time in seconds and a URL, and the browser will jump to the URL after that amount of time has elapsed. Uses could include putting up a page saying "This page has now moved; you should now go to another page" and taking the person there automatically after a few seconds; refreshing a WebCam page every five minutes so that people see the new image without having to hit reload on their browser; designing a snazzy front page for your site which automatically goes to an index after a while, or even a whole slideshow section; or having a small advertising frame on your site that automatically changes the advert every few seconds.

Note that extensive use of this function can be a pain in the ass as it clogs up the browser's history (the person might have to hit the back button hundreds of times to get back to a page if you've been sending loads of adverts, and so they'll not come back to your site again), and it can keep an NC online even when they appear to be swiched off (in standby mode) running up huge bills, so use it carefully, and try to put a manual link on the page so if a viewer's browser doesn't cope with this command or if they want to move more quickly through your site then they still have some control.

This section is implemented in WML mode.

Base target

Many of you should already be familiar with the concept of targets - you can tell the browser that, on following a link, that page should be loaded in a certain frame. Base target sets the default target for the page so that you don't have to include it in every link definition. This is handy if you are designing a frames-based site and want a navigation frame which has a lot of buttons to load documents into the main frame - just set the base target to main (if that's the name of you main frame).

Another use is to set it to _top if you're not using frames - this way, if someone with a frames-based site links to your site and forgets to break their own frameset, then anyone following that link can get out of the frameset just by following any link around your site.

Obviously base target is a follow-on from the much earlier command base href, which tells the browser where the page is supposed to be located - for instance, you could have a local copy of a HTML file, but because the base href tells the browser that it's on a server somewhere the browser is able to go away and fetch all the graphics from the remote site. It's also good when you get a domain name - someone comes in to your long, complicated old site, and you use base href so that when they follow any links on your site they appear to be using the new domain name - even though the pages may be in exactly the same place, you might just be doing it to tidy up the URL bar at the top of the page.

Given that the base href command tells the browser that the page you're looking at isn't where it might appear to be at first, I have specifically left this option out of HTML³ - it's an option that can only really be used at the last minute before the site is uploaded, because unless you're editing your files via NFS on the actual server rather than a local copy, and the site goes live instantly, you can't edit your pages!

This section is not implemented in WML mode, as 'phones don't use frames.

Miscellaneous controls

There are two tick boxes left to explain; Defeat cache tells the browser or proxy server that it should not store a copy of this page, best used when the page is dynamically generated or otherwise given to change on a regular basis - for instance, if it's a news page that gets updated every day, perhaps every hour, you don't want it displaying yesterday's news. However, Fresco is broken in this respect (as with much else to do with it's cache).

Defeat cache is usable in WML mode, but whether the 'phone in question will use it is anyone's guess.

The Rollover code option is to include that small JavaScript program in the headers that allows you to have rollovers - images which change when the mouse pointer moves over them. See the Links, Images and Rollover pages for more info, but in a nutshell: you have to have this program somewhere in your document, and the header is the neatest place, but you can add the necessary code by using the Rollover code button on the Links window too. Not implemented in WML mode.

In HTML modes there's an option to add code to get rid of page margins - No margins. This goes in the <body...> tag, and allows (for instance) table layouts to go right to the edge of the browser window, with no border round the edge of the page.

Finally, it should be noted that there's an Output <body...> only option that just outputs the <body...> tag so you can change your mind about your colourscheme as much as you want without having to output full headers all the time. Not implemented in WML mode.

HTML³: © Richard Goodwin 1997-2002