Newsgroups: comp.infosystems.www
Path: newserv.ksu.ksu.edu!moe.ksu.ksu.edu!vixen.cso.uiuc.edu!howland.reston.ans.net!pipex!uknet!uel!sunil
From: sunil@uel.co.uk (Sunil Gupta)
Subject: A partly incomplete HTML guide to HTML (long)
Sender: news@uel.co.uk
Message-ID: <CJtxqu.5Lr@uel.co.uk>
Date: Tue, 18 Jan 1994 14:32:54 GMT
Organization: UNIX System Laboratories, Europe Ltd.
X-Newsreader: TIN [version 1.2 PL0]
Lines: 581

<TITLE> revised HTML documentation </title>
<A name=index><H1>HTML, the complete<i>-ish</i> guide</H1></a>
<ul>
<LI><a href=#about>About this document</a>
<LI><a href=#comprehensive>Comprehensive listing</a>
<LI><a href=#documented>Documented features</a>
<LI><a href=#obsolete>Obsolete features</a>
<LI><a href=#undocumented>Undocumented features</a>
<LI><a href=#confused>Incomplete information
<LI><a href=#characters>Character map</a>
<LI><a href=#images>Internal images</a>
<LI><a href=#useful>Other Useful Documents</a>
</UL>
<hr><hr>
<A name=about href=#index>
<h1>
<img src=internal-gopher-index align=middle></a>
About this Document</h1>
The purpose of this document is to provide a comprehensive listing of html 
tags understood by Xmosaic, in <b>one</b> place. And to be used to write 
HTML documents.
<p>
This is based on a selective reverse engineer of Mosaic2.1 and an 
amalgamation of the HTML help documents, No guarantees about accuracy of 
information is given as I havent figured everything out yet.
<p>
Examples are <i>not</i> always provided. In case of confusion 
please look at the source of this document.
<p>
This version is posted with the colour gifs stripped out as I didnt want 
to uuencode and post them.
<P>
Ive done a few non-standard things to get images in headings, and I 
know it's not a particularly elegant method.
<P>
There is still a lot to do, if there are any errors please let 
<a href=#me>me</a> know as soon as possible.
<p>
<h5>
Distributed under the GNU copyleft (any version of your choice)
Please don't distribute modified copies as the information is still 
being assembled
</h3>
<HR><HR>
<A name=comprehensive A Href=#index>
<h1>
<img src=internal-gopher-index align=middle></a>
HTML Codes</H1>
<h2>Document structure</h2>
<a href=#base>base</a>,
<a href=#title>title</a>,
link, head, body, nextid.
<p>
<h2>Documented</h2>
<a href=#a>a</a>,
<a href=#address>address</a>,
<a href=#block>blockquote</a>,
<a href=#bold>b</a>,
<a href=#cite>cite</a>,
<a href=#code>code</a>,
<a href=#dir>dir</a>,
<a href=#dfn>dfn</a>,
<a href=#descrip>dl</a>,
<a href=#descripd>dd</a>,
<a href=#descript>dt</a>,
<a href=#empa>e</a>,
<a href=#h1>h1</a>,
<a href=#h2>h2</a>,
<a href=#h3>h3</a>,
<a href=#h4>h4</a>,
<a href=#h5>h5</a>,
<a href=#h6>h6</a>,
<a href=#img>img</a>,
<a href=#italic>i</a>,
<a href=#kbd>kbd</a>,
<a href=#listitem>li</a>,
<a href=#menu>menu</a>,
<a href=#numbered>ol</a>,
<a href=#p>p</a>,
<a href=#pre>pre</a>,
<a href=#samp>sample</a>,
<a href=#strong>s</a>,
<a href=#tt>tt</a>,
<a href=#ul>ul</a>,
<a href=#var>var</a><p>

<h2>Obsolete</h2>
<a href=#listing>listing</a>,
<a href=#plain>plaintext</a>,
<a href=#xmp>xmp</a>

<h2>UnDocumented</h2>
<a href=#br>br</a>,
<a href=#comment>comments</a>,
<a href=#form>form</a>,
<a href=#hr>hr</a>,
<a href=#input>input</a>,
<a href=#isindex>isindex</a>,
<a href=#option>option</a>,
<a href=#select>select</a>,
<a href=#strike>strike</a>,
<a href=#txt>textarea</a>,
<HR><HR>
<A name=documented Href=#index>
<H1>
<img src=internal-gopher-index align=middle></a>
Documented Features</H1>
<UL>
<HR>
<a name=title><LI>&lt;title&gt;...&lt;title&gt<P></a>
sets the title of the document<P>
<HR>
<a name=h1><LI>&lt;h1&gt;...&lt;/h1&gt<P></a>
<H1>Header level 1</H1>
<HR>
<a name=h2><LI>&lt;h2&gt;...&lt;/h2&gt<P></a>
<H2>Header level 2</H2>
<HR>
<a name=h3><LI>&lt;h3&gt;...&lt;/h3&gt<P></a>
<H3>Header level 3</H3>
<HR>
<a name=h4><LI>&lt;h4&gt;...&lt;/h4&gt<P></a>
<H4>Header level 4</H4>
<HR>
<a name=h5><LI>&lt;h5&gt;...&lt;/h5&gt<P></a>
<H5>Header level 5</H5>
<HR>
<a name=h6><LI>&lt;h6&gt;...&lt;/h6&gt<P></a>
<H6>Header level 6</H6>
<HR>
<a name=a><LI>&lt;a&gt;...&lt/a&gt<P></a>
<UL>
<a name=what><LI>&lt;A name=<i>name</i>&gt;...&lt;/A&gt;<a name=backhere>.</a><p></a>
Sets a tag in your document which can be href'd back to.
Click <A href=#end>here</A> to go to the end of the document<p>
<a name=what><LI>&lt;A href=<i>name</i>&gt;<i>link</i>&lt;/a&gt<P></a>
makes a hypertext link to the named item. <p>
<UL>
<LI>&lt;A href=<i>name</i>&gt;...&lt;/a&gt<br>
This makes a link to the named file<p>
<pre>     link to a <a href=files/text>text file</a></pre><p>
<LI>&lt;A href=<b>#</b><i>name</i>&gt;...&lt;/a&gt<br>
A <i>hash</i> means that the link is to a tag in this document.<p>
<pre>     link to the <a href=#index>top</a> of this file</pre><p>
<LI>&lt;A href=<b>news:</b><i>newsgroup</i>&gt;...&lt;/a&gt<br>
connects to the news-server taken from the environment variable
<b>NNTP_SERVER</b>and reads the newsgroup.
<pre>
     link to <a href=news:comp.infosystems.www>www</a> newsgroup
     link to <a href=news:*>all</a> newsgroups
</pre><p>
<LI>&lt;A href=<b>wais:</b><i>name</i>&gt;...&lt;/a&gt<br>
connects to a <i>wais</i> server.<p>
<pre>     link to <a href=wais://wais.novell.com>novell wais</a></pre><p>
<LI>&lt;A href=<b>ftp:</b><i>name</i>&gt;...&lt;/a&gt<br>
connects to a <i>ftp</i> server.<p>
<pre>     link to <a href=ftp://ftp.novell.de/>ftp</a> at Novell Germany</a></pre><p>
<LI>&lt;A href=<b>gopher:</b><i>name</i>&gt;...&lt;/a&gt<br>
connects to a <i>gopher</i> server.<p>
<pre>     link to <a href=gopher://gopher.novell.com>novell gopher</a></pre><p>
<LI>&lt;A href=<b>http:</b><i>name</i>&gt;...&lt;/a&gt<br>
with <i>http:</i> the file is somewhere else on the net.
</UL>
</UL>
<a>
<HR>
<a name=p><LI>&lt;p&gt<P></a>
A new paragraph<b>-&gt;</b><p>
starts here
<HR>
<a name=address><LI>&lt;address&gt;...&lt;/address&gt<P></a>
seems to just set italic text, but is meant to show the author of the document
<address>mydocument / me / me@me.com </address><P>
<HR>
<a name=ul><LI>&lt;ul&gt;...&lt;/ul&gt<P></a>
unnumbered lists
<PRE>
&lt;ul&gt;   start of list
&lt;li&gt;   list element 1
&lt;ul&gt;   start of list 2
&lt;/ul&gt;  end of list 2
&lt;li&gt;   list element 2
&lt;li&gt;   list element 3
&lt;li&gt;   list element 4
&lt;/ul&gt;  end of list
</PRE>
which looks like
<ul>
<li>   list element 1.1
<ul>
<li>   list element 2.1
</ul>
<li>   list element 1.2
<li>   list element 1.3
<li>   list element 1.4
</ul><P>

<HR>
<a name=numbered><LI>&lt;ol&gt<P></a>
numbered lists
<PRE>
&lt;ol&gt;  start of list
&lt;li&gt;  item
&lt;ol&gt;  start of list 2
&lt;/ol&gt; end of list 2
&lt;li&gt;  item
&lt;li&gt;  item
&lt;li&gt;  item
&lt;/ol&gt; end of list
</PRE>
which looks like
<ol>
<li> item
<ol>
<li> item
</ol>
<li> item
<li> item
<li> item
</ol>
<HR>
<a name=listitem><LI>&lt;li&gt<P></a>
List items (as used above)
<HR>
<a name=menu><LI>&lt;menu&gt<P></a>
This is a list of smaller paragraphs.<P>
<PRE>
  &lt;menu [compact]&gt;<br>
  &lt;li&gt;<i>item</i>
  &lt;li&gt;<i>item</i>
  &lt;li&gt;<i>item</i>
  &lt;/menu&gt;
</pre>
<menu>
<li>
This is menu item 1, This is menu item 1, This is menu item 1, 
This is menu item 1, This is menu item 1, This is menu item 1, 
This is menu item 1, This is menu item 1, This is menu item 1.
<li>
This is menu item 2, This is menu item 2, This is menu item 2, 
This is menu item 2, This is menu item 2, This is menu item 2, 
This is menu item 2, This is menu item 2, This is menu item 2, 
<li>
This is menu item 3, This is menu item 3, This is menu item 3, 
This is menu item 3, This is menu item 3, This is menu item 3, 
This is menu item 3, This is menu item 3, This is menu item 3, 
</menu>
<HR>
<a name=dfn><LI>&lt;dfn&gt;...&lt;/dfn&gt;<P></a>
a text style used for definitions: eg: "<dfn>definitions</dfn>".
<HR>
<a name=dir><LI>&lt;dir [compact]&gt<P></a>
This should display the items going accross the page.
<PRE>
  &lt;dir&gt;<br>
  &lt;li&gt;<i>item</i>&lt;li&gt;<i>item</i>
  &lt;li&gt;<i>item</i>
  &lt;/dir&gt;
</pre>
<dir compact>
<li>item1<li> item2
<li>item3<li> item4
<li>item5
</dir>
<HR>
<a name=descrip><LI>&lt;dl [compact]&gt;...&lt;/dl&gt<P></a>
Description list
<PRE>
  &lt;DL&gt;
  &lt;DT&gt; description 1
  &lt;DD&gt; blah blah ....
  &lt;DT&gt; description 2
  &lt;DD&gt; waffle waffle ....
  &lt;/DL&gt;
</PRE>
is formatted to
<DL>
<DT> description 1
<DD> blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah  blah blah blah blah blah blah blah blah blah blah blah
<DT> description 2
<DD> waffle waffle waffle waffle waffle waffle waffle waffle waffle waffle
waffle waffle waffle waffle waffle waffle waffle 
</DL>


<HR>
<a name=descript><LI>&lt;dt&gt<P></a>
Description list item title as used above
<HR>
<a name=descripd><LI>&lt;dd&gt<P></a>
Description list item details as used above
<HR>
<a name=pre><LI>&lt;pre&gt;...&lt/pre&gt<P></a>
<PRE>
         preformatted       text,   retains spaces and
	       line feeds
</PRE>
an optional parameter <i>width=n</i> can be given.
<HR>
<a name=img><LI>&lt;img&gt<P></a>
<code>&ltIMG SRC="image.gif"&gt</code><p>
displays an image <IMG SRC="internal-gopher-image">. By default the 
bottom of the image is aligned
with the bottom of the text, This can be changed using the 
parameter <code>align</code><P>
<code>&ltIMG SRC="image.gif" align=top&gt</code><p>
displays the image <IMG SRC="internal-gopher-image"align=top> with the top aligned.<P>
<code>&ltIMG SRC="image.gif" align=middle&gt</code><p>
displays the image <IMG SRC="internal-gopher-image"align=middle> with the middle aligned.<P>
if the image doesnt exist this picture:<IMG SRC="uegrbk" align=middle> will 
appear<p>
<code>&ltIMG SRC="image.gif" alt="text"&gt</code><p>
will display the text in a text environment.
<HR>
<a name=tt><LI>&lt;tt&gt;...&lt;/tt&gt<P></a>
sets <tt>fixed width</tt> font
<HR>
<a name=bold><LI>&lt;b&gt;...&lt;/b&gt<P></a>
sets <b>bold</b> font
<HR>
<a name=italic><LI>&lt;i&gt;...&lt;/i&gt<P></a>
sets <i>italic</i> font
<HR>
<a name=empa><LI>&lt;em&gt;...&lt;/em&gt<P></a>
sets <em>emphasised</em> font
<HR>
<a name=strong><LI>&lt;strong&gt;...&lt;/strong&gt<P></a>
sets <strong>stronger</strong> font
<HR>
<a name=code><LI>&lt;code&gt;...&lt;/code&gt<P></a>
this sets the font to be <code>fixed width</code>, otherwise everything is the
same
<HR>
<a name=samp><LI>&lt;samp&gt;...&lt;/samp&gt<P></a>
a sequence of literal characters eg:
<samp>&%$*&&&(^_+_)(.</samp>
<HR>
<a name=kbd><LI>&lt;kbd&gt<P></a>
formats it as in manuals when users are asked to type things in.
eg: <kbd>help</kbd>
<HR>
<a name=var><LI>&lt;var&gt;...&lt;/var&gt<P></a>
indicates a <var>variable</var> name
<HR>
<a name=cite><LI>&lt;cite&gt;...&lt;/cite&gt<P></a>
cites the text in a <cite>predefined</cite> font. This font may be set up 
as being italic.
<HR>
<a name=block><LI>&lt;blockquote&gt;...&lt;/blockquote&gt<P></a>
formats text like so<P>
<blockquote>
this is a block quote, this is a block quote,this is a block quote,
this is a block quote, this is a block quote,this is a block quote,
this is a block quote, this is a block quote,this is a block quote,
this is a block quote, this is a block quote,this is a block quote,
</blockquote>
See what I mean? it should leave white space before and after it.
</UL>
<hr><hr>
<A name=obsolete Href=#index>
<h1> <img src=internal-gopher-index align=middle></a>
Obsolete features.</h1>
<ul>
<a name=xmp><LI>&lt;xmp&gt<P></a>
<HR>
<a name=plain><LI>&lt;plaintext&gt<P></a>
<HR>
<a name=listing><LI>&lt;listing&gt<P></a>
</ul>
<hr><hr>
<A name=undocumented Href=#index>
<h1>
<img src=internal-gopher-index align=middle></a>
Undocumented features.
</h1>
These features are all poorly documented.
<hr>
<ul>
<a name=base><LI>&lt;base&gt<P></a>
<base>
<hr>
<a name=comment><LI>&lt;! <i>comment body </i>&gt<P></a>
Inserts a comment into the document. Must not contain any tags nested 
<! This is a comment >
within it. Comments do not affect the flow of text.

<base>
<HR>
<a name=br><LI>&lt;br&gt<P></a>
breaks the line <b>&lt;-</b><br>and carries on on the next line.
<HR>
<a name=form><LI>&lt;form&gt;.....&lt;/form&gt<P></a>
Put together collections of 
<form>
<pre>
<A href=#input>inputs</a>    <input TYPE=submit><input><input TYPE=reset>

<A href=#txt>textareas</a>   <textarea SIZE=10,10 ALIGN=middle>
</textarea>  

<A href=#select>menus</a>       <select NAME="direction">
<OPTION SELECTED>North
<OPTION >East
<OPTION>South
<OPTION>West
</select>

</pre>
</form>
<HR>
<a name=hr><LI>&lt;hr&gt<br></a>
Places a horizontal line <i>like the one above</i> between the
lines of text.
<HR>
<a name=input ><LI>&lt;input NAME=<i>name</i> [value=<i>string</i>] [Type =<i>type</i>] [SIZE=<i>x,y</i>] [checked]
ALIGN=<i>align</i>&gt;<P></a>
Creates an input field in a <a href=#form>form</a>.<p>
<b>TYPE</B> can be one of
<UL>
<LI><b>text</b><br>*default* an input filed
<LI><b>submit</b><br>calls the action specified in the form.
<LI><b>reset</b><br>clears all the fields in the form.
<LI><b>radio</b><br>radio buttons. Input fields with the same <i>NAME</i> field
can only have one active selection.
</UL>
<pre>
<form>
          <b>Example</b>                        <b>Output</b>
  &lt;form&gt;
    &lt;input NAME="From"&gt;	            <input NAME="From">
  &lt;/form&gt

          <b>Example</b>                        <b>Output</b>
 SIZE 15,5 ALIGN=middle            <input NAME="From" SIZE=15,5 ALIGN=middle>

          <b>Example</b>               <b>Output</b>
 Type="reset"			<input Type="reset">

          <b>Example</b>              <b>Output</b>
 Type=radio			<input name=radio Type=radio><input NAME=radio Type=radio checked>
</form>
</pre><P>
<HR>
<a name=isindex><LI>&lt;isindex&gt<P></a>
allows the user to search some file
<isindex action=files/search.sh>
<a href=files/search.sh>search</a>
<HR>
<a name=option><LI>&lt;option&gt<P></a>
is used within <a href=#select>&lt;SELECT&gt;</a>.
<option>
<HR>
<a name=select><LI>&lt;select&gt;...&lt;/select&gt;<P></a>
This creates a pull-down menu containing <a href=#option>Options</a>
in a <a href=#form>form</a>.
<pre><form>
          <b>Example</b>                        <b>Output</b>
&lt;form&gt;
  &lt;select NAME="direction"&gt;
    &lt;OPTION SELECTED&gt; North           <select NAME="direction">
<OPTION SELECTED>North
<OPTION >East
<OPTION>South
<OPTION>West
</select>
    &lt;OPTION&gt; East
    &lt;OPTION&gt; South
    &lt;OPTION&gt; West
  &lt;/select&gt;
&lt;/form&gt;
</form></pre>
<HR>
<a name=strike><LI>&lt;strike&gt<P></a>
It <strike>strikes out</strike> the selected text
<HR>
<a name=txt><LI>&lt;textarea&gt<P></a>
This allows us to put 
a panel of text in a <a href=#form>form</a>

<form>
<textarea SIZE=30,5>
 this is a text area,  this is 
 area, this is a text area, th
 a text area, this is a text 
</textarea>
</form>
</ul>
<hr><HR>
<a name=confused Href=#index>
<H1>
<img src=internal-gopher-index align=middle></a>
Incomplete information
</H1>
This section details the areas I am unable to find more information about.
any information will be gratefully received. Please send
working examples to <a href=#me>me</a>
<ul>
<li> Image maps
<li> forms
<li> index
<li> wais
</ul>
<hr><HR>
<a name=characters Href=#index>
<H1>
<img src=internal-gopher-index align=middle></a>
character codes
</H1>
<PRE>
&amp;aacute .... &aacute;    &amp;acirc  .... &acirc;    &amp;aelig  .... &aelig;    
&amp;agrave .... &agrave;    &amp;amp    .... &amp;    &amp;aring  .... &aring;    
&amp;atilde .... &atilde;    &amp;auml   .... &auml;    &amp;ccedil .... &ccedil;    
&amp;eacute .... &eacute;    &amp;ecirc  .... &ecirc;    &amp;egrave .... &egrave;    
&amp;eth    .... &eth;    &amp;euml   .... &euml;    &amp;gt     .... &gt;    
&amp;iacute .... &iacute;    &amp;icirc  .... &icirc;    &amp;igrave .... &igrave;    
&amp;iuml   .... &iuml;    &amp;lt     .... &lt;    &amp;ntilde .... &ntilde;    
&amp;oacute .... &oacute;    &amp;ocirc  .... &ocirc;    &amp;ograve .... &ograve;    
&amp;oslash .... &oslash;    &amp;otilde .... &otilde;    &amp;ouml   .... &ouml;    
&amp;quot   .... &quot;    &amp;szlig  .... &szlig;    &amp;thorn  .... &thorn;    
&amp;uacute .... &uacute;    &amp;ucirc  .... &ucirc;    &amp;ugrave .... &ugrave;    
&amp;uuml   .... &uuml;    &amp;yacute .... &yacute;    &amp;yuml   .... &yuml;    
</PRE>
<hr><HR>
<a name=images Href=#index>
<H1>
<img src=internal-gopher-index align=middle></a>
Internal images
</H1>
<ul>
  <li><img src=internal-gopher-binary> internal-gopher-binary
  <li><img src=internal-gopher-index> internal-gopher-index
  <li><img src=internal-gopher-image> internal-gopher-image
  <li><img src=internal-gopher-menu> internal-gopher-menu
  <li><img src=internal-gopher-movie> internal-gopher-movie
  <li><img src=internal-gopher-sound> internal-gopher-sound
  <li><img src=internal-gopher-text> internal-gopher-text
  <li><img src=internal-gopher-telnet> internal-gopher-telnet
  <li><img src=internal-gopher-unknown> internal-gopher-unknown
</ul>

<hr><HR>
<a name=useful Href=#index>
<H1>
<img src=internal-gopher-index align=middle></a>
Other useful documents
</H1>
<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
A beginners guide to html</A><br>
<A HREF="http://insti.physics.sunysb.edu/AMosaic/home.html">
Amiga</a> Mosaic pages<br>
<A href="ftp://ftp.th-darmstadt.de/pub/text/sgml">
Darmst&auml;dt</a> sgml ftp archive<br>
<A HREF="http://www.w3.org/hypertext/WWW/MarkUp/Tags.html">
Elements of HTML</A><br>
<A HREF="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/htmlwidget.html">
HTML widget help</A><br>
<A HREF="http://www.cis.ohio-state.edu:80/hypertext/faq/usenet/motif-faq/top.html">
Motif faq</A><br>
<A HREF="news:comp.infosystems.www">
www Newsgroup</A><br>
<hr><hr>
<A name=me Href=#index>
<h1>
<img src=internal-gopher-index align=middle></a>
me
</h1>
I can be contacted at the following places.
<ul>
<li>sunil@uel.co.uk
<li>sunil@magnetic.demon.co.uk
<li>sunil@uel.ukb.novell.com
</ul>
<hr><HR>
<A name=end Href=#index>
<h1>
<img src=internal-gopher-index align=middle></a>
This is the end of the document
</h1>
&lt;A name=end href=#backhere&gt;...&lt;/a&gt;<p>
click <A href=#backhere>here</a> to go back to the backhere tag.