SW Neighborhoods, Inc. Empowering Citizens since 1978

Please note: If you don’t know HTML, you’ll probably want to use the Rich Text editor for inserting images into your web pages rather than doing it the HTML way. The Rich Text editor provides a GUI interface which hides the HTML code from you. Start the editor, and click on the graphic icon. The controls are relatively straightforward. The rest of this discussion is explains how to do things the HTML way. If you are going to use the Rich Text editor, you may wish to skip this page.

To insert the image into your text, you use an HTML image tag, as shown here on the right. If you are not familiar with HTML, the image tag, in its simplest form, looks like this: <img src="path to file">, where “path to file” is replaced with a path to your uploaded file.

The image tag supports additional (optional) elements, some of which control how the image is displayed. For example if you embed the image tag inside a block of text, inserting align="right" will cause the image to appear on the right side of the page, with text wrapping around the image to the left. Embedding hspace="10" vspace="5" will add 10 pixels of whitespace horizontally around the image, and 5 pixels of whitespace vertically, which is visually more appealing than text which runs right up to the image. Although optional, it is always good to include the alt element. It adds text describing the graphic, which users with disabilities will appreciate. The format looks like this: alt="Text describing graphic".

The path to the file consists of “/CMS-Uploads/” plus the filename. You may use spaces in the filename provided the filename is quoted. HTML specifications actually require that the filename be quoted. Because many browsers are forgiving if it isn’t quoted, some people fall into the bad habit of omitting them.

So for a file named “img tag example.png” the path should be: <img src="/CMS-Uploads/img tag example.png">. Of course you can add more elements; a more sophisticated image tag example is: <img src="/CMS-Uploads/img tag example.png" alt="An example of the image tag in use" align="right" width="521" height="345" hspace="10" vspace="5">.