The Open Guide to London: the free London guide - Differences between Version 9 and Version 8 of Using Images
| Version 9 | Version 8 |
|---|---|
| == Line 12 == | == Line 12 == |
|
<center><kbd><img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image" class="n"></kbd></center> |
<center><kbd><img src="http://openguides.org/london/pictures/example_image.png" width="150" height="150" alt="Example Image" class="n"></kbd></center> |
| == Line 16 == | == Line 16 == |
|
<center><img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image" class="n"></center> |
<center><img src="http://openguides.org/london/pictures/example_image.png" width="150" height="150" alt="Example Image" class="n"></center> |
How to put pictures in your pages on the OpenGuides
It's very simple, and follows the traditional HTML way of doing things. Entering this:
Will produce this:
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" :
produces:
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
List all versions