I. Using this Tutorial

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.

Return to the Table of Contents

II. Document Layout

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

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>

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.)

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

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

1. Add the following to blake1.html.

  <h2>Thel's Motto </h2>

2. Now save blake1.html and reload it in your Mosaic clone.

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

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>

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.

Exercise 5: Indented Lists: <ol> or <ul> followed by <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.

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

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 &

&lt; for <

&gt; for >

&amp; for &

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>

This displays as

_____________________________________________________________

Pre-formated Examples <xmp>

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

Shadow Lines <hr>

Using Extended Characters

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

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)

<a name="destination"> TEXT </a>

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

<a href="#destination"> TEXT </a>

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:

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

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

<a href="file#destination"> TEXT </a>

• 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.

• MHH.html is a file name in the current directory.
• The inclusion of bold face makes the link text easier to find.

_____________________________________________________________

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

_____________________________________________________________

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

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

_____________________________________________________________

_____________________________________________________________

Example 5: Linking to Graphics

<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)

__________________