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 inportant part of the site.
<P>
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:
<P>
<tt><font color=#008000><html><head><title></font>Title of page<font color=#008000></title></head></font></tt>
<P>
although you'll probably want to set up colours for the background, text and links as well using a <tt><font color=#008000><body...></font></tt> 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 <a href="#colours">colour schemes</a> you can get it to just output the <tt><font color=#008000><body...></font></tt> tag.
<P>
<H3>Naming your site</H3>
The first two boxes on the Header window are for describing your site; the first, <tt>Title</tt>, must be filled in so that the title bar of the browser window describes your site (see also the section on <a href="#search">search engine attributes</a> for information on how this can affect how easily people can find your site).
<P>
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 <tt>Done</tt> or <tt>Download complete</tt> 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.
<P>
Note that both of these boxes have little <img src="grab.gif" alt="Grab" width="16" height="16" border="0"> 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!
<P>
<a name="colours"></a><H3>Colour schemes</H3>
I'm proud of this bit; 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 <font color=#008000><tt><body...></tt></font> tag - which shows you how a certain colour of text would look on a certain background colour and so on. So, I decided to write one, not as a stand-alone package but as just part of a bigger project, which then became HTMl³. Not only did I decide to do it, I would do it with anti-aliased text, and with many more preset colour schemes than any of the PC offerings. I accomplished my task in much less time than I thought, and liked it so much I spent the next two days just designing new colour schemes. Of course there's now another Risc OS program that does the same thing but with background graphics too, but hey, I got there first.
You can either click directly on the part of the colours box you want to edit to bring up the Risc OS colour picker so you can edit that attribute; for instance, clicking on the part that says <b>Foreground</b> will bring up the colourpicker to change the foreground or "text" attribute. You can also click on one of the grey buttons to the right to do the same thing; however, the grey buttons hae the added advantage of the little menu button next to them, which allows you to pick a colour from the 140-odd standard Internet colours. the menu also has options to average out the colour so it's <tt>NetSafe</tt>, and either <tt>copy</tt> the current colour to another part of HTML³ or <tt>grab</tt> a colour you've defined elsewhere. This is covered in more detail on the <a href="style.html#colour">Styles page</a>.
<P>
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 shoudl go back not to the link colour but to the visited link colour. Finally, the <tt>Hover</tt> 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).
<P>
The <tt>Invert</tt> 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 take a look at the <tt>HotLinks</tt> scheme inverted then look at the <tt>Space</tt> scheme...
<P>
Once you've defined your colour scheme use the middle mouse button on the Header window away fom 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 <tt>Colours</tt> 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 <i>right</i> mouse button opens the directory for you so you can delete and rename the files.
<P>
<a name="back"></a><H3>Background graphics and sounds</H3>
The background graphic is actually part of the <font color=#008000><tt><body...></tt></font>, 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.
<P>
The first thing which should be explained is the <tt>Make dragged files relative</tt> option; 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. To make this work, 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 <tt>index/html</tt> and buried in a directory called <tt>gfx</tt> you have a GIF file called <tt>back/gif</tt>; the program knows to call this <tt>gfx/back.gif</tt> 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 <tt>backpic/gi</tt> the program can even work out that this should be <tt>backpic.gif</tt> when you upload your site using, for instance, ArgoNet's <i>WebLoad</i> software.
<P>
It's worth playing with this option as it's used extensively throughtout the program where ever files are dragged on to windows, although this feature can independantly be turned on or off for each window, and the state of these switches like almost everything else in HTML³ is preserved when you quit the program so next time you load it you'll find almost everything as you left it.
<P>
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 <font color=#008000><tt><body...></tt></font> 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 seemless 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!
<P>
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.
<P>
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).
<P>
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.
<P>
<a name="font"></a><H3>Font attributes</H3>
These only really work on Internet Explorer; Netscape ignores them. Basically you can try setting the default font face and size for the whole document, but it might be better to just use <font color=#008000><tt><font...></tt></font> tags within the document.
<P>
<a name="jump"></a><H3>Refresh/jump</H3>
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 included 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; putting up a page saying "<i>This page has now moved; you should now go to another page</i>" and taking the person there automatically after a few seconds; or having a small advertising frame on your site that automatically changes the advert every few seconds.
<P>
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.
