Contributions to the Decameron Web

N. B. It is essential that you become familiar with this page and refer to it often.

This document was prepared as a quick reference tool for students in IT 102 and presupposes no previous knowledge of HTML (Hypertext Mark-up Language). A conscientious effort must be made to ensure that each student's contributions adhere to a certain format in order to maintain consistency of appearance and content; it is imperative that, as you prepare your research for inclusion in the Web, you follow the basic guidelines below. If you prefer to have a hard copy of this page, select "Print" on your browser.

What is HTML code?

If you have ever accidentally opened a Word document in a simpler program such as Write or Teach Text, you will have noticed that word processors include a large amount of "code" in and around the text itself which normally remains invisible. These symbols and numbers tell the word processing program how the text is to be displayed on the screen and when printed. World Wide Web documents too contain encoded information that is "read" by Internet browsers (such as Netscape and Internet Explorer) and translated into formatting (italics, images, paragraph returns, links to other documents and so on). Although HTML code is not normally visible when you look at Internet documents, you can indeed see it by selecting VIEW and SOURCE on browsers. Try this - both out of curiosity and as a reference in case you leave your notes at home.

top

How do I write in HTML?

While there is a very large selection of different formatting "tags" (the specific characters that indicate to the browsers how the document should be displayed) available in the most recent version of HTML, in this course you will have at your disposal a limited set (as described below). Each document you write will be composed with a regular word processing program and saved as text only with a name which ends in ".html" (e.g. "document.html"). Use only lower case letters in document names. Note: because word processing programs now attempt to help you to compose code, you may think that such help is a good idea. In reality, programs like Word often write pretty awful html. You will have much greater success using uncomplicated text editing programs such as Simple Text or WordPad. The whole process is really quite simple once you've learned the contents of this document. Keep it handy and refer to it often. Time invested now is time saved later. HTML code is composed by setting a string of elements within angular brackets into your document. These brackets ("<" and ">") contain the instructions the browser uses to insert images, links and text formatting. They become invisible, when done properly, when your work is viewed by someone following regular links.

top

Phrase Level Markers:

These tags are placed around text to produce bold (<b>) or italicized (<i>) characters and to set text into centered (<center>) or double-indent format (<blockquote>). Note that there are no spaces between the tags and the formatted text. Note too that the end tag is identical to the beginning tag with a single exception: it is preceded by a front-slash ("/"). Contributors to the Decameron Web are to use bold for document-internal titles and italics for foreign words and titles of books. Use double indentation only for citing more than five contiguous lines of text. Though you may use the tags together, you must nest them (e.g. it is okay to write <center><i>Decameron</i></center> but not <center><i>Decameron</center></i>).

<b>Sample Text</b> produces: Sample Text
<i>Sample Text</i> produces: Sample Text
<blockquote>Text</blockquote> creates double indentation.
<center>Text</center> centers the text.

top

Anchors (Links):

The greatest advantage of hypertext "webs" is their ability to allow users to control their own sequence of readings. This, naturally, is achieved through links "anchored" into a text which, when activated, carry the reader to another document. A single word or phrase may be turned into an active link by setting "anchor" tags around it just as we set phrase level tags around words in the examples above. The beginning tag, however, contains the Internet address that belongs to the destination document or image. In order to maximize the value and usefulness of the Decameron Web, all intuitively productive connections from elements in your document to an existing document should possess a link. In other words, when someone reading your document would benefit from another related document, be sure to provide a link for him or her to get there easily. Resist, however, the tendency to make "Click Here" links: instead, set the link around a key word or phrase. Obviously, you must keep up and be familiar with the documents already contained in the Web in order to know where to send your reader.

An anchored link is composed in two parts. In the first, you supply the destination address, which is known as a URL and is displayed by the browser at the top of the destination page (in the Location field, NETSCAPE, or Address field, IE): <a href="http://www.brown.edu/destination.html">. Be careful to set the Internet address into quotation marks exactly as you see it as documents' addresses are commonly case sensitive (since they usually reside on UNIX machines). The text that will be "clicked" goes immediately afterwards and is followed by the second part of the link: </a>. You will recognize the front-slash and angled brackets, characteristic of HTML tags, from the other tags discussed above. Example: During the 14th century, the people of Florence were forced to deal with the disastrous effects of <a href="http://www.brown.edu/Departments/Italian_Studies/dweb/plague/plague.html">the plague</a>.

top

Inserting Images:

Given that the WWW provides for multimedia, you can also insert images and other media into your documents. Each of your documents will eventually contain all the regular images and links that you see on a formatted page. Until your projects are incorporated into the web, however, you are responsible only for those images that are specific to your documents. Although you are encouraged to make use of the ability to illustrate your research, you must keep in mind the fact that users outside of this course (indeed all over the world) will have access to it. This is of the utmost importance as any insertion of an image into the Web would be prohibited should it still be protected under copyright. For this reason, all scanned images must be out of copyright. What is more, not all images found on the Internet are free to use. Be sure to watch for copyright notices wherever you look for images. If you cannot find a suitable image, you may use a scanner to create one, always mindful of copyright restrictions. A word of caution: do not use very large images as they slow down your page's loading. There are a number of ways to get around this. Try cropping the image or, if you really need to use a large image file, reduce it to a thumbnail and link that image to the larger version. For the convenience of our users, it is helpful to include in parentheses the size of big images (larger than 150K). Your image size, however, should be possibly below 150K and its resolution not more than 100 pixels/inch. The HTML tags for images are, unlike those mentioned above, not composed of a beginning and ending part. It is a single, self-contained code element in which your image's name and complete address are identified. In the example below, we are inserting a GIF image named "picture.gif" and including a brief description for those who do not autoload images when exploring the WWW:

<img src="http://www.sample_univ.edu/picture.gif" alt="A photo of Boccaccio's dog" height="100" width="100">.

When you turn in a document which will contain an embedded image, it is sufficient for now simply to put the image's name in quotation marks after src= and to include the image itself on your disk. The height and width of your image are measured in pixels. To find the proper dimensions, use Photoshop or another image editor. You may also make use of Image Maps (images that contain various "hot areas" which take users to different documents depending on where they click) after consulting with your professor. If you plan on scanning slides for your work, do also consult your professors.

top

Other Tags:

In addition to the tags discussed above, you may use others as well. Among these are the Horizontal Rule (<hr>, a horizontal shaded line), Line Break (<br>, which ends a line of text but does not add a space), and Paragraph Break (<p>, which is used between paragraphs and adds an empty line). The first two are "stand-alone" tags: they have no corresponding "end tags." The <p> tag is complemented by the </p> at the end of the paragraph.

top

Special Characters:

Inevitably, you will eventually want to use foreign characters when writing your documents. "Text only" documents do not, however, allow you to use accents properly. Instead, you have to use an HTML character entity. An entity is a sequence of letters between an ampersand and a semicolon. Some of the most common of these are listed below:

            &agrave; produces à
            &egrave; produces è
            &igrave; produces ì
            &ograve; produces ò
            &ugrave; produces ù
            &Agrave; produces À
            &Egrave; produces È
            &Igrave; produces Ì
            &Ograve; produces Ò
            &Ugrave; produces Ù
            &aacute; produces á
            &Aacute; produces Á and so on.

top

A sample HTML document:

In order to get you started, we've decided to provide you with a template that contains all the special code you need to begin work destined for the Web. The text of your work will be inserted into the middle of the template where you see "Your text goes here." You do not need to know much about what is going on in the template. Indeed, your main concern should be with the quality of your content rather than the attractiveness of your web page.

After deciding what you wish to write about (don't forget to consult the Pedagogy section for ideas on successful research strategies and methods of presentation), you may turn your attention to formatting your document for the Internet. Once you think that you have done everything properly, consult this checklist to be sure that you've left nothing out:

Formatting:

  1. Did you give the document an appropriate title?
  2. Did you put your name in the document?
  3. Are all instances of bold type set into the proper phrase-level markers?
  4. Are all titles of books in italics?
  5. Are all foreign words in italics (with the proper special characters)?
  6. Are all paragraphs surrounded by the proper <p> and </p> tags?
  7. Are all citations of more than five contiguous lines of text double-indented?

Images:

  1. Is each image cropped to an appropriate size?
  2. Is the size in memory and resolution respecting the guidelines?
  3. Is each image appropriate in terms of content?
  4. Is the code correct?
  5. Does it look good in a browser?

Anchors (links):

  1. Are all pertinent links inserted into the document? (Remember that you must add links to already existing pages in the Decameron Web if the relationship is at all substantive.)
  2. Have you avoided "click here" links?
  3. Do all links work properly in a browser?

Content:

  1. Is the style appropriate?
  2. Do you do more "explaining" than "telling"?
  3. Will your reader understand the Decameron better after reading your work?
  4. Did you avoid truisms, oversimplification, excessive praise (or blame), spelling and grammatical errors, and run-on sentences?
  5. Did you eliminate the confusing, redundant and unfounded statements?

Bibliography:

  1. Did you cite all sources appropriately?
  2. Did you provide all necessary bibliographical information (including page numbers)?
  3. Does the format of your sources conform to the models in the Bibliography section of the Web?

Remember: ALL works cited must contain ALL essential data including the page numbers.

If you use an HTML editor, be sure to check the source when you are finished. Indeed, once you think you have finished composing a document, be sure to use a validator before handing in your diskette. The most easily accessible validator for our purposes is that provided to us by Brown (see Related Links); make use of it often! Lastly, be sure that you've opened your documents in a browser and looked at them carefully. If there are errors in formatting, image presentation or linking, you must repair them before turning your work in.

top

Style Conventions

As you become more expert in the use of HTML (some of you doubtlessly have already mastered the basics), you will be tempted to make use of more advanced types of styles and tags. After a considerable amount of thought - and trial and error - we have made some features "off limits" to web contributors, largely in order to keep all aspects of the project accessible to the widest possible audience. Among these are frames, Java applets (Java scripts are permitted provided you can rationalize the necessity of including them in your documents), embedded objects, VRML (unless you plan to use it in creating an entire sub-web), backgrounds (other than the one specified above), and CGI scripts of any kind. As a general rule of thumb, if you want to do something not explained here, talk to the professor about it.

In light of the fact that there are so many possible types of media, we have made the choice easier for you. For images, use only GIF (type 89a interlaced) or regular JPEG (not "Progressive JPEG"); for audio and video, speak to the professor.

If you have questions, others are likely to as well. Feel free to ask in class or try posting to the local Listserv.

top

Main: The Project: Contributions to the Decameron Web