<HTML>
<HEAD>
<!-- created: 5/9/96 6:05:51 PM -->
<TITLE>HTML Code Examples</TITLE>
</HEAD>
<BODY>
<this is a target that will be explained latter. This comment is not displayed by the browser because it is within less than and greater than symbols>
<A NAME="beginning">
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.<p>
<H1>First Heading</H1>
and some text
<H2>Second Heading</H2>
and some text
<H3>Third Heading</H3>
and some text
<H4>Fourth Heading</H4>
and some text
<H5>Fifth Heading</H5>
and some text
<H6>Sixth Heading</H6>
and some text followed by a paragraph<p>
and then some more text followed by a line break<br>
with another line that is followed by a horizontal rule<hr>
<H2 ALIGN=center>This header is centered</H2>
Now for a section that shows the effect of the most common tags<p>
<B>Bold</B><br>
<I>Italic</I><br>
<SUP>Superscript</SUP><br>
<SUB>Subscript</SUB><br>
<BLINK>Blink</BLINK><br>
<EM>Emphasis</EM><br>
<STRONG>Strong</STRONG><br>
<TT>Typewriter text</TT><br>
<U>Underline</U><br>
<FONT SIZE="+2" COLOR="GRAY" FACE="TIMES NEW ROMAN,ARIAL">This text is 2 points larger, the color is specified as Gray, and Times New Roman is the specified font</FONT><br>
<CENTER>Center</CENTER><p>
<hr>
<H2>The next part will detail lists</H2>
Ordered lists are useful for laying out a list that looks like this:<p>
<OL COMPACT><LH>The list header
<LI>This is the first point
<LI>This is the second point
<LI>This is the third point
<OL COMPACT><LI>it is possible to nest points like this subpoint
<LI>and this second subpoint.</OL>
<LI>and return to the fourth point</OL><p>
In a list you may want to specify the type of symbol used for each level.
<OL COMPACT TYPE=A><li>This list is in capital letters</OL>
<OL COMPACT TYPE=a><li>This list is in small letters</OL>
<OL COMPACT TYPE=I><li>This list is in large roman numerals</OL>
<OL COMPACT TYPE=i><LI>This list is in small roman numerals</OL><p>
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.
<UL COMPACT><li>This is a default unordered list
<li>This is the second element
<UL COMPACT><li>This is a nested sublevel
<li>With a second statement
</UL>
</UL><p>
The last type of list is the definition list. The formatting of this list is a little different as is shown
below.
<DL><DT>This is the first point (definition title)
<DD>with one subpoint (called a definition, definition)<br>
the second subpoint should be separated by a line break.
<DT>This is the second point
<DD>with a subpoint</DL>
<hr>
<A NAME="links">
<H2>Next Is a discussion of Links</H2>
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:<p>
<dl>
<dt>http://
<dd><A HREF="http://science.widener.edu/~svanbram/chem146.html">Chemistry 146</A>
This is a link to a document on a web server. <p>
<dt>ftp://
<dd><A HREF="ftp://science.widener.edu/pub/spreadsheet/acidbase.wk4">Acid Spreadsheet
(*.wk4 155k)</A> This is a link to a file on an FTP server.<p>
<dt>mailto://
<dd><A HREF="mailto:svanbram@science.widener.edu">svanbram@science.widener.edu</A> This link sends an e-mail message using the mail software for the browser.
</dl><p>
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
<A HREF="#beginning">beginning</A> of this page.
<hr>
<H2>Notes about Figures</H2>
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.<p>
GIF (Graphical Image Format). This format works best for line art and small images.<br>
<IMG SRC="oldmain.gif" WIDTH=200 HEIGHT=112><p>
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).<p>
<IMG SRC="oldmain.jpg" WIDTH=540 HEIGHT=303><p>
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.<p>
<A HREF="oldmain.jpg"><IMG SRC="oldmain.gif" ALT="Text for non-graphics browsers"
WIDTH=100 HEIGHT=56></A><p>
<hr>
<H2>Tables</H2>
<TABLE WIDTH=60% ALIGN=center BORDER>
<CAPTION ALIGN=top>
Table Caption</CAPTION>
<TR>
<TH>Top Col 1</TD>
<TH>Top Col 2</TD>
<TH>Top Col 3</TD>
</TR>
<TR>
<TD>data 1a</TD>
<TD>data 2a</TD>
<TD>data 3a</TD>
</TR>
<TR>
<TD>data 1b</TD>
<TD>data 2b</TD>
<TD>data 3b</TD>
</TR>
<TR>
<TD>data 1c</TD>
<TD>data 2c</TD>
<TD>data 3c</TD>
</TR>
</TABLE>
<HR>
This document was prepared by <br>
<A HREF="http://science.widener.edu/~svanbram">Scott Van Bramer</A><br>
<A HREF="http://www.widener.edu">Widener University</A><br>
<A HREF="http://www.widener.edu/CAS/chemistry">Department of Chemistry</A><br>
<A HREF="mailto:svanbram@science.widener.edu">svanbram@science.widener.edu</A><br>
Last Updated: Thursday, May 09, 1996
</BODY>
</HTML>