Glossary of Hypertext Markup Language <HTML>Terms

What is Hypertext Markup Language?

It sounds like something a robot speaks to its mother, and, in fact, it is a way for one computer to communicate with another. In layperson's terms, HTML provides the instructions that a Web browser like Netscape needs in order to "read" and display a hypertext document that contains such "goodies" as links to other sites on the Web. These instructions are provided with tags, the most essential of which are described below.

Most HTML tags toggle on and off. That means that most of the time when there is a tag to turn something on, for example, <HTML> there will be a partner tag (called an end tag) to turn it off, for example </HTML>. The backslash is the key for turning things off. You can write HTML code in uppercase or lowercase. I find it easier to see what I am doing (or what you are doing!) when uppercase is used.

<HTML></HTML>This code tells a browser (like Netscape or Mosaic or lynx, etc.) that it is "reading" hypertext markup language and should produce the requested formats for display. The first tag should be at the very beginning of your document; the end tag should be at the very end.

<TITLE></TITLE>This code tells the browser what information goes in the title bar at the very top of the screen. Titles are important to you because they can help you keep track of the contents of individual documents. Sometimes search engines (like Yahoo, Magellan, Infoseek, etc.) rely on the title bar to determine whether or not a file should be included in a database. As the provided example demonstrates, the title tags and the text they surround, e.g. <TITLE>Political Science</TITLE>, is the first element in the document after the initial <HTML> tag.

<BODY></BODY>These tags are used to delimit the body of an HTML document. <BODY> needs to be included immediately after <TITLE> and </BODY> comes after everything else and just before </HTML>.

<CENTER></CENTER>These tags do just what they say; they center any text that appears between them. Note that if you forget to type the end tag, all of your text will appear centered.

<H1></H1>These tags are shorthand for Header 1. They provide the instruction to use a large, bold font. Header 1 is the largest and boldest. Header 6 is the smallest. Here is an example of what this code can do:

This is a Size 1 Header

Size 6 is much smaller.

<HR>This single tag (it has no partner) tells the browser to print a line called a Horizontal Rule across the page. Here is an example:

<BR>This is another single tag. It means, "make a line break at this point". Without this instruction, the browser will run all lines together. If you wanted to, you could write the source code for an entire document on a single line since the browser looks to the coded instructions for information about where to display line breaks.

<P>This is the instruction to provide a paragraph break. Different browsers will choose to display paragraphs differently.

<I></I>Stuff between these two tags will appear in italics like this .

<A HREF="globalprobs/deforest/homepage.html">Deforestation</A>
This long element is an example of a link to another hypertext document. With a similar instruction, it is possible to point to the URL of a page that resides on a Web-connected computer anywhere in the world.

Let's look at the various components of this HTML element. The first part, A HREF=, means that this tag is an anchor (or link) to another resource on the Web, in this case, named "globalprobs/deforest/homepage.html". This particular URL indicates that this resource named "homepage.html" is located on the same computer in the subdirectory named "deforest" of the subdirectory named "globalprobs". The highlighted text displayed by the browser is Deforestation and </A> turns the element off.

An anchor that has a URL that begins with the call letters "http:" indicates that this file is located on another computer.

<UL><LI></UL>This three tags are used to display a bulleted list of items. The first tag means "unordered list"; <LI> stands for "list item"; and (you know this now!) </UL> means "end unordered list." There is also an animal called an "ordered list" which displays numbers instead of bullets for list items. The tag for an ordered list is <OL>.

This is an example of an unordered list:

red
blue
green

This is an example of an ordered list:

good
better
best

<ADDRESS></ADDRESS> This is the tag that is used to set aside author contact information for a document. It should include an E-mail link that enables users to give feedback to the authors. The tag below demonstrates how the E-mail link is written:

<A HREF="mailto:wellingh@earlham.edu">wellingh@earlham.edu</A>
Here is an example:

B. Welling Hall
Drawer E-63
Earlham College
Richmond, IN 47374-4095
(317) 983-1208
wellingh@earlham.edu

<IMG SRC="yinyang.gif" ALT="*"> It is relatively easy to include graphics that you borrow from another source. In order to do this, for the purposes of this class, you must receive permission from the source that you borrow the graphic from and you must include a note about the source in your acknowledgments.

The HTML element above provides the instruction that there is an image at a source with the filename "yinyang.gif". Also included in this instruction is the note that if a Web user has a browser that does not display graphics (very possible especially in places where people are using old PCS considered "obsolete" in the US), or if he or she has graphics turned off, an asterisk will be displayed in place of the image. Here is an example:

This graphic was borrowed from the Earlham homepage with the permission of the web administrators.

Sometimes you can get a borrowed image like this to move to the left, right or center of the page by including an ALIGN command such as:
<IMG ALIGN=LEFT SRC="yinyang.gif" ALT="*">
Here is an example:

There are just a few more, simple, codes that do not appear on the Politics page but are widely used on the Web:

Material that appears between the blockquotes tags will be indented, just like this. It should be used whenever you have a quote more than one line long from another source.

<DL><DT><DD></DL>
The terms above are used to create a glossary or definition list. An example is included in the template pages that follow. DL means "definition list"; DT = definition term; DD = definition defined; /DL = end definition list. Here is an example:

Doe: A deer. A female deer.
Ray: A drop of golden sun.
Me: A name I call myself.

A note about graphics:

Although graphics can be eyecatching and can convey ideas and nuances that text cannot, they can also be tremendously time-consuming. If you want to include a few judiciously chosen inline graphics on your page, you are welcome to do so. More than one or two on a page is too many. If you start to sense that work on graphics is taking away from research time or study time, you are probably right. Your project can earn an "A" without any graphics at all.

Well, at least I want to give it a shot. How do I start?

These instructions assume that you have permission to borrow the graphic.

(1) Move your mouse over the graphic that you have permission to borrow and click the RIGHT mouse button. You will see a menu that includes as one option "Save this image as..." Click your LEFT mouse button on this option.

(2) You will now see a dialog box that asks for your instructions. Give the file a name that you will remember and INCLUDE any extension (such as ".gif" or ".jpg") from the original filename. Save this graphic file to the same disk where you have your HTML files.

(3) When you upload your graphic file to the server, use the instructions for graphic files. In particular, a graphics file is a BINARY file. If you upload it as a TEXT file it will not work.

Want to try it? Take a look at some exercises for writing HTML.

For much more extensive (and technical) information, you can read all about HTML in books placed on reserve for this class or online via Netscape at: http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html