HTML Template v. 2.5
update 4/30/2001

By: John F. Williams

The HTML code in figure 1 is for an index page containing six thumbnails. The thumbnails link to individual pages, each containing an image, caption and navigation.

In order to use this code on your site, highlight all the HTML code in the gray box, copy by using the command "C" key, and then paste the text into another application using the command "V" key. Save the document as index.html. Then carefully go through and replace text and image names as appropriate.

Text that appears in blue you should change in order to reflect the specific project or naming convention of photographs. The code that appears in red below are known as comment tags and are there to assist in placement of content.

Figure 1.
<HTML>
<HEAD>
<TITLE>Photographer Template</TITLE>

<META name="description" content="A short description of your site that will appear following a web search.">

<META name="keywords" content="Place a list of keywords that accurately describe your site. These keywords are used by search engines. Separate words with a comma.">

</HEAD>
<BODY bgcolor="#FFFFFF" link="#ff0000" vlink="#52188C">

<TABLE border="0" cellpadding="5" cellspacing="2" width="100%" bgcolor="#F0F0F0">
<TR>
<TD><H2>Name of photographer</H2>Photography by: Photographers name</TD>
</TR>
</TABLE>
<CENTER><TABLE cellspacing=10 cellpadding=0 border=0>
<TR>
<!-- Thumbnails with hyperlinks -->
<TD align="center"> <A href="pages/photo1.htm"><IMG src="thumbnails/photo1.jpg" border="1" alt="photo1"></A> </TD>

<TD align="center"> <A href="pages/photo2.htm"><IMG src="thumbnails/photo2.jpg" border="1" alt="photo2"></A> </TD>

<TD align="center"> <A href="pages/photo3.htm"><IMG src="thumbnails/photo3.jpg" border="1" alt="photo3"></A> </TD>

</TR>
<TR>
<TD align="center"> <A href="pages/photo4.htm"><IMG src="thumbnails/photo4.jpg" border="1" alt="photo7"></A> </TD>
<TD align="center"> <A href="pages/photo5.htm"><IMG src="thumbnails/photo5.jpg" border="1" alt="photo8"></A> </TD>
<TD align="center"> <A href="pages/photo6.htm"><IMG src="thumbnails/photo6.jpg" border="1" alt="photo9"></A> </TD>

</TR>
<TR>
<TD align="center"> <A href="pages/photo7.htm"><IMG src="thumbnails/photo7.jpg" border="1" alt="photo4"></A> </TD>
<TD align="center"> <A href="pages/photo8.htm"><IMG src="thumbnails/photo8.jpg" border="1" alt="photo5"></A> </TD>
<TD align="center"> <A href="pages/photo9.htm"><IMG src="thumbnails/photo9.jpg" border="1" alt="photo6"></A> </TD>

</TR>
</TABLE>
<!-- link to photography@temple site -->
<a href="http://www.temple.edu/photo/photographers/index.html"> <IMG SRC="images/logosm.gif" WIDTH=100 HEIGHT=32 ALIGN=bottom border="1"></a>
<br>
<!-- email and copyright -->
Send mail to <a href="mailto:your email address">your email address or name</a>

<br>
<font face="Arial" size="-2">© 2001, all rights reserved</font>

</CENTER>
</BODY>
</HTML>

Index | Page 1 - 2 - 3

return to photocourses