HTML Documents: A Tutorial

Copyright (c) Whatsupdoc 1994.   
Please send reactions, comments, and advice to our  Suggestion Box.   
This tutorial will show you how to create and display HTML screens. 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 a .htm or .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 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.
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> 
&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;
</xmp> 
This displays as 
_____________________________________________________________ 
<h2>Thel's Motto </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>
_____________________________________________________________ 
  

 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 HTML 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  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?
  
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:  
¥For file you can insert a path and filename. 
¥But when the file is in the current directory, you do not need to
give the path.  
¥A path is "current" relative to the one from which you are
currently jumping  (containi the file with the "href=" link).
¥If you wish to jump (link) to the top of a file then you don't
need to  include a "#" and destination name. 
Consider the following 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. 
Note: 
  
¥ MHH.html is a file name in the current directory.
  
¥ The inclusion of bold face makes the link text easier to find.
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  
       mental deities   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.) 
_____________________________________________________________ 
This connects you to the  NCSA Mosaic Demo Document.  
_____________________________________________________________ 

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:
        
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.  
        To return, select Example 6.
            
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. 
 
   
     
   
   
 MAJOR HEADING GOES HERE  
           
        THE REST OF THE DOCUMENT GOES HERE
   
   
   
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; 
&ETH; 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; 
&THORN; is written &THORN; (Thorn, Icelandic) 
ò is written &Uacute; 
ó is written &Ucirc; 
ô is written &Ugrave; 
† is written &Uuml; 
&Yacute; 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; 
&eth; 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; 
&thorn; is written &thorn; (Lower case thorn, Icelandic) 
œ is written &uacute; 
ž is written &ucirc; 
� is written &ugrave; 
Ÿ is written &uuml; 
&yacute; 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: 
¥Love, like the eagle is ethereal. 
¥Children localizes love in sexual organs (See Freud's phallic phase). 
¥Adults fix love in an object (cathexis). 
¥Feeling (the spiritual) can take material form. 
¥Wisdom reveals the mind's role in reifying the physical object. 
¥Therefore: Thel's questions can be better answered as: "No, yes, yes, yes." 

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: 
¥Love, like the eagle is ethereal. 
¥Children localizes love in sexual organs (See Freud's phallic phase). 
¥Adults fix love in an object (cathexis). 
¥Feeling (the spiritual) can take material form. 
¥Wisdom reveals the mind's role in reifying the physical object. 
¥Therefore: Thel's questions can be better answered as: "No, yes, yes, yes." 
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: 
¥  A Beginner's Guide to HTML.  
¥  Mosaic for X version 2.0 Fill-Out Form Support  provides links to 12 HTML programming examples 
for creating interactive forms. 
¥  An HTML editor  is available for PC's running Windows. 
¥ (more to come... ) 

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.