Before You Break Up, Make a List of Your Stuff

Make the table of contents before you split the interior .html file into chapters and sections.

We’ve already separated our CSS from our HTML, and soon we’ll split our HTML into separate pages. Before that happens, we’ll make a table of contents while we still have all the information we’ll need on one page. Ready to start? Here’s what we’ll do:

1. Type up—but don’t link—the Table of Contents.
2. Put <a> anchors on the titles of your poems.
3. Pay attention to anthology-specific issues.
4. Do some light housekeeping.

1. Type up—but don’t link—the Table of Contents.

Remember, Yellow Buick Review is a sample poetry anthology. Anthologies tend to have big tables of contents, and there are often many stakeholders (and egos) involved. So be careful. This is our ToC for Yellow Buick Review, without any links:

<h2>Table of Contents</h2>
<p class="PoemStanza">From the Editor</p>
<p class="PoemStanza">Epigraph</p>
<p class="ContentsSection">April Contest Winners</p>
<p class="PoemStanza">Stan Grenfield</p>
 <p class="PoemLineIndent1">Chrome Bumper Reflections</p>
 <p class="PoemLineIndent1">Penny Candy</p>
<p class="PoemStanza">Jennifer Riggle</p>
 <p class="PoemLineIndent1">The Lighthouse at Salt Marsh</p>
 <p class="PoemLineIndent1">Donec Elementum</p>
<p class="ContentsSection">April Contributors</p>
<p class="PoemStanza">Nancy Kilroy</p>
 <p class="PoemLineIndent1">The Tale of Three Eyebrows</p>
 <p class="PoemLineIndent1">What the Barn Owl Saw</p>
<p class="PoemStanza">Andy Crenshaw</p>
 <p class="PoemLineIndent1">The Sum of its Parts</p>
<p class="PoemStanza">Amit Matthews</p>
 <p class="PoemLineIndent1">On the Sixth Anniversary of its Demotion, Pluto Facebook-Stalks Astronomers Mike Brown and Neil deGrasse Tyson</p>
 <p class="PoemStanza">Poet Biographies</p>
<p class="PoemStanza">About our Next Issue</p>

Here’s how that looks in a Web browser:

Note: I decided that the major sections “April Contest Winners” and “April Contributors” needed a little more OOMPH, so I created a new style just for them. Remember, whenever I make a change or set of changes to my CSS, I’ll need to update the name to avoid confusing myself later, so I’ll incorporate these changes into YBR_Cranberry.css when I make it:

p.ContentsSection, li.ContentsSection, div.ContentsSection {
 padding-left: 1em;
 text-align: left;
 background-color: #CCC; /* helps this line read better in Table of Contents */

I’ll also need to make minor changes to this stylesheet elsewhere, adding p.ContentsSection, li.ContentsSection, div.ContentsSection class selectors:

p.PoemStanza, li.PoemStanza, div.PoemStanza,
p.PoemStanzaIndent1, li.PoemStanzaIndent1, div.PoemStanzaIndent1,
p.PoemStanzaIndent2, li.PoemStanzaIndent2, div.PoemStanzaIndent2,
p.PoemStanzaRightJ, li.PoemStanzaRightJ, div.PoemStanzaRightJ,
p.PoemStanzaCenter, li.PoemStanzaCenter, div.PoemStanzaCenter,
p.ContentsSection, li.ContentsSection, div.ContentsSection {

2. Put <a> anchors on the titles of your poems.

Put anchors on everything listed in the table of contents. For me, that’s the sections, poets, and titles of poems.

Here’s what the anchor looks like for April Contest Winners, which is an <h2> heading in my manuscript. The code is on line 73 (remember, line numbers are approximate if you’re looking at an old version of YBR or your own files):

<h2><a id="aprilContest"></a>April Contest Winners</h2>

And here it is as a screenshot from Dreamweaver (click to see it in full resolution):

3. Pay attention to anthology-specific issues.

Importantly, note what I’ve done with the anchors for the poets’ names. Here are lines 85-86:

<h3><a id=”Grenfield”></a><a id=”chromeBumper”></a>Chrome Bumper Reflections</h3>
<h4>Stan Grenfield</h4>

And here’s a screenshot from Dreamweaver:

See what’s going on there? I have both anchors on the poem’s title. Stan Grenfield has two poems in Yellow Buick Review. His biography is in the back of the book; a reader should click on the “Poet Biographies” link to get the low-down on Mr. Grenfield. Someone who clicks on “Stan Grenfield” in the table of contents probably wants to read Grenfield’s poetry, so I’ve linked it to the first poem in there. A poet such as Andy Crenshaw has only one poem in Yellow Buick Review, so…wait for it…I put both anchors on his only poem.

Let’s put some special attention on Jennifer Riggle’s poem “Donnec Elementum.” Her poem does that trick where the title of the poem is also the first line. All the other YBR poems go:

<h3>Title of Poem</h3>
<h4>Author’s name</h4>
<p>First line…</p>

But I can’t do that with “Donnec Elementum,” because inserting the author’s name mid-poem would be very disruptive. This problem came up often enough with the Tandem anthologies that we came up with an official policy. Here’s how it looks on lines 123-125:

<h4>Jennifer Riggle</h4>
<h3><a id="donnecElementum"></a>Donec Elementum</h3>
<p class="PoemStanza">Sit amet odio consectetur tempor.</p>

And here’s how that looks on the page:

If typesetting three anthologies has taught us anything, it’s that poets love typographical curve balls. We’ve learned to roll with it.

4. Do some light housekeeping.

Some other stuff has come up while I’ve been writing this tutorial, so I’ll handle some of that housekeeping here.

First, I really want the Bicycle Comics logo to appear in the copyright section, and I’d like it to link to the Website. So I’ll insert it now on line 17, like so:

 <p class="PoemStanzaCenter"><a href="http://www.bicycle-comics.com/"><img src="images/Bicycle-Logo-Red.gif" width="179" height="48" alt="Bicycle Comics Logo"></a></p>

When I do that, I realize that I’ve gotten all the way to this point with an error in my css rule for .PoemStanzaCenter:

p.PoemStanzaCenter, li.PoemStanzaCenter, div.PoemStanzaCenter {
 padding-left: 1em;
 text-align: left;
}

See the problem there? See the flaw with a selector named PoemStanzaCenter? Hey, it happens.

p.PoemStanzaCenter, li.PoemStanzaCenter, div.PoemStanzaCenter {
 padding-left: 1em;
 text-align: center;
}

There we go. I’ll save all of those changes into a .css file called “YBReview_Cranberry.css” and I’ll link to it once I’ve made more changes to the HTML file.

Okay, now we’ve got our table of contents. Next, we’ll (really for real) split the .html file into sections.

Need files to play along at home? All files for the Yellow Buick Review tutorials are free to download.