How To: Create a Simple Image Gallery with HTML tables

Sometimes you just want a simple Image Gallery. With no php, javascript or flashy Adobe flash required. Just simple, quick and dirty HTML that you can type out and be done with your post.

What you will need:

  • The images you want to use in their Original format
  • Every image in a thumbnail format (duplicates, preferably in 150x150px)
  • Optional: HTML editor with color coding

Steps:
1. Gather all the images you want to use in your gallery, and create a 150x150px duplicate of each one.
2. Add the prefix “_thumb” or something similar to the 150x150px duplicates.
Example: Kangaroo.jpg (Original) Kangaroo_thumb.jpg (Thumbnail).
3. Upload the images to your host.
4. In the HTML document, start with the <table> tag. Then start a table row with the <tr> tag. And finally add your first cell (Image) with the <td> tag, and end it with </td>.

Example:
<table>
<tr>
<td><a href=”http://example.com/image.jpg” target=”_blank”><img src=”http://example.com/image_thumb.jpg” /></a></td>

5. Keep adding cells and rows to your gallery in a symmetrical pattern. Remember to cut each row with </tr> and the table with </table>

4×4 example:
<table>
<tr>
<td><a href=”http://example.com/image.jpg” target=”_blank”><img src=”http://example.com/image_thumb.jpg” /></a></td>
<td><a href=”http://example.com/image2.jpg” target=”_blank”><img src=”http://example.com/image_thumb2.jpg” /></a></td>
</tr>
<tr>
<td><a href=”http://example.com/image3.jpg” target=”_blank”><img src=”http://example.com/image_thumb3.jpg” /></a></td>
<td><a href=”http://example.com/image4.jpg” target=”_blank”><img src=”http://example.com/image_thumb4.jpg” /></a></td>
</tr>
</table>

2×3 example:
Meerkats At The Zoo Gallery

3×3 example:
Cherry Blossom Gallery

Feedback and questions welcome.

How To: Create a Website Favicon (Favorite Icon) Using GIMP

So, you may have noticed that my blog has a cute litte tux the penguin looking at you through a round little window up in the left (or right) corner of your web browser. What you are seeing is known as a “Favicon” (short for Favorite icon) and it’s used to quickly and simply identify your website when it is in someones favorites. In this tutorial i’ll show you how you can make your own and what you must keep in mind when creating one. Continue reading