This document was prepared to demonstrate the major HTML tags used to make documents. Compare the look of the document in the browser and the HTML tags in the source. This will show the major layout features.

First Heading

and some text

Second Heading

and some text

Third Heading

and some text

Fourth Heading

and some text
Fifth Heading
and some text
Sixth Heading
and some text followed by a paragraph

and then some more text followed by a line break
with another line that is followed by a horizontal rule


This header is centered

Now for a section that shows the effect of the most common tags

Bold
Italic
Superscript
Subscript
Blink
Emphasis
Strong
Typewriter text
Underline
This text is 2 points larger, the color is specified as Gray, and Times New Roman is the specified font

Center


The next part will detail lists

Ordered lists are useful for laying out a list that looks like this:

    The list header
  1. This is the first point
  2. This is the second point
  3. This is the third point
    1. it is possible to nest points like this subpoint
    2. and this second subpoint.
  4. and return to the fourth point

In a list you may want to specify the type of symbol used for each level.

  1. This list is in capital letters
  1. This list is in small letters
  1. This list is in large roman numerals
  1. This list is in small roman numerals

The next type of list is an unordered list. It is formatted like an ordered list, but the list items are displayed with bullets rather than sequential numbers (or letters). As with ordered lists the default is for the browser to choose the labels, but they may be specified.

The last type of list is the definition list. The formatting of this list is a little different as is shown below.

This is the first point (definition title)
with one subpoint (called a definition, definition)
the second subpoint should be separated by a line break.
This is the second point
with a subpoint

Next Is a discussion of Links

Links have several different features. They are used to direct a browser to another location. This is the feature that makes the web so remarkable, because these links can be to anything on your computer, your server, or anywhere on the WWW. Link elements include:

http://
Chemistry 146 This is a link to a document on a web server.

ftp://
Acid Spreadsheet (*.wk4 155k) This is a link to a file on an FTP server.

mailto://
svanbram@science.widener.edu This link sends an e-mail message using the mail software for the browser.

Links may also be used to move around within a document. The location in the document must have a name. (there is a name tag at the top of this document). You may use this name as a link to go to the beginning of this page.


Notes about Figures

Most browsers can view two different types of graphics files. These two different file types have different strengths and weaknesses. The figures may be located at any location on the web, you just have to create a link to the file. Keep in mind that graphics files may be very large. This causes very slow downloads that may try a reader's patience.

GIF (Graphical Image Format). This format works best for line art and small images.

JPEG (Joint Photographic Experts Group). This format works best for photographs and color images. Some resolution is lost for line art (lines are not a crisp).

Because images files are very large it is not "good form" to place a large image in a document. A common solution is to use a small "thumbnail" of the image that loads quickly and gives the viewer some idea what the image is. This is then linked to the full size figure so interested viewers may look. Notice the blue border around the image below. This shows that it is a link.

Text for non-graphics browsers


Tables

Table Caption
Top Col 1 Top Col 2 Top Col 3
data 1a data 2a data 3a
data 1b data 2b data 3b
data 1c data 2c data 3c

This document was prepared by
Scott Van Bramer
Widener University
Department of Chemistry
svanbram@science.widener.edu
Last Updated: Thursday, May 09, 1996