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

4.2. XHTML for the index page

Here is the top-level XHTML for the index page. Details of the content of the body element are discussed below.

<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>Shipman's bird photo index</title>
    <link rel='stylesheet' href='birdindex.css' type='text/css'/>
  </head>
  <body>
    <h1>Shipman's bird photo index</h1>
    ...body here...
  </body>
</html>

The link element points at the stylesheet; see Section 5, “Styling with CSS”.

The body of the page will consist of a sequence of div elements, one for each taxonomic heading, and one for each form name.

The div elements for taxonomic headings will be tagged with an attribute “class='head--X'”, where X is the taxonomic rank code (e.g., 'g' for genus or '-f' for subfamily).

Here's an example of a taxonomic heading for Subfamily Anserinae:

<div class='head--f'>
Subfamily Anserinae: Geese and Swans  
</div>

Also, taxonomic names at or below genus rank should be italicized according to the standard biological conventions. The parts to be italicized will be wrapped in a span element tagged with class='genus'. Here is an example:

<div class='head-g'>
<span class='genus'>Lanius</span>
</div>

When a higher taxon has at least one photo referred to it, but those photos all use the same name, the heading will also serve as a link to the form page. For example, here is a heading for genus Empidonax. Note that form pages live in subdirectory “form/” under the index page, since there may be quite a number of them. For the file naming conventions of form pages, see Section 4.3, “XHTML for the form page”.

<div class='head-g'>
  <a href='form/empido.html'>
    <span class='genus'>Empidonax</span>
  </a>
</div>

Finally, when multiple English names are referred to the same taxon, there will be a line for each form, containing a link to the form page for that name. Such lines are packaged into a div element of class name-line. Here is an example of a link for a species pair, Downy or Hairy Woodpecker:

<div class='name-line'>
  <a href='form/dowwoo-o-haiwoo.html'
  >Woodpecker, Downy/Woodpecker, Hairy</a>
</div>