Side bar

  Colour editing
  Image creation
  JS Tricks
HTML³: Links |


Links are basically what put the H in HTML; the ability to link documents to other documents and files, or even specific areas within documents, is what makes hypertext more than just a format for presenting text, and good, easy to understand links are fundamental to navigation around a Web site; to this end HTML³ has a comprehensive set of controls both visible and behind-the-scenes to aid in setting up links.

The Links window is split into two separate areas - a one-line top area to create anchors, and the larger main links section. To take things in both sequential order and order of simplicity, I'll explain the anchor section first.


Anchors are small bits of trace code, almost like anti-links - they're there to be linked to, not from, and yet share many characteristics with links. The format for these codes is <a name="anchor_name">...</a>, and anything within this tag can be jumped to by <a href="#anchor_name">...</a>; this means that you can, for instance, anchor all the subheadings on a page and have a sort of index or list of sections at the top of the page for quick navigation, as with the FAQ. You can also jump to a certain section on a different page by adding the #anchor_name to the end of a normal URL, for instance <a href="http://www.domain.tld/index.html#anchor_name"> ... </a>.


To use the anchor function of HTML³, all you have to do is enter a piece of text in the white box you want to associate with an area of a Web page; it's easier to use a word than a serial number or something equally obtuse because at some point your going to want to put together the links, and it helps if you can remember what goes where! Obviously you don't need the # on the front, this only goes on the link to the anchor, not the anchor itself. Also, you don't have to actually contain anything within the opening and closing tags, you can just put <a name="anchor_name"></a> before the subheading, block of text or whatever you want to mark out.

Finally, a neat feature of using HTML³ to create anchors is that a link to your anchor is automatically created in the link history, so you can just use the menu to create the necessary link.

Links proper


The main portion of
the Links window

Creating links using HTML³ to create links really is as simple as dragging and dropping files onto the links window (or the side bar, or any other window which doesn't claim that particular file's type as it's own). To get the best out of this on sites which are not all created in one directory however you should tick the Make dragged files relative option, and drag your HTML file or directory to the iconbar icon (see the Choices documentation for more info) so that the program can work out the best route between two files. You can drag any kind of file directly on to the URL box to create a link to it, even if, as with images, dragging them onto other windows would do other things.
When you're dragging files to this window HTML³ will attempt to guess some text that should be associated with that link in the Linked text box - for HTML files and directories this will generally just be a slightly altered version of the file leaf name, whereas other files will have the unmodified name and in brackets the size of the file.

File dragging: special cases
URL files of both the RISC OS and Windows variety can't be linked to; this is because they contain links, so HTML³ is intelligent enough to use the data inside them instead. Any file with the extension .url (/url under RISC OS) is considered to be a URL file, irrespective of the RISC OS filetype - &B28 for Ant style URL files or &F91 for Acorn URI files. If the file doesn't include some kind of titling data the file's name, stripped of any extensions, will be used. URLs from these files will get added to the URL history automatically.

Support for PC URL files came about because Internet Explorer can email these files, or you might have access to a PC on a network; it works especially well in conjunction with LanMan98, poking around in LanMan98::<drive>.$.WINDOWS.Favourites

Similarly, any files with the extension .map will be assumed to be imagemap definition files (&259 "server" files according to !ImageMap). They will be linked to, but the Links window will automatically assume that you want Get data from Image window switched on, and it will open up the Image window with the various imagemap options switched on (it'll even put the caret in the bit where you type the name of a client-side map!).

The URL box: further info
Pressing [TAB] will automatically put http://www. into the URL box; to make sure people get to sites quickly, if you're referring to either just a domain, or a directory in that domain (i.e. in both cases no file names are involved), make sure the URL ends in a "/" - is not the same as, the version without the ending "/" will take longer to fetch as the browser will be redirected to the "correct" version by the server.

You might have noticed that at the side of the URL box is a menu box; the last 30 links you generate from this window will be stored in a database so that you can get recall a link quickly without having to re-type it, and also so you can use the data in other windows such as the base target option in the Header window. Note that if you reuse the same link it jumps back to the top of the list but is not duplicated; it also stores the latest extra info such as the linked text rather than the original, so if you're working on more than one site and are fed up of having to continually alter the data for index.html then I suggest you take a look at the options page to learn about saving separate data applications for each site.

The Linked text box is the text that will be highlighted and can be clicked on in a link. Note that it is generally considered bad form to link to the words Click here - someone who is speed reading the page trying to find a specific piece of information will constantly be having to jump back to read the previous lines to see what the link is pointing to. It's much better to try and link using descriptive text, such as...
You can view the FAQ, or go back to the index page.

You'll also see that not only is there a menu icon from which you can extract data from the history list, there is also a grabber icon which can be used to pull data from other area of other windows, to save you having to type the same data into different windows.

You may also from time to time wish to link from an image rather than text; tick the Link to Image option and instead of linking to a piece of text you'll get a link around what is exactly the same data as you would get if you clicked OK on the Image window itself - so make sure you've set your image up correctly first! If you select this option you also get access to the 'More' caption link option; if you've chosen to caption the image you're linking to, you'll get an extra line of text around which is an exact copy of the link around the image in it's entirety. This is great for thumbnailed images linking to the full sized version, or if like me you prefer your linked images without a border it's a visual cue that there's more to be had by clicking on a link.


This sets the attribute target=, this is usually to tell the browser which frame to open the linked document or file in, but can be used for opening a new page when a link is clicked on, or defeating framesets if another site with frames has linked to your site. You can switch this on or off with the tickbox next to it, but it can't be used at the same time as the Window option (see below).

In general you should know the names of the frames you're using because you need to specify them when you're creating the frameset. However, there are a number of presets. Apart from a few likely candidates (sidebar, main, top, bottom etc.), there are some special targets that are useful even if you're not using frames per se - _top, _blank, _parent and _self.

In order they will open the linked file in a full frameless version of the current browser window - i.e. the top of a frameset (handy to break framesets, or to change from one set of frames to another); a new, blank window; the frameset above the frameset you're in now (just in case you're nesting framesets); and in the current frame - this last is the default action anyway, but you can set the default frame target in the Headers using the Base target option.

This option is also useful if you're not using frames in two ways - you can specify that target="_top" to make sure your site is not enclosed in someone else's frames - although the page they initially come to to will be in the rogue frameset, any subsequent pages a visitor links to, provided that link has this option set, will break the frameset. target="_blank" opens a new window, which can be useful to link to things without the reader "losing" the page on your own site - for instance, if they click on a thumbnail it could take them to a page with a bigger version of the image (or just the bigger image in a new window), and they just have to close that window when they've done with it to get back to the original page; or you can link to someone else's site but not have their content take over the browser window your content is in (if you're feeling a little selfish! Smiley). Note that you can also do something similar with the Window option below.


This allows you to display the contents of the linked file in a new window. Although using Frame controls (see above) you can open a fresh browser window, this JavaScript version gives you more control over the appearance of the new window. This option has been extensively tested in (and modified to get the best performance from) Oregano, Fresco, Internet Explorer (5.5), Netscape (4.77, 6.01) and Opera (5) - Fresco doesn't allow you to do anything other than open the window, but at least the reader will get to see the contents of your file. There's more you can do on this front, more of which later.

By switching on the Window option, you (obviously) get a new window, inside which you'll see the file you've linked to - not much different to a regular link with the Frame control switching target="_blank" on, you might think. But wait! this version has no navigation bars (etc.), all the viewer will see is your content in a clean, unadorned window.

You should then be able to use the size option (by switching x and y on) to set the size of the window; this is especially useful if you're just showing an image in the new window. In fact, dragging an image to the main part of the Links window will set the x and y for you. Note that there may be a margin around this image, it depends on the browser you're using; I add about 25 to the width (x) and 25 or 65 to the height (y) to make sure a graphic displays properly in Oregano (25 displays just the image, 65 shows the filename too). The expand button (two outward-facing triangles) will add 25 to the current x and y values for you. You could also knock up a quick HTML page to display the image which sets the margins to zero (see the Headers section for more information on doing this).

The top option will open the window at the very top left of the screen; this might cause problems if the close icon goes off screen, but this is browser-dependant. The scroll option sets whether the window has scroll bars (and can be resized) or not.

Click here for a test window

The modifications done to make this type of link work in all browsers properly look a bit strange - the main href is href="javascript:void(0)", and all the work is done via an OnClick event. When using javascript:etc. in the main href, MIE kept giving me a blank page with [object] in it, and I couldn't figure out a way around it; using href="#" caused some browsers to go back to the top of the page (or even reload the page); href="javascript:" caused Netscape(s) to open a javascript type-in window as well as the new page. The old version of WebsterXL I have doesn't seem to like OnClick events, but I'm sure this has probably been fixed.

So you have your fancy JavaScript link for opening data in a new window; but what happens when someone comes along and tries to access that link using ArcWeb or Lynx? Telling them to upgrade to a better browser if they complain probably won't help matters. They won't be able to get at the linked information, and you've probably lost part of your audience from your site.

So, ever the backwards-thinking technogeek I added a "safe" option which gets around this. It uses JavaScript itself to construct the JavaScript version of the link, and then inside a <noscript> tag constructs a very simple plain link (a sorely underused trick). It outputs an even larger amount of HTML (not something you'd want to construct by handy, certainly), but everyone's happy. Apart from the fact that, in testing, switching on all the link and image options output about 1.4KB just to link a thumbnail to a larger image, which if they're using ArcWeb might take forever to download! Smiley

Although the following example is slightly modified to change the enclosed text as well as the link tag, it should give you some idea of what's going on:
<script language="javascript">
document.write("<a href=\"javascript:void(0)\" onclick=\"'links.html','myWindow', 'toolbar=no,status=no,location=no,menubar=no,width=325,height=325');\"> Fancy version of the link</a>")
// -->


<a href="links.html" target="_blank">Plain version of the link</a>

Note that the speechmarks around the link in the javascript version (i.e. href="..." are "escaped" - href=\"...\".

Here's a test of this in action:

Auto fancy JS linking detection in Oregano and ArcWeb

Auto fancy JS linking detection in Oregano and ArcWeb

If you get an error from Fresco saying "This operation is not meaningful when no document is loaded", this means that the file linked to can't be found. Seems that this error is not meaningful when trying to load a document!

Rollover images

This is covered in much greater detail in a seperate Rollover page, but basically it uses some JavaScript that allows you to change an image when someone moves over a link - this link could be connected to the image itself, so that the image appears to light up as you move over it.

If you drag an image to the Images window (making sure the Name for JS effects option is switched on), drop that same image to the Image name or Original SRC part of the Links window, drop the image you want to change to on the Replace SRC area, make sure the JS: Rollover images option is switched on, and you can get the link to change that image.

Note that you also need some controlling code to make things work, which can automatically be put in the header using the Header window or anywhere within the document using the Rollover code button at the bottom of the Links window.

Extra tools include menu icons to pull out the names and filenames of images that have already been added to you page or site, and arrows to copy the filename from up or down to reduce typing (if you're one of those funny people who don't like simply dragging files around).

JS description / regular "title"

Switching on either or both of these options allows you to specify a little piece of text to explain what the link does, so instead of a boring URL appearing in the bottom bar of the browser window you can say Click here to go to my home page! or something. The JS option is best, the title is really for Fresco (which still displays the URL anyway, but you get the text first); the title under MIE or Netscape is relegated to a tool tip.

As with some other sections there's an icon to grab text from elsewhere - such as the Linked text box.

HTML³: © Richard Goodwin 1997-2002