Quick links to necessary pages

Introduction to the Hypertext Project
PopUp Label Instructions
Formatting with HTML
Code page for invoking PopUp Labels


Using Popup Labels to Annotate Texts

Consider the following examples of popup labels
(run your cursor over the links)

Look here

and here

and also here

and finally here

Using a mildly complex version of the standard <a href> tag in conjunction with a java script, students create popup labels. This is powerful stuff. Label position, colors and text fonts can be changed. These labels are used to annotate the assigned texts.



The Popup Code

Take a look at the link tag you will be using. You can copy and paste from here to your own file.

<A HREF="javascript:void(0);" onMouseOver="return overlib('This is a ordinary popup.')" onMouseOut="nd();">Word or Phrase to be Annotated</A>


Let's take a closer look:

<A HREF="javascript:void(0);" onMouseOver="return overlib('This is a ordinary popup.')" onMouseOut="nd();">Word or phrase to be annotated</A>

The red coding, "javascript:void(0);", is javascript that tells your browser, "This isn't a real link. Don't try to jump to some other internet site." You won't have to change this; leave it as is.

The green coding, onMouseOver="return overlib," is javascript that helps your browser understand we're about to invoke popups. Leave this as is, too.

It's the blue wording that we get to change. Everything else needs to remain just as you see it.
  • The first blue phrasing, between the single quotation marks, will be the text of your label. Think what you want to say about a word or phrase in the poem, then place it here. You can use simple formatting tags within this section if you want, for example: <center>, <I>, or <B>


  • The second blue phrasing is your standard link word or phrase. Whatever words you want to highlighted should go here.

Everything else should stay the same, at least for now.

One CAVEAT! You can't use a standard quotation mark or apostrophe within the text of your popup (i.e., you can't use either in the first section of blue phrasing above). You will probably need both; when you want to use a quotation mark, use the first code below; when you want an apostrophe, use the second code

&quot;

&acute;
These codes will appear as a quotation mark or an apostrophe when the page is in place.


Your Work Flow

Many of you will be Passage Editors. Type your portion of the assigned work into a text file. Avoid using Microsoft Word. Use Notepad or some other small wordprocessor instead. If working with verse, make sure you use <br> at the end of lines. Indent paragraphs, where appropriate, using the <dd> and </dd> tags to indent. Don't worry about background appearance, text size or color. The Text & Design Managers will be concerned with overall appearance.

Once you have finished and proofread your "copy," create intelligent and useful annotations. Your instructor will give you suggestions - e-mail her or him with questions. Strive to analyze your section and to provide intelligent annotations; help readers to understand the text. Annotate difficult words; provide brief historical or biographical introductions to events and people (when possible); explain the ways that you understand the text.

Several students will research specific topics and write side essays discussing their findings. When useful and appropriate, these electronic essays should have links to sources on the internet and make use of PopUp labels.

Keep a list of reference sources that you use. You will be asked to contribute to a Works Cited page. Of course, use proper parenthetical citation when drawing from an outside source.

Debugging Your Popups

Before you present your passage to the Text & Design Managers you will want to test it to see whether the popup labels work correctly. Here's what you will do. It may seem complex but really isn't.
  • Follow THIS LINK and find a page of coding.
  • If you are using Internet Explorer, when you hit this link you will see a blank page -- no worries -- go up to "View" on the tool bar and pull down to "source" -- the code will appear in a Notepad window
  • If you are using Netscape, just hit the link and see the code. Then highlight ALL of the coding from that page and paste it into a new Notepad file. Again use Notepad or another small word processor. If you have used Internet Explorer to view this coding, it will already be in a Notepad file; follow the directions below.

  • Type and format your passage in the central blank portion of the page (below the <br> tags and above </body> tag). Add appropriate popup label annotation.

  • Save the document as a text file named something like "mypassage.html." Do not close the file yet.

  • With the file still open in Notepad, open it a second time using Internet Explorer or Netscape, and see whether everything is in good order. YOUR COMPUTER MUST BE CONNECTED TO THE INTERNET WHILE YOU DO THIS. YOU ARE LOOKING AT A FILE ON YOUR DISK, BUT ONE OF THE JAVA COMMANDS IS LOOKING AT A FILE ON LOKI.

  • If there are bugs, switch over to the Notepad version of the file, fix them, then save the file. THEN, switch to your web browser, refresh, and see whether the changes are appropriate.

  • If all looks good, paste your passage with annotations into the appropriate item in the class WebCaucus Conference. (DON'T PASTE THE CODE FOR THE ENTIRE PAGE, JUST FOR YOUR PASSAGE.

  • One last thing, when you paste your passage into WebCaucus, don't change the editing box to HTML format, leave it as wordwrapped. That way the Text & Design Managers will be able to paste it into the class webpage.