Home

An Introduction to HTML

Your local bookstore will almost certainly have a large number of books on HTML -- the Hypertext Mark-Up Language -- used for much of the material in CCP. In addition, there is a great deal of free material on HTML available over the web. This link leads to a free online HTML manual.

One of the nicest characteristics of the Web is its openness -- you can look at the source files for material on the Web. One way to learn about HTML is to look at the HTML source files. This is especially important because HTML is evolving. Whenever you see something new on the Web you can find out how it was done by looking at the source file.

Read the next paragraph completely before doing anything.

Your browser has a menu called view. When you choose source from that menu your browser will open an editor and display the source file for this page. You can arrange the browser window and the editor window so that you can easily move back-and-forth between the two windows looking at the source code in the editor window and this explanation in this browser window.

Now choose source from the view menu to open an editor window with the source file for this page and then arrange the two windows as described above.

HTML uses tags enclosed in pointed brackets for a variety of purposes. The first two lines in the source file for this page are the first two lines in any HTML document. They are tags indicating that this is an HTML source file and beginning the "head" portion of the document.

The next line is the title of this document. This title is displayed at the top of the browser window. The title is enclosed within a pair of tags indicating the beginning and end of the title.

The next line is a tag indicating the end of the "head" portion of the document.

The next line is a tag indicating the beginning of the "body" portion of the document.

The many "p" tags throughout the document indicate paragraph breaks.

The next three lines illustrate two of the most important capabilities of HTML. The middle of these three lines shows how to display an image. The first element, "img", of this tag indicates that an image should be displayed. The second element indicates the source or location of the image file. Such locations can be given in two ways.

Images are always gif files with the extension .gif

The outer two lines in this group of three illustrate how to create hot links linking pages on the Web. Any material enclosed in this way -- between an "a" tag and a "/a" tag -- becomes hot. You can have hot images and hot text. In this case we have a hot image. The portion "href=" followed by a file location enclosed in quotes specifies the location of the file the browser goes to when the user clicks on the link. This location is specified in the same way as the location of an image file.

The next line (after the paragraph break) illustrates two formatting tags. Material enclosed by "center" and "/center" tags is centered and material enclosed in "H1" and "/H1" tags is printed very large and bold.

The next paragraph is ordinary text material.

Now go down to the very end of the source file. The tag "hr noshade" prints a horizontal rule. The next three lines produce a new kind of hot link. If the user clicks on this hot link the browser will pass control to a mail routine that enables the user to send mail to the specified person. These three lines also print the copyright notice at the bottom of the page. If you put something on the Web you should include a similar copyright notice and you should invite users to send you email in this way.

The final two lines indicate the end of the body of this document and then the end of the document.

HTML source files are text files and can be edited using any editor that can produce text or text-only files. The name of an HTML file should end in the extension ".htm" or ".html" -- some operating systems only support three character extensions, so ".htm" is better.

Home


Copyright c 1997 by Frank Wattenberg, Department of Mathematics, Montana State University, Bozeman, MT 59717