Writing HTML

Creating HTML documents is an easy process. One simply types the text and includes a few simple commands that enable a browser such as Netscape to display the text as an HTML document.

In this section, we will show how to create a HTML document, include images in a hypertext document, create links to other HTML documents, and some other formating options. This section is by no means an exhaustive guide to creating hypertext documents. Instead, this section is meant to get one started writing in HTML. For convenience, below is an index with hyperlinks to each of the terms in the document. You may either move through this document in a linear fashion or select a term on the index. It is suggested that the document be read through the first time, and later select items from the index for reference.

Preliminaries

Before going into the details of HTML, a few additional browser options should be known. To view a hypertext file, e.g. file.html on the Netscape browser, click on the Open file option under the File section of the Netscape menu, and select file.html. When viewing an HTML file using Netscape, the actual hypertext source document can be viewed by selecting the Source option under the View section of the Netscape menu. Viewing the source of a hypertext document is a very good way to learn HTML syntax, as well as discover clever ways of formating hypertext documents.

A Simple HTML Document

Here is a basic HTML document: 

<HTML>
<HEAD>
<TITLE>Simple HTML Document</TITLE>
</HEAD>
<BODY>
<H1>Simple HTML Document<H1>
This is one paragraph.  HTML will format
all of this text into a single paragraph
until it "sees" a less than sign followed
by a P followed by a greater than sign.
<P>
This is the second paragraph.      HTML
will format these skips and 

line breaks into a single paragraph.
</BODY>
</HTML>
Click here to view the HTML version of the document.

Note that the syntax for most of the commands is in the form <Command> some text </Command> with the lone exception being the <P> command. Second, contrary to the appearance above, HTML is not case-sensitive. Commands could be typed entirely as upper-case letters as above or entirely as lower-case letters, or as a mix of upper-case and lower-case letters. Strictly upper-case letters were chosen as a matter of style. Here is a brief explanation of each of the commands used above:

HTML
HTML tells the browser that it is reading a hypertext document. All HTML documents should include <HTML> as the first line and </HTML> as the final line.
HEAD
HEAD is used to include everything before the body of text. The most common use is to include the document title in between the open and closing HEAD command,
TITLE
TITLE prints the text between the open and closing of it as the subject of what the browser is viewing. For instance if using the Netscape Browser, in the top of the Netscape window the print Netscape: Writing HTML should be displayed since Writing HTML is the title of this HTML document.
BODY
As the name suggests, text inside the open and closing of the BODY command are printed as part of the body of the text.
H1
H1 is called a level-one header. There are six different levels of heads with H1 being the largest print and H6 being the smallest. The size of these headers depends on the browser viewing them.
P
P inside brackets tells HTML to create new paragraph. HTML will format all of the text into a single paragraph until one of these is placed in the document.

These are the basic commands needed to create an HTML document. To view and produce a hypertext document, simply use a text editor such as Microsoft Word, and save the document as a text document with the extension .html (extension .htm on a PC). Remember to save the document as a plain text document. If the document is saved as a regular Microsoft Word document, additional hidden characters will be saved in the document and will probably wreck havoc when trying to view the document using an HTML browser. After the document has been saved to a folder, it can be viewed with the browser by using the open file option.

A First Hypertext Document: Pat Webmeister's Homepage

After learning the basics of HTML, people often create a homepage. A homepage is a HTML document on the Web that contains information about a particular person or organization. Pat Webmaster has read through the above sample document and created a homepage. Click here to view Pat's document. Remember: to view the HTML source code use the View Source option on the Netscape Browser.

Links to Images

Although the commands given above are all that is needed to create an HTML document, there are other commands which make HTML a powerful tool for expressing ideas. Namely there are simple commands to include images along with text, and commands to have links to other documents. To include an image, e.g. image.gif, along with the text, one needs to include the following command: 

<IMG SRC = "image.gif">

It is assumed here that image.gif is in the same folder as the html document with the link. Otherwise the browser will be unable to find the image and will either produce an error, or a generic image will appear in place of the image.gif in the document.

Virtually all browsers can include .gif files within the hypertext document. The Netscape browser will also include .jpeg (.jpg on PC) images in the document as well.

Creating Images for HTML on a Macintosh

Note: This section is not essential for writing in HTML, but will be extremely useful if you need to include mathematical symbols in a hypertext document.

Above we mentioned how to include images in HTML documents, but allowing images begs the question of how to create images and/or how to get them in a format that a browser can view them. As mentioned above, virtually all browsers allow one to include .gif format images. One useful shareware program available is called GIFConverter. As its name suggests, GIFConverter allows one to convert images in other formats such as PostScript .ps, Text Image File Format .tiff, and PICT .pict to the .gif format.

Another useful application is the Snapshot program that comes with the Macintosh operating system. By pressing the Apple key the Shift key and the 3 key simultaneously, the Snapshot program is activated and a .pict file is created that is a copy of the screen. Snapshot is useful when wanting to take an image that is on the screen, like a mathematical formula from a Maple worksheet or a sketch from a drawing program, and include it in an HTML document. To be more precise, here are the steps needed to get create a .gif image so that it can be included in an HTML document. To simplify matters we will assume that the image is a mathematical formula.

  1. Produce the mathematical formula on the screen using a word processor that includes mathematical symbols, or from the output of a Computer Algebraic System such as Maple. Make sure that the formula is not covered up by any other applications on the screen.
  2. Press the Apple key, the Shift key and the 3 key simultaneously to take a snapshot of the screen. The Snapshot program will then produce a PICT image named Picture 1 (or Picture 2, 3, ... if more then one snapshot was taken).
  3. Open Picture 1 and using the mouse, select the formula you want to include into your hypertext document. Under the File option in the Main Menu select copy. Now a copy of the formula is on the clipboard to which will be placed into a .gif file.
  4. Open GIFConverter. Under the File menu option select New Graphic. A small window should appear which will be named Untitled-1.
  5. We will now paste the formula from the clipboard to the Untitled-1 file. Under the Edit option select Paste. You should then notice the formula inside the Untitled-1 box. Some dotted edges may appear around your formula. Don't worry about these edges; they will not be in the final product.
  6. Under the File option save the image as formula1.gif (or whatever you want to call it).
  7. To include formula1.gif in a hypertext document, doc.html, first place it in the same directory as doc.html. Then in the exact spot you want the formula in doc.html include the command: 
    <IMG SRC = "formula1.gif">
  8. Now when you view doc.html using a broswer, the formula will be included.

Links to Documents

HTML allows one to create links to different documents, specific places in different documents, or even links to different places within the same document.

Links to Other Documents

Links to other documents require a command in the following form: 

<A HREF = "newdoc.html">Click here for newdoc.html</A>

Of course the hypertext document newdoc.html will need to exist and be in the same folder for this link to work. This syntax in HTML will produce the following output:

Click here for newdoc.html

If the machine is online to the Web, one can also include links to hypertext pages on other computers. For instance the command, 

Click <A HREF = "http://informns.k12.mn.us:80/scimathmn.html">here</A>
to view the SciMathMN home page.

will create a link to the home page for SciMathMN.

Links to Specific Places in other Documents

Suppose a link is desired to a specific place in another document. (This is especially useful if the other document is long). To create such a link, an anchor needs needs to be put in the document being linked to. An anchor is another short HTML command. For instance to link to the sentence,

There is no room in the world for ugly mathematics.

in doc2.html, one would need to include in doc2.html an anchor like the following: 
<A NAME = "hardy"></A>There</A> is no room in the world 
for ugly mathematics.
The sentence will still appear the same, but now can be linked to from other documents. To link to this sentence, we use the syntax, 
<A HREF = "doc2.html#hardy">Click here for doc2.html, 
Hardy's famous quote.</A>

Links to Places within the same document

As with the previous section, an anchor needs to be made to the place that one wants to link to, but now the document name is not included. In other words the syntax of the link is in the form: 
<A HREF = "#hardy">Click here for Hardy's famous 
quote.</A>

Other Formating Options

To enhance reading of text, HTML has a few other formating options. Text can be printed in boldface or italics, or in a few type formats. Special sequences needed to produce characters used by HTML are also allowed. Also other formating options such as carriage returns and long quotations are given.

Boldface Print

Text can be put in boldface type by using the following command: 

<B>Some Text in Boldface</B>

This will appear as:

Some Text in Boldface

Italic Print

The command 

<I>Some Text in Italics</I>

will appear as

Some Text in Italics

Typewriter Text

To produce typewriter-style text, but with the usual HTML formating, the <TT> command is used. For instance the text, 

<TT>Typewriter</TT> is in typewriter text.

will appear as

Typewriter is in typewriter text.

Preformated Text

To produce text exactly as typed, the PRE command is used. For example the text, 

<PRE>
Course		Grade Level	Summary

Algebra		8th and 9th	Introduction to variables,
				solving linear and quadratic
				equations.

Geometry	9th and 10th	Introduction to Euclidean 
				Geometry and the concept of
				Theorem and Proof.

Algebra 2/Trig	10th and 11th	Solving simple systems of 
				equations, study of simple
				trig relations. 
</PRE>

will produce: 

Course          Grade Level     Summary

Algebra         8th and 9th     Introduction to variables,
                                solving linear and quadratic
                                equations.

Geometry        9th and 10th    Introduction to Euclidean 
                                Geometry and the concept of
				Theorem and Proof.

Algebra 2/Trig  10th and 11th   Solving simple systems of 
                                equations, study of simple
                                trig relations.

Special Characters

Because certain symbols are used by HTML to recognize commands, special character sequences are needed to print them in hypertext format. In particular the less than symbol, <, the greater than symbol, >, and the ampersand, &, are all used by HTML. To print these characters the following "escape" sequences need to be used: 

Symbol		Escape sequence
&		&AMP;
<		&LT;
>		&GT;

Horizontal Rule

The <HR> command produces a horizontal line in a hypertext document. This line is sometimes useful for separating sections. Here is one such horizontal line:

Line Breaks

If a carriage return after a line is desired, but not the extra line returns that the <P> command produces, the <BR> command is used. For instance the text, 

Here is some text that will be on the same line.  <BR>
While this text will be on the next line.

will produce,

Here is some text that will be on the same line.
While this text will be on the next line.

Long Quotations

The <BLOCKQUOTE> command is used indent a long quotation. For instance the text, 

<BLOCKQUOTE>
An example is the most simple-minded test for the primality 
of a natural number <I>N</I>, in which you begin by 
trying to divide <I>N</I> by 2, then by 3,4,5, etc. 
until <I>N</I>-1.  If <I>N</I> has survived
all these tests without being divisible, it's prime. 
</BLOCKQUOTE>

will produce,

An example is the most simple-minded test for the primality of a natural number N, in which you begin by trying to divide N by 2, then by 3,4,5, etc. until N-1. If N has survived all these tests without being divisible, it's prime.

Numbered, Unnumbered, and Definition Lists

HTML allows the construction of several different list formats. Lists can be created and may be either numbered, unnumbered, or in definition format. Here are a few examples of these formating options:

Unnumbered Lists

If an unnumbered list was desired the sequences <OL> and </OL> above would be replaced by <UL> and </UL>. This would produce the output:

Definition Lists

If a definition or explanation after each item of the list were desired, the syntax below can be used. Note that paragraphs and other formating options may be included within the definition. 

<DL>
<DT> Algebra 
<DD> <I>Instructor: Carl Gauss</I>.  Introduction 
     to idea of variables, solving linear and quadratic 
     equations.  

<DT> Geometry 
<DD> <I>Instructor: Rene Descartes</I>. Introduction 
     to Euclidean Geometry and the concept of 
     Theorem and Proof. 

<DT> Algebra 2/Trig 
<DD> <I> Instructor: Emma Noether </I>. Solving 
     simple systems of equations, study of simple trig 
     relations.
     <P>
     Ms. Noether also intends on covering some of the more 
     recent developments in algebra that she has discovered. 
</DL>
This will produce:

Algebra
Instructor: Carl Gauss. Introduction to idea of variables, solving linear and quadratic equations.
Geometry
Instructor: Rene Descartes. Introduction to Euclidean Geometry and the concept of Proof and Theorem.
Algebra 2/Trig
Instructor: Emma Noether. Solving simple systems of equations, study of simple trig relations.

Ms. Noether also intends on covering some of the more recent developments in algebra that she has discovered.

An Example Revisited, Pat Webmeister's home page Embellished

Earlier, Pat had created a simple homepage containing basic information for students and friends. Pat has read through this guide, and now has embellished the document. Here is a link to Pat's new and improved home page:

Further HTML Resources

As mentioned earlier this document is meant as a tool for basic writing in HTML and is by no means a comprehensive guide to writing in this hypertext format. Below are some further sources for writing and using HTML on the Internet. In fact this document is heavily based on the hypertext document, A Beginner's Guide to HTML listed below. If the machine being used is hooked up to the Internet, clicking on these links will directly connect you with the linked document. Warning: due to the volatile nature of the Web, the documents listed below may have changed addresses, or may no longer exist!

Geometry Forum Down to Earth HTML Tutorial:
http://forum.swarthmore.edu/~heather/oldstuff/tutorial.///html

NCSA Education Group Tutorials:
http://www.ncsa.uiuc.edu/Edu/Tutorials/TutorialHome.html A list of tutorials available from NCSA.

A Beginner's Guide to HTML:
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

HTML Tutorial:
http://www.ncsa.uiuc.edu/Edu/Tutorials/HTML/html_tutorial.html An html tutorial from NCSA.

Introductory Page