HTML Documents: A Mosaic Tutorial

Copyright (c) Whatsupdoc 1994.

This tutorial will show you how to create and display Mosaic screens like the one you are now reading. Such screens are composed as ordinary ASCII text files, containing markup characters of the Hypertext Markup Language (HTML). Once composed these text files are saved with an .html extension.

Table of Contents

It is usually best to go through the various sections in order, but you can jump to any heading by clicking on it.

I. Using this Tutorial

II. Document Layout

Exercise 1: Beginning an HTML Document: <title> <h1>
Exercise 2: Paragraphs <p>
Exercise 3: Secondary Headings <h2> . . . <h6>
Exercise 4: Indenting: <dl> followed by <dt> <dd>
Exercise 5: Indented Lists: <ol> or <ul> followed by <li>
Exercise 6: Italics and Bold Face <i> and <b>

III. Special Symbols for Document Layout

Meta Commands (Escape Codes) for <, >, and &:
Pre-formated Examples <xmp>
Shadow Lines <hr>
Using Extended Characters

IV. Hypertext Links

Example 1: Linking to Another Part of Your Current File
Example 2: Linking to Another File
Example 3: Linking to a Specific Location in Another File
Example 4: Linking to Another Computer
Example 5: Linking to Graphics
Example 6: Creating a Graphical Link Anchor

Appendix A: Fully Compatible Files

Appendix B: HTML Extended Character List

Appendix C: General Syntax for Links

Appendix D: Completed Exercises

Appendix E: HTML Resources and Related Documents

I. Using this Tutorial

This tutorial contains sequences of exercises and examples. Use the slide bar and hypretext jumps to move through it.

The best way to learn HTML is to type in the exercises and examples for yourself. Then open them as Universal resource Locator (URL) files.

Opening Your Own HTML File

1. Use your editor to type each exercise and save it as an ASCII file.

2. Create a second Mosaic window with the pulldown
File -> Clone Window
3. In one window use the pulldown
File -> Open Local
4. Enter the filename and path to the file you just created.

5. View your document and compare it with the exercises and examples in this text.

NOTE: The HTML display offers few error messages. It is best to check your edited text by frequently reloading and displaying it in Mosaic.

Return to the Table of Contents

II. Document Layout

Exercise 1: Beginning an HTML Document: <title> <h1>

Let's create a Mosaic display:

1. Using your ASCII text editor enter the following: 
      <title> Blake1 </title>
      <h1> Lines from William Blake </h1>
2. Now save your file under the name blake1.html

3. To display blake1.html go to your cloned document window and use the pulldown:

File -> Open Local...
to enter the filename blake1.html

In creating this file we gave it a title which appears at the top of the Mosaic browser. We also gave it a heading <h1> (Heading 1) which appears in the document window. Notice that both heading and title end with a slash command, </h1> and </title>. This is the general pattern for most HTML commands.

NOTE: For a more complete version of the heading information see Appendix A:

Press here to check your results for Exercise 1 against the Completed Exercises in Appendix D.

Exercise 2: Paragraphs <p>

If you simply type words without formatting commands into an html file they will all be formatted into one paragraph. To create separate paragraphs, simply enter a <p> between paragraphs.

Let's try this on our blake1.html file

1. Using your ASCII text editor add the following to your title and heading: 

      Blake's early long poem "The Book of Thel"  was engraved 
   in 1789. It begins with an epigram entitled "Thel's Motto" 
   which helps us understand what Blake means by
   "spirit."  <p>  As you read the following, notice the 
   animal imagery.
2. Now save blake1.html and reload your file. (Try the Reload button at the bottom of the Mosaic window.)

Your file should appear as follows:

Press here to check your results for Exercise 2 against the Completed Exercises in Appendix D.

Exercise 3: Secondary Headings <h2> . . . <h6>

To create a secondary heading simply use <h2> and </h2> in the same way that you used <h1> and </h1> above.
1. Add the following to blake1.html. 
  <h2>Thel's Motto </h2>
2. Now save blake1.html and reload it in your Mosaic clone.

Press here to check your results for Exercise 3 against the Completed Exercises in Appendix D. You can make smaller and smaller headings by using <h2>, <h4>, <h5>, and <h6>. Try these on your own.

Exercise 4: Indenting: <dl> followed by <dt> <dd>

Indenting is done with <dl> and </dl> plus two more commands: <dt> indicates a heading and <dd> an indented description. For example, to create a glossary, use the following:
  1. Begin with <dl>
  2. Create a minor heading with <dt> and the word to be defined.
  3. Indent the definition by putting <dd> in front of it.
  4. Repeat the process with the next word/definition pair.
  5. End the process with </dl>
In the following exercise we will use <dd> only. Please try <dt> on your own.
1. Enter the poem as indented lines. 

<dl>  <dd> Does the eagle know what is in the pit?
          <dd> Or wilt thou go ask the mole?
          <dd> Can wisdom be put in a silver rod?  
          <dd> Or love in a golden bowl?
</dl>
2. Now save blake1.html and reload it in the Mosaic clone.

Press here to check your results for Exercise 4 against the Completed Exercises in Appendix D.

Exercise 5: Indented Lists: <ol> or <ul> followed by <li>

Create a bulleted (and indented) list with <ul> and </ul>. Each item must be preceded with <li>.

Create and automatically numbered (and indented) list with <ol> and </ol>. Each numbered item must be preceded with <li>.

To try these out invoke blake1.html and do the following:

1. Enter the following comments with the markings for a numbered list: 
 
    Let's make four preliminary observations: 
    <ol>   
      <li>The poem resolves itself into 4 questions (binaries).
      <li>The four questions might be answered: "No, yes, no, no." 
      <li>The eagle is ethereal, the mole, earthly. 
      <li>Your English teacher, Ms Fitch, read the word "love"
      and decided that the silver rod and golden bowl are symbols 
      for the sexual organs. (You always wondered about Ms Fitch.)
    </ol>
2. Enter the following to make an indented, bulleted list. 
     Ms Fitch's hint might help us reconsider the poem.  
     <ul>
       <li>Love, like the eagle is ethereal.
       <li>Children localizes love in sexual organs 
           (See Freud's phallic phase).
       <li>Adults fix love in an object (cathexis).   
       <li>Feeling (the spiritual) can take material form.
       <li>Wisdom reveals the mind's role in reifying the
           physical object. 
       <li>Therefore: Thel's questions can be better answered 
           as:  "No, yes, yes, yes."
     </ul>
3. Again save blake1.html, and reload it in Mosaic.

Press here to check your results for Exercise 5 against the Completed Exercises in Appendix D.

Exercise 6: Italics and Bold Face <i> and <b>

Letters can be placed in italics and bold face as follows. Add these lines to blake1.html. The name <i>Thel</i> comes from <b>thelein</b>, the Greek verb for <i>wish</i> or <i> desire </i>. While Thel's story is tragic, her motto symbolizes the manifestation of <i>spirit</i> (desire) in the material world.

Press here to check your results for Exercise 6 against the Completed Exercises in Appendix D.

Return to the Table of Contents

III. Special Symbols for Document Layout

Meta Commands (Escape Codes) for <, >, and &

Ordinarily, the symbols >, &, and < are used to indicate an editing command. But sometimes we want to show these symbols on the screen -- like we just did. Three meta commands (escape codes) are provided to present HTML commands to the screen. Here are the three meta symbols:
&lt; for <
&gt; for >
&amp; for &
Be sure to include the semicolon as part of the symbol.

Therefore, to make <p> appear on the screen, we would need to write &lt;p&gt;

The metasymbols were used extensively in the "Screen Layout" section of this tutorial. For instance, to show html symbols, the poem was marked as follows: <xmp>

&amp;lt;h2&amp;gt;Thel's Motto&amp;lt;/h2&amp;gt; &amp;lt;dl&amp;gt; &amp;lt;dd&amp;gt; Does the eagle know what is in the pit? &amp;lt;dd&amp;gt; Or wilt thou go ask the mole? &amp;lt;dd&amp;gt; Can wisdom be put in a silver rod? &amp;lt;dd&amp;gt; Or love in a golden bowl? &amp;lt;/dl&amp;gt; </xmp>

This displays as

_____________________________________________________________

&lt;h2&gt;Thel's Motto &lt;/h2&gt; &lt;dl&gt; &lt;dd&gt; Does the eagle know what is in the pit? &lt;dd&gt; Or wilt thou go ask the mole? &lt;dd&gt; Can wisdom be put in a silver rod? &lt;dd&gt; Or love in a golden bowl? &lt;/dl&gt; _____________________________________________________________

Pre-formated Examples <xmp>

Notice the previous example is coded using <xmp> and </xmp>. This marker allows you to keep carriage returns and indentations in the format that you want, and it prints the HTLM command codes. Notice also that it uses a typewriter style font with each letter taking up the same spacing. This is particularly good for keeping columns straight in computer code, etc.

HINT The sequence <xmp> </xmp> sequence can be used to introduce empty lines (white space) into your document.

Shadow Lines <hr>

You may have noticed that subsections of this tutorial are separated by a shadow line. This is achieved by a simple <hr> command.

Using Extended Characters

HTML offers special symbols to achieve numerous special characters. For instance, in our discussion of the Blake poem we may have preferred to have written ethereal in the archaic form æthereal.

This is done by writing &aelig; where you want æ to appear:

æthereal would be written &aelig;thereal
resumé would be written resum&eacute;
déjà vu would be written d&eacute;j&agrave; vu

A list of symbols for creating extended characters can be found in the HTML Extended Character List.

Return to the Table of Contents

IV. Hypertext Links

HTML allows you to make links (hypertext jumps) to other sections of your document, other text and graphic files in your computer and in other computers on the network. Thus, you are able to create a "virtual document" consisting of pieces culled from throughout the world.

To see the general syntax for links see Appendix C: General Syntax for Links

Example 1: Linking to Another Part of Your Current File (Link and Destination)

To Link to another part of your current file you need to give it a destination name. This is done with the name command:
<a name="destination"> TEXT </a>
Here you provide a destination name in double quotes. TEXT is the words or symbols that you wish to jump (link) to.

Once the destination has been defined you can jump to it with the link (href) command:

<a href="#destination"> TEXT </a>
Anything that you have included as TEXT will be highlighted. When your users click on that text, their screen jumps (links) to whatever you have defined as the destination name.

Let's try a hypertext jump in our Blake example (Section II). Suppose we want to jump (link) from the top of the file down to the beginning of the poem. We could create the link and destination as follows:

Let's jump down a few lines to <a href="#poem"> Thel's Motto. </a> <p> .............. <h1>Lines from William Blake </h1> Blake's early long poem "The Book of Thel" was engraved in 1789. It begins with an epigram entitled "Thel's Motto" which helps us understand what Blake means by "spirit." <p> As you read the following, notice the animal imagery. <h2> <a name="poem"> Thel's Motto </a> </h2> <dl> <dd> Does the eagle know what is in the pit? <dd> Or wilt thou go ask the mole? <dd> Can wisdom be put in a silver rod? <dd> Or love in a golden bowl? </dl> Notice that our href link says to jump (link) to "poem" which we define as the text "Thel's Motto"

Try out the command by pressing on "Thel's Motto," highlighted below _____________________________________________________________

Let's jump down a few lines to Thel's Motto.

..............

Lines from William Blake

Blake's early long poem "The Book of Thel" was engraved in 1789. It begins with an epigram entitled "Thel's Motto" which helps us understand what Blake means by "spirit."

As you read the following, notice the animal imagery.

Thel's Motto

Does the eagle know what is in the pit?
Or wilt thou go ask the mole?
Can wisdom be put in a silver rod?
Or love in a golden bowl?
_____________________________________________________________

You can use the scroll bar to see how far down you have jumped. The screen jumped forward to the title, "Thel's Motto."

HINT: You can place any number of href links to a single destination name, allowing your user to jump back and forth through a document.

Example 2: Linking to Another File

You can jump (link) to another HTML file on your computer simply by entering the filename. This written as follows:
<a href="file#destination"> TEXT </a>
In using this format, please remember: Consider the following example: Evidence for Blakes's theme of cathexis and reification can also be seen in <b><a href="MHH.html"> The Marriage of Heaven and Hell,</a> </b> especially in Plate 11. Note: Let's see how this command works. Now press The Marriage of Heaven and Hell, highlighted in our example.

_____________________________________________________________

Evidence for Blakes's theme of cathexis and reification can also be seen in The Marriage of Heaven and Hell, especially in Plate 11.

_____________________________________________________________

Example 3: Linking to a Specific Location in Another File

Now let's try linking to a specific location in MHH.html. First we open MHH.html and assign the destination name "deities" to the line about mental deities. Then we return to this document and enter the following: Blake has a notion of<b> <a href= "MHH.html#deities"> mental deities </a> </b> similar to Cassirer's concept of "momentary deities." Try this link:

_____________________________________________________________

Blake has a notion of mental deities similar to Cassirer's concept of "momentary deities."

_____________________________________________________________

Homework: Now try creating two simple HTML files in your own directory. Add a destination name, marked by a #, and jump (link) from one file to a specific location in another.

Example 4: Linking to Another Computer

The link to an HTML file on another computer simply preface the path name with "http:// and the other computer's Internet address.

For example, to link to the NCSA navigation page enter the following:

This connects you to the NCSA Mosaic Demo Document for a good example of HTML in action. You may wish to try out this link. (Be sure to press Back, and then use the scroll bar to return to this part of the tutorial.)

_____________________________________________________________

_____________________________________________________________

Example 5: Linking to Graphics

You can include .GIF (color) and .XBM (black and white) images by using the img align tag written as
<img align=Position src="PictureURL">

Position is
top which aligns the top of picture with text
bottom which aligns the bottom of picture with text (default)

PictureURL is the URL address of the .gif or .xbm picture

For instance, when we can write the following: Here is the Clarkson Seal: <img align=top src="seal.gif"> This appears as follows:

_____________________________________________________________

Here is the Clarkson Seal: _____________________________________________________________

Example 6: Creating a Graphical Link Anchor

Just as you embed words that so that they may become link anchors (for clicking on with the mouse), so you can make a graphic the link anchor for a hypertext jump (link). Simply embed the graphic in the link symbol.

For instance, we can use the Clarkson Seal to jump (link) to the Table of Contents for this tutorial. The destination name for the was defined at the top of this file as "toc." Therefore, to use the seal as a hypertext jump I can write the following lines:

Press on the seal to go to the Table of Contents. <p> To return, select Example 6. <a href="#toc"> <img align=top src="seal.gif"> </a> The seal now has a border line, which like text underlining indicates that it is a hypertext link. _____________________________________________________________

Press on the seal to go to the Table of Contents.

To return, select Example 6.

_____________________________________________________________

Homework: For your final assigment create a graphic link anchor to jump (link) to another site on the network.

Appendix A: Fully Compatible Files

To create files more fully compatible with HTML and HTTP standards put the following around your text. <html> <head> <title> DOCUMENT TITLE GOES HERE </title> </head> <body> <h1> MAJOR HEADING GOES HERE </h1> THE REST OF THE DOCUMENT GOES HERE </body> </html>

Press Back or return to the Table of Contents

Appendix B: Extended Character List

For a tutorial on the list see Using Extended Characters

Return to the Table of Contents

Æ is written &AElig;
Á is written &Aacute;
 is written &Acirc;
À is written &Agrave;
Å is written &Aring;
à is written &Atilde;
Ä is written &Auml;
Ç is written &Ccedil;
Ð is written &ETH;
É is written &Eacute;
Ê is written &Ecirc;
È is written &Egrave;
Ë is written &Euml;
Í is written &Iacute;
Î is written &Icirc;
Ì is written &Igrave;
Ï is written &Iuml;
Ñ is written &Ntilde;
Ó is written &Oacute;
Ô is written &Ocirc;
Ò is written &Ograve;
Ø is written &Oslash;
Õ is written &Otilde;
Ö is written &Ouml;
Þ is written &THORN; (Thorn, Icelandic)
Ú is written &Uacute;
Û is written &Ucirc;
Ù is written &Ugrave;
Ü is written &Uuml;
Ý is written &Yacute;
á is written &aacute;
â is written &acirc;
æ is written &aelig;
à is written &agrave;
å is written &aring;
ã is written &atilde;
ä is written &auml;
ç is written &ccedil;
é is written &eacute;
ê is written &ecirc;
è is written &egrave;
ð is written &eth; (Lower case eth)
ë is written &euml;
í is written &iacute;
î is written &icirc;
ì is written &igrave;
ï is written &iuml;
ñ is written &ntilde;
ó is written &oacute;
ô is written &ocirc;
ò is written &ograve;
ø is written &oslash;
õ is written &otilde;
ö is written &ouml;
ß is written &szlig;
þ is written &thorn; (Lower case thorn, Icelandic)
ú is written &uacute;
û is written &ucirc;
ù is written &ugrave;
ü is written &uuml;
ý is written &yacute;
ÿ is written &yuml;

Appendix C: General Syntax for Links

This Appendix describes the general syntax for writing a hypertext link. Because syntax diagrams are sometimes hard to read you may find it easiest to follow the examples in Section IV: Creating Hypertext Links.
<a href="protocol://location/file#destination"> TEXT </a>
For TEXT
Surround text to be highlighted with the command (The user clicks on the text to invoke the command.)

For protocol, choose from:
http (hypertext transfer protocol)
file (file transfer protocol -> ftp)
gopher (gopher protocol)
telnet (open a telnet session)
wais (begin a wais search

For location, enter
internet address:port number (port number is usually not required)

For file, enter
path/filename (path is not necessary for current directory)

For #destination, enter
a link name (Specified by <a name="destination"> TEXT </a>)

Appendix D: Completed Exercises

This appendix contains the completed exercises for Section II. Screen Layout.

Exercise 1 Displayed

Return to the tutorial

Lines from William Blake

Exercise 2 Displayed

Return to the tutorial

Lines from William Blake

Blake's early long poem "The Book of Thel" was engraved in 1789. It begins with an epigram entitled "Thel's Motto" which helps us understand what Blake means by "spirit."

As you read the following, notice the animal imagery.

Exercise 3 Displayed

Return to the tutorial

Lines from William Blake

Blake's early long poem "The Book of Thel" was engraved in 1789. It begins with an epigram entitled "Thel's Motto" which helps us understand what Blake means by "spirit."

As you read the following, notice the animal imagery.

Thel's Motto

Exercise 4 Displayed

Return to the tutorial

Lines from William Blake

Blake's early long poem "The Book of Thel" was engraved in 1789. It begins with an epigram entitled "Thel's Motto" which helps us understand what Blake means by "spirit."

As you read the following, notice the animal imagery.

Thel's Motto

Does the eagle know what is in the pit?
Or wilt thou go ask the mole?
Can wisdom be put in a silver rod?
Or love in a golden bowl?

Exercise 5 Displayed

Return to the tutorial

Lines from William Blake

Blake's early long poem "The Book of Thel" was engraved in 1789. It begins with an epigram entitled "Thel's Motto" which helps us understand what Blake means by "spirit."

As you read the following, notice the animal imagery.

Thel's Motto

Does the eagle know what is in the pit?
Or wilt thou go ask the mole?
Can wisdom be put in a silver rod?
Or love in a golden bowl?
Let's make four preliminary observations:
  1. The poem resolves itself into 4 questions (binaries).
  2. The four questions might be answered: "No, yes, no, no."
  3. The eagle is ethereal; the mole, earthly.
  4. Your English teacher, Ms Fitch, read the word "love" and decided that the silver rod and golden bowl are symbols for the sexual organs. (You always wondered about Ms Fitch.)
Ms Fitch's hint might help us reflect further:

Exercise 6 Displayed

Return to the tutorial

Lines from William Blake

Blake's early long poem "The Book of Thel" was engraved in 1789. It begins with an epigram entitled "Thel's Motto" which helps us understand what Blake means by "spirit."

As you read the following, notice the animal imagery.

Thel's Motto

Does the eagle know what is in the pit?
Or wilt thou go ask the mole?
Can wisdom be put in a silver rod?
Or love in a golden bowl?
Let's make four preliminary observations:
  1. The poem resolves itself into 4 questions (binaries).
  2. The four questions might be answered: "No, yes, no, no."
  3. The eagle is ethereal; the mole, earthly.
  4. Your English teacher, Ms Fitch, read the word "love" and decided that the silver rod and golden bowl are symbols for the sexual organs. (You always wondered about Ms Fitch.)
Ms Fitch's hint might help us reflect further:

The name Thel comes from thelein, the Greek verb for wish or desire . While Thel's story is tragic, her motto symbolizes the manifestation of spirit (desire) in the material world.

Appendix E: HTML Resources and Related Documents

In creating this document I am indebted to Peter Deuel's HTML Reference Guide, Ver .1, available in Postscript format.

Other useful reference materials can be found by clicking on the following:

Document Information

HTML Documents: A Mosaic Tutorial (Copyright (c) Whatsupdoc 1994), written by Wm. Dennis Horn of Clarkson's Technical Communications Department, is the intellectual property of Whatsupdoc. No guarantee whatsoever is provided by Clarkson, or by Whatsupdoc or any of its writers, programmers, or editors. No liability whatsoever is accepted for any loss or damage of any kind resulting from any defect or inaccuracy in this information or code.

You are allowed, without written permission, to use and distribute any Whatsupdoc copyrighted materials as long as you conform to all of the following numbered items:

  1. Whatsupdoc copyright information must be displayed on all materials.
  2. Written documents must be published whole and intact.
  3. No fee may be charged for the item or its distribution.
Please try our Suggestion Box Send comments, criticisms and other forms of help to horn@craft.camp.clarkson.edu.