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=""><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;">

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>

Background Image

<p style="background-image:url(; padding: 15px;">Paragraph text goes here</p>