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>">

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">'>

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" 
name='<img 
src="../images/image.gif" 
align="right">'>


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"
name='<img 
src="../images/image.gif" 
align="left">'>


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"
 name="<img
  src="../images/image.gif" ... is left out
  border="0"
 align="right"
 height="164"
 width="147">"> 

6.3 Where to put your IMAGE files


The directory tree of your home account looks like this:
        /home/your-acc-name/public_html/......
                                                howto
        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:
        ../images/imagefilename.gif


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.