<!doctype html public "-//W30//DTD W3 HTML 2.0//EN"> <!-- Header and start of body --> <html><head> <title>Short html reference guide</title> </head><body> <!-- BODY OF HTML DOCUMENT -->
Dafydd Gibbon
University of Bielefeld
July 1995


SHORT HTML REFERENCE GUIDE

Version 1




USAGE


This guide is constructed as compact operational html document for quick reference and for use as a model to be copied in order to provide basic frameworks for html documents. The guide relies heavily on the following Memo:


T. Berners-Lee, CERN; D. Connolly, HaL; K. Muldrow, HaL. (July 1994): HyperText Markup Language (HTML). Version 2.0.




1. BLOCK STRUCTURE TYPES



1.1 Commentary

<!-- Commentary -->


1.2 Header styles:

<h1>h1 - Header style 1</h1> <h2>h2 - Header style 2</h2> <h3>h3 - Header style 3</h3> <h4>h4 - Header style 4</h4> <h5>h5 - Header style 5</h5> <h6>h6 - Header style 6</h6>

h1 - Header style 1

h2 - Header style 2

h3 - Header style 3

h4 - Header style 4

h5 - Header style 5
h6 - Header style 6


1.3 Horizontal rule:

Also used as separator:<hr> Also used as separator:


1.4 Paragraph styles:

Paragraph whitespace (end tag optional): <p align=left>This should be left aligned.</p> <p align=center>This should be centre aligned.</p> <p align=right>This should be right aligned.</p>

This should be left aligned.

This should be centre aligned.

This should be right aligned.


<address>This is an address paragraph.</address>
This is an address paragraph.

<blockquote>This is a block quote paragraph.</blockquote>
This is a block quote paragraph.
<pre>This is a pre-formatted paragraph with <em>highlighting</em>.</pre> 
This is    a pre-formatted   paragraph with  highlighting.
<xmp>This is a verbatim <em>highlightless</em> example paragraph. </xmp> This is a verbatim <em>highlightless</em> example paragraph.


1.5 List styles:

<ul> <li> First bullet of arbitrary length <li> Second bullet of arbitrary length </ul>
<ol> <li> First item <li> Second item </ol>
  1. First item
  2. Second item
<dl compact> <dt>First term:<dd>First definition <dt>Second term:<dd>Second definition </dl>
First term:
First definition
Second term:
Second definition
<dir> <li> First (short) directory item <li> Second (short) directory item </dir>
  • First (short) directory item
  • Second (short) directory item
    • <menu> <li> First menu item <li> Second menu item </menu>
  • First menu item
  • Second menu item






    • 2. HYPERTEXT ELEMENTS



    2.1 Links:



    2.1.1 Anchor link between servers:

    <a href="http://www.hrz.uni-bielfeld.de/welcome.html">Server link description</a> <br><a href="http://www.hrz.uni-bielefeld.de/">Directory link description</ a> <br><a href="file:/homes/gibbon/.public_html/htmlframe.html">File link description</a> Server link descrip tion
    Directory link description
    File link descrip tion

    2.1.2 Anchor link within same document:

    <a name="jump_1"><b>Jump goal 1</b></a> - <a href="#jump_2"> Jump link 2</a> Jump goal 1 - Jump link 2

    <a name="jump_2"><b>Jump goal 2</b></a> - <a href="#jump_1"> Jump link 1</a> Jump goal 2 - Jump link 1


    2.1.3 Image links:

    Aligned images: <img src="FILENAME.gif" alt="Top aligned image" align=top> <img src="FILENAME.gif" alt="Middle aligned image" align=middle> <img src="FILENAME.gif" alt="Bottom aligned image" align=bottom> <br><br>Image map: <img src="FILENAME.gif" ismap> <br>(For linking by image maps, see: <a href="http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/image-maps.html">http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/image-maps.html</a>) Aligned images: Top aligned image Middle aligned image Bottom aligned image

    Image map:
    (For linking by image maps, see: http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/image-maps.html)


    2.1.4 Form links (require external cgi script):

    A: Form header and footer: <br><form method="post" action="html_guide.html">
    B: Keyboard input: <b>(1) Input line prompt:</b> <input name="keyboard" size="24" value="Default value."> (1) Input line prompt: <b>(2) Text area prompt:</b><br><textarea name="textarea" cols=24 rows=4>This is a default text area value. This is line two.</textarea> (2) Text area prompt:


    The text area fields are treated differently by netscape and lynx:
    netscape: Permits line breaks in default value.
    lynx: Does not tolerate line breaks in default value (Bad html warning).


    (3) Buttons:

    Checkbox buttons: <b>First:<input name="TEXT" type="checkbox" value="DEFAULT_VALUE"> <b>Second:</b> <input name="TEXT" type="checkbox" value="DEFAULT_VALUE"> <b>Third:</b> <input name="TEXT" type="checkbox" value="DEFAULT_VALUE"> First: Second: Third:

    Radio buttons: <b>First:</b> <input name="TEXT" type="radio" value="DEFAULT_VALUE"> <b>Second:</b> <input name="TEXT" type="radio" value="DEFAULT_VALUE"> <b>Third:</b> <input name="TEXT" type="radio" value="DEFAULT_VALUE"> First: Second: Third:

    Image buttons: <b>First:</b><INPut name="TEXT" type="image" align=middle value="DEFAULT_VALUE"> <b>Second:</b><input name="TEXT" type="image" align=middle src="file.gif" value="DEFAULT_VALUE"> First: Second:

    Image buttons are interpreted differently by netscape and lynx:
    netscape: Just prints the images with no user input.
    lynx: Treats like ordinary input field with user input.


    (4) Pulldown/popup list: <select name="TEXT"> <option selected>Peanut butter<option>Jam <option>Honey<option>Marmalade </Select>


    (e)Hidden values (not visible to or influenced by user): <br><input name="name_1" type="hidden" value="DEFAULT_VALUE"> <input name="name_2" type="hidden" value="DEFAULT_VALUE"> <input name="name_3" type="hidden" value="DEFAULT_VALUE">
    C: End of form:

    Since no cgi script is available, submitting defaults to the current document. <input type=submit><input type=reset></form>


    2.2 Text



    2.2.1 Special characters:

    Line break (two of them): <br><br> <br>Unbreadable space &nbsp; &nbsp; &nbsp; &nbsp; up to here. <br>Metachars: &lt; &gt; &amp; &quot; <br>German chars: &Auml; &auml; &Ouml; &ouml; &Uuml; &uuml; &szlig; Line break (two of them):


    Unbreadable space         up to here.
    Metachars: < > & "
    German chars: Ä ä Ö ö Ü ü ß


    2.2.2 Fonts:

    <cite>This is the citation font.</cite> <br><code>This is the font for code hard copy.</code> <br><kbd>This is the font for representing keyboard input.</kbd> <br><tt>This is the teletype or courier typewriter font</tt> <br><samp>This is the font for sequences of literals.</samp> This is the citation font.
    This is the font for code hard copy.
    This is the font for representing keyboard input.
    This is the teletype or courier typewriter font
    This is the font for sequences of literals.


    2.2.3 Highlights:

    <em>This is the emphasis highlight (typically italic).</em> <br><strong>This is the strength highlight (typically bold face).</strong> <br><i>This is italic.</i> <br><b>This is bold face.</b> <br><u>This should be underlined.</u> <br><blink>This should be blinking.</blink>
    This is the emphasis highlight (typically italic).
    This is the strength highlight (typically bold face).
    This is italic.
    This is bold face.
    This should be underlined.
    This should be blinking.

    <address> <a href="http:// coral.lili.uni-bielefeld.de/~gibbon/"> Dafydd Gibbon</a>, Mon Jul 10 11:43:47 MET DST 1995 </address>
    Dafydd Gibbon, Mon Jul 10 11:43:47 MET DST 1995
    <!-- End of body and file --> </body></html>