Next / Previous / Contents / TCC Help System / NM Tech homepage

4.3. XHTML for the form page

Each form page displays all the catalog entries for archived photos that use the same English name.

Because there may be hundreds of form pages, they reside in subdirectory “form/” under the directory where the index page lives.

The name of each form file will be derived from the “bird ID” string corresponding to that name. In most cases, this will be just the six-letter bird code. For example, the page for American Robin will live at “form/amerob.html”.

There are two complications, however. Each possible compound (hybrid or species-pair) form will have its own page. The name of this page will be based on the composite bird code (e.g., “mallar^amewig?”). However, as this example shows, the special characters used in composite bird codes (^|?) have special meanings in Unix shells. So these three characters are translated according to this table:

^-x-
|-o-
?-q

Here are some examples:

English nameCodeFile name
Ououform/ou.html
Wigeon, American×Wigeon, Europeanamewig^eurwig form/amewig-x-eurwig.html
Flycatcher, Dusky/Flycatcher, Hammond'sdusfly|hamfly form/dusfly-o-hamfly.html
Warbler, Orange-crowned?orcwar? form/orcwar-q.html

The bulk of the form page is one large table with three columns:

  1. The thumbnail image.

  2. The image size, as a percentage of a 24mm×36mm frame.

  3. The rest of the width of the table consists of a vertical stack of boxes. The first box contains the catalog number (whose first 10 digits are also the date), the state, and the locality. At this writing, only the note element will be shown in the next box. Eventually the other elements such as desc and film will get their own boxes.

Here is a mockup showing the table and one entry.

<table border='4' cellspacing='4'>
  <colgroup>
    <col align='center'/>
    <col align='right' valign='top'/>
    <col align='left' valign='top'/>
  </colgroup>  
  <thead>
    <tr>
      <th align='center'>Thumbnail</td>
      <th align='center'>Size</td>
      <th align='center'>Data</td>
    </tr>
  </thead>
  <tbody>

Here is the first column of a sample table row. Note the redundant align and valign attributes. Even though they are the same values from the colgroup header, they are repeated here because some contemporary browsers do not properly handle colgroup.

    <tr>
      <td valign='top' align='center'>
        <img src='../thumb/2005-02-18a0005.jpg' alt='thumbnail'/>
      </td>

The second column displays the image size in two ways: as a percentage of full frame, and using its pixel dimensions. Because the “Size” column has very little information in it, we want to keep that column narrow by stacking these three numbers vertically, using plain div elements. The “&#x00d7;” character is the multiplication symbol “×”.

      <td valign='top' align='right'>
        <div>26.37%</div>
        <div>2018</div>
        <div>&#x00d7;2796</div>
      </td>

The third column contains all the other data. Paragraphs are vertically stacked using div elements.

      <td valign='top' class='cat-info'>
        <div class='ident'>
          <span class='cat-no'>2005-02-18a0005</span>
          NM: Bosque del Apache NWR
        </div>
        <div> <!--Minor data-->
          taking off, wings up, !!
        </div>
      </td>
    </tr>
  </tbody>
</table>

Note the links to CSS rules:

div.ident

The box containing the catalog number and location.

span.cat-no

Highlights the catalog number.

td.cat-info

Formats the information block.

See Section 5, “Styling with CSS” for the corresponding CSS rules.