Using Images

How to put pictures in your pages on the OpenGuides

Please refer to the Wiki Etiquette page for our policy on use of images.

It's very simple, and follows the traditional HTML way of doing things. Entering this:

<img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image">

Will produce this:

Example Image

Note that the image has a thin black border (or should do; if you can't see it, your browser can't handle stylesheets properly). This is applied by default to make images look neater on the site. If the picture you're using already has a border, or a transparent background, you can turn the border off by inserting the phrase class="n" :

<img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image" class="n">

produces:

Example Image

Please make sure that you always include ALT text for the image, so that people reading the site with text-only browsers aren't adversely affected.

Positioning

If you want the image to "float" on the left or the right of the page, you can use styling: simply enclose your image tag in the following tags:
<div style="float:left; margin:10px"> your image here </div>

Obviously, replace "left" with "right" if need be. Use the margin setting to adjust how much blank space to surround the image.

See also: Text Formatting Examples

Please only embed pictures you know to be copyright-free, or your own pictures. I'd suggest always stating a credit and copyright ownership if at all possible to avoid problems.

Last edited 2006-03-20 23:36:44 (version 12; diff). List all versions.