Weaving your Webpage

Images

     One of the great things about the web is the ability to create and share some creative looking documents. However, you should restrain yourself somewhat. Images take time to load, the larger the image, the longer the person has to wait. Use images sparingly and don't have them too large.

     However, a dash of colorful images can be nice. Images are also often necessary to make a point that can't be made using text only.

     To add an image to your document, you need to convert it first into GIF format. There are a number of tools for doing that, so I won't get into that here, but if you can't find something or need help, see me.

     To make things easier on yourself, put the images that you want to show in your document into the same directory as your document. It is possible to display a GIF images that is stored almost anywhere (even somewhere on the Internet), but I won't get into those kinds of complexities right now.

     The HTML command for inserting an image at the current position takes the following form:

<IMG SRC="name_of_image.gif">

     That's all there is to it to insert a GIF file into your document. The location does not have to be a full URL (but it can be if you want). This same trick can be used for normal links (not just for images). Some say it's faster to use relative URLs, but I've never really noticed a great difference in speed, but I've somehow or another got used to using relative URLs for images and full URLs for everything else. Feel free to disagree with me here.

Image Options

   There is also one optional argument to the IMG command that you may want to use occasionally.

    You can "suggest" to the browser that the image be aligned in a particular way with the surrounding text using the "align=" directive. The choices are "top", "middle", or "bottom", which indicate where the base of the image should be in relation to the base line of the surrounding text.

    Here's a couple of examples:

<img align="top" src="./image.gif"> Some Text. <img align="middle" src"./image.gif"> Some Text. <img align="bottom" src"./image.gif"> Some Text.

     Another useful option is to suggest a text-only alternative for browsers that don't support in-line images. The "alt" directive is used like this:

<img alt="o" src="./image.gif"> Some Text. <img alt="o" src"./image.gif"> Some Text. <img alt="o" src"./image.gif"> Some Text.

     For users on a text-only browser like Lynx, these items would appear as just "o" instead of something like [IMAGE]. Some web servers make very good use of this directive to display icons for the image-oriented and simple word links (like "[Home] [Next]") for text-only browsers.