Basic Hitop.
4. Automation
It is highly likely that you will have at least one image on your website. Most people do. Hitop does something very useful for your GIFs, JPEGs (and from version 0.33) your PNG files: it inserts the width and height values of the image, into your HTML source.
Why, you may wonder? Well, when the width and height of an image is specified in the HTML source, the browser can determine more quickly, how much space the image should take up on the web page. Without the height and width being specified, the browser will have to load up the image and find out the details itself, which increases the time it takes to display the page.
By itself, one image is not going to add much time to the page, but consider if you have 10, 20, 30 or more images on a page - the time adds up.
So Hitop does the work for the browser, speeding things up a little. How does it do this marvelous thing? Simple. All you need to do is tell it where the file is. For example, to display the image below, I have placed in the source code the following HTML:
<img src="../../build/logo.gif" alt="Planet Hitop
Logo">This displays the following image (assuming you're using a graphical browser that is!):
Now, using your browser, take a look a the source code of this document. Somewhere in the depths of my HTML, you'll see this:
<img src="../../build/logo.gif"
WIDTH=183 HEIGHT=44>It may take a bit of finding (look for the comment tag that says "LOOK HERE!!!" to help you) but you'll find see it.
Hitop will add the width and height of an image whenever it can find it - it is unlikely that it will find your image if you specify an image using an absolute file path (ie /hitop2/images/globe_333.gif), or if you put it as an URL (http://www.planetbods.org/images/globe_333.gif) but if you specify the image as a relative URL (ie images/globe_333.gif), then you should have no problem. Hitop will also not put in the width or height attribute if either is specified already in the HTML source.
If you don't believe it, give it a whirl yourself. Find an image, and run Hitop on the following template, where filename is the name of your image.
<html>
<head>
<title>Example 4</title>
</head>
<body>
<img src="[insert your filename here]" alt="My image">
</body>
</html>You can download this template here - don't forget to add your image file to it, else nothing will happen!
One thing should be said about the format which Hitop outputs the
WIDTH and HEIGHT attributes - it writes them to the
source HTML in uppercase and the attributes are not quoted - this means that
currently, Hitop is not suitable for writing pages in XHTML, unless you always
specify your image height and widths. This is something that will be addressed
in the next generation of Hitop development, but not yet available.
Whitespace
The other nice thing that Hitop does for you is compress your files down by removing whitespace from your HTML source code - ie it takes out all the tabs and spaces.
This makes your webpages smaller, and hence quicker to download - spaces and tabs can increase the page size and thus download time, by quite a bit. Hitop does, of course, leave your source files alone, so you have as many indents, spaces and tabs as you like when you see it, and yet by the time it gets on the web, it's all compacted down nicely.
This does have one draw back - inline JavaScript can get messed up by Hitop's formatting of the document, hence it is usually best to put your JavaScript in an external source file, unless you are specifically supporting Netscape 3 and IE3, neither of which support external JavaScript files.
The other problem with Hitop's formatting is that the removal of whitespace
will affect any pre-formatted text in a <pre> tag.
Thankfully, if you're using Hitop 0.35, these two problems can be cured.
What you'll need to do is store the JavaScript or the contents of your
<pre> tag in a seperate file (say javascript.hitop). You
can then call this into your document using the command <@FILE
SRC="javascript.hitop" FORMAT="verbatim"> in your source code.
FORMAT="verbatim" will tell Hitop to load up the document and not
remove the spaces.
If you're not using Hitop 0.35, then sadly there is no solution to this problem, and if it affects you, then you will probably want to upgrade, if possible.
We'll look at @FILE in more detail later on.
Time Saving!
So that's some of the nice time saving features Hitop offers you. But there is more... So much more!
This work is licensed under a Creative Commons License.
