Next Previous Contents

6. Adding IMAGES to your documents

One of the things lacking in sgml-tools is a way to easily add images to the resulting html files. The method described here only works when converting SGML to HTML and is incompatible with the other conversion formats such as TXT, TEX, etc... Since we only need be concerned with HTML output, this is a great work-around.

6.1 Tags to add Images

Adding images involves tricking sgml-tools into ignoring the html markup tags that must be entered for the image file declaration. The sgml markup tags are a pair of label - reference tags as follows:

<label id="some_anchor">
<ref id="some_anchor" name="<MAGIC>">
In place of the <MAGIC> tag, the actual HTML markup tags for the image declaration are inserted.

Some explanation is needed here. If you refer to the sgml-tools guide secton on cross references, you will see a discription of the tags shown above. The <label ......> tag produces an anchor within the text of the document to which a hot-link anywhere in the document can refer. The <ref ......> tag is the reference to the actual hot-link that when clicked, returns you to the anchor. Sgml-tools does not parse the contents of the name field in this sgml tag. Taking advantage of this bug/feature allows us to insert actual html tags in place of the name.

6.2 Image tag EXAMPLES

Using the following sgml markup tags will produce the results shown below.

This is my ANCHOR point <label id="image1anchor">. When the image is clicked, the top of the browser window will return here!

<ref id="image1anchor" name='<img src="../images/image.gif">'>
Note carefully the placement of single and double quotes.

Example 1:

Example 2:

There is one set of html tags that goes "around" the <:img.....>statement to center the image in the screen.

<ref id="example2" name='<center><img src="../images/image.gif">

Examples of internal <img...> tags:

There are several html sub-tag statements that can be place within the <img.....> tag that further affect its behavior. In addition, the <img....> statement may be broken/wrapped at any space to facilitate placing it in the text of your document. Individual examples of each of the sub-tags and broken/wrapped <img....> statements follow.

Example 3

border="a number0, 1, etc..." this determines the size of the border drawn around the image to show that it is a hot-link. The default if none is specified is "1". Bigger numbers make the border thicker, 0 makes it disappear completely as in the next example. The hot-link is still present, the border is just hidden.

<ref id="example3" name='<img src="../images/image.gif" border="0">'>

Example 4

align="right" causes the image to "stick" to the right side of the display screen. All the text following the image will then flow around the image as shown in this example to the right. The first statement below has line breaks inserted at all of the spaces.

<ref id="example4" 
The same statement without the line breaks looks like this:
<ref id="example4" name='<img src="../images/image.gif" align="right">'>
Yes, you could have broken the line between "<ref" and "id=".

Example 5

align="left" causes the image to stick to the left side of the display screen in a manner similar to the default mode. However, when align="left" is specified, the text following the image placement will flow around the image as shown in this example.

<ref id="example5"
The same statement without the line breaks looks like this:
<ref id="example5" name='<img src="../images/image.gif" align="left">'>

Example 6

height="pixels" width="pixels this is the dimensions of the image in pixels. If the dimensions are not specified, the target browser must wait until all the page text and all the images have been download before the page can be formatted for display. Specifying H x W allows the browser to display all the text in it's proper place immediately and paint the images when they finally complete download. In this example, the image name has been left out on purpose so that the image box would be the only thing displayed.

<ref id="example6"
src="../images/image.gif" ... is left out

6.3 Where to put your IMAGE files

The directory tree of your home account looks like this:

        now add this one....                    images

Do this by executing the following commands from your login prompt

        cd public_html
        mkdir images

Using ftp, transfer your image file from your computer to your public_html/images/ directory on the home host machine.

Specifying the image files in your HOWTO documents as:

This tells the web server to back up one directory level (that would be public_html) and get the image file from directory images with a filename of imagefilename.gif.

6.4 Where to get Images

Images can come from almost anywhere. The display screen for the html browser commonly used on the web uses ".gif" or ".jpg" images usually with 256 or less colors and a dot pitch of 72 dpi. Most any graphics program is capable of making or editing images and saving them in this format.

For computer illustrations, screen shots can be used that will be the correct dot pitch and number of colors.

To create screen shots on a microsoft platform, hold down the alt key and push print screen. This will save a copy of your display screen to the clipboard viewer, you may then paste the shot into a graphics program for cropping, editing, addition of text, etc...

I don't know how this is done on a MAC. If you know, tell me and I will add it to this HOWTO.

Next Previous Contents