Creating your web doc. for Greek Science

I have put together this help document for our web projects for the Greek Science class. This is a rough draft. The information in it should be accurate, but I may have missed a typo or three, so contact me in class or by e-mail if you have questions or problems.
Ellen Brundige
Ellen@medusa.perseus.tufts.edu

Table of Contents

  1. Introduction
  2. What is HTML?
  3. What is a 'tag'?
  4. What tags do I need?
    1. Title
    2. Headers
    3. Body Text
    4. Lists
  5. How do I get tags into my document?
  6. What about links and pictures?
    1. Links to other documents
    2. Links to Perseus' primary texts
    3. Making links to other parts of your document
    4. Pictures

Introduction

Lisa Cerrato gave the class an overview of how you need to organize your project, how you need to be breaking it into subsections and related sections in a less linear fashion than in traditional papers. The best way to get a feel for this is simply to browse web sites; look at the Tufts Home Page, Perseus, and the sites listed under 'Related Web Sites'.

Now, having gathered your information, and probably written the body of the paper, how are you actually going to put it on the Web?

What is HTML?

HTML stands for Hypertext Markup Language, a scheme of labelling parts of a document to tell the computer which parts are headings, quotes, body text, pictures, etc. HTML is a scheme designed to be universal and doesn't depend on the conventions of a particular word processor or computer. That way, any computer linked to the Web can figure out how to display and interpret any HTML page posted on the Web.

To get the in-depth scoop on what it is and how it works, click here to go to the NCSA Beginner's Guide to HTML.

What is a 'tag'?

A tag is a label marking the beginning, and usually the ending, of a particular kind of text, such as a caption, a paragraph, a list (e.g. Table of Contents), or a picture. They are enclosed between angle-brackets. When marking the end of a body of text, a slash goes between the open-bracket (<) and the label, like this:

<TITLE>Xenophanes' theories</TITLE>

HTML is a specific set of tags which have been agreed upon as a standard, such as using <P> for end-of-paragraph, <TITLE> for the title of a document, and so on.

You can have tags inside of tags. For instance, you might want part of a header in italics:

Homer's Odyssey

which looks like this in the HTML document:

<H4>Homer's <i>Odyssey</i></H4>

What tags do I need?

Title

Your document needs a title which will appear in the bar across the top of the page, and, more importantly, will contain a few words related to the subject matter. Many Web-searching tools can scan the titles of thousands of web pages very quickly, thus allowing users who don't know about your paper to discover it when searching for, say, Aristotle, if you happen to have Aristotle in the title. Don't agonize over it, and keep it brief--think of it as the subject card in a library card catalog. Example:

<TITLE>Greek Science:Xenophanes on Elements and Evolution</TITLE>

Headers

Headers are the names of specific chapters and subsections of your work. These actually appear in the body of your document, unlike the title, which just shows in the title bar across the top of the screen. When a header is labelled <H1>, it's designated as the top level of your document, and programs such as Netscape and Mosaic write it big and bold. Chapter headings might be designated <H2> or <H3>, and would be displayed smaller but probably still boldface. HTML distinguishes six descending levels of hierarchy for the purpose of labelling sections and subsections; 1 is most prominent and 6 least.

Body Text

If a block of text in your document isn't tagged in any particular fashion, it appears as body text. A few special features of body text can have tags: end-of-paragraph markers, end-of-line markers, italics, underline, boldface are the most common.

  • <P> End-of-Paragraph

  • <BR> End-of-Line
  • <hr> line across page to denote section break
  • <I> Italics </I>
  • <B> Bold </B>
  • <U> Underlined </U>

    •

    Lists

    There are various kinds of lists, for example: tables of contents, a list of steps in a proof, a list of textual references you might wish to look up, or a list of your friend's favorite web sites. Some of these are what HTML designates as 'ordered lists': they proceed from one to two to three, and that's how they're displayed. Example:
    A web-browser's alphabet
    1. Abacus
    2. Barney_die_die_die
    3. Crusty the Clown
    Which looks like this in HTML:

    <H5>A web-browser's alphabet</H5>
    <OL>
    <LI>Abacus
    <LI>Barney_die_die_die
    <li>Crusty the Clown
    </OL>

    <li> means 'begin new line of list', so it's not necessary to have an end-of-line tag, although one can put it in. <OL> stands for Ordered List; if you're just doing a list of references, a shopping list, or some other list not in any particular order, tag it as <UL> for Unordered List. Note that you do need to end your list with </OL> or </UL>, so the computer doesn't keep listing everything that comes after it. Also notice that, if you call something an ordered list, Netscape numbers it sequentially--you don't need to type in the numbers.

    How do I get tags into my document?

    This is the part you should come to us for, since it's not hard but takes a little practice. You probably haven't composed your document in HTML editor, but in a word processor.

    Rather than typing all the tags out longhand, it's best to save your file in some simple form like Text Only, if you don't have any pre-formatting such as italics and underlines, or RTF format otherwise. In the latter case, you'll need one of us to help you run a program that can take files saved in RTF format and generate tags for it automatically.

    You will eventually have your document in a format which you can use in an editor such as the one we have at the office. Our HTML editor allows you to select any text and then choose how you want to tag it from a bunch of buttons at the top: Heading, List, Bold, end-of-paragraph; all the tags mentioned above.

    What about textual links and pictures?

    The method for linking texts and pictures follows the same principle as other tags: you bracket the phrase from which you want a link to pop up with tags. In HTML, linked text (or pictures) is tagged by <A> Example link to Perseus Homepage </A>.

    After the 'A' in the 'begin linked text here' tag, there is additional information before the closed-brackets that tells the computer what kind of link it is, and how to find the appropriate link. So, the way the above link really looks in my document is this:

    <A HREF="http://www.perseus.tufts.edu/"> Example link to Perseus Homepage</A>

    The A is the same for all kinds of links; it is followed by the kind of link we're talking about (HREF means 'hypertext link'), an equals sign, and a way to find the link enclosed in quotes. This is explained in more detail in the next sections covering the four main kinds of links.

    Links to other web pages or documents

    This is what you will be using most often. It's how you will implement textual references to primary sources, which are on the Perseus Web Site, as well as any web pages (including those with pictures) you may want to link to. For linking to other web pages, the beginning tag takes the format

    <A HREF="http://web.doc's.address@here">

    In our HTML editor, to avoid having to type out all of this, do the following.

    1. First, it's good to have Netscape open in the background while working on your document in the HTML editor, so you can figure out what address you will want.
    2. Navigate to the page or section of a text you're interested in. Notice the white box labelled "Location". This is what you need. Select it, then copy it using the edit menu.
    3. Now switch back to the HTML editor. (You can change which application you're using by clicking on the icon in the upper righthand corner of the Mac's menubar and choosing the icon of the application you want from the menu that pops up.)
    4. Select the text in your document from which you want a link.
    5. Now click on the "make link" button at the top of your editor; it looks like an anchor. A window will pop up asking you what kind of link you want.
    6. "Paste" the location you just copied into the 'name or reference' box, and be sure to choose the button that says "Link to other file".
    7. Now hit return or click the "construct" button, and the proper tag will appear around the text you just told it to make into hypertext. That's it!

    Specifying passages in Perseus' primary sources

    The WWW address for finding specific textual references in Perseus is a mouthful, and you probably just want to use the above method finding the right page using Netscape. But, for the curious, this is how we tell the Web to find specific passages in our primary sources.

    Thuc. 2.3.1

    Aesch. Lib. 341

    which look like this in HTML:

    <A HREF="http://www.perseus.tufts.edu/cgi-bin/text?lookup=Thuc.+2.3.1">Thuc. 2.3.1</A><P>

    <A HREF="http://www.perseus.tufts.edu/cgi-bin/text?lookup=aesch.+lib.+341">Aesch. Lib. 341</A>

    The 'cgi-bin/text?lookup' gibberish is telling Netscape to run a lookup-program called text? to find the right passage. We have to specify the passage using a standard set of abbreviations for author and work, and, because the Web is persnickety about spaces, we've had to turn them into '+' signs. So Thucydides Book 2, Chapter 3, line 1 is written 'Thuc.+2.3.1'. Note that the computer needs to know what chapter and line number, if there is one; it can't find the beginning of book 2 if you only give it 'Thuc+2.'

    Again, if the above doesn't make sense to you, just use Netscape to go to the passage you want and copy the "Location" box under the menu bar for the correct reference.

    Making links to other parts of your document

    You will probably want to have links in your text that jump to another part of the same document. Perhaps that part of your document addresses the same subject more fully. Or perhaps you'd like to have a snazzy table of contents in the beginning of your document to help people find their way around the different sections. This is the heart and soul of hypertext.

    The way this is done is similar to linking in other Web pages. You'll still use the <A> tag, but instead of using HREF, you use NAME="" with some name you want to call this particular link enclosed inside the quotes. Then, you'll tag the words in the document you want it to jump to using the <A> tag and HREF="#the same name you used above". When you click on the link, it will search through all the text tagged with <A> tag and HREF="#" until it finds text after the number sign that matches the NAME.

    For example, in my table of contents I have a link to this section. The way it looks on the screen is this:

    1. What about links and pictures?
      1. Links to other documents
      2. Links to Perseus' primary texts
      3. Making links to other parts of your document
    The way the last line of that list looks in the HTML document is this:

    <li><A HREF="#Internal links">Making links to other parts of your document</A>

    And, to tell the computer how to find that spot, the beginning of this section is tagged like this:

    <A NAME="Internal Links">Making links to other parts of your document</A>

    In our HTML editor, the tagging shortcut is to select the text you want tagged, again choose the anchor button at the top of the page, enter the name you want to call this particular link, and then choose either 'link in this file' for the text you want to have a link or 'target' if you're tagging the spot you want the link to jump to. The computer will construct the tag from that information.

    Pictures

    You may want to use pictures already on our Web site or that you've found on the web. In this case, you will set links to the page on which you found that picture just as you do the textual links to other web documents. In sum, copy the http address listed in the location box at the top of the web page where you found the picture, select the text you want to link to that picture in your document, choose the anchor button, paste the address you just found into the 'reference' box, and pick 'link to another file'. For example:

    Picture of vase: Hrvrd1972.46

    looks like this in my HTML document:

    <A HREF="http://www.perseus.tufts.edu/Hrvrd1972.46_images/1990.01.1480.gif">Picture of vase: Hrvrd1972.46</A>

    Linking the pictures into your document
    If you just want to have your link open a new web page with your picture, the address you'll want will be "http://www.perseus.tufts.edu/GreekScience/Images/NameofYourDocument".

    If you want to have your diagram, picture, or, perhaps a little button you've drawn show up within your document, you'll use a slightly different kind of link. Instead of using the usual <A HREF="">, you'll want <IMG SRC="">. Between the quotes, as usual, is the address where your image has been saved.

    For example, I have a small button icon I'd like to use. It looks like this: Button

    The way I got it to appear in my document is by positioning my insertion point after "this: " and choosing the HTML editor's "insert image" button, whose icon is a picture of random geometric shapes. It asked me for a path, which is the address where that image is stored. The editor then constructed this link for me:

    <IMG SRC="http://www.perseus.tufts.edu:80/homeimages/button.gif">

    Making your own pictures and diagrams
    You can color scan pictures at the Perseus office or in Jackson. Have us or the op show you how to scan the pictures. Whether you scan or draw these images using a graphics program, save them in GIF format if you can, PICT or JPEG otherwise. Bring them to us on disk and we'll help you link them in, if you're having trouble.

    Jackson Labs have MacDraw Pro on all of their Macs, and other fancier graphics programs on only some Macs--there's a list on the door of each room showing which computers have what. If you just need to do diagrams with labels, MacDraw works fine, but you'll need something like Freehand or Illustrator if you want to draw fancy pictures, or Photoshop if you want to scan in a picture and then add captions or play with it. If you've had to save your pictures as something non-GIF (MacDraw only lets you save them as PICTs) you can then load your PICT or whatever it is into Photoshop, choose 'save as...' and tell it to re-save the drawing as a GIF.