HTML Link
Dave Holden describes another of the RISCWorld HTML tools
Introduction
This started as a simple program to insert the <img.... etc. tagline for a Sprite, JPEG or GIF into an HTML file. It then grew to enable the image to be a link to another file, or image, or a remote URL, or to just insert a text link to another file or URL. Basically, it inserts images or image or text links to local or remote files.
The iconbar menu has two main items, 'Image' and 'Link'.
'Image' will insert links to images, or links from images (ie. click on the image to link to another file). It is therefore used to create both links and to simply insert a passive image into the page.
'Link' just creates a textual link.
Clicking SELECT on the iconbar icon is equivalent to selecting 'Image' and clicking ADJUST is equivalent to selecting 'Link'.
Inserting a Text link
This is the simplest, so I'll deal with it first.
Click ADJUST on the iconbar icon or select 'Link' from the menu and the Link window will open.
The top item, labelled 'Source', is the source file you're inserting the link into. Drag this file to the icon and its full pathname will appear.
The second item, labelled 'Link to', is the file you want to link to. This can be another HTML file, a text file, image (sprite, JPEG, GIF, etc.) or some sort of archive. It can also be a remote URL (see later). Assuming it's a local file drag the file or image you want to link to into the second icon icon labelled 'Link to' and its name will appear.
Before you can create the link you will need some text in the third icon, 'Link text'. This is the text the reader will see highlighted in their browser window and which they click on to make the link.
Now you need to load the HTML file where you want the link to appear into an editor. This can be Zap, StrongEd, Edit, or whatever you use to write or edit your HTML. Place the caret/cursor exactly where you want the link to appear and click on 'Insert'. The link will then appear in your editor.
Remote Text links
Linking to a remote URL, that is, a www address, is similar. Obviously you can't drag the file to the 'Link to' icon, so click on the 'www link' button and the 'Link to' icon will be cleared and 'www.' will be placed in it ready for you to enter the address you want to link to. Enter the link (for example, to link to the APDL web site you would just enter 'apdl.co.uk' after the 'www.') and click on 'Insert' and the text will appear in your editor just as before.
If 'www.link' is selected when you drag a local file to the 'Link to' icon then it will be de-selected automatically and 'Local link' selected.
Inserting an Image link
This is similar to inserting a textual link but it's a bit more complicated as there are more options to consider.
Click SELECT on the iconbar icon or select 'Image' from the menu and the Image window will open.
Drag the HTML file you want the link to be inserted into to the top icon, labelled 'Source', and the filename will appear.
The top icons in the Image and Link windows are cross-linked so that a file dragged to one will also appear in the other. This saves you having to repeatedly drag a source file to the windows if you are inserting both types of link into the same file. (See the section 'Relative links' later for more about this).
Now drag the the image you want to insert the tag for to the second icon, labelled 'Image', where its name will appear. The width and height will be read and show in their icons. You could edit these if you want to expand or contract the image (and if you know what you're doing!).
It's possible that a JPEG's size may not be correctly interpreted. This will not happen if it's a straightforward image that has been 'passed through' a RISC OS program such as ChangeFSI but there could be problems if it has been created in a program on a Mac or PC. If the program isn't sure of the dimensions it will put a '?' after them. If the numbers look about right (and they usually will) they almost certainly are.
If you want your image to be centred in the browser window, which would normally be the case if it's an large picture or illustration, then make sure 'Centre image' is ticked. This will wrap the image link in <CENTER> . . . </CENTER> tags.
The 'Align text' options at the bottom left hand corner of the window are used to define the position of text following the image. In theory 'Top' should see the text continuing from the top of the image, so if the image was left-aligned the text would appear to 'flow around' it on the right hand side. Most browsers don't implement this, so you are advised not to use it, except for a short caption. 'Middle' and 'Bottom' mean that the following text should continue from either the vertical centre or level with the bottom edge of the picture. This is normally used to place a small caption to the right of the picture. 'None' is the default.
If you have not selected 'Centre image' or any of the text alignment options (that is, 'None' is selected) then it is a good idea to select '<BR> after image'. This places an end of line tag after the image to ensure that following text (or image) starts on a new line below the image, otherwise it may begin to the right of the image, which can look a bit strange.
If you want to have any alternative text for your image then enter it into the icon labelled 'Alt text'. This is text which will appear in a browser if the image can't be found or in a text only browser or if images are turned off. Most browsers will also show this text while waiting for the image to be downloaded.
When you have set all the options as you want place the caret in your source file where you want the image to appear and click on 'Insert'.
Using an image as a link
If you want the image to be a link to another file (or image) then proceed exactly as above but also drag the file you want to link to to the third ('Link to') icon. Its filename will appear there and the appropriate information will be included in the tag inserted into your file.
As with text links you can use an image to link to a remote URL. Click on 'www.link' and 'www.' will appear in the 'Link to' icon ready for you to type the www address you want to link to.
Image borders
If you want your image to have a border the width of this in pixels can be entered into the 'Border width' writable icon.
Where an image is not used to link to another file then it will not have a border unless one is specified. However, if it is used as a link then, even where no border is specified, most browsers will place a 1 pixel wide border around the image. This might not be what you want, so in this case it is necessary to specify a '0' width border, which is why the default width in this icon is '0'.
If there is no link from your image and you don't want it to have a border you can delete the '0' to leave this icon blank. No 'border' tag will then be used.
'Vspace' and 'Hspace' are used to place an 'invisible border' around an image. This will ensure that text or other images above and below or to the left and right of an image leave a gap.
Clear All and Clear Part
The two 'Clear' buttons have different effects. 'Part' blanks the 'Image File', 'Alt text' and 'Link to' icons but leaves 'Vspace', 'Hspace' and 'Border Width' so if you are inserting a series of images with similar characteristics (eg. several aligned buttons) you don't have to re-write these values. 'All' also clears these icons. Neither Clear button wipes the 'Source file' icon as it is assumed that you will either be inserting more data into the same file and if not it will automatically be replaced with any new filename you drag there.
Relative links
The reason the Source File has to be dragged to the top icons is so that the program will know where it is and so can work out the relative positions of the Image file and/or links. The program should cope with links to files which aren't in the same directory, whether they're in a sub-directory or a higher level directory. It will try to trace the two paths back to a convergent point to create a relative link.
In fact, once you've established the path to the source file by dragging it to the window if you want to insert links into a different HTML file which is in the same directory as the first file you don't need to drag the second file. It's the POSITION of the HTML file that matters, not the name of the file itself.
Remember that the link will be inserted wherever you have placed the caret when you click on 'Insert'. This has nothing to do with the filename in the 'Source' icon, that is just used as the 'anchor point' for relative links.
Use with !Edit
During the final testing of this program a problem arose when using it with !Edit. This is something which I had discovered a long while ago, but as I haven't used !Edit for years, I had completely forgotten about it. If characters appear too fast then when it's buffer is full !Edit 'loses' characters, typically about every 20'th one. The same thing can happen with some other programs (eg. Pipedream), but !Edit is the only one you're likely to be using to writer HTML.
To avoid this problem the program can be set to sent the characters slowly enough so that !Edit can cope. If you look in the !Run file of !HTM_Link you will see a line;
Set Link_Edit_Compatible "On"
If you are using an editor such as !Zap or !StrongEd then you can change the "On" to "Off". This won't make any difference to the operation of the program but the characters will appear almost instntaneously instead of the line unravelling more slowly.
!HTM_link is Copyright © David Holden 2002.