HTM Link
>Copyright © David Holden 2002-2007
Contents
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 it's 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, 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.
Opening a link in a new window
If you select New window before clicking on Insert then the program will force the browser to open the link in a new window.
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 widows 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 it's 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!).
Sometimes a JPEG's size may not be correctly interpreted. This won't happen with 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.
Image alignment
An image can be left, right or center aligned, although some browsers don't support the left and right tags so they might not work as expected.
If either of the Left, Center or Right buttons are selected then the image link will be enclosed in a 'paragraph' structure, in the form -
<P ALIGN="xxx"> ></P>
where 'xxx' is one of LEFT, CENTER or RIGHT.
This will leave a blank space above the picture, which is fine when placing a large image on the page with text above and below it.
Center image is an alternative to the Center alignment button. This will wrap the image link in <CENTER> . . . </CENTER> tags. There be no gap above the image if you use this option.
<BR> after image places an end of line tag after the image to ensure that following text (or image) starts on a new line below the image.
New window will, where the image links to another file, force the file to open in a new window instead of replacing the file currently being viewed.
Insert LF before and Insert LF after simply insert a linefeed character (ASCII 10) before or after the text respectively to aid readability.
Some of these options are mutually exclusive or one may make another redundant. Therefore if any of the Left, Center or Right alignment options is selected Center image and <BR> after are ignored. If Center image is selected then <BR> after is ignored.
Text alignment
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. Many browsers don't implement this, so it's best 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, which means that the text will continue level with the bottom edge of the picture.
ALT text
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.
Linking to another file or image
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.
Forcing a new window
If you select New window then any HTML page or image linked to will open in a new window automatically without the user needing to specifically force this action.
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 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 won't matter for a 'solid' image, but if the image outline is irregular with a mask it might not be what you want. In so in this case it is necessary to specify a '0' width border, which is why the default width in this icon is '0'.
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
This will clear the contents of the window to save you having to blank each field manually.
Image types supported
The program supports the use of GIF, JPEG, PNG or Acorn Sprites as images to be used as links.
Normally the different types are detected by their filetype, and this is the only way that Sprites can be detected, but the program will also accept files types as Data or DOS if their names end with /GIF, JPG, /JPEG or /PNG, equating to the file extensions for these types.
Relative links
The reason the Source File has to be dragged to the top icons is so the program will know where it is and so can work out the relative positions of the Image file and/or links. The program can 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.
Saving Choices
You may wish te have the various option in the main window set to your own preferences when the program starts up. If you click on Save in the main window then the settings of all the option buttons and the Vspace, Hspace and Border icons will be saved in a Choices file and this will be loaded the next time you run the program.
If you click on Reset then the settings in the window will be set to th same values used when the program was started or Save was clicked.
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 its 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 send 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 like !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 instantaneously instead of the line unravelling slowly.
Dave Holden