Printable Version

We have included here a printable version suitable for those who find reading on the screen, and learning from hypertext difficult, or those who want to print out individual segments of the tutorial for use in class or at the computer. The printable version of the annotation tutorial runs to seven pages.

Introduction

Annotation is both a critical investigation and a communication. Initially, writers interrogate a text: they search for what it means, and more importantly, how it creates meaning and how it conveys that meaning to readers. Then they communicate the results of their investigations to interested readers. This tutorial explores the integration of the traditional techniques of textual annotation with the relatively new communication medium of hypertext.

Although we use poems for our sample annotations (for reason of brevity), imaginative annotation will illuminate any text. You might annotate a short story or key section of a novel. Or you might conduct a rhetorical analysis of a factual article, or an impassioned argument, and convey your conclusions via a hypertextual annotation. Or you might annotate a still from a film, or a sequence from a TV show. Once you master the basic techniques of hypertextual annotation, your imagination is your only limit.

Why should you present your annotation work as a hypertext, though?

The Hypertext Factor

Hypertext allows you to:

bring ever more comprehensive content more easily and imaginatively to your readers
integrate multiple sources of information (available via the internet, for example) directly into the annotation, and draw on multiple media (sound, images, manuscripts, etc.) to enrich your annotation
publish (rather than just write) your work
offer your reader multiple ways of interacting with your annotation.

A thoughtful hypertext invites readers to choose the route to understanding that best suits their individual needs as learners. In the examples we include in this tutorial the reader might read the annotations in several ways:

from beginning to end, reading each annotation as it appears
via the summary tables which lead into the thematic analysis in print
via a downloadable or printable version of the annotation

But remember that however intoxicating the practice of hypertext can be, your major task via a hypertextual annotation is to transform readers' experience of the text (the pleasure, the stimulation, the new ides they encounter, the 'aha!' moments) with a thoughtful presentation of your research results.

Learning Objectives

By the end of this tutorial, you should be able to:

understand how the melding of textual criticism and hypertextual writing enriches critical analysis and annotation
prepare your text for annotation and efficiently plan a successful 'hyper-annotation'
execute a reader-friendly layout appropriate to your text and your audience
create and test linking sequences and navigational structures suitable for your audience's needs
deploy text and visual effects (font - color, weight, size, etc., images and icons) to enhance your annotation
research, evaluate and link to multimedia sources relevant to your annotation (or imagine your own)
investigate and integrate additional dynamic, interactive styles which enhance your hypertext (advanced hypertext writers)
upload your annotation to your mason web page

Why not look at these examples and see what we mean? We're afraid that you need to look at these as hypertexts. They just don't work as printed text.

Dulce et Decorum Est (Wilfred Owen, annotated by Lesley Smith)
http://classweb.gmu.edu/lsmithg/annotation/tacadulce.html
A Green Crab's Shell (Mark Doty, annotated by Robert Matz)
http://classweb.gmu.edu/lsmithg/annotation/tacadoty.html

Preparation

This part of the tutorial explains the categories of annotation you might add to a literary text. Once you understand these different kinds of annotation, read and reread the text that you are annotating. Underline words that require annotation, and note for each word which kind.

Some words may require more than one kind of annotation. Then write the annotations for each word. When you are finished, you'll be ready to compose your web-based annotation project. You'll also know a lot more about the text you're working with.A first kind of annotation illuminates the basic meaning of a text.

These include annotation for:
A second kind of annotation unfolds the implications of words and of figures of speech. These include annotations for:
A third kind of annotation helps us hear the tone of a written text.
A fourth kind of annotation helps us hear the sounds of a written text.
A fifth kind of annotation connects words or phrases in your text. These include annotations for:

Plan Your Hypertext

The writing of a textual annotation as a hypertext is quite complex, and requires careful planning. Once you have completed your analytical work, you need to start developing your naming conventions for both your primary file, the text you are annotating, and your subsidiary files, the individual annotations to which you will link from the primary file.

In our examples, the poems Dulce et Decorum Est and A Green Crab's Shell are the primary files, and annotations such as Bent or Green, to which you link, are subsidiary files. If you organize your naming conventions first, then you free yourself to concentrate on the quality of your writing, the user-friendliness of your layout and the thoughtfulness of your linking scheme, your navigation, as you build your hypertext.

Remember, too, that the relationship between form and content is complicated. No matter how thoughtful your planning, you may need to adjust your organization, your text, and your linking once you see your work on the screen. That's perfectly normal, especially if you are not used to writing hypertext, and viewing your work via a browser. But detailed planning should minimize the on-screen revision you need to execute.

What, then, are the crucial steps in planning a successful hypertext annotation?

The Crucial Steps

The following steps may seem laborious, especially when you are anxious to start building your hypertext online. But they will save you much angst later in the process.

As you become an accomplished and confident hypertext writer, you may be able to dispense with some of these steps. However, most professional writers of hypertext decide on naming conventions (including keeping a careful note of every name they assign to files) and map out a detailed preliminary structure for their work prior to its actual construction.

And, actually, these steps aren't so very laborious:

print out a copy of the text you plan to annotate
on the printed copy, highlight all the words or phrases for which you plan to write an annotation
decide on a name for each file you will create. First, decide on a name for your primary file, the text you plan to annotate. Then decide on a name for each subsidiary file which will contain an annotation. Write all the names carefully on your printed copy

It might be easier to see this in practice.

What Your Preparation Might Look Like...

In the illustration below, you can see the preparation notes (much tidied up!) for the annotation of Dulce et Decorum Est.

In this case:

we've first highlighted each word we wish to annotate
we've then decided to use the letters 'taca' at the beginning of each file name to identify the project on which we're working. If you were preparing an annotation for a ENGL 201 or 202 class, for example, you might include 201 or 202 at the beginning of each file name.
we've adopted very simple names for the files we plan to create. For example, the title of the poem is Dulce et Decorum Est. We therefore decided to call the primary file, the file which will contain the text we're annotating, after the first word of the poem. Thus we created the name tacadulce.html
we've then followed this same basic pattern for the naming of the files which will contain the annotations: tacahorace.html for the annotation of the title (because the annotation will discuss the influence of the Roman poet Horace on this poem); tacabent.html for the annotation of the word bent, and so on.

Note we include no capital letters or spaces in the names of the file, and each file ends in the same extension .html

If all your file names are lower case, you will not need to remember whether you used upper- or lower-case letters for the names when you are creating your links
If you include spaces in the names of your files, some browsers will simply not read past the space
If you remain consistent in your file naming (choosing to use either the extension .html or the extension .htm), you will not need to remember which extension you used for the name of which file

If you are feeling a uncertain about file naming and creation at this point, review the 'Creating a Web Page' tutorial before you continue. You should know how to create tables and how to create internal and external links before you continue with the next stage of the annotation tutorial.

Create Your Layout

Layout refers to the way your work looks on the screen.The basic principles of layout involve the positioning of text and the arrangement of white space.

Text
While print is fixed in a permanent place on the page, it changes position on the screen every time someone opens a browser to your page. For example, unless you control your layout, your 'line' may stretch for fifteen words on a relatively small screen to twenty-five words (or more) on a larger screen. The reading of such a long line is a bit like watching a tennis match, and uncomfortable for most readers.

White Space
White space fulfills two funtions on the screen. It offers readers visual clues about meaning, just as it does on the page. For example, the spacing between paragraphs in prose tells the reader that the subject is shifting in some way. Second, it provides places for the eye (and the mind) to pause, process information, and project forward into your text. As reading from the screen strains the eye more than reading from the page, white space (which on screen can be green or blue or multi-hued or...) is critical.

You can control both the length of your line and the provision of 'white' space through the use of tables

Using Tables

Always specify the width of your tables in pixels (this is called a fixed-width table). If you specify the width of your table as a %width of your reader's browser window, you sacrifice some of your control over your layout. Check the following link to see what we mean: http://classweb.gmu.edu/lsmithg/annotation/tacalayoutex.html

A table 600 pixels wide provides a comfortable writing and reading space, especially for the default fonts and text sizes in Netscape Composer and Dreamweaver. When you set up your table, specify one column, but include at least three rows: the first for your title; the second for the body of your text and the third for your footer, the text which notes who created the annotation, when it was last updated, perhaps the purpose of the annotation and any additional information you think may be useful to your readers.

Center the table in your page, too, to guarantee an equal balance of 'white space' on either side of your text. Here's an example: http://classweb.gmu.edu/lsmithg/annotation/tacalayout1ex.html

Go ahead and open a new web file, save it immediately under the file name you have chosen for your primary file (the text you are annotating) and insert a centered, three-row, one-column table. Time now to insert your text and build your annotation.

Insert Your Text

You may insert your text in two ways:

type your text directly into your web document
cut and paste your text, if it's available digitally, into your web document

Typing your own text works well if you are an accurate keyboarder and your text is short. Always spell-check and proof-read your text before your begin your annotation

Cutting and pasting your text works well if you are an inaccurate keyboarder and/or you are working with a long text, like an essay, a short story, or part of a novel.

But you will encounter some hazards:

Netscape
If you paste text into Netscape, it will retain simple formatting, like the line breaks in a poem. But it will not retain complex formatting, like indented lists, or even paragraph breaks.
Dreamweaver
Dreamweaver retains no formatting, however simple, when you paste text into a document. Solutions?

Format Solutions

Formatting problems leave you with two options:

paste your text line by line (for poetry in Dreamweaver) or paragraph by paragraph (for prose in both Netscape and Dreamweaver)
paste your entire text, and then restore the appropriate formatting by editing in your web document (tricky if you are not an accurate reader)

Neither route is superior to the other: you just choose the method that suits best your work and learning style. But never create your text as a word processing program, and then convert that document to a web-ready document. However nifty this operation seems, it inserts, where you can't see it, a multitude of coding tags which can later cause editing problems.

Now go ahead and create your web documents, both your primary file, and all the subsidiary files which will contain your annotations. Use the same layout for both primary and subsidiary files, and save each file under the name you have already chosen.

Once all your files are ready, you are ready to begin the final stage of the annotation, the building of your hypertext.

Managing Your Links

Accurate, user-friendly linking allows your readers to work easily through your annotation and concentrate on your content without worrying about where to go next, or how to return to a document they have already read. In a hypertextual annotation, you have two tasks:-

to create the links from the primary file to each subsidiary file
to create a link back from each subsidiary file to the primary file

Never force your readers to rely on a browser's Back button to navigate your work. If you are working with a short text (no more than one screen in length, such as a short poem), you can build a basic linking structure. If you are working with a longer text (such as a long poem, or a prose extract), you will need to build a more complex linking structure.

Basic Linking Structure

If you are working with a short text, such as a poem which stretches for no more than one screen, or only a few paragraphs of a prose work, the building of a linking structure is relatively easy:

on the primary file, create the link from each word you wish to annotate to the relevant subsidiary file
at the bottom of each subsidiary file, create a link back to your primary file. For this link, use text that communicates the intent of the link to your reader (like back, or return to text, for example). Or you could use an easily identifiable icon (like a left-facing arrow) or image. (See the English Department image tutorial)

Or you may use an icon+text, as we did on our annotations: Dulce et Decorum Est

But what if you are working with a longer text?

Complex Linking Structure

If you are working with a longer text, you should create links from your subsidiary files which return your reader to the exact point in the text from which s/he left. You create the complex linking structure via two simple steps:

the insertion of targets or anchors in your primary file
the modifying of links from your subsiduary files to hit precisley those targets

Targets/Anchors
You insert a target/anchor in your primary file to give the links from your subsidiary file somewhere to aim for. For example, in the annotation of Dulce et Decorum Est, we inserted the target dulce in front of the title.

Modifying Links
In order to hit the target/anchor in the primary file, you need to add the name of that target to the return link in your subsidiary file. For example, in the Dulce et Decorum annotation, we wrote the link back from the subsidiary file as tacadulce#dulce. The #dulce tells the browser to return to the target dulce at the beginning of the poem.

What, then, is the best way to build this structure?

Complex Linking Tactics

The most efficient route a snag-free complex linking structure is:

prepare your text and annotations as web-ready texts (.html or .htm files)
add to your primary file all the links to the subsidiary files which contain your annotations
add to your primary file the targets/anchors that will tell your links in the subsidiary files exactly where to return
always list exactly which target/anchor word you use where, and never use the same word as target/anchor twice
use this list to create the individual link back from each of your subsidiary files. Remember that when you create the link, you must add the #targetword after the name of your primary file.

For example, if you were annotating the title of A Green Crab's Shell, you would:

insert the target/anchor crab in front of the title in your primary file
add #crab to the link back from your subsidiary file which explains the title

Now go ahead and build your complex linking structure. Always check your links carefully to make sure they are working exactly as you hoped. Revise the basic mechanics of adding targets if necessary.

Explore the Possibilities

Once you have digitized your text and all your annotations, you can present your work in many different ways. If you follow the link at the bottom of A Green Crab's Shell, for example, you will see the annotation of the poem arranged thematically. We used the same annotations, and the same primary file of the poem. We just reorganized their relationships, and presented the connections between the text and the annotations differently.

You might use color to distinguish different types of annotation: unfamiliar words in blue, unfamiliar references in green, unfamiliar syntax in red, and so on. You would then be offering your reader a visual clue about the meaning of your annotation.

You may wish to add:

sound files as annotations to illustrate the rhythm of an critical line or phrase
images, as we included images of The Hydra and Owen's handwritten drafts of Dulce et Decorum Est to our annotation of the poem
your own graphics to accompany the annotation

Be as imaginative as you dare (and your assignment will allow!).

Use Sources Ethically

You must cite all sources (printed, online and human) which you used in the creation of your annotation. Follow MLA guidelines as far as possible, and the Columbia Guide to Online Style (http://www.columbia.edu/cu/cup/cgos/idx_basic.html) for electronic sources. You should:-

on your primary file, include a citation for the source of the text you are using, and a link to the source, if it is online
also on your primary file, link to a Works Cited file, where you include all texts to which you refer
in your Works Cited file, acknowledge not only all the written, visual or aural texts you have used but also the help you receive from:

Remember that not only text but images, graphics, sound files and other multimedia elements are copyrighted to their creators. Do not steal others' work. You must acknowledge all work you use, even if you think you are using it under the Educational Fair Use exemption. Check the university's DoIT Copyright guidelines for further guidance: http://www.doiiit.gmu.edu/copyright.htm