Introduction to the Internet

By Herbert J. Bernstein
© Copyright 2001 -- 2004 Herbert J. Bernstein

What is the Internet

The Internet is an collection in intercommunicating computer networks. Computer networks consist of autonomous nodes able to exchange information via some medium. [simple network image]

To understand the concept of autonomous communicating devices, consider the example of people. People gather in small groups and converse by sound, sight and feel. People at moderate distances can still communicate directly by sound or sight, but as distances increase other media and methods become useful. Runners, drum relays, heliographs, flag signals, carrier pigeons, postal systems, billboards, telegraphs, telephones, radio and television all have been of value. [party image]

First consider a group of people in direct conversation. Anything any one of them says is heard by the speaker and all the others at essentially the same time. If more than one person attempts to speak at once, words will be lost. Either one person must have the authority to distribute access to the common medium, or the people involved must cooperate, keep their messages short and take turns speaking. In the case of cooperation, if two people accidentally start speaking at the same time, both will know there has been a collision and stop on the first word or so. One or the other will then defer his thought until the other has spoken. This is the model for local carrier sense multiple access networks such as Ethernet.

Another common pattern in direct conversation is the formation of subconversations. In this case subsets of the original group tune out the uninteresting conversations, as at a cocktail party, and maintain ties only within each subset. This is a generalization of the idea of virtual circuits among nodes of a network.

[paradeground image] As distance increases, the limited range and increasing propagation delay of sound become important factors. This can be seen on a military parade ground, where communication becomes hierachically structured. Complex commands are broken down into short messages, which are relayed down the levels of organization. Each commander need only communicate with his subordinate commanders. Yet very large groups are able to act as a single entity.

At still greater distances -- still assuming sound as the medium -- one might introduce runners to go from unit to unit and to headquarters. Each unit may well act with great autonomy, yet the runners allow coordination of their actions. By relaying runners from unit to unit and spawning several outgoing runners for one incoming runner, it is possible to manage hundreds of thousands of people in some concerted effort, albeit slowly.

Substituting telegraph, telephone, radio or light for sound reduces the propagation delay, so greater distances can be handled, but the concepts are similar. With long transit times, communications may require small message sizes, a hierarchical structure, message forwarding, and replication of messages to reach multiple destinations. The problems are also similar. Messages may get lost or back up at relay points. A path to a relay point or receiver may cease to function. Multiple paths to the same destination may cause message duplication or reordering. We will encounter these concepts in computer networks.

History

The history of networking consists of constant reinvention of the wheel. It is remarkable to read many early papers on the subject which cite only the early reports of the authors of the paper. The result is that it is now difficult to give proper credit to the originators of the concepts we now use, but one feels a moral obligation to try. Corrections are most welcome.

Just as with communications among people, the most interesting challenges in the design of computer networks arise when distances increase. The boundaries between distance-determined types of networks are fuzzy. As speeds increase, physically shorter distances require more of the techniques used for long distance communications.

It is common to have individual machines grouped into a LAN, to have LANs grouped into a CAN or MAN, and to have CANs or MANs grouped into a WAN. Levels may be skipped and additional levels may be introduced. The main connections are often organized into a "backbone" at any given level.

The first major long distance computer to computer network was the Semiautomatic Ground Environment system (SAGE) established as an air defense network in 1958.

Considerable networking research was spawned by the military's need for reliable and secure communications. From 1962 to 1964, P. Baran of the Rand corporation developed the basics of packet switching. Largely under the guidance of L. G. Roberts, the Department of Defense Advanced Research Projects Agency built on Baran's work and on the lessons of another DoD network, AUTODIN (Automated Digital Information Network), to design ARPANET, which used a homogeneous network of Interface Message Processors (IMPs) to allow networking among heterogeneous computers. ARPANET was on the air in 1970 with 56KB links.

In 1973, DEC introduced its data link protocol, Digital Data Communications Message Protocol (DDCMP), which it expanded to a full network architecture, Digital Network Architecture (DNA) in 1975. (See http://linux-decnet.sourceforge.net/docs/doc_index.html for the 1983 version of DECNet, which was very popular.) IBM introduced its Systems Network Architecture (SNA) in 1974 as a computer to terminal protocol and upgraded it for computer to computer networking in 1976. (See http://www.protocols.com/pbook/sna.htm for a discussion of SNA). These commercial vendor networks provoked many imitations and work on an international standard, which became CCItt X.25. The European Ptts based national networks on this standard. Telenet, a commercial derivative of ARPANET, and Tymnet, a network for timesharing, adapted to it.

Local networking may be considered as a natural evolution from the modular construction of computers or as a specialization of long distance networking. The most viable direction seems to flow from R.M. Metcalfe and D.R. Boggs Ethernet design of 1976. In 1980, DEC, Intel and Xerox announced a joint commitment to local networking via Ethernet. (It should be mentioned that Ethernet owes much to the ideas developed in the ALOHA radio packet broadcasting system started by N. Abramson and others at the University of Hawaii in 1970). The major competition for local area networking comes from the broadband networks, such as WANGNET, and IBM's token passing networks.

Much has been made of the merits of Ethernet versus token passing rings versus empty slot rings. In 1975 design work was started on the Cambridge Distributed Computing System. In their 1982 book on the subject R.M. Needham and A.J. Herbert note that "All three types of local network have energetic and variously monied advocates; for the purposes of applications such as the Cambridge Distributed System (though not for all imaginable purposes), they are almost indistinguishable in practice." (R. M. Needham & A. J. Herbert, "The Cambridge Distributed Computing System", Addison-Wesley, London, 1982, 170 pp.) It should be noted that in tightly coupled systems of multiple CPUs within a few feet of each other, there are many options for network interconnections which would be impractical at greater distances. Shared memories, busses, daisy chains, rings and crosspoint switching networks have all been used effectively.

As recently as 1991, I was able to claim, "Despite this progress, to date most networking has been for simple batch and timesharing terminal support rather than for complex resource sharing. Costs and software sophistication are just now reaching the point at which the promise of networking may at last be realized."

To learn more about the current state of the Internet, see the web pages of the Internet Society (http://www.isoc.org).

The Transition to the World Wide Web

Everything changed in the last decade of the twentieth century with the creation of the World Wide Web, with which we have seen an increasing impact of the Internet on society.

Until the early 1990's people "posted" information on the internet for use by others using email, ftp, and gopher. Email allow messages to be sent to particular destinations of groups of destinations. Like-minded people could form special newsgroups for regular dissemination of messages on special subjects to groups of interested parties. Files, such as program and documents, could be fetched from known computers on the internet by use of ftp, the File Transfer Protocol. People could browse through nested lists of avialable documents in so-called "gopher-holes" with the gopher protocol. Almost all work on the network was done working with text. Gopher holes had links from lines of text to text and documents in the gopher hole. Some people found this easy and effective to use, but total use was very limited.

The world wide web built on the concepts of the gopher hole and the general concept of allowing any portion of a so-called "web-page", whether in the form or text or of graphics, to serve as a "hyperlink" to other documents. A simple client-server model is used for the processing of web pages.

There are two major issues to consider in working with the web: finding desired web pages within the complex interconnections of the internet, and creating web pages in ways that will allow other people to find them.

Finding Information

Some of the difficulty of finding information on the web is resolved by use of reasonable naming conventions. Every page on the web is identified by a URL, a Universal Resource Locator, starting with a protocol identifier (such as "http:"), followed by two slashes and the identifier of the network node, the computer, which provides access to the desired page. The rest of the URL tells us where on the target file system the page we want is located.

If we have a good idea where we are going, having or being able to guess at the right URL may be sufficient, but in most cases we need assistance. That is provided by various well-organized pages of relevant links, and by various search engines. These search engines may be restricted to a particular site (e.g. the search engine within http://www.ebay.com), or cover a wide range of sites throughout the web (e.g. the popular search engine http://www.google.com), or even a wide range of search engines (e.g. the metasearch engine http://www.dogpile.com).

Creating Web Pages

The creation of web pages is conceptually simple matter, but which can involve great complexity.

The design of web pages began with a proposal by Tim Berners-Lee made at Cern in 1989. A version of the text can be found at http://www.w3.org/History/1989/proposal.html The concepts are based on the idea of hypertext, in which portion of a document are live links to other documents. See Jacok Nielsen, "HyperText & HyperMedia", Academic Press, San Diego, CA, 1990. There are many references on the HyperText Markup Language (HTML) used in writing web pages. See the web pages of the World Wide Web Consortium at http://www.w3c.org for more detail, especially, http://www.w3.org/MarkUp/. The standards for HTML are changing rapidly. Currently, variations of HTML version 4 are very popular, and a new version, XHTML, based on a meta-laguage called XML is the current W3C recommendation. XHTML is very similar to HTML, but the certain practices which have become common in writing web pages will be phased out.

One point in the transition to XHTML is worth mentioning here: All tags of the form <tag> should have a matching closing tag of the form </tag>. It has been a common practice to leave some tags, such as <p> and <li> unclosed. This should no longer be done. In the case of tags that do not enclose any data, the XHTML convention is to combine and opening and closing tags in one special new form with a slash before the closing angle bracket, e.g. <br />.

In addition, for newer versions of HTML, the specification of stylistic elements, such as centering, is no longer supposed to be done by using separate attributes, such as align="center". Instead, all the stylistic elements are gathered together as the value of the single inline attribute, style, or provided by what are called Cascading Style sheets. (See www.pageresource.com/dhtml/cssprops.htm for the text properties that can be set.). The following table gives a translation of some of the most commonly used stylistic elements from the older approach to the newer:

Action Older HTML Newer HTML
center horizontally align="center" style="text-align:center"
left justify align="left" style="text-align:left"
right justify align="right" style="text-align:right"
fully justify align="justify" style="text-align:justify"

To conserve space in our examples, sometimes we will use the older format, but in writing new HTML, you should start converting to the newer format.

The General Structure of an HTML document

An HTML document is a text document. You may creat it with an ordinary text editor or with the built-in HTML formatting capabilities of many word-processing programs. On this page we will consider only the structure of a web page as a text document and how it appears in a browser. Note that for most purposes we do not specify the precise appearance of a page in a browser. Different browsers may present the same content in different ways.

The content of all HTML documents is enclosed within <html> ... </html> opening (start) and closing (end) tags. The entire block of text, including the opening and closing tags is called an "HTML-element". The layout of the document is defined by text which is "marked-up" by other opening-closing tag pairs.

The simplest HTML documents are of the form


<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    Body of the document
  </body>
</html>

For the most part, the spacing used in creating the HTML document has no effect on the final layout. The TITLE-element is normally used by the browser to create a title for the display window. The BODY-element defines the actual text of the document to be displayed.

More complex documents can be created in which the display window is broken up into frames by browsers with such capabilities. In that case, the document might have the following structure


<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <frameset Rows="20%, 80%">
    <frameset Cols="20%, 80%">
      <frame name="Top_Left" src="Top_Left.html"></frame>
      <frame name="Top_Right" src="Top_Right.html"></frame>
    </frameset >
    <frameset Cols="20%, 80%">
      <frame name="Bottom_Left" src="Bottom_Left.html"></frame>
      <frame name="Bottom_Right" src="Bottom_Right.html"></frame>
    </frameset >
  </frameset >
  <noframes>
    <body>
      Body of the document to use when frames are not used
    </body>
  </noframes>
</html>

In this case, the contents of each sub-window (frame) is determined by the HTML document given as the value of the src attribute. Any number of row and columns may be used, giving the sizes in pixels or as a percentage, or as "*" for the remainder.

Comments may be introduced before, after or into an HTML document with the special markup


<!--  comment -->

Headings

Blocks of text may be given headings using the <hn> ... </hn> elements, where n ranges from 1 (largest) to 6. An optional align="center" attribute may be used to center a heading. Other acceptable values align are "left" (the default), "right" and "justify". The "justify" value for align falls back to left justification if the heading is not close to the width of the window in size. For example, the following fragment of HTML produces the headings that follow.


<h1>This is a very large heading</h1>
<h2>This is a less large heading</h2>
<h3>This is a moderate heading</h3>
<h4>This is a small heading</h4>
<h5>This is a smaller heading</h5>
<h6>This is the smallest heading</h6>

<h1 align="center">This is a very large heading centered</h1>
<h2 align="center">This is a less large heading centered</h2>
<h3 align="center">This is a moderate heading centered</h3>
<h4 align="center">This is a small heading centered</h4>
<h5 align="center">This is a smaller heading centered</h5>
<h6 align="center">This is the smallest heading centered</h6>

<h1 align="right">This is a very large heading right justified</h1>
<h2 align="right">This is a less large heading right justified</h2>
<h3 align="right">This is a moderate heading right justified</h3>
<h4 align="right">This is a small heading right justified</h4>
<h5 align="right">This is a smaller heading right justified</h5>
<h6 align="right">This is the smallest heading right justified</h6>

<h1 align="justify">This is a very large heading justified</h1>
<h2 align="justify">This is a less large heading justified</h2>
<h3 align="justify">This is a moderate heading justified</h3>
<h4 align="justify">This is a small heading justified</h4>
<h5 align="justify">This is a smaller heading justified</h5>
<h6 align="justify">This is the smallest heading justified</h6>

<h1 style="text-align:center">This is a very large heading centered</h1>
<h2 style="text-align:center">This is a less large heading centered</h2>
<h3 style="text-align:center">This is a moderate heading centered</h3>
<h4 style="text-align:center">This is a small heading centered</h4>
<h5 style="text-align:center">This is a smaller heading centered</h5>
<h6 style="text-align:center">This is the smallest heading centered</h6>

<h1 style="text-align:right">This is a very large heading right justified</h1>
<h2 style="text-align:right">This is a less large heading right justified</h2>
<h3 style="text-align:right">This is a moderate heading right justified</h3>
<h4 style="text-align:right">This is a small heading right justified</h4>
<h5 style="text-align:right">This is a smaller heading right justified</h5>
<h6 style="text-align:right">This is the smallest heading right justified</h6>

<h1 style="text-align:justify">This is a very large heading justified</h1>
<h2 style="text-align:justify">This is a less large heading justified</h2>
<h3 style="text-align:justify">This is a moderate heading justified</h3>
<h4 style="text-align:justify">This is a small heading justified</h4>
<h5 style="text-align:justify">This is a smaller heading justified</h5>
<h6 style="text-align:justify">This is the smallest heading justified</h6>

This is a very large heading

This is a less large heading

This is a moderate heading

This is a small heading

This is a smaller heading
This is the smallest heading

This is a very large heading centered

This is a less large heading centered

This is a moderate heading centered

This is a small heading centered

This is a smaller heading centered
This is the smallest heading centered

This is a very large heading right justified

This is a less large heading right justified

This is a moderate heading right justified

This is a small heading right justified

This is a smaller heading right justified
This is the smallest heading right justified

This is a very large heading justified

This is a less large heading justified

This is a moderate heading justified

This is a small heading justified

This is a smaller heading justified
This is the smallest heading justified

This is a very large heading centered

This is a less large heading centered

This is a moderate heading centered

This is a small heading centered

This is a smaller heading centered
This is the smallest heading centered

This is a very large heading right justified

This is a less large heading right justified

This is a moderate heading right justified

This is a small heading right justified

This is a smaller heading right justified
This is the smallest heading right justified

This is a very large heading justified

This is a less large heading justified

This is a moderate heading justified

This is a small heading justified

This is a smaller heading justified
This is the smallest heading justified

Paragraphs, Line Breaks and Lists

Text may be formatting into paragraphs by use of <p> ... </p> elements, into lines with <br /> elements, and into lists with <ul> ... </ul>, <ol> ... </ol>, and <dl> ... </dl> elements.

The <p> element instructs a browser to formatthe enclosed text as a paragraph. It accepts the same align="center", "left" (the default), "right" and "justify" attributes as may be specified for headings.

The <br /> element is treated as a character forcing a line break, and should not have closing tag.

The <ul> ... </ul> and <ol> ... </ol> elements define unordered and ordered lists respectively. The contents of these elements only can consist of <li> ... </li> elements. In the first case the list will have elements marked by bullets. In the second case the list will have elements numbered in order.

The <dl> ... </dl> elements define glossary-like lists, which can contain <dt> ... </dt> and <dd> ... </dd> elements to mark the terms and definitions.

The following fragment of HTML will produce the portion of the page that follows:


<p>
This is a left-justified paragraph.  It contains text which will start after a reasonable break and
continue through one or more lines until it ends.
</p>

<p align="center">
This is a centered paragraph.  It contains text which will start after a reasonable break and
continue through one or more lines until it ends.
</p>

<p align="right">
This is a right-justified paragraph.  It contains text which will start after a reasonable break and
continue through one or more lines until it ends.
</p>

<p align="justify">
This is a justified paragraph.  It contains text which will start after a reasonable break and
continue through one or more lines until it ends.
</p>

<p>
Here is some<br />text<br />broken into three lines
</p>

<ul>
<li>This is the first line of an unordered list</li>
<li>This is the second line of an unordered list</li>
<li>This is the third line of an unordered list
  <ul>
  <li>This is the first line of a nested unordered list
  <li>This is the second line of a nested unordered list
  </ul>
</li>
</ul>

</p>
<p>

<ol>
<li>This is the first line of an ordered list</li>
<li>This is the second line of an ordered list</li>
<li>This is the third line of an ordered list
  <ol>
  <li>This is the first line of a nested ordered list
  <li>This is the second line of a nested ordered list
  </ol>
</li>
</ol>

</p>
<p>

<dl>
<dt>First</dt>
<dd>This is the first item being defined.  We continue with interesting
illustrations of what is interesting about this item.</dd>
<dt>Second</dt>
<dd>This is the second item being defined.  We continue with interesting
illustrations of what is interesting about this item.</dd>
</dl>

</p>


This is a left-justified paragraph. It contains text which will start after a reasonable break and continue through one or more lines until it ends.

This is a centered paragraph. It contains text which will start after a reasonable break and continue through one or more lines until it ends.

This is a right-justified paragraph. It contains text which will start after a reasonable break and continue through one or more lines until it ends.

This is a justified paragraph. It contains text which will start after a reasonable break and continue through one or more lines until it ends.

Here is some
text
broken into three lines

  1. This is the first line of an ordered list
  2. This is the second line of an ordered list
  3. This is the third line of an ordered list
    1. This is the first line of a nested ordered list
    2. This is the second line of a nested ordered list

First
This is the first item being defined. We continue with interesting illustrations of what is interesting about this item.
Second
This is the second item being defined. We continue with interesting illustrations of what is interesting about this item.

Preformatted Text

Sometimes it is desirable to show text organized in some precise way, for example, when giving examples of raw HTML. The <pre> ... </pre> element presents the text that is enclosed in a fixed-spacing font with white space preserved.

For example, the following HTML fragment produces the text that follows


<pre>
This is preformatted text.  On the next line we will double the spaces.
This  is  preformatted  text.    On  the  next  line  we  will  double  the  spaces.
This    is    preformatted    text.        On    the    next    line    we    will    double    the    spaces.

     Now we had some leading blanks

</pre>

This is preformatted text.  On the next line we will double the spaces.
This  is  preformatted  text.    On  the  next  line  we  will  double  the  spaces.
This    is    preformatted    text.        On    the    next    line    we    will    double    the    spaces.

     Now we had some leading blanks

Character Formating, Bold, Italic ...

To a limited extent the formating of characters may be controlled in HTML. Some of the most commonly used are given in this table:

Character Formating Elements
ElementExampleResultPurpose
<b> ... </b><b> bold </b> bold bold face
<i> ... </i><i> italic </i> italic italic
<em> ... </em><em> emphasis </em> emphasis emphasis
<cite> ... </cite><cite> citation </cite> citation citation
<strong> ... </strong><strong> strong </strong> strong strong emphasis
<font face=face size=size> ... </font><font face="Times" size="6"> big times </font> big times select face and size

The choices of character sets in HTML is complex and browser-dependent. Browsers are supposed to support the so-called ISO 8859-1 (Latin-1) and the Symbol character Face provides many Greek and mathematical symbols. See Browser_Chars.html for more information.

Tables

Information can be organized into rows and columns of tables with the <table> ... </table> element. Inside the element, an optional <caption> ... </caption> element and one or more <tr> ... </tr> elements to define the rows of the table. In each <tr> ... </tr> element, one or more <th> ... </th> or <td> ... </td> elements define table headers and table data elements. A table cell may be made to span multiple rows or columns by adding the rowspan="n" or colspan="n" attribute-value pairs to <th> or <td>. A WIdtH=value attribute-value pair may specify the cell width in pixels or as a persentage. A height=value attribute-value pair may specify the cell width in pixels. Horizontal alignment of the text in a cell may be specified by an align=value attribute-value pair. Vertical alignment of the text in a cell may be specified by a valign=value attribute vaue pair. The valid horizontal alignments are "left", "center" and "right", "justify" and "char". The valid vertical alignments are "top", "middle" and "bottom". Not all alignments are supported by all browsers. If align="char" is given, char="c" should also be given, where "c" is "." or "," to align columns of numbers.

The table cells may be given borders by adding the border="n" attribute-value pair to with the value in pixels.

Note that the font gets reset for each element within the table, so that use of <font> ... </font> elements may be required to achieve the desired effect or to achieve consistency with the rest of the document. The following fragment of HTML creates the table that follows.


<table border="3">
<caption><font face="ARIAL" size="3"><b>This is a caption</b></font></caption>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th><th>Heading 4</th></tr>
<tr><td>Text-1-1</td><td>Text-1-2</td><td>Text-1-3</td><td>Text-1-4</td></tr>
<tr><td colspan="2">Text-2-1,2</td><td colspan="2">Text-2-3,4</td></tr>
<tr><td rowspan="2">Text-3,4-1</td><td>Text-3-2</td><td>Text-3-3</td><td>Text-3-4</td></tr>
<tr>                               <td>Text-4-2</td><td>Text-4-3</td><td>Text-4-4</td></tr>
</table>

This is a caption
Heading 1Heading 2Heading 3Heading 4
Text-1-1Text-1-2Text-1-3Text-1-4
Text-2-1,2Text-2-3,4
Text-3,4-1Text-3-2Text-3-3Text-3-4
Text-4-2Text-4-3Text-4-4

Colors

The colors used for text, backgrounds and links may be set, using an RGB color scheme. The relevant attributes are set to values of the form "#rrggbb", where three groups of two hexadecimal digits each specify the additive red, green and blue components. For example, the following is a color table from the manual for the molecular graphics program RasMol (see http://www.bernstein-plus-sons.com/software/rasmol), giving 24 predefined colors:


The 24 currently predefined colour names in RasMol are
listed below with their corresponding RGB triplet and hexadecimal value.
<p>
<center>
<table border cellpadding=2>
<tr><th height="20">Predefined colour</th>
<th height="20">Sample</th>
<th height="20">RGB Values</th>
<th height="20">Hexadecimal</th></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Black</b></tt></font></td>
<td height="18" bgcolor="#000000">&nbsp;
<td height="18"><tt>[  0,  0,  0]</tt></td>
<td height="18"><tt>000000</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Blue</b></tt></font></td>
<td height="18" bgcolor="#0000FF">&nbsp;
<td height="18"><tt>[  0,  0,255]</tt></td>
<td height="18"><tt>0000FF</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>BlueTint</b></tt></font></td>
<td height="18" bgcolor="#AFD7FF">&nbsp;
<td height="18"><tt>[175,214,255]</tt></td>
<td height="18"><tt>AFD7FF</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Brown</b></tt></font></td>
<td height="18" bgcolor="#AF7559">&nbsp;
<td height="18"><tt>[175,117,89]</tt></td>
<td height="18"><tt>AF7559</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Cyan</b></tt></font></td>
<td height="18" bgcolor="#00FFFF">&nbsp;
<td height="18"><tt>[  0,255,255]</tt></td>
<td height="18"><tt>00FFFF</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Gold</b></tt></font></td>
<td height="18" bgcolor="#FC9C00">&nbsp;
<td height="18"><tt>[255,156,  0]</tt></td>
<td height="18"><tt>FC9C00</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Grey</b></tt></font></td>
<td height="18" bgcolor="#7D7D7D">&nbsp;
<td height="18"><tt>[125,125,125]</tt></td>
<td height="18"><tt>7D7D7D</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Green</b></tt></font></td>
<td height="18" bgcolor="#00FF00">&nbsp;
<td height="18"><tt>[  0,255,  0]</tt></td>
<td height="18"><tt>00FF00</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>GreenBlue</b></tt></font></td>
<td height="18" bgcolor="#2E8B57">&nbsp;
<td height="18"><tt>[ 46,139,87]</tt></td>
<td height="18"><tt>2E8B57</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>GreenTint</b></tt></font></td>
<td height="18" bgcolor="#98FFB3">&nbsp;
<td height="18"><tt>[152,255,179]</tt></td>
<td height="18"><tt>98FFB3</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>HotPink</b></tt></font></td>
<td height="18" bgcolor="#FF0065">&nbsp;
<td height="18"><tt>[255,  0,101]</tt></td>
<td height="18"><tt>FF0065</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Magenta</b></tt></font></td>
<td height="18" bgcolor="#FF00FF">&nbsp;
<td height="18"><tt>[0,255,0]</tt></td>
<td height="18"><tt>FF00FF</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Orange</b></tt></font></td>
<td height="18" bgcolor="#FFA500">&nbsp;
<td height="18"><tt>[255,165,  0]</tt></td>
<td height="18"><tt>FFA500</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Pink</b></tt></font></td>
<td height="18" bgcolor="#FF6575">&nbsp;
<td height="18"><tt>[255,101,117]</tt></td>
<td height="18"><tt>FF6575</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>PinkTint</b></tt></font></td>
<td height="18" bgcolor="#FFABBB">&nbsp;
<td height="18"><tt>[255,171,187]</tt></td>
<td height="18"><tt>FFABBB</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Purple</b></tt></font></td>
<td height="18" bgcolor="#A020F0">&nbsp;
<td height="18"><tt>[160, 32,240]</tt></td>
<td height="18"><tt>A020F0</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Red</b></tt></font></td>
<td height="18" bgcolor="#FF0000">&nbsp;
<td height="18"><tt>[255,  0,  0]</tt></td>
<td height="18"><tt>FF0000</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>RedOrange</b></tt></font></td>
<td height="18" bgcolor="#FF4500">&nbsp;
<td height="18"><tt>[255, 69,  0]</tt></td>
<td height="18"><tt>FF4500</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>SeaGreen</b></tt></font></td>
<td height="18" bgcolor="#00FA6D">&nbsp;
<td height="18"><tt>[  0,250,109]</tt></td>
<td height="18"><tt>00FA6D</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>SkyBlue</b></tt></font></td>
<td height="18" bgcolor="#3A90FF">&nbsp;
<td height="18"><tt>[ 58,144,255]</tt></td>
<td height="18"><tt>3A90FF</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Violet</b></tt></font></td>
<td height="18" bgcolor="#EE82EE">&nbsp;
<td height="18"><tt>[238,130,238]</tt></td>
<td height="18"><tt>EE82EE</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>White</b></tt></font></td>
<td height="18" bgcolor="#FFFFFF">&nbsp;
<td height="18"><tt>[255,255,255]</tt></td>
<td height="18"><tt>FFFFFF</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>Yellow</b></tt></font></td>
<td height="18" bgcolor="#FFFF00">&nbsp;
<td height="18"><tt>[255,255,  0]</tt></td>
<td height="18"><tt>FFFF00</tt></td></tr>
<tr valign=middle align=left>
<td height="18" bgcolor="#FFFFFF"><font ColOR="#000000">
<tt><b>YellowTint</b></tt></font></td>
<td height="18" bgcolor="#F6F675">&nbsp;
<td height="18"><tt>[246,246,117]</tt></td>
<td height="18"><tt>F6F675</tt></td></tr>
</table>
</center>

The 24 currently predefined colour names in RasMol are listed below with their corresponding RGB triplet and hexadecimal value.

Predefined colour Sample RGB Values Hexadecimal
Black   [ 0, 0, 0] 000000
Blue   [ 0, 0,255] 0000FF
BlueTint   [175,214,255] AFD7FF
Brown   [175,117,89] AF7559
Cyan   [ 0,255,255] 00FFFF
Gold   [255,156, 0] FC9C00
Grey   [125,125,125] 7D7D7D
Green   [ 0,255, 0] 00FF00
GreenBlue   [ 46,139,87] 2E8B57
GreenTint   [152,255,179] 98FFB3
HotPink   [255, 0,101] FF0065
Magenta   [0,255,0] FF00FF
Orange   [255,165, 0] FFA500
Pink   [255,101,117] FF6575
PinkTint   [255,171,187] FFABBB
Purple   [160, 32,240] A020F0
Red   [255, 0, 0] FF0000
RedOrange   [255, 69, 0] FF4500
SeaGreen   [ 0,250,109] 00FA6D
SkyBlue   [ 58,144,255] 3A90FF
Violet   [238,130,238] EE82EE
White   [255,255,255] FFFFFF
Yellow   [255,255, 0] FFFF00
YellowTint   [246,246,117] F6F675

Prepared by Herbert J. Bernstein yaya@cs.sunysb.edu, 5 September 2001. Revised 8 October 2001, 25 October 2003, 7 September 2004

© Copyright 2000, 2001 Herbert J. Bernstein. All Rights Reserved.