The visual appeal of Herron School's Web site is based on the simplicity of the lines relative to complexity of the collages. However, there was nothing simple about getting the lines to line up perfectly and space out consistently. Indeed, drawing lines and shapes with single pixel images is more about HTML coding than actually drawing the graphic you're trying to create.
For John, the challenge was not only to align horizontal and vertical lines drawn with the single-pixel images, he had to also align them with and make them touch the recurring graphics that are used to delineate the content of each page. This feat was accomplished by using tables to position all of the elements. (See the code below for an example of how John used HTML to position the elements for the content section of each page.)
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="545">
<TR>
<TD VALIGN="BOTTOM" ALIGN="right" WIDTH="260">
<IMG SRC="images/littlestudents.jpeg" ALIGN="TOP" WIDTH="260" HEIGHT="30" BORDER="0">
</TD>
<TD VALIGN="top" ALIGN="left" WIDTH="1">
<IMG ALIGN="top" SRC="tabs/newquad.gif" WIDTH="1" HEIGHT="30">
</TD>
<TD VALIGN="middle" ALIGN="left" WIDTH="284"><IMG SRC="tabs/quad.gif" ALIGN="absmiddle" WIDTH="10" HEIGHT="1"><FONT SIZE="2">resources</FONT>
</TD>
</TR>
</TABLE>
This code lays down four elements within a three column single row table. The first column contains a JPEG image called littlestudents.jpeg. Notice that the BORDER="0" attribute of the <IMG> tag was used to insure no additional space was added around the graphic. The second column contains a file called newquad.gif. This graphic contains a single black pixel. A 30 pixel high vertical line is drawn by setting the width to 1 and the height to 30.
The third column contains a transparent single pixel image called quad.gif, which has been stretched ten pixels horizontally. Directly next to this is the word "resources" set with HTML text. This is an excellent example of how the single pixel trick can be used to position both HTML text and graphics together.
Notice that John used the ALIGN="absmiddle" attribute of the <IMG> tag. This little known, rarely used attribute was introduced by Netscape Navigator. It functions like the ALIGN="middle" attribute except that it takes into account the images next to it in a different manner.
By using the absmiddle attribute with the <IMG> tags, John was able to have the browser line up the images accurately so they would touch each other. When there are a combination of tags used to position images, one or more images can shift inexplicably. John found that absmiddle allowed him to position each graphic element consistently.
Since each graphic element had to be positioned together seamlessly, it was important that the code be written so that no unwanted spacing would occur. To accomplish this, John set the CELLSPACING and CELLPADDING attributes of the <TABLE> tag to 0. Notice that John wrote the code so there is some space between the first <TABLE> tag, the graphic within that tag (littlestudents.jpg), and the closing </TABLE> tag. When there is only one graphic element within the tag, it doesn't have an adverse effect on the spacing. You can use carriage returns before and after table definition tags to help make the HTML code more readable without affecting the spacing.
On the other hand, take a look at the third column. There are two graphic elements which are defined in one long string without any spaces or carriage returns. This is because spaces or carriage returns between elements within a table cell adds unwanted space between them. So, all elements within a table cell must be written in one long string, with no spaces to ensure that they are precisely positioned next to each other.
John used another, more complex table to generate the remaining content section. Here is the code that defines the table and lays a solid line over the entire table:
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="545">
<TR>
<TD VALIGN="top" ALIGN="left" COLSPAN="3">
<IMG ALIGN="Bottom" SRC="newquad.gif" WIDTH="545" HEIGHT="1">
</TD>
</TR>
Notice that the same newquad.gif image is used. However, to create the long horizontal black line, the WIDTH attribute has been set to 545 pixels wide, with the HEIGHT attribute being only one pixel high. The COLSPAN attribute of the <TD> tag spans the line over all three columns in the table and the VALIGN="top" attribute helps ensure that the line is positioned below the table elements described earlier. Please note that this second table was written in the code with a couple of carriage returns between the last table. That is, the code essentially reads like this:
<TABLE>
Contents of table...
</TABLE>
<TABLE>
Contents of table...
</TABLE>
Browsers will ignore these carriage returns and position the tabled elements directly next to one another. Using carriage returns between tables can help make the HTML more readable and easier to navigate if you need to edit them.
Next, John used the following position two vertical elements that border the left side of the informational section:
<TR>
<TD VALIGN="top" ALIGN="right" WIDTH="121">
<IMG ALIGN=Top SRC="images/table_bkgrd.jpeg" WIDTH="121" HEIGHT="373" BORDER="0">
</TD>
<TD VALIGN="top" ALIGN="left"WIDTH="1">
<IMG ALIGN="top" SRC="tabs/newquad.gif" WIDTH="1" HEIGHT="450">
</TD>
This code sets a long 450 pixel high line, once again by stretching the newquad.gif image (this time 450 pixels high and 1 pixel wide). This line is placed to the right of a large 373 pixel high and 121 pixel wide graphic element located to the left of the table we are discussing.
Finally, John used the following code to position the elements for a section that provides a link to the "current information" as well as a descriptive line of HTML text that provides more information about the link:
<TD VALIGN="top" ALIGN="left" WIDTH="423">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="423">
<TR>
<TD VALIGN="top" ALIGN="left" COLSPAN="2">
<NOBR><IMG ALIGN="top" SRC="tabs/quad.gif" WIDTH="216" HEIGHT="1"><IMG ALIGN="absmiddle" SRC="tabs/newquad.gif" WIDTH="1" HEIGHT="20"><IMG ALIGN="absmiddle" SRC="tabs/quad.gif" WIDTH="5" HEIGHT="2"><FONT SIZE="3"><A HREF="current.html">current information</A></FONT></NOBR><BR><IMG ALIGN="bottom" SRC="tabs/newquad.gif" WIDTH="423" HEIGHT="1"><BR>
This code created a nested table (where a table is placed within another table). Since there are table cells that span the vertical length of the information John wanted to display here, John used a nested table to avoid having to keep track of complicated table elements such as column spans and row spans.
Since the contents of the nested table contains multiple rows, John would have had to keep track of how many rows there were and add a ROWSPAN attribute the to <TD> tags of the two vertical elements defined earlier. John used nested tables because he knew the contents of this section of the Herron School of Art Web site were subject to change. By doing so, he could simply go to the specific table that needed to be updated and make the changes without risking the integrity of the rest of the page.
This code defines a single row and single column table cell. The VALIGN and ALIGN attributes of the table definition tag are set to align the cell contents to top and left, once again ensuring that the contents are positioned seamlessly next to adjacent cell contents.
Next John set the transparent quad.gif image to 216 pixels wide and one pixel high and used the newquad.gif single pixel image to draw a 20 pixel high, 1 pixel wide line. Since there are no spaces between these
<IMG> tags, the quad.gif image creates precisely 216 pixels of space between the 20 pixel high image and the left edge of the table cell. Then, the quad.gif image is used again to add a 5 pixel space between the 20 pixel high vertical line and the "current information" HTML text and link. Again, there are no spaces between each of the <IMG> tags that define these elements. so that they butt up to one another without any unpredictable and unwanted space.
Notice that John used the <NOBR> to surround these <IMG> tags. This tag ensures that the contents of this table cell will not be reposition if the viewer resizes their browser window. Without the <NOBR> tag, the browser may unpredicably reposition these elements when a user views the page within a small browser window (e.g., when using a laptop to view the page).
The <NOBR> tag forces the browser to add scroll bars so that viewers can see the entire page contents, rather than allowing the browser to reposition elements in an effort to fit it all within the browser window's viewing area. Directly following the <NOBR> tag, John used a <BR> tag to force the next element to the next line. This line spans the width of the table cell and will be drawn directly below the other elements within this table cell.
Since HTML tables are so finicky, John hand codes all of them. However, once he works out the coding for one section, he simply cuts and pastes it, then plugs in the variable information to create additional cells. For example, after establishing the structure of the elements within the nested table described earlier, he simply cut and pasted the HTML code and plugged in the new links and descriptions.
All of the code used to describe the techniques here is actually a very small portion of the code used to generate the overall content section of the Resources page at the Herron School of Art Web site. While the code is somewhat complex, the results are a great example of how the single pixel trick can be used to add a bandwidth friendly element of style to your Web pages. Once the two tiny gif files, newquad.gif and quad.gif are loaded, the browser uses them over and over to generate the lines and spacing for the informational section of the page. So, as you can see, armed with a little HTML and imagination, you can do some pretty impressive things with a single pixel.
