Greekgeek's Graphics Cheat Sheet
Turn an Image into a Link
To make an image a clickable link, add the usual HTML code for a link around the image code, like a sandwich:
<a href="http://www.somewhere.com/link.html"><img src="imageurl.jpg" alt="View Photo Album"></a>
The alt-name is optional; it specifies text to display if the graphic doesn't load. This is helpful for blind web users using voice software, and also helps SEO.
Aligning Graphics Left and Right
<img src="imageurl.jpg" alt="name the image" style="float: left; margin-right: 10px; margin-bottom: 10px;">- Margins are white space around the image to keep it from running into text next to it. Specify them in pixels.
- Change the float to "right" to put the image on the right, and change the margin to go on the left.
- The alt name is optional, but if you describe the picture (e.g. "monkey wearing fez"), it helps draw search engine traffic.
Centering Graphics
And here's a caption, which could include a link.
<p align="center"><img src="imageurl.jpg" alt="image altname"><br>And here's a caption...</p>
Caption Under ALIGNED Image
Caption goes here
<p style="float: left; margin-right: 10px; margin-bottom: 10px; width: 120px;"><img src="imageurl.jpg" alt="name the image">Caption goes here</p>- Put the width of the image in pixels as the paragraph width. This causes the caption to wrap around under the graphic.
- Change the float to "right" to put the image on the right, and change the margin to go on the left.
- The alt name is optional, but if you describe the picture (e.g. "monkey wearing fez"), it helps draw search engine traffic.
- The caption can include a link. Useful for including a photo credit.
Background Image
<p style="background-image:url(http://www.istad.org/squidoo/toc/horizontal.png); padding: 15px;">Paragraph text goes here</p>
From: http://www.squidoo.com/graphics-layout