Here is the top-level XHTML for the index page. Details
of the content of the
body element are
<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>
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.
div elements for taxonomic headings will be
tagged with an attribute “
is the taxonomic rank code (e.g.,
'g' for genus
'-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
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>