Html code examples
These are examples of html code which allow "Spotlight On" to illustrate a chess position.
Example 1 includes places to substitute your own titles and text.
Example 2 is the chess position only, without words above or below.
EXAMPLE 1
<html>
<head>
</head>
<body bgcolor="#2D1A32">
<! ---this sets the page background color to match the border around the board>
<! --- this section allows for titles and text above the board. Replace TITLE with your title. Replace TEXT with your text>
<table cellpadding=0 cellspacing=0 width=750>
<tr><td><p align=center>  </p>
<p align=center><font color="#C0C0C0"><font size=6><strong>TITLE</strong></font></font> </p>
<p align=center><font color="#C0C0C0">TEXT</font> </p>
<table cellpadding=0 cellspacing=0 width=750>
<tr><td colspan=10><img src="topborder.jpg" align=bottom width=750 height=75></td></tr>
<tr><td rowspan=8><img src="leftborder.jpg" align=bottom width=75 height=600></td>
<! ---these are the pieces in row 8 (top row)... replace A8, B8, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K,
and P... keep onw or onb in image name... erase A8, B8, etc. for an unoccupied square but keep onw or onb.>
<td><img src="A8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B8onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D8onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F8onb.jpg" align=bottom width=75 height=75></td>
<td><img src="G8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H8onb.jpg" align=bottom width=75 height=75></td>
<td rowspan=8><img src="rightborder.jpg" align=bottom width=75 height=600></td></tr>
<! ---these are the pieces in row 7... replace A7, B7, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P...
keep onw or onb in image name... erase A7, B7, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B7onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D7onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F7onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H7onw.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 6... replace A6, B6, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P...
keep onw or onb in image name... erase A6, B6, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B6onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D6onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F6onb.jpg"align=bottom width=75 height=75></td>
<td><img src="G6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H6onb.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 5... replace A5, B5, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A5, B5, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B5onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D5onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F5onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H5onw.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 4... replace A4, B4, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A4, B4, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B4onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D4onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F4onb.jpg"align=bottom width=75 height=75></td>
<td><img src="G4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H4onb.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 3... replace A3, B3, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A3, B3, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B3onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D3onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F3onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H3onw.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 2... replace A2, B2, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A2, B2, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B2onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D2onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F2onb.jpg"align=bottom width=75 height=75></td>
<td><img src="G2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H2onb.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 1... replace A1, B1, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A1, B1, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B1onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D1onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F1onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H1onw.jpg" align=bottom width=75 height=75></td></tr>
<tr><td colspan=10><img src="bottomborder.jpg" align=bottom width=750 height=75></td></tr>
<! --- this section allows for titles and text below the board. Replace TITLE with your title. Replace TEXT with your text>
<table cellpadding=0 cellspacing=0 width=750>
<tr><td><p align=center>  </p>
<p align=center><font color="#C0C0C0"><font size=5><strong>TITLE</strong></font></font> </p>
<p align=center><font color="#C0C0C0">TEXT</font> </p>
</table>
</body>
</html>
EXAMPLE 2
<html>
<head>
</head>
<body bgcolor="#2D1A32">
<! ---this sets the page background color to match the border around the board>
<table cellpadding=0 cellspacing=0 width=750>
<tr><td colspan=10><img src="topborder.jpg" align=bottom width=750 height=75></td></tr>
<tr><td rowspan=8><img src="leftborder.jpg" align=bottom width=75 height=600></td>
<! ---these are the pieces in row 8 (top row)... replace A8, B8, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K,
and P... keep onw or onb in image name... erase A8, B8, etc. for an unoccupied square but keep onw or onb.>
<td><img src="A8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B8onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D8onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F8onb.jpg" align=bottom width=75 height=75></td>
<td><img src="G8onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H8onb.jpg" align=bottom width=75 height=75></td>
<td rowspan=8><img src="rightborder.jpg" align=bottom width=75 height=600></td></tr>
<! ---these are the pieces in row 7... replace A7, B7, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P...
keep onw or onb in image name... erase A7, B7, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B7onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D7onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F7onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G7onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H7onw.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 6... replace A6, B6, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P...
keep onw or onb in image name... erase A6, B6, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B6onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D6onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F6onb.jpg"align=bottom width=75 height=75></td>
<td><img src="G6onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H6onb.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 5... replace A5, B5, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A5, B5, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B5onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D5onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F5onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G5onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H5onw.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 4... replace A4, B4, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A4, B4, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B4onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D4onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F4onb.jpg"align=bottom width=75 height=75></td>
<td><img src="G4onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H4onb.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 3... replace A3, B3, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A3, B3, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B3onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D3onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F3onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G3onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H3onw.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 2... replace A2, B2, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A2, B2, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="B2onb.jpg" align=bottom width=75 height=75></td>
<td><img src="C2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="D2onb.jpg" align=bottom width=75 height=75></td>
<td><img src="E2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="F2onb.jpg"align=bottom width=75 height=75></td>
<td><img src="G2onw.jpg" align=bottom width=75 height=75></td>
<td><img src="H2onb.jpg" align=bottom width=75 height=75></td></tr>
<! ---these are the pieces in row 1... replace A1, B1, etc. with bR or bN, etc... remember to capitalize R, N, B, Q, K, and P... keep
onw or onb in image name... erase A1, B1, etc. for an unoccupied square but keep onw or onb.>
<tr><td><img src="A1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="B1onw.jpg" align=bottom width=75 height=75></td>
<td><img src="C1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="D1onw.jpg" align=bottom width=75 height=75></td>
<td><img src="E1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="F1onw.jpg"align=bottom width=75 height=75></td>
<td><img src="G1onb.jpg" align=bottom width=75 height=75></td>
<td><img src="H1onw.jpg" align=bottom width=75 height=75></td></tr>
<tr><td colspan=10><img src="bottomborder.jpg" align=bottom width=750 height=75></td></tr>
</table>
</html>