mirror of https://github.com/rusefi/KiCad-Diff.git
2208 lines
72 KiB
HTML
2208 lines
72 KiB
HTML
<HTML>
|
||
<HEAD>
|
||
<TITLE>Rex Swain's HTML Sampler</TITLE>
|
||
<META NAME="description"
|
||
CONTENT="See how your browser renders various HTML elements">
|
||
<META NAME="keywords" CONTENT="Rex Swain, Rexford H. Swain, HTML,
|
||
sample, sampler, cheat sheet, examples">
|
||
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
|
||
</HEAD>
|
||
|
||
<BODY>
|
||
|
||
|
||
<!-- Google AdSense added 8/12/2003 -->
|
||
<TABLE ALIGN=right WIDTH=176 BORDER=0 CELLSPACING=0 CELLPADDING=0>
|
||
<TR>
|
||
<TD WIDTH=16> </TD>
|
||
<TD WIDTH=160>
|
||
<script type="text/javascript"><!--
|
||
google_ad_client = "pub-7510521706485409";
|
||
google_ad_width = 160;
|
||
google_ad_height = 600;
|
||
google_ad_format = "160x600_as";
|
||
google_color_border = "336699";
|
||
google_color_bg = "FFFFFF";
|
||
google_color_link = "0000FF";
|
||
google_color_url = "008000";
|
||
google_color_text = "000000";
|
||
google_ad_channel = "4831574137";
|
||
//--></script>
|
||
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
|
||
</TD></TR></TABLE>
|
||
|
||
|
||
<CENTER>
|
||
<H1>Rex Swain's HTML Sampler</H1>
|
||
<H4>See how your browser renders various HTML elements</H4>
|
||
<P>Last updated 5 December 1999<BR>
|
||
<FONT SIZE=-1>[Minor corrections 19 September 2004]</FONT></P>
|
||
</CENTER>
|
||
|
||
<H3>Contents</H3>
|
||
|
||
<TABLE><TR><TD VALIGN=top>
|
||
<UL>
|
||
|
||
<LI><A HREF="#head ">HEAD Elements</A>
|
||
<UL>
|
||
<LI><A HREF="#title ">TITLE</A>
|
||
<LI><A HREF="#base ">BASE</A>
|
||
<LI><A HREF="#meta ">META</A>
|
||
</UL>
|
||
|
||
<LI><A HREF="#comments">Comments</A>
|
||
|
||
<LI><A HREF="#headsize">Headings</A>
|
||
|
||
<LI><A HREF="#fonts ">Fonts</A>
|
||
<UL>
|
||
<LI><A HREF="#fontsize">Font Sizes</A>
|
||
<LI><A HREF="#basefont">Base Font Size</A>
|
||
<LI><A HREF="#expstyle">Explicit Font Styles</A>
|
||
<LI><A HREF="#logstyle">Logical Font Styles</A>
|
||
</UL>
|
||
|
||
<LI><A HREF="#lists ">Lists</A>
|
||
<UL>
|
||
<LI><A HREF="#ulists ">Unordered Lists</A>
|
||
<LI><A HREF="#olists ">Ordered Lists</A>
|
||
<LI><A HREF="#deflists">Definition Lists</A>
|
||
<LI><A HREF="#lists2 ">Other Lists</A>
|
||
</UL>
|
||
|
||
<LI><A HREF="#textflow">Text Flow</A>
|
||
<UL>
|
||
<LI><A HREF="#paravbr ">Paragraph vs. Break</A>
|
||
<LI><A HREF="#nobreak ">No Break</A>
|
||
<LI><A HREF="#wordbr ">Word Break</A>
|
||
<LI><A HREF="#paragr ">Paragraph Alignment</A>
|
||
<LI><A HREF="#center ">Centering</A>
|
||
<LI><A HREF="#division">Division Alignment</A>
|
||
<LI><A HREF="#blockq ">Block Quotes</A>
|
||
<LI><A HREF="#notes ">Notes</A>
|
||
<LI><A HREF="#fnotes ">Footnotes</A>
|
||
<LI><A HREF="#banner ">Banners</A>
|
||
<LI><A HREF="#indent ">Indenting Techniques</A>
|
||
</UL>
|
||
|
||
<LI><A HREF="#colors ">Colors</A>
|
||
<UL>
|
||
<LI><A HREF="#tcolors ">Text Colors</A>
|
||
<LI><A HREF="#bgcolors">Background Colors</A>
|
||
<LI><A HREF="#excolors">Text, Background & Link Colors</A>
|
||
</UL>
|
||
|
||
</UL></TD><TD VALIGN=top><UL>
|
||
|
||
<LI><A HREF="#tables ">Tables</A>
|
||
<UL>
|
||
<LI><A HREF="#tablee ">Table Elements</A>
|
||
<LI><A HREF="#captiona">Caption Alignment</A>
|
||
<LI><A HREF="#borders ">Table Borders</A>
|
||
<LI><A HREF="#tablew ">Table Width & Height</A>
|
||
<LI><A HREF="#tablea ">Table Alignment</A>
|
||
<LI><A HREF="#horiza ">Horizontal Cell Alignment</A>
|
||
<LI><A HREF="#vertia ">Vertical Cell Alignment</A>
|
||
<LI><A HREF="#cellspa ">Cell Spacing & Padding</A>
|
||
<LI><A HREF="#colwidth">Column Width</A>
|
||
<LI><A HREF="#nowrap ">NOWRAP</A>
|
||
<LI><A HREF="#tabspan ">Row/Column Span</A>
|
||
</UL>
|
||
|
||
<LI><A HREF="#rules ">Horizontal Rules</A>
|
||
|
||
<LI><A HREF="#links ">Links and Anchors</A>
|
||
|
||
<LI><A HREF="#forms ">Forms</A>
|
||
<UL>
|
||
<LI><A HREF="#ftext ">Text Elements</A>
|
||
<LI><A HREF="#fradio ">Radio Buttons</A>
|
||
<LI><A HREF="#fcheck ">Checkboxes</A>
|
||
<LI><A HREF="#fselect ">Selection Lists</A>
|
||
<LI><A HREF="#fhidden ">Hidden Fields</A>
|
||
<LI><A HREF="#fsubmit ">Submit/Reset Buttons</A>
|
||
</UL>
|
||
|
||
<LI><A HREF="#images ">Images</A>
|
||
<UL>
|
||
<LI><A HREF="#imagev ">Vertical Image Alignment</A>
|
||
<LI><A HREF="#imageh ">Horizontal Image Alignment</A>
|
||
<LI><A HREF="#imageb ">Image Space & Border</A>
|
||
<LI><A HREF="#imalt ">Image Alternate Text</A>
|
||
<LI><A HREF="#imsize ">Image Size & Scale</A>
|
||
<LI><A HREF="#inimages">Internal Images</A>
|
||
<LI><A HREF="#csim ">Client-Side Image Maps</A>
|
||
<LI><A HREF="#bgimage ">Background Image</A>
|
||
<LI><A HREF="#figure ">Figure Element</A>
|
||
</UL>
|
||
|
||
<LI><A HREF="#chars ">Character Entities</A>
|
||
|
||
</UL>
|
||
</TD></TR>
|
||
</TABLE>
|
||
|
||
<H3>Other Summaries and Demos</H3>
|
||
<UL>
|
||
<LI>See my <A HREF="index.html">home page</A> for other summaries and demos:
|
||
APL, REXX, XEDIT, Perl, HTML, RGB Colors, HTTP Cookies, Email Forms,
|
||
CGI Environment Variables, Server Side Includes, etc...
|
||
</UL>
|
||
|
||
<P><HR NOSHADE SIZE=4></P>
|
||
|
||
<A NAME="head"></A>
|
||
<H2>HEAD Elements</H2>
|
||
<UL>
|
||
The HEAD contains general information about the document.
|
||
None of the elements authorized to exist in the contents
|
||
of the HEAD are displayed; the displayed material is found within the BODY.
|
||
|
||
<A NAME="title"></A>
|
||
<H3>TITLE</H3>
|
||
<UL>
|
||
<TT><TITLE>...</TITLE></TT>
|
||
<P>
|
||
The TITLE is not part of the document text.
|
||
Often the title is used by a browser to label the display window.
|
||
Some Web search engines only search the title of Web pages.
|
||
Therefore the text of the TITLE should be kept short but
|
||
sufficient to identify the document.
|
||
</UL>
|
||
|
||
<A NAME="base"></A>
|
||
<H3>BASE</H3>
|
||
<UL>
|
||
<TT><BASE HREF="..." TARGET="..."></TT>
|
||
<P>
|
||
The BASE element provides the absolute URL base to be used for any
|
||
relative URL links in this document.
|
||
It must be a complete file name, and is usually the original URL of this document.
|
||
If this file is moved, having the BASE set to the original URL eliminates
|
||
the need to also move all the documents which are identified by relative
|
||
URL links in this document.
|
||
<P>
|
||
Netscape 2.0 defines the TARGET attribute to define a default named target window for
|
||
every link in a document that does not have an explicit TARGET attribute.
|
||
</UL>
|
||
|
||
<A NAME="meta"></A>
|
||
<H3>META</H3>
|
||
<UL>
|
||
<TT><META HTTP-EQUIV="..." NAME="..." CONTENT="..."></TT>
|
||
<P>
|
||
The META element is used within the HEAD element to embed document meta-information
|
||
not defined by other HTML elements.
|
||
Such information may be extracted by servers/browsers.
|
||
The HTTP-EQUIV attribute binds the element to an HTTP response header.
|
||
If not present, the NAME attribute should be used to identify this
|
||
meta-information and it should not be used within an HTTP response header.
|
||
If the NAME attribute is not present, the name can be assumed equal to the
|
||
value of HTTP-EQUIV.
|
||
The CONTENT attribute defines the meta-information
|
||
content to be associated with the given name and/or HTTP response header.
|
||
<P>
|
||
The URL attribute is a Netscape extension.
|
||
Netscape 1.1 has added a automatic refresh capability using the META
|
||
element by setting the HTTP-EQUIV attribute to "REFRESH",
|
||
the CONTENT attribute to a number of seconds, and
|
||
the URL attribute to the file to load which defaults to reloading the same file.
|
||
Netscape 1.1 also recognizes placing the URL inside the quotes which define the
|
||
CONTENT value by using a semicolon following the number of seconds,
|
||
then the URL=http://... text. For example:
|
||
<P>
|
||
<LI><TT><META HTTP-EQUIV="refresh" CONTENT=30 URL="http://..."></TT>
|
||
<LI><TT><META HTTP-EQUIV="refresh" CONTENT="30;URL=http://..."></TT>
|
||
<P>
|
||
Some Web search engines look for the following META elements:
|
||
<P>
|
||
<LI><TT><META NAME="description" CONTENT="text ..."></TT>
|
||
<LI><TT><META NAME="keywords" CONTENT="kw, kw kw ..."></TT>
|
||
<P>
|
||
You can avoid browser caching with one of the following:
|
||
<P>
|
||
<LI><TT><META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"></TT>
|
||
<LI><TT><META HTTP-EQUIV="Pragma" CONTENT="no-cache"></TT>
|
||
<P>
|
||
See <A HREF="http://vancouver-webpages.com/META/">http://vancouver-webpages.com/META/</A>
|
||
for more details.
|
||
</UL>
|
||
</UL>
|
||
|
||
<A NAME="comments"></A>
|
||
<H2>Comments</H2>
|
||
<UL>
|
||
<H3>Single-Line Comments</H3>
|
||
<UL>
|
||
HTML comments are coded as:
|
||
<P>
|
||
<TT><!-- comment --></TT>
|
||
<P>
|
||
Here comes one now (you should <I>not</I> see "This Is A Comment" below):
|
||
<!-- This Is A Comment -->
|
||
</UL>
|
||
<H3>Multi-Line Comments</H3>
|
||
<UL>
|
||
<P>
|
||
Many browsers permit multi-line comments, coded as:
|
||
<P>
|
||
<TT><!-- comment
|
||
<BR>...
|
||
<BR>comment --></TT>
|
||
<P>
|
||
Here comes one now (you should <I>not</I> see "This Is A Comment" below):
|
||
<!-- This
|
||
Is A
|
||
Comment -->
|
||
</UL>
|
||
</UL>
|
||
|
||
<A NAME="headsize"></A>
|
||
<H2>Headings</H2>
|
||
<UL>
|
||
Note that headings automatically generate vertical spacing
|
||
both above and below the heading.
|
||
<P>
|
||
<TABLE BORDER=1>
|
||
<TR><TD><TT><H1>...</H1></TT></TD><TD>Normal <H1>Heading 1</H1> Normal</TD></TR>
|
||
<TR><TD><TT><H2>...</H2></TT></TD><TD>Normal <H2>Heading 2</H2> Normal</TD></TR>
|
||
<TR><TD><TT><H3>...</H3></TT></TD><TD>Normal <H3>Heading 3</H3> Normal</TD></TR>
|
||
<TR><TD><TT><H4>...</H4></TT></TD><TD>Normal <H4>Heading 4</H4> Normal</TD></TR>
|
||
<TR><TD><TT><H5>...</H5></TT></TD><TD>Normal <H5>Heading 5</H5> Normal</TD></TR>
|
||
<TR><TD><TT><H6>...</H6></TT></TD><TD>Normal <H6>Heading 6</H6> Normal</TD></TR>
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="fonts"></A>
|
||
<H2>Fonts</H2>
|
||
<UL>
|
||
|
||
<A NAME="fontsize"></A>
|
||
<H3>Font Sizes</H3>
|
||
<UL>
|
||
<P>Font sizes range from 1 through 7.
|
||
The base font size is normally 3; specifying +n or -n adjusts from there.</P>
|
||
|
||
<TABLE BORDER=1>
|
||
<TR><TD><TT><FONT SIZE=1>...</FONT><BR><FONT SIZE="-2">...</FONT></TT><TD>Normal <FONT SIZE=1>Equals 1</FONT> Normal<BR> Normal <FONT SIZE="-2">Minus 2</FONT> Normal
|
||
<TR><TD><TT><FONT SIZE=2>...</FONT><BR><FONT SIZE="-1">...</FONT></TT><TD>Normal <FONT SIZE=2>Equals 2</FONT> Normal<BR> Normal <FONT SIZE="-1">Minus 1</FONT> Normal
|
||
<TR><TD><TT><FONT SIZE=3>...</FONT><BR><FONT SIZE="-0">...</FONT><BR><FONT SIZE="+0">...</FONT></TT><TD>Normal <FONT SIZE=3>Equals 3</FONT> Normal<BR>Normal <FONT SIZE="-0">Minus 0</FONT> Normal<BR>Normal <FONT SIZE="+0">Plus 0</FONT> Normal
|
||
<TR><TD><TT><FONT SIZE=4>...</FONT><BR><FONT SIZE="+1">...</FONT></TT><TD>Normal <FONT SIZE=4>Equals 4</FONT> Normal<BR>Normal <FONT SIZE="+1">Plus 1</FONT> Normal
|
||
<TR><TD><TT><FONT SIZE=5>...</FONT><BR><FONT SIZE="+2">...</FONT></TT><TD>Normal <FONT SIZE=5>Equals 5</FONT> Normal<BR>Normal <FONT SIZE="+2">Plus 2</FONT> Normal
|
||
<TR><TD><TT><FONT SIZE=6>...</FONT><BR><FONT SIZE="+3">...</FONT></TT><TD>Normal <FONT SIZE=6>Equals 6</FONT> Normal<BR>Normal <FONT SIZE="+3">Plus 3</FONT> Normal
|
||
<TR><TD><TT><FONT SIZE=7>...</FONT><BR><FONT SIZE="+4">...</FONT></TT><TD>Normal <FONT SIZE=7>Equals 7</FONT> Normal<BR>Normal <FONT SIZE="+4">Plus 4</FONT> Normal
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="basefont"></A>
|
||
<H3>Base Font Size</H3>
|
||
<UL>
|
||
|
||
The BASEFONT element may be used to change the default font size from this point on.
|
||
For example:
|
||
<P>
|
||
<TT><BASEFONT SIZE="+2"></TT>
|
||
</UL>
|
||
|
||
<A NAME="expstyle"></A>
|
||
<H3>Explicit Font Styles</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<TR><TD><TT><B>...</B></TT><TD>Normal <B>Bold style</B>
|
||
<TR><TD><TT><I>...</I></TT><TD>Normal <I>Italic style</I>
|
||
<TR><TD><TT><U>...</U></TT><TD>Normal <U>Underlined style</U>
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="logstyle"></A>
|
||
<H3>Logical Font Styles</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<CAPTION><TT><CAPTION>...</CAPTION></TT> style</CAPTION>
|
||
<TR><TD><TT><ABBREV>...</ABBREV></TT><TD>Normal <ABBREV>Abbreviation style</ABBREV> Normal
|
||
<TR><TD><TT><ACRONYM>...</ACRONYM></TT><TD>Normal <ACRONYM>Acronym style</ACRONYM> Normal
|
||
<TR><TD><TT><ADDRESS>...</ADDRESS></TT><TD>Normal <ADDRESS>Address style</ADDRESS> Normal
|
||
<TR><TD><TT><AU>...</AU></TT><TD>Normal <AU>Author style</AU> Normal
|
||
<TR><TD><TT><BIG>...</BIG></TT><TD>Normal <BIG>Big style</BIG> Normal
|
||
<TR><TD><TT><BLINK>...</BLINK></TT><TD>Normal <BLINK>Blink style</BLINK> Normal
|
||
<TR><TD><TT><CITE>...</CITE></TT><TD>Normal <CITE>Citation style</CITE> Normal
|
||
<TR><TD><TT><CODE>...</CODE></TT><TD>Normal <CODE>Code style</CODE> Normal
|
||
<TR><TD><TT><DEL>...</DEL></TT><TD>Normal <DEL>Deleted style</DEL> Normal
|
||
<TR><TD><TT><DFN>...</DFN></TT><TD>Normal <DFN>Defining Instance style</DFN> Normal
|
||
<TR><TD><TT><EM>...</EM></TT><TD>Normal <EM>Emphasis style</EM> Normal
|
||
<TR><TD><TT><INS>...</INS></TT><TD>Normal <INS>Inserted style</INS> Normal
|
||
<TR><TD><TT><KBD>...</KBD></TT><TD>Normal <KBD>Keyboard style</KBD> Normal
|
||
<TR><TD><TT><LISTING>...</LISTING></TT><TD>Normal <LISTING>Listing style</LISTING> Normal
|
||
<TR><TD><TT><PERSON>...</PERSON></TT><TD>Normal <PERSON>Person style</PERSON> Normal
|
||
<TR><TD><TT><PRE>...</PRE></TT><TD>Normal <PRE>Preformatted style</PRE> Normal
|
||
<TR><TD><TT><Q>...</Q></TT><TD>Normal <Q>Quotation style</Q> Normal
|
||
<TR><TD><TT><S>...</S></TT><TD>Normal <S>Strikethrough style</S> Normal
|
||
<TR><TD><TT><SAMP>...</SAMP></TT><TD>Normal <SAMP>Sample style</SAMP> Normal
|
||
<TR><TD><TT><SMALL>...</SMALL></TT><TD>Normal <SMALL>Small style</SMALL> Normal
|
||
<TR><TD><TT><STRIKE>...</STRIKE></TT><TD>Normal <STRIKE>Strikethrough style</STRIKE> Normal
|
||
<TR><TD><TT><STRONG>...</STRONG></TT><TD>Normal <STRONG>Strong style</STRONG> Normal
|
||
<TR><TD><TT><SUB>...</SUB></TT><TD>Normal <SUB>Subscripted style</SUB> Normal
|
||
<TR><TD><TT><SUP>...</SUP></TT><TD>Normal <SUP>Superscripted style</SUP> Normal
|
||
<TR><TD><TT><TT>...</TT></TT><TD>Normal <TT>TeleType style</TT> Normal
|
||
<TR><TD><TT><VAR>...</VAR></TT><TD>Normal <VAR>Variable style</VAR> Normal
|
||
<TR><TD ROWSPAN=2><TT><XMP>...</XMP></TT><TD>Normal <XMP>XMP style</XMP> Normal
|
||
<TR><TD>Note: tags within an XMP block are not interpreted!
|
||
<BR><XMP>XMP: Here's an & ampersand</XMP>
|
||
Normal: Here's an & ampersand
|
||
</TABLE>
|
||
</UL>
|
||
</UL>
|
||
|
||
<A NAME="lists"></A>
|
||
<H2>Lists</H2>
|
||
<UL>
|
||
|
||
<A NAME="ulists"></A>
|
||
<H3>Unordered Lists</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR>
|
||
<TD>Unordered List
|
||
<TD><TT>
|
||
<UL><BR>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
<LI>Item 3<BR>
|
||
</UL>
|
||
</TT>
|
||
<TD>
|
||
<UL>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(multi-level)
|
||
<TD><TT>
|
||
<UL><BR>
|
||
<LI>Level 1, Item 1<BR>
|
||
<UL><BR>
|
||
<LI>Level 2, Item 1<BR>
|
||
<UL><BR>
|
||
<LI>Level 3, Item 1<BR>
|
||
<LI>Level 3, Item 2<BR>
|
||
</UL><BR>
|
||
<LI>Level 2, Item 2<BR>
|
||
</UL><BR>
|
||
</UL>
|
||
</TT>
|
||
<TD>
|
||
<UL><LI>Level 1, Item 1
|
||
<UL><LI>Level 2, Item 1
|
||
<UL><LI>Level 3, Item 1
|
||
<LI>Level 3, Item 2
|
||
</UL>
|
||
<LI>Level 2, Item 2
|
||
</UL>
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with option)
|
||
<TD><TT><UL PLAIN><BR>...<BR></UL></TT><TD>
|
||
<UL PLAIN>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with options)
|
||
<TD><TT><UL PLAIN COMPACT><BR>...<BR></UL></TT><TD>
|
||
<UL PLAIN COMPACT>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with options)
|
||
<TD><TT><UL PLAIN WRAP=horiz><BR>...<BR></UL></TT><TD>
|
||
<UL PLAIN WRAP=horiz>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with List Heading)
|
||
<TD><TT>
|
||
<UL><BR>
|
||
<LH>Heading</LH><BR>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
</UL>
|
||
</TT><TD>
|
||
<UL>
|
||
<LH>Heading</LH>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with bullet style option)
|
||
<TD><TT><UL TYPE=circle><BR>...<BR></UL></TT><TD>
|
||
<UL TYPE=circle>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with bullet style option)
|
||
<TD><TT><UL TYPE=square><BR>...<BR></UL></TT><TD>
|
||
<UL TYPE=square>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with bullet style option)
|
||
<TD><TT><UL TYPE=disc><BR>...<BR></UL></TT><TD>
|
||
<UL TYPE=disc>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(with bullet style options)
|
||
<TD><TT>
|
||
<UL><BR>
|
||
<LI TYPE=circle>...<BR>
|
||
<LI TYPE=square>...<BR>
|
||
<LI TYPE=disc>...<BR>
|
||
</UL>
|
||
</TT><TD>
|
||
<UL>
|
||
<LI TYPE=circle>Item 1
|
||
<LI TYPE=square>Item 2
|
||
<LI TYPE=disc>Item 3
|
||
</UL>
|
||
|
||
<TR>
|
||
<TD>Unordered List<BR>(items without list)
|
||
<TD><TT>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
<LI>Item 3<BR>
|
||
</TT><TD>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
|
||
<TR>
|
||
<TD>Directory List<BR>(like an unordered list)
|
||
<BR><I>Items should be less<BR>than 20 characters long</I>
|
||
<TD><TT>
|
||
<DIR><BR>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
<LI>Item 3<BR>
|
||
</DIR>
|
||
</TT><TD>
|
||
<DIR>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</DIR>
|
||
|
||
<TR>
|
||
<TD>Menu List<BR>(like an unordered list)
|
||
<BR><I>Presents an interactive list<BR>(?)</I>
|
||
<TD><TT>
|
||
<MENU><BR>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
<LI>Item 3<BR>
|
||
</MENU>
|
||
</TT><TD>
|
||
<MENU>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</MENU>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="olists"></A>
|
||
<H3>Ordered Lists</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR>
|
||
<TD>Ordered List
|
||
<TD><TT>
|
||
<OL><BR>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
<LI>Item 3<BR>
|
||
</OL>
|
||
</TT>
|
||
<TD>
|
||
<OL>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</OL>
|
||
|
||
<TR>
|
||
<TD>Ordered List<BR>(multi-level)
|
||
<TD><TT>
|
||
<OL><BR>
|
||
<LI>Level 1, Item 1<BR>
|
||
<OL><BR>
|
||
<LI>Level 2, Item 1<BR>
|
||
<OL><BR>
|
||
<LI>Level 3, Item 1<BR>
|
||
<LI>Level 3, Item 2<BR>
|
||
</OL><BR>
|
||
<LI>Level 2, Item 2<BR>
|
||
</OL><BR>
|
||
</OL>
|
||
</TT>
|
||
<TD>
|
||
<OL><LI>Level 1, Item 1
|
||
<OL><LI>Level 2, Item 1
|
||
<OL><LI>Level 3, Item 1
|
||
<LI>Level 3, Item 2
|
||
</OL>
|
||
<LI>Level 2, Item 2
|
||
</OL>
|
||
</OL>
|
||
|
||
<TR>
|
||
<TD>Ordered List<BR>(with option)
|
||
<TD><TT><OL TYPE="i"><BR>...<BR></OL></TT><TD>
|
||
<OL TYPE="i">
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
<LI>Item 4
|
||
<LI>Item 5
|
||
</OL>
|
||
|
||
<TR>
|
||
<TD>Ordered List<BR>(with options)
|
||
<TD><TT><OL TYPE="I" START=6><BR>...<BR></OL></TT><TD>
|
||
<OL TYPE="I" START=6>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
<LI>Item 4
|
||
<LI>Item 5
|
||
</OL>
|
||
|
||
<TR>
|
||
<TD>Ordered List<BR>(with option)
|
||
<TD><TT><OL TYPE="a"><BR>...<BR></OL></TT><TD>
|
||
<OL TYPE="a">
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
<LI>Item 4
|
||
<LI>Item 5
|
||
</OL>
|
||
|
||
<TR>
|
||
<TD>Ordered List<BR>(with option)
|
||
<TD><TT><OL TYPE="A"><BR>...<BR></OL></TT><TD>
|
||
<OL TYPE="A">
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
<LI>Item 4
|
||
<LI>Item 5
|
||
</OL>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="deflists"></A>
|
||
<H3>Definition Lists</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Definition List<TD><TT>
|
||
<DL><BR>
|
||
<DT>Term 1<BR>
|
||
<DD>Defn 1<BR>
|
||
<DT>Term 2<BR>
|
||
<DD>Defn 2<BR>
|
||
...<BR>
|
||
</DL>
|
||
</TT><TD>
|
||
<DL>
|
||
<DT>
|
||
This is the <DT> text.
|
||
<DD>
|
||
This is the <DD> text.
|
||
<DT>
|
||
Here's a second hunk of <DT> text repeated three times.
|
||
Here's a second hunk of <DT> text repeated three times.
|
||
Here's a second hunk of <DT> text repeated three times.
|
||
<DD>
|
||
Here's a second hunk of <DD> text repeated three times.
|
||
Here's a second hunk of <DD> text repeated three times.
|
||
Here's a second hunk of <DD> text repeated three times.
|
||
<DT>DT<DD>DD following very short DT
|
||
<DT>DT<DD>DD following very short DT
|
||
</DL>
|
||
|
||
<TR><TD>Definition List<BR>(with option)<TD><TT>
|
||
<DL COMPACT><BR>
|
||
<DT>Term 1<BR>
|
||
<DD>Defn 1<BR>
|
||
<DT>Term 2<BR>
|
||
<DD>Defn 2<BR>
|
||
...<BR>
|
||
</DL>
|
||
</TT><TD>
|
||
<DL COMPACT>
|
||
<DT>
|
||
This is the <DT> text.
|
||
<DD>
|
||
This is the <DD> text.
|
||
<DT>
|
||
Here's a second hunk of <DT> text repeated three times.
|
||
Here's a second hunk of <DT> text repeated three times.
|
||
Here's a second hunk of <DT> text repeated three times.
|
||
<DD>
|
||
Here's a second hunk of <DD> text repeated three times.
|
||
Here's a second hunk of <DD> text repeated three times.
|
||
Here's a second hunk of <DD> text repeated three times.
|
||
<DT>DT<DD>DD following very short DT
|
||
<DT>DT<DD>DD following very short DT
|
||
</DL>
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="lists2"></A>
|
||
<H3>Other Lists</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR>
|
||
<TD>Directory List<BR>(like an unordered list)
|
||
<BR><I>Items should be less<BR>than 20 characters long</I>
|
||
<TD><TT>
|
||
<DIR><BR>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
<LI>Item 3<BR>
|
||
</DIR>
|
||
</TT><TD>
|
||
<DIR>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</DIR>
|
||
|
||
<TR>
|
||
<TD>Menu List<BR>(like an unordered list)
|
||
<BR><I>Presents an interactive list<BR>(?)</I>
|
||
<TD><TT>
|
||
<MENU><BR>
|
||
<LI>Item 1<BR>
|
||
<LI>Item 2<BR>
|
||
<LI>Item 3<BR>
|
||
</MENU>
|
||
</TT><TD>
|
||
<MENU>
|
||
<LI>Item 1
|
||
<LI>Item 2
|
||
<LI>Item 3
|
||
</MENU>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
</UL>
|
||
|
||
<A NAME="textflow"></A>
|
||
<H2>Text Flow</H2>
|
||
<UL>
|
||
|
||
<A NAME="paravbr"></A>
|
||
<H3>Paragraph vs. Break</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Paragraph<TD><TT>...<BR><P><BR>...</TT><TD>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
Note that a closing </P> is optional in most browsers, and is not used here.
|
||
Here comes a <P> ...
|
||
<P>
|
||
This is the beginning of another paragraph.
|
||
Note that <P> inserts a blank line.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
|
||
<TR><TD>Paragraph<BR>(with closing tag)<TD><TT><P><BR>...<BR></P></TT><TD>
|
||
Netscape adds a blank line after a paragraph which ends with a </P>.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
Here comes a </P> and then another <P> ...</P>
|
||
<P>
|
||
This is the beginning of another paragraph.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
Here comes a </P>.</P>
|
||
|
||
<TR><TD>Break<TD><TT>...<BR><BR><BR>...</TT><TD>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
Here comes a <BR> ...
|
||
<BR>
|
||
Note that <BR> does NOT insert a blank line.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="nobreak"></A>
|
||
<H3>No Break</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<TR><TD>Normal
|
||
<TD><TT>...</TT><TD>
|
||
This is some text repeated three times.
|
||
This is some text repeated three times.
|
||
This is some text repeated three times.
|
||
<TR><TD>No Break
|
||
<TD><TT><NOBR><BR>...<BR></NOBR></TT><TD>
|
||
<NOBR>
|
||
This is some text repeated three times.
|
||
This is some text repeated three times.
|
||
This is some text repeated three times.
|
||
</NOBR>
|
||
</TABLE>
|
||
<P>
|
||
If necessary, reduce the width of your browser's window.
|
||
Notice that NOBR prevents the text from breaking (word-wrapping).
|
||
</UL>
|
||
|
||
<A NAME="wordbr"></A>
|
||
<H3>Word Break</H3>
|
||
<UL>
|
||
|
||
Use the <TT><WBR></TT> tag to insert an optional word break
|
||
in the middle of a very long "word".
|
||
<P>
|
||
In the examples below, there are 52 letters (A through Z repeated twice).
|
||
In the first case, there are no spaces; in the second case, there is a
|
||
<TT><WBR></TT> word break between the first Z and second A.
|
||
<P>
|
||
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||
<P>
|
||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<WBR>ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||
<P>
|
||
If the browser window is wide enough to display the entire word, it appears
|
||
without any space or break.
|
||
If the window is not wide enough, the <TT><WBR></TT> tag
|
||
tells the browser where it may break the word.
|
||
(You may have to reduce the
|
||
width of your browser's window to see the difference.)
|
||
<P>
|
||
This is particularly useful for citing very long URLs.
|
||
</UL>
|
||
|
||
<A NAME="paragr"></A>
|
||
<H3>Paragraph Alignment</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Paragraph<BR>(with alignment option)<TD><TT><P ALIGN=left><BR>...</TT><TD>
|
||
<P ALIGN=left>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
|
||
<TR><TD>Paragraph<BR>(with alignment option)<TD><TT><P ALIGN=right><BR>...</TT><TD>
|
||
<P ALIGN=right>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
|
||
<TR><TD>Paragraph<BR>(with alignment option)<TD><TT><P ALIGN=center><BR>...</TT><TD>
|
||
<P ALIGN=center>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="center"></A>
|
||
<H3>Centering</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Center<TD><TT><CENTER><BR>...<BR></CENTER></TT><TD>
|
||
<CENTER>
|
||
Note that <CENTER> can center nearly anything: headings, text, tables, etc.
|
||
This is some text repeated a bunch of times.
|
||
This is some text.
|
||
Here comes a <H4> heading...
|
||
<H4>A Heading</H4>
|
||
This is some more text repeated a bunch of times.
|
||
This is some text.
|
||
This is some text repeated a bunch of times.</CENTER>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="division"></A>
|
||
<H3>Division Alignment</H3>
|
||
|
||
<UL>
|
||
Like <CENTER>, <DIVISION> may be used to align blocks of other elements.
|
||
<P>
|
||
<DIV align=left>
|
||
This is the beginning of a <TT><DIV ALIGN=left></TT> block
|
||
<H4>This is an H4 heading</H4>
|
||
An unordered list:
|
||
<UL><LI>One<LI>Two<LI>Three, etc.</UL>
|
||
This is the end of the division; here comes <TT></DIV></TT>
|
||
</DIV>
|
||
|
||
<P>
|
||
<DIV align=center>
|
||
This is the beginning of a <TT><DIV ALIGN=center></TT> block
|
||
<H4>This is an H4 heading</H4>
|
||
An unordered list:
|
||
<UL><LI>One<LI>Two<LI>Three, etc.</UL>
|
||
This is the end of the division; here comes <TT></DIV></TT>
|
||
</DIV>
|
||
|
||
<P>
|
||
<DIV align=right>
|
||
This is the beginning of a <TT><DIV ALIGN=right></TT> block
|
||
<H4>This is an H4 heading</H4>
|
||
An unordered list:
|
||
<UL><LI>One<LI>Two<LI>Three, etc.</UL>
|
||
This is the end of the division; here comes <TT></DIV></TT>
|
||
</DIV>
|
||
|
||
</UL>
|
||
|
||
<A NAME="blockq"></A>
|
||
<H3>Block Quotes</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Block Quote<TD><TT><BLOCKQUOTE><BR>...<BR></BLOCKQUOTE></TT><TD>
|
||
<BLOCKQUOTE>
|
||
Text should be both left- and right-indented.
|
||
Some browsers render the text in italics.
|
||
Now there is a </BLOCKQUOTE>
|
||
immediately followed by a new <BLOCKQUOTE>
|
||
and then some more text;
|
||
there is NOT a <P>.
|
||
</BLOCKQUOTE>
|
||
<BLOCKQUOTE>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
</BLOCKQUOTE>
|
||
|
||
<TR><TD>Block Quote<BR><IMG SRC="n2x.gif">
|
||
<TD><TT><BQ><BR>...<BR></BQ></TT><TD>
|
||
<BQ>
|
||
Netscape 1.22 and 2.01 do not support the <BQ> tag.
|
||
Now there is a </BQ>
|
||
immediately followed by a new <BQ>
|
||
and then some more text;
|
||
there is NOT a <P>.
|
||
</BQ>
|
||
<BQ>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
</BQ>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="notes"></A>
|
||
<H3>Notes</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Note<BR><IMG SRC="n2x.gif">
|
||
<TD><TT><NOTE><BR>...<BR></NOTE></TT><TD>
|
||
<NOTE>
|
||
This is some text repeated a bunch of times.
|
||
Netscape 1.22 and 2.01 do not seem to support this feature.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
</NOTE>
|
||
|
||
<TR><TD>Note<BR>(with option)<BR><IMG SRC="n2x.gif">
|
||
<TD><TT><NOTE ROLE=tip><BR>...<BR></NOTE></TT><TD>
|
||
<NOTE ROLE=tip>
|
||
This is some text repeated a bunch of times.
|
||
Netscape 1.22 and 2.01 do not seem to support this feature.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
</NOTE>
|
||
|
||
<TR><TD>Note<BR>(with option)<BR><IMG SRC="n2x.gif">
|
||
<TD><TT><NOTE ROLE=warning><BR>...<BR></NOTE></TT><TD>
|
||
<NOTE ROLE=warning>
|
||
This is some text repeated a bunch of times.
|
||
Netscape 1.22 and 2.01 do not seem to support this feature.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
</NOTE>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="fnotes"></A>
|
||
<H3>Foototes</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Footnote<BR><IMG SRC="n2x.gif">
|
||
<TD><TT><FN ID="..."><BR>...<BR></FN></TT><TD>
|
||
<P>
|
||
This is a normal <P> paragraph with a <A HREF="#fn1">footnote</A> reference
|
||
(coded as <A HREF="#fn1">footnote</A>).
|
||
In theory, when you click on the reference, the footnote appears.
|
||
Netscape 1.22 and 2.01 do not seem to support this feature.
|
||
</P>
|
||
<FN ID="fn1">
|
||
This is a footnote paragraph
|
||
(coded as <FN ID="fn1">).
|
||
his is some more of the footnote text.
|
||
This is some more of the footnote text.
|
||
</FN>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="banner"></A>
|
||
<H3>Banners</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Banner<BR><IMG SRC="n2x.gif">
|
||
<TD><TT><BANNER><BR>...<BR></BANNER></TT><TD>
|
||
<BANNER>
|
||
This is a banner.
|
||
Netscape 1.22 and 2.01 do not seem to support this feature.
|
||
</BANNER>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="indent"></A>
|
||
<H3>Indenting Techniques</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD>Unordered List<BR>(with no items)<TD><TT><UL><BR>...<BR></UL></TT><TD>
|
||
<UL>
|
||
Text should be left-indented.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.</UL>
|
||
|
||
<TR><TD>Definition List<BR>(with no terms)<TD><TT>
|
||
<DL><BR>
|
||
<DD>Defn<BR>
|
||
</DL>
|
||
</TT><TD>
|
||
<DL>
|
||
<DD>
|
||
Text should be left-indented.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
</DL>
|
||
|
||
<TR><TD>Block Quote<TD><TT><BLOCKQUOTE><BR>...<BR></BLOCKQUOTE></TT><TD>
|
||
<BLOCKQUOTE>
|
||
Text should be both left- and right-indented.
|
||
Some browsers render the text in italics.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
</BLOCKQUOTE>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
</UL>
|
||
|
||
|
||
<A NAME="colors"></A>
|
||
<H2>Colors</H2>
|
||
<UL>
|
||
|
||
<!-- <IMG SRC="new.gif" WIDTH=28 HEIGHT=11 ALT="New"> -->
|
||
Try my
|
||
<A HREF="/cgi-bin/colors.cgi">Zoomable RGB Color Sampler</A>.
|
||
|
||
<A NAME="tcolors"></A>
|
||
<H3>Text Colors</H3>
|
||
<UL>
|
||
|
||
Font colors may be specified as follows:
|
||
<P>
|
||
<TT><FONT COLOR="#rrggbb">...</FONT></TT>
|
||
<P>
|
||
In theory, there are 256 <SUP>3</SUP> or 16,777,216 possible colors.
|
||
<P>
|
||
Here are 27 samples of <TT><FONT COLOR="#rrggbb"></TT>:
|
||
<P>
|
||
<!-- From COLORS.KEX -->
|
||
<PRE>
|
||
#000000: <FONT COLOR=#000000>000000 Sample</FONT> (Black)
|
||
#000080: <FONT COLOR=#000080>000080 Sample</FONT>
|
||
#0000FF: <FONT COLOR=#0000FF>0000FF Sample</FONT> (Blue)
|
||
#008000: <FONT COLOR=#008000>008000 Sample</FONT>
|
||
#008080: <FONT COLOR=#008080>008080 Sample</FONT>
|
||
#0080FF: <FONT COLOR=#0080FF>0080FF Sample</FONT>
|
||
#00FF00: <FONT COLOR=#00FF00>00FF00 Sample</FONT> (Green)
|
||
#00FF80: <FONT COLOR=#00FF80>00FF80 Sample</FONT>
|
||
#00FFFF: <FONT COLOR=#00FFFF>00FFFF Sample</FONT> (Cyan)
|
||
#800000: <FONT COLOR=#800000>800000 Sample</FONT>
|
||
#800080: <FONT COLOR=#800080>800080 Sample</FONT>
|
||
#8000FF: <FONT COLOR=#8000FF>8000FF Sample</FONT>
|
||
#808000: <FONT COLOR=#808000>808000 Sample</FONT>
|
||
#808080: <FONT COLOR=#808080>808080 Sample</FONT>
|
||
#8080FF: <FONT COLOR=#8080FF>8080FF Sample</FONT>
|
||
#80FF00: <FONT COLOR=#80FF00>80FF00 Sample</FONT>
|
||
#80FF80: <FONT COLOR=#80FF80>80FF80 Sample</FONT>
|
||
#80FFFF: <FONT COLOR=#80FFFF>80FFFF Sample</FONT>
|
||
#FF0000: <FONT COLOR=#FF0000>FF0000 Sample</FONT> (Red)
|
||
#FF0080: <FONT COLOR=#FF0080>FF0080 Sample</FONT>
|
||
#FF00FF: <FONT COLOR=#FF00FF>FF00FF Sample</FONT> (Magenta)
|
||
#FF8000: <FONT COLOR=#FF8000>FF8000 Sample</FONT>
|
||
#FF8080: <FONT COLOR=#FF8080>FF8080 Sample</FONT>
|
||
#FF80FF: <FONT COLOR=#FF80FF>FF80FF Sample</FONT>
|
||
#FFFF00: <FONT COLOR=#FFFF00>FFFF00 Sample</FONT> (Yellow)
|
||
#FFFF80: <FONT COLOR=#FFFF80>FFFF80 Sample</FONT>
|
||
#FFFFFF: <FONT COLOR=#FFFFFF>FFFFFF Sample</FONT> (White)
|
||
</PRE>
|
||
</UL>
|
||
|
||
<A NAME="bgcolors"></A>
|
||
<H3>Background Colors</H3>
|
||
<UL>
|
||
|
||
Background color may be specified as an option in the <BODY> tag,
|
||
as follows:
|
||
<P>
|
||
<TT><BODY BGCOLOR="#rrggbb"></TT>
|
||
<P>
|
||
In theory, there are 256 <SUP>3</SUP> or 16,777,216 possible colors.
|
||
<P>
|
||
Another way to look at this:
|
||
Doug Jacobson's <STRONG>RGB Hex Triplet Color Chart</STRONG>
|
||
<P>
|
||
<A HREF="htmlrgb.gif"><IMG SRC="htmlrgbt.gif" ALT=" [htmlrgb.gif] " WIDTH=100 HEIGHT=161></A>
|
||
Click on the thumbnail image to see the full chart (61k).
|
||
<!-- IMG SRC="htmlrgb.gif" WIDTH=491 HEIGHT=791 -->
|
||
</UL>
|
||
|
||
<A NAME="excolors"></A>
|
||
<H3>Text, Background & Link Colors</H3>
|
||
<UL>
|
||
Various custom colors may be specified as options in the <BODY> tag,
|
||
as follows:<P><TT>
|
||
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb"
|
||
LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
|
||
</TT><P>
|
||
<TABLE BORDER=1>
|
||
<TH ALIGN=left>Option<TH ALIGN=left>Sets color of...
|
||
<TR><TD><TT>BGCOLOR</TT><TD>Background
|
||
<TR><TD><TT>TEXT</TT><TD>Normal text
|
||
<TR><TD><TT>LINK</TT><TD>Link text (unvisited)
|
||
<TR><TD><TT>VLINK</TT><TD>Visited Link text
|
||
<TR><TD><TT>ALINK</TT><TD>Activated Link text (as link is clicked)
|
||
</TABLE>
|
||
|
||
</UL>
|
||
</UL>
|
||
|
||
<A NAME="tables"></A>
|
||
<H2>Tables</H2>
|
||
<UL>
|
||
|
||
<A NAME="tablee"></A>
|
||
<H3>Table Elements</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<CAPTION>This is a <TT><CAPTION></TT> Caption</CAPTION>
|
||
<TH>This is a <TT><TH></TT> Table Heading
|
||
<TR><TD>This is <TT><TD></TT> Table Data
|
||
<TR><TD>This is <TT><TD></TT> Table Data that is long to expand the table horizontally.
|
||
<TR><TD>This is <TT><TD></TT> Table Data
|
||
</TABLE>
|
||
|
||
<P>The table above is coded as:<P>
|
||
<TT><TABLE BORDER=1>
|
||
<BR><CAPTION>This is ...</CAPTION>
|
||
<BR><TH>This is ...
|
||
<BR><TR><TD>This is ...
|
||
<BR><TR><TD>This is ...
|
||
<BR><TR><TD>This is ...
|
||
<BR></TABLE>
|
||
</TT>
|
||
</UL>
|
||
|
||
<A NAME="captiona"></A>
|
||
<H3>Caption Alignment</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<CAPTION>This is a <TT><CAPTION></TT> Caption</CAPTION>
|
||
<TR><TD>This is <TT><TD></TT> Table Data that is long to expand the table horizontally.
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1>
|
||
<CAPTION ALIGN=bottom>This is a <TT><CAPTION ALIGN=bottom></TT> Caption</CAPTION>
|
||
<TR><TD>This is <TT><TD></TT> Table Data that is long to expand the table horizontally.
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="borders"></A>
|
||
<H3>Table Borders</H3>
|
||
<UL>
|
||
|
||
<TABLE>
|
||
<CAPTION><TT><TABLE></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER>
|
||
<CAPTION><TT><TABLE BORDER></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=0>
|
||
<CAPTION><TT><TABLE BORDER=0></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1>
|
||
<CAPTION><TT><TABLE BORDER=1></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=2>
|
||
<CAPTION><TT><TABLE BORDER=2></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=4>
|
||
<CAPTION><TT><TABLE BORDER=4></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=8>
|
||
<CAPTION><TT><TABLE BORDER=8></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=16>
|
||
<CAPTION><TT><TABLE BORDER=16></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="tablew"></A>
|
||
<H3>Table Width & Height</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<CAPTION><TT><TABLE BORDER=1></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 WIDTH="50%">
|
||
<CAPTION><TT><TABLE BORDER=1 WIDTH="50%"></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 WIDTH="90%">
|
||
<CAPTION><TT><TABLE BORDER=1 WIDTH="90%"></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 WIDTH=200>
|
||
<CAPTION><TT><TABLE BORDER=1 WIDTH=200></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 HEIGHT=200>
|
||
<CAPTION><TT><TABLE BORDER=1 HEIGHT=200></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 HEIGHT="25%">
|
||
<CAPTION><TT><TABLE BORDER=1 HEIGHT="25%"></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="tablea"></A>
|
||
<H3>Table Alignment</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<CAPTION><TT><TABLE BORDER=1></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
This text follows the </TABLE> tag.
|
||
This text should not flow around the table because the table is neither left- or right-ALIGNed.
|
||
This text should not flow around the table because the table is neither left- or right-ALIGNed.
|
||
<BR CLEAR=all>
|
||
<P>
|
||
<TABLE BORDER=1 ALIGN=right>
|
||
<CAPTION><TT><TABLE BORDER=1 ALIGN=right></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
This text follows the </TABLE> tag.
|
||
This text should flow around the right-aligned table.
|
||
This text should flow around the right-aligned table.
|
||
This text should flow around the right-aligned table.
|
||
This text should flow around the right-aligned table.
|
||
This text should flow around the right-aligned table.
|
||
This text should flow around the right-aligned table.
|
||
This text should flow around the right-aligned table.
|
||
This text should flow around the right-aligned table.
|
||
<BR CLEAR=all>
|
||
<P>
|
||
<TABLE BORDER=1 ALIGN=left>
|
||
<CAPTION><TT><TABLE BORDER=1 ALIGN=left></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
This text follows the </TABLE> tag.
|
||
This text should flow around the left-aligned table.
|
||
This text should flow around the left-aligned table.
|
||
This text should flow around the left-aligned table.
|
||
This text should flow around the left-aligned table.
|
||
This text should flow around the left-aligned table.
|
||
This text should flow around the left-aligned table.
|
||
This text should flow around the left-aligned table.
|
||
This text should flow around the left-aligned table.
|
||
<BR CLEAR=all>
|
||
</UL>
|
||
|
||
<A NAME="horiza"></A>
|
||
<H3>Horizontal Cell Alignment</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<TH>This is a <TT><TH></TT> Table Heading
|
||
<TR><TH ALIGN=left>This is a <TT><TH ALIGN=left></TT> Table Heading
|
||
<TR><TH ALIGN=right>This is a <TT><TH ALIGN=right></TT> Table Heading
|
||
<TR><TD>This is <TT><TD></TT> Table Data that is long to expand the table horizontally.
|
||
<TR><TD>This is <TT><TD></TT> Table Data
|
||
<TR><TD ALIGN=right>This is <TT><TD ALIGN=right></TT> Table Data
|
||
<TR><TD ALIGN=center>This is <TT><TD ALIGN=center></TT> Table Data
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="vertia"></A>
|
||
<H3>Vertical Cell Alignment</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<TR>
|
||
<TD><FONT SIZE="+4">
|
||
Some text.<BR>
|
||
Some text.</FONT>
|
||
<TD VALIGN=top><TT><TD VALIGN=top></TT>
|
||
<TD VALIGN=baseline><TT><TD VALIGN=baseline></TT>
|
||
<TR>
|
||
<TD>
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
This is some text repeated a bunch of times.
|
||
<TD VALIGN=middle><TT><TD VALIGN=middle></TT>
|
||
<TD VALIGN=bottom><TT><TD VALIGN=bottom></TT>
|
||
</TABLE>
|
||
</UL>
|
||
<BR CLEAR=all>
|
||
|
||
<A NAME="cellspa"></A>
|
||
<H3>Cell Spacing & Padding</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<CAPTION><TT><TABLE BORDER=1></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 CELLSPACING=16>
|
||
<CAPTION><TT><TABLE BORDER=1 CELLSPACING=16></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 CELLPADDING=16>
|
||
<CAPTION><TT><TABLE BORDER=1 CELLPADDING=16></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1 CELLSPACING=16 CELLPADDING=16>
|
||
<CAPTION><TT><TABLE BORDER=1 CELLSPACING=16 CELLPADDING=16></TT></CAPTION>
|
||
<TR><TD>This<TD>is<TR><TD>a<TD>table blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="colwidth"></A>
|
||
<H3>Column Width</H3>
|
||
<UL>
|
||
<TABLE BORDER=1>
|
||
<CAPTION>Percentages</CAPTION>
|
||
<TR>
|
||
<TD WIDTH="75%"><TT><TD WIDTH="75%"></TT>
|
||
<TD WIDTH="25%"><TT><TD WIDTH="25%"></TT>
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1>
|
||
<CAPTION>Pixels</CAPTION>
|
||
<TR>
|
||
<TD WIDTH=200><TT><TD WIDTH=200></TT>
|
||
<TD WIDTH=50><TT><TD WIDTH=50></TT>
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="nowrap"></A>
|
||
<H3>NOWRAP</H3>
|
||
<UL>
|
||
<TABLE BORDER=1>
|
||
<CAPTION>Without NOWRAP</CAPTION>
|
||
<TR>
|
||
<TH><TT><TD></TT> below
|
||
<TH><TT><TD></TT> below
|
||
<TR>
|
||
<TD>blah blah blah blah blah blah blah blah blah blah blah blah blah blah
|
||
<TD>blah blah blah blah blah blah blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
<P>
|
||
<TABLE BORDER=1>
|
||
<CAPTION>With NOWRAP</CAPTION>
|
||
<TR>
|
||
<TH><TT><TD></TT> below
|
||
<TH><TT><TD NOWRAP></TT> below
|
||
<TR>
|
||
<TD>blah blah blah blah blah blah blah blah blah blah blah blah blah blah
|
||
<TD NOWRAP>blah blah blah blah blah blah blah blah blah blah blah blah blah blah
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="tabspan"></A>
|
||
<H3>Row/Column Span</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<CAPTION>This is a <TT><CAPTION></TT> Caption</CAPTION>
|
||
<TH COLSPAN=3>This is a <TT><TH COLSPAN=3></TT> Table Heading
|
||
<TR>
|
||
<TD ROWSPAN=2>This is <TT><TD ROWSPAN=2></TT> Table Data
|
||
<TD>This is <TT><TD></TT> Table Data
|
||
<TD>This is <TT><TD></TT> Table Data
|
||
<TR>
|
||
<TD COLSPAN=2>This is <TT><TD COLSPAN=2></TT> Table Data
|
||
</TABLE>
|
||
|
||
<P>The table above is coded as:<P>
|
||
<TT><TABLE BORDER=1>
|
||
<BR><CAPTION>This is ...</CAPTION>
|
||
<BR><TH COLSPAN=3>This is ...
|
||
<BR><TR>
|
||
<BR><TD ROWSPAN=2>This is ...
|
||
<BR><TD>This is ...
|
||
<BR><TD>This is ...
|
||
<BR><TR>
|
||
<BR><TD COLSPAN=2>This is ...
|
||
<BR></TABLE>
|
||
</TT>
|
||
|
||
</UL>
|
||
</UL>
|
||
|
||
<A NAME="rules"></A>
|
||
<H2>Horizontal Rules</H2>
|
||
<UL>
|
||
|
||
<TT><HR></TT><HR>
|
||
<TT><HR WIDTH="75%"></TT><HR WIDTH="75%">
|
||
<TT><HR WIDTH="50%" ALIGN=left></TT><HR WIDTH="50%" ALIGN=left>
|
||
<TT><HR WIDTH="50%" ALIGN=right></TT><HR WIDTH="50%" ALIGN=right>
|
||
<TT><HR SIZE=1></TT><HR SIZE=1>
|
||
<TT><HR SIZE=1 NOSHADE></TT><HR SIZE=1 NOSHADE>
|
||
<TT><HR SIZE=2></TT><HR SIZE=2>
|
||
<TT><HR SIZE=2 NOSHADE></TT><HR SIZE=2 NOSHADE>
|
||
<TT><HR SIZE=4></TT><HR SIZE=4>
|
||
<TT><HR SIZE=4 NOSHADE></TT><HR SIZE=4 NOSHADE>
|
||
<TT><HR SIZE=8></TT><HR SIZE=8>
|
||
<TT><HR SIZE=8 NOSHADE></TT><HR SIZE=8 NOSHADE>
|
||
<TT><HR SIZE=16></TT><HR SIZE=16>
|
||
<TT><HR SIZE=16 NOSHADE></TT><HR SIZE=16 NOSHADE>
|
||
</UL>
|
||
|
||
|
||
<A NAME="links"></A>
|
||
<H2>Links and Anchors</H2>
|
||
<UL>
|
||
|
||
Use <TT><A HREF=...></TT> to hyperlink to another page.
|
||
The following line is coded as:
|
||
<BR>
|
||
<TT>See my <A HREF="index.html">home page</A> for details.</TT>
|
||
<P>
|
||
<UL>
|
||
See my <A HREF="index.html">home page</A> for details.
|
||
</UL>
|
||
|
||
<P>
|
||
You can jump to somewhere else on the current page by first defining an "anchor":
|
||
<BR>
|
||
<TT><A NAME="colors"></A></TT>
|
||
<BR>
|
||
and then specifying that anchor in the link:
|
||
<BR>
|
||
<TT>See <A HREF="#colors">Colors</A> above.</TT>
|
||
<P>
|
||
<UL>
|
||
See <A HREF="#colors">Colors</A> above.
|
||
</UL>
|
||
|
||
<P>
|
||
Or you can jump into the middle of another page by combining a URL and an "anchor":
|
||
<BR>
|
||
<TT>See <A HREF="aplinfo.html#stschist">STSC History</A>.</TT>
|
||
<P>
|
||
<UL>
|
||
See <A HREF="aplinfo.html#stschist">STSC History</A>.
|
||
</UL>
|
||
|
||
|
||
</UL>
|
||
|
||
<A NAME="forms"></A>
|
||
<H2>Forms</H2>
|
||
<UL>
|
||
|
||
<FORM METHOD=post ACTION="mailto:rex@example.com">
|
||
|
||
The easiest way to submit a form is via e-mail.
|
||
This demonstration form is coded as:
|
||
<P>
|
||
<TT><FORM METHOD=post ACTION="mailto:rex@example.com"></TT>
|
||
<BR>
|
||
... form elements ...
|
||
<BR>
|
||
<TT></FORM></TT>
|
||
|
||
<P>
|
||
The alternative is to have the form invoke a CGI program,
|
||
which would be coded as either:
|
||
<P>
|
||
<TT><FORM METHOD=get ACTION="http://www.example.com/foo.cgi"></TT>
|
||
<BR>
|
||
or:
|
||
<BR>
|
||
<TT><FORM METHOD=post ACTION="http://www.example.com/foo.cgi"></TT>
|
||
<P>
|
||
The <TT>get</TT> method sends the <TT>name=value</TT> pairs along with the
|
||
specified URL -- the user would see something like
|
||
<TT>http://www.example.com/foo.cgi?first=Rex&last=Swain</TT> as foo.cgi was invoked,
|
||
and (if written in Perl) foo.cgi would receive
|
||
<TT>GET</TT> via <TT>$ENV{'REQUEST_METHOD'}</TT>
|
||
and <TT>first=Rex&last=Swain</TT> via <TT>$ENV{'QUERY_STRING'}</TT>.
|
||
<P>
|
||
The <TT>post</TT> method sends the <TT>name=value</TT> pairs via STDIN (standard
|
||
input) -- the user would see something like
|
||
<TT>http://www.example.com/foo.cgi</TT> as foo.cgi was invoked,
|
||
and (if written in Perl) foo.cgi would receive
|
||
<TT>POST</TT> via <TT>$ENV{'REQUEST_METHOD'}</TT>
|
||
and the length of the standard input via <TT>$ENV{'CONTENT_LENGTH'}</TT>
|
||
and <TT>first=Rex&last=Swain</TT> via <TT>STDIN</TT>.
|
||
|
||
<A NAME="ftext"></A>
|
||
<H3>Text Elements</H3>
|
||
<UL>
|
||
|
||
Here is an <TT><INPUT TYPE="text" SIZE=30 NAME="name1"></TT> element:
|
||
<P><UL>
|
||
Enter your name:<BR>
|
||
<INPUT TYPE="text" SIZE=30 NAME="name">
|
||
</UL><P>
|
||
|
||
Here is an <TT><INPUT TYPE="text" SIZE=30 NAME="name2" VALUE="Initialize Me"></TT> element:
|
||
<P><UL>
|
||
Enter your name:<BR>
|
||
<INPUT TYPE="text" SIZE=30 NAME="init" VALUE="Initialize Me">
|
||
</UL><P>
|
||
|
||
Here is an <TT><INPUT TYPE="text" SIZE=20 MAXLENGTH=10 NAME="short"></TT> element:
|
||
<P><UL>
|
||
Enter something up to 10 characters long:<BR>
|
||
<INPUT TYPE="text" SIZE=20 MAXLENGTH=10 NAME="short">
|
||
</UL><P>
|
||
|
||
Here is an <TT><INPUT TYPE="password" SIZE=8 NAME="pw"></TT> element:
|
||
<P><UL>
|
||
Guess the secret word:<BR>
|
||
<INPUT TYPE="password" SIZE=8 NAME="pw">
|
||
<I>Any characters typed here appear as asterisks</I>
|
||
</UL><P>
|
||
|
||
This is a <TT><TEXTAREA ROWS=3 COLS=40 NAME="comment1"></TEXTAREA></TT> element:
|
||
<P><UL>
|
||
Your comments, please:<BR>
|
||
<TEXTAREA ROWS=3 COLS=40 NAME="comment1"></TEXTAREA>
|
||
</UL><P>
|
||
|
||
This is a <TT><TEXTAREA ROWS=2 COLS=40 NAME="comment2">Initialize Me</TEXTAREA></TT> element:
|
||
<P><UL>
|
||
Your comments, please:<BR>
|
||
<TEXTAREA ROWS=2 COLS=40 NAME="comment2">Initialize Me</TEXTAREA>
|
||
</UL><P>
|
||
|
||
This is a <TT><TEXTAREA ROWS=2 COLS=25 WRAP=soft NAME="comment3"></TT> element:
|
||
<P><UL>
|
||
<TEXTAREA ROWS=2 COLS=25 WRAP=soft NAME="comment3"></TEXTAREA>
|
||
<P>
|
||
<UL>
|
||
<LI><TT>WRAP=off</TT> (the default) disables word wrap. Text the user types is
|
||
displayed and returned exactly as typed.
|
||
<LI><TT>WRAP=hard</TT> or <TT>WRAP=physical</TT> cause word wrap, and the line
|
||
breaks are included when the form is submitted.
|
||
<LI><TT>WRAP=soft</TT> or <TT>WRAP=virtual</TT> cause word wrap, but the line breaks
|
||
are not included when the form is submitted.
|
||
</UL><P>
|
||
Regardless of the WRAP parameter, whenever the user <I>explicitly</I> inserts a
|
||
line break, a CR/LF pair (<TT>%0D%0A</TT>) is returned embedded in the text.
|
||
</UL><P>
|
||
|
||
</UL>
|
||
<A NAME="fradio"></A>
|
||
<H3>Radio Buttons</H3>
|
||
<UL>
|
||
|
||
Here are two <TT><INPUT TYPE="radio"></TT> elements:
|
||
<P>
|
||
<TT>
|
||
<INPUT TYPE="radio" NAME="sex" VALUE="M" CHECKED>Male
|
||
<BR>
|
||
<INPUT TYPE="radio" NAME="sex" VALUE="F">Female
|
||
</TT>
|
||
<P><UL>
|
||
What gender are you?<BR>
|
||
<INPUT TYPE="radio" NAME="sex" VALUE="M" CHECKED>Male
|
||
<BR>
|
||
<INPUT TYPE="radio" NAME="sex" VALUE="F">Female
|
||
</UL><P>
|
||
Note that you use the same <TT>NAME</TT> parameter for a group of buttons.
|
||
If one button has a <TT>CHECKED</TT> option, it will be selected by default.
|
||
If the form is submitted as is, <TT>sex=M</TT> would be sent.
|
||
|
||
</UL>
|
||
<A NAME="fcheck"></A>
|
||
<H3>Checkboxes</H3>
|
||
<UL>
|
||
|
||
Here are three <TT><INPUT TYPE="checkbox"></TT> elements:
|
||
<P>
|
||
<TT>
|
||
<INPUT TYPE="checkbox" NAME="tv" CHECKED>TV
|
||
<BR>
|
||
<INPUT TYPE="checkbox" NAME="vcr" CHECKED>VCR
|
||
<BR>
|
||
<INPUT TYPE="checkbox" NAME="cd">CD Player
|
||
</TT>
|
||
<P><UL>
|
||
Which of the following do you own?<BR>
|
||
<INPUT TYPE="checkbox" NAME="tv" CHECKED>TV
|
||
<BR>
|
||
<INPUT TYPE="checkbox" NAME="vcr" CHECKED>VCR
|
||
<BR>
|
||
<INPUT TYPE="checkbox" NAME="cd">CD Player
|
||
</UL><P>
|
||
Note that you use different <TT>NAME</TT> parameters for each checkbox.
|
||
Any checkboxes that have a <TT>CHECKED</TT> option will be selected by default.
|
||
If the form is submitted as is, <TT>tv=on&vcr=on</TT> would be sent.
|
||
|
||
</UL>
|
||
<A NAME="fselect"></A>
|
||
<H3>Selection Lists</H3>
|
||
<UL>
|
||
|
||
This is a <TT><SELECT></TT> element
|
||
with 5 <TT><OPTION></TT> elements:
|
||
<P>
|
||
<TT><SELECT NAME="country">
|
||
<BR><OPTION SELECTED>USA
|
||
<BR><OPTION>France
|
||
<BR><OPTION>Germany
|
||
<BR><OPTION>United Kingdom
|
||
<BR><OPTION>Other
|
||
<BR></SELECT>
|
||
</TT>
|
||
<P><UL>
|
||
Where are you?<BR>
|
||
<SELECT NAME="country">
|
||
<OPTION SELECTED>USA
|
||
<OPTION>France
|
||
<OPTION>Germany
|
||
<OPTION>United Kingdom
|
||
<OPTION>Other
|
||
</SELECT>
|
||
</UL><P>
|
||
Note that this appears as a drop-down selection box, and
|
||
you may select only one item.
|
||
<P>
|
||
Here's the same sort of thing with <TT>SIZE=4</TT>
|
||
and <TT>MULTIPLE</TT> options added:
|
||
<P>
|
||
<TT><SELECT SIZE=4 MULTIPLE NAME="os">
|
||
<BR><OPTION>DOS
|
||
<BR><OPTION SELECTED>Windows 3.1
|
||
<BR><OPTION>Windows 95
|
||
<BR><OPTION SELECTED>OS/2
|
||
<BR><OPTION>Other
|
||
<BR></SELECT>
|
||
</TT>
|
||
<P><UL>
|
||
What operating systems have you ever used?<BR>
|
||
<SELECT SIZE=4 MULTIPLE NAME="os">
|
||
<OPTION>DOS
|
||
<OPTION SELECTED>Windows 3.1
|
||
<OPTION>Windows 95
|
||
<OPTION SELECTED>OS/2
|
||
<OPTION>Other
|
||
</SELECT>
|
||
</UL><P>
|
||
Note that this appears as a scrolling selection box, and
|
||
you may select several items.
|
||
|
||
</UL>
|
||
<A NAME="fhidden"></A>
|
||
<H3>Hidden Fields</H3>
|
||
<UL>
|
||
|
||
Here is an <TT><INPUT TYPE="hidden" NAME="Hidden" VALUE="Invisible"></TT>
|
||
element:
|
||
<P><UL>
|
||
<INPUT TYPE="hidden" NAME="Hidden" VALUE="Invisible">
|
||
</UL><P>
|
||
You will not see anything, but when the form is submitted,
|
||
<TT>Hidden=Invisible</TT> will be sent.
|
||
|
||
</UL>
|
||
<A NAME="fsubmit"></A>
|
||
<H3>Submit/Reset Buttons</H3>
|
||
<UL>
|
||
|
||
Here are vanilla Submit and Reset buttons:
|
||
<P>
|
||
<TT><INPUT TYPE="submit">
|
||
<BR><INPUT TYPE="reset">
|
||
</TT>
|
||
<P><UL>
|
||
<INPUT TYPE="submit">
|
||
<INPUT TYPE="reset">
|
||
</UL><P>
|
||
<TT>Submit</TT> submits the form
|
||
(i.e., sends the form to the URL specified in the form's <TT>ACTION</TT> attribute).
|
||
<TT>Reset</TT> restores all form elements to their default values.
|
||
<P>
|
||
You may change the text on the button faces by
|
||
specifying <TT>VALUE=</TT> parameters:
|
||
<P>
|
||
<TT><INPUT TYPE="submit" VALUE="Send!">
|
||
<BR><INPUT TYPE="reset" VALUE="Clear Form">
|
||
</TT>
|
||
<P><UL>
|
||
<INPUT TYPE="submit" VALUE="Send!">
|
||
<INPUT TYPE="reset" VALUE="Clear Form">
|
||
</UL><P>
|
||
|
||
Here is an <TT><INPUT TYPE="image" SRC="undercon.gif"></TT> element:
|
||
<P><UL>
|
||
<INPUT TYPE="image" SRC="undercon.gif">
|
||
</UL><P>
|
||
This acts like a Submit button.
|
||
|
||
</UL>
|
||
</FORM>
|
||
</UL>
|
||
|
||
<A NAME="images"></A>
|
||
<H2>Images</H2>
|
||
<UL>
|
||
|
||
<A NAME="imagev"></A>
|
||
<H3>Vertical Image Alignment</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif"></TT>
|
||
<TD>This is <IMG SRC="undercon.gif">
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
</TD></TR>
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=bottom></TT>
|
||
<BR>Aligns bottom of image with <I>baseline</I> of line
|
||
<TD>This is <IMG SRC="undercon.gif" ALIGN=bottom>
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=baseline></TT>
|
||
<BR>Aligns bottom of image with <I>baseline</I> of line
|
||
(same as ALIGN=bottom)
|
||
<TD>This is <IMG SRC="undercon.gif" ALIGN=baseline>
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=absbottom></TT>
|
||
<BR>Aligns bottom of image with lowest <I>item</I> on line
|
||
<TD>This is <IMG SRC="undercon.gif" ALIGN=absbottom>
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=middle></TT>
|
||
<BR><I>Aligns middle of image with baseline of text</I>
|
||
<TD>This is <IMG SRC="undercon.gif" ALIGN=middle>
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=absmiddle></TT>
|
||
<BR><I>Aligns middle of image with middle of text</I>
|
||
<TD>This is <IMG SRC="undercon.gif" ALIGN=absmiddle>
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
</TD></TR>
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=top></TT>
|
||
<BR>Aligns top of image with tallest <I>item</I> on line
|
||
<TD>This is <IMG SRC="undercon.gif" ALIGN=top>
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=texttop></TT>
|
||
<BR>Aligns top of image with tallest <I>text</I> on line
|
||
<TD>This is <IMG SRC="undercon.gif" ALIGN=texttop>
|
||
some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="imageh"></A>
|
||
<H3>Horizontal Image Alignment</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=right></TT>
|
||
<TD><IMG SRC="undercon.gif" ALIGN=right>
|
||
This is some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=left></TT>
|
||
<TD><IMG SRC="undercon.gif" ALIGN=left>
|
||
This is some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=left></TT>
|
||
<BR>and<BR><TT><IMG SRC="undercon.gif" ALIGN=right></TT>
|
||
<TD><IMG SRC="undercon.gif" ALIGN=left><IMG SRC="undercon.gif" ALIGN=right>
|
||
This is some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="imageb"></A>
|
||
<H3>Image Space & Border</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=left BORDER=1></TT>
|
||
<TD><IMG SRC="undercon.gif" ALIGN=left BORDER=1>
|
||
This is some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
<TR><TD><TT><IMG SRC="undercon.gif" ALIGN=left VSPACE=16 HSPACE=32 BORDER=4></TT>
|
||
<TD><IMG SRC="undercon.gif" ALIGN=left VSPACE=16 HSPACE=32 BORDER=4>
|
||
This is some text with no long words: is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is
|
||
is is is is is is is is is is is is is is is is is is is is is is is.
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="imalt"></A>
|
||
<H3>Image Alternate Text</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
|
||
<TR><TD><TT><IMG SRC="nosuch.gif"></TT>
|
||
<TD><IMG SRC="nosuch.gif">
|
||
This is some text.
|
||
|
||
<TR><TD><TT><IMG SRC="nosuch.gif" ALT="Ooops"></TT>
|
||
<BR><I>Try this with Netscape's "Auto Load Images"<BR>option turned off</I>
|
||
<TD><IMG SRC="nosuch.gif" ALT="Ooops">
|
||
This is some text.
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
<A NAME="imsize"></A>
|
||
<H3>Image Size & Scale</H3>
|
||
<UL>
|
||
|
||
<TABLE BORDER=1>
|
||
<TR><TD><TT><IMG SRC="undercon.gif"></TT>
|
||
<BR><I>Image size unknown until browser retrieves file</I>
|
||
<TD><IMG SRC="undercon.gif">
|
||
<TR><TD><TT><IMG SRC="undercon.gif" WIDTH=40 HEIGHT=40></TT>
|
||
<BR><I>Browser can allocate space before file is retrieved</I>
|
||
<TD><IMG SRC="undercon.gif" WIDTH=40 HEIGHT=40>
|
||
<TR><TD><TT><IMG SRC="undercon.gif" WIDTH=80 HEIGHT=80></TT>
|
||
<BR><I>Browser scales image to specified size</I>
|
||
<TD><IMG SRC="undercon.gif" WIDTH=80 HEIGHT=80>
|
||
<TR><TD><TT><IMG SRC="undercon.gif" WIDTH=20 HEIGHT=20></TT>
|
||
<BR><I>Browser scales image to specified size</I>
|
||
<TD><IMG SRC="undercon.gif" WIDTH=20 HEIGHT=20>
|
||
<TR><TD><TT><IMG SRC="undercon.gif" WIDTH=20 HEIGHT=80></TT>
|
||
<BR><I>Browser scales image to specified size</I>
|
||
<TD><IMG SRC="undercon.gif" WIDTH=20 HEIGHT=80>
|
||
|
||
</TABLE>
|
||
</UL>
|
||
|
||
|
||
<A NAME="inimages"></A>
|
||
<H3>Internal Images</H3>
|
||
<UL>
|
||
|
||
Netscape 1.22 and 2.01 support these internal images:
|
||
<P>
|
||
<TABLE BORDER=0>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-binary" ></TD> --><TD><TT><IMG SRC="internal-gopher-binary"> </TT><TD>page with 0's and 1's</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-index" ></TD> --><TD><TT><IMG SRC="internal-gopher-index"> </TT><TD>binoculars</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-image" ></TD> --><TD><TT><IMG SRC="internal-gopher-image"> </TT><TD>page with symbols</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-menu" ></TD> --><TD><TT><IMG SRC="internal-gopher-menu"> </TT><TD>file folder</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-movie" ></TD> --><TD><TT><IMG SRC="internal-gopher-movie"> </TT><TD>strip of film</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-sound" ></TD> --><TD><TT><IMG SRC="internal-gopher-sound"> </TT><TD>page with speaker</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-text" ></TD> --><TD><TT><IMG SRC="internal-gopher-text"> </TT><TD>page with text</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-telnet" ></TD> --><TD><TT><IMG SRC="internal-gopher-telnet"> </TT><TD>PC icon</TD>
|
||
<TR><!-- <TD><IMG SRC="internal-gopher-unknown"></TD> --><TD><TT><IMG SRC="internal-gopher-unknown"></TT><TD>blank page</TD>
|
||
</TABLE>
|
||
<P>
|
||
<FONT SIZE=-1>(Try these on your own server -- each view of this page generated 9 records in
|
||
my server's error log.<BR>RHS 26 July 1999)</FONT>
|
||
</UL> <!-- q -->
|
||
|
||
<A NAME="csim"></A>
|
||
<H3>Client-Side Image Maps</H3>
|
||
<UL>
|
||
|
||
<IMG SRC=rexc.gif WIDTH=168 HEIGHT=221 USEMAP="#csimap" ALIGN=right>
|
||
<MAP NAME="csimap">
|
||
<AREA SHAPE="rect" HREF="GOTOTOP.html" COORDS="0,0,167,110">
|
||
<AREA SHAPE="rect" HREF="GOTOBOTTOM.html" COORDS="0,111,167,220">
|
||
</MAP>
|
||
Pass your mouse over the picture and keep an eye on your browser's status line.
|
||
<P>
|
||
If your browser supports client-side image maps, you should see a reference
|
||
to GOTOTOP while over the top half of the picture, and GOTOBOTTOM while over the
|
||
bottom half.
|
||
(These links are not active, so if you actually click on the picture,
|
||
you'll get an error message saying that the link cannot be found.)
|
||
<P>
|
||
If your browser does not support client-side image maps, if you click on the
|
||
picture, nothing will happen.
|
||
<P>
|
||
<BR CLEAR=right>
|
||
<P>
|
||
The HTML code for this is:
|
||
<PRE>
|
||
<IMG SRC=rexc.gif WIDTH=168 HEIGHT=221 USEMAP="#csimap" ALIGN=right>
|
||
<MAP NAME="csimap">
|
||
<AREA SHAPE="rect" HREF="GOTOTOP.html" COORDS="0,0,167,110">
|
||
<AREA SHAPE="rect" HREF="GOTOBOTTOM.html" COORDS="0,111,167,220">
|
||
</MAP>
|
||
Blah blah blah
|
||
</PRE>
|
||
</UL>
|
||
|
||
<A NAME="bgimage"></A>
|
||
<H3>Background Image</H3>
|
||
<UL>
|
||
|
||
A background image may be specified as an option in the <BODY> tag,
|
||
as follows:
|
||
<P>
|
||
<TT><BODY BACKGROUND="path/filename.gif"></TT>
|
||
<P>
|
||
(Personally, I think that the use of this feature is just about as obnoxious
|
||
as <BLINK>!)
|
||
|
||
</UL>
|
||
|
||
<A NAME="figure"></A>
|
||
<H3>Figure Element</H3>
|
||
<UL>
|
||
|
||
<IMG SRC="n2x.gif" ALIGN=left><FIG> is an HTML3 feature.
|
||
If no image appears, your browser does not support figures.
|
||
FYI, Netscape 2.01 does not support figures.
|
||
<P>
|
||
<FIG SRC="rexc.gif" WIDTH=168 HEIGHT=221 ALIGN=right>
|
||
<OVERLAY SRC="undercon.gif" WIDTH=40 HEIGHT=40 X=64 Y=80>
|
||
<CAPTION>This is the caption.</CAPTION>
|
||
This is a figure (<FIG ALIGN=right>) element
|
||
with <CAPTION> and <CREDIT> and <OVERLAY> tags.
|
||
You should see a photo of me with the under-construction icon overlaid in its center.
|
||
<CREDIT>This is the credit.</CREDIT>
|
||
</FIG>
|
||
<BR CLEAR=all>
|
||
<P>
|
||
The HTML code for this is:
|
||
<PRE>
|
||
<FIG SRC="rexc.gif" WIDTH=168 HEIGHT=221 ALIGN=right>
|
||
<OVERLAY SRC="undercon.gif" WIDTH=40 HEIGHT=40 X=64 Y=80>
|
||
<CAPTION>This is the caption.</CAPTION>
|
||
Blah blah blah
|
||
<CREDIT>This is the credit.</CREDIT>
|
||
</FIG>
|
||
</PRE>
|
||
Thanks to <A HREF="http://www.laronson.com">Larry Aronson</A> (author of
|
||
<CITE>HTML3 Manual of Style</CITE>)
|
||
for information on this.
|
||
</UL>
|
||
</UL>
|
||
|
||
<A NAME="chars"></A>
|
||
<H2>Character Entities</H2>
|
||
<UL>
|
||
|
||
The chart below was lifted from
|
||
Martin Ramsch's
|
||
<STRONG>ISO8859-1 Table</STRONG>
|
||
|
||
<PRE>
|
||
Description Code Entity name
|
||
=================================== ============ ==============
|
||
quotation mark &#34; --> " &quot; --> "
|
||
ampersand &#38; --> & &amp; --> &
|
||
less-than sign &#60; --> < &lt; --> <
|
||
greater-than sign &#62; --> > &gt; --> >
|
||
|
||
Description Char Code Entity name
|
||
=================================== ==== ============ ==============
|
||
non-breaking space &#160; -->   &nbsp; -->
|
||
inverted exclamation ¡ &#161; --> ¡ &iexcl; --> ¡
|
||
cent sign ¢ &#162; --> ¢ &cent; --> ¢
|
||
pound sterling £ &#163; --> £ &pound; --> £
|
||
general currency sign ¤ &#164; --> ¤ &curren; --> ¤
|
||
yen sign ¥ &#165; --> ¥ &yen; --> ¥
|
||
broken vertical bar ¦ &#166; --> ¦ &brvbar; --> ¦
|
||
&brkbar; --> &brkbar;
|
||
section sign § &#167; --> § &sect; --> §
|
||
umlaut (dieresis) ¨ &#168; --> ¨ &uml; --> ¨
|
||
&die; --> ¨
|
||
copyright © &#169; --> © &copy; --> ©
|
||
feminine ordinal ª &#170; --> ª &ordf; --> ª
|
||
left angle quote, guillemotleft « &#171; --> « &laquo; --> «
|
||
not sign ¬ &#172; --> ¬ &not; --> ¬
|
||
soft hyphen &#173; --> ­ &shy; --> ­
|
||
registered trademark ® &#174; --> ® &reg; --> ®
|
||
macron accent ¯ &#175; --> ¯ &macr; --> ¯
|
||
&hibar; --> &hibar;
|
||
degree sign ° &#176; --> ° &deg; --> °
|
||
plus or minus ± &#177; --> ± &plusmn; --> ±
|
||
superscript two ² &#178; --> ² &sup2; --> ²
|
||
superscript three ³ &#179; --> ³ &sup3; --> ³
|
||
acute accent ´ &#180; --> ´ &acute; --> ´
|
||
micro sign µ &#181; --> µ &micro; --> µ
|
||
paragraph sign ¶ &#182; --> ¶ &para; --> ¶
|
||
middle dot · &#183; --> · &middot; --> ·
|
||
cedilla ¸ &#184; --> ¸ &cedil; --> ¸
|
||
superscript one ¹ &#185; --> ¹ &sup1; --> ¹
|
||
masculine ordinal º &#186; --> º &ordm; --> º
|
||
right angle quote, guillemotright » &#187; --> » &raquo; --> »
|
||
fraction one-fourth ¼ &#188; --> ¼ &frac14; --> ¼
|
||
fraction one-half ½ &#189; --> ½ &frac12; --> ½
|
||
fraction three-fourths ¾ &#190; --> ¾ &frac34; --> ¾
|
||
inverted question mark ¿ &#191; --> ¿ &iquest; --> ¿
|
||
capital A, grave accent À &#192; --> À &Agrave; --> À
|
||
capital A, acute accent Á &#193; --> Á &Aacute; --> Á
|
||
capital A, circumflex accent  &#194; -->  &Acirc; --> Â
|
||
capital A, tilde à &#195; --> à &Atilde; --> Ã
|
||
capital A, dieresis or umlaut mark Ä &#196; --> Ä &Auml; --> Ä
|
||
capital A, ring Å &#197; --> Å &Aring; --> Å
|
||
capital AE diphthong (ligature) Æ &#198; --> Æ &AElig; --> Æ
|
||
capital C, cedilla Ç &#199; --> Ç &Ccedil; --> Ç
|
||
capital E, grave accent È &#200; --> È &Egrave; --> È
|
||
capital E, acute accent É &#201; --> É &Eacute; --> É
|
||
capital E, circumflex accent Ê &#202; --> Ê &Ecirc; --> Ê
|
||
capital E, dieresis or umlaut mark Ë &#203; --> Ë &Euml; --> Ë
|
||
capital I, grave accent Ì &#204; --> Ì &Igrave; --> Ì
|
||
capital I, acute accent Í &#205; --> Í &Iacute; --> Í
|
||
capital I, circumflex accent Î &#206; --> Î &Icirc; --> Î
|
||
capital I, dieresis or umlaut mark Ï &#207; --> Ï &Iuml; --> Ï
|
||
capital Eth, Icelandic Ð &#208; --> Ð &ETH; --> Ð
|
||
&Dstrok; --> Đ
|
||
capital N, tilde Ñ &#209; --> Ñ &Ntilde; --> Ñ
|
||
capital O, grave accent Ò &#210; --> Ò &Ograve; --> Ò
|
||
capital O, acute accent Ó &#211; --> Ó &Oacute; --> Ó
|
||
capital O, circumflex accent Ô &#212; --> Ô &Ocirc; --> Ô
|
||
capital O, tilde Õ &#213; --> Õ &Otilde; --> Õ
|
||
capital O, dieresis or umlaut mark Ö &#214; --> Ö &Ouml; --> Ö
|
||
multiply sign × &#215; --> × &times; --> ×
|
||
capital O, slash Ø &#216; --> Ø &Oslash; --> Ø
|
||
capital U, grave accent Ù &#217; --> Ù &Ugrave; --> Ù
|
||
capital U, acute accent Ú &#218; --> Ú &Uacute; --> Ú
|
||
capital U, circumflex accent Û &#219; --> Û &Ucirc; --> Û
|
||
capital U, dieresis or umlaut mark Ü &#220; --> Ü &Uuml; --> Ü
|
||
capital Y, acute accent Ý &#221; --> Ý &Yacute; --> Ý
|
||
capital THORN, Icelandic Þ &#222; --> Þ &THORN; --> Þ
|
||
small sharp s, German (sz ligature) ß &#223; --> ß &szlig; --> ß
|
||
small a, grave accent à &#224; --> à &agrave; --> à
|
||
small a, acute accent á &#225; --> á &aacute; --> á
|
||
small a, circumflex accent â &#226; --> â &acirc; --> â
|
||
small a, tilde ã &#227; --> ã &atilde; --> ã
|
||
small a, dieresis or umlaut mark ä &#228; --> ä &auml; --> ä
|
||
small a, ring å &#229; --> å &aring; --> å
|
||
small ae diphthong (ligature) æ &#230; --> æ &aelig; --> æ
|
||
small c, cedilla ç &#231; --> ç &ccedil; --> ç
|
||
small e, grave accent è &#232; --> è &egrave; --> è
|
||
small e, acute accent é &#233; --> é &eacute; --> é
|
||
small e, circumflex accent ê &#234; --> ê &ecirc; --> ê
|
||
small e, dieresis or umlaut mark ë &#235; --> ë &euml; --> ë
|
||
small i, grave accent ì &#236; --> ì &igrave; --> ì
|
||
small i, acute accent í &#237; --> í &iacute; --> í
|
||
small i, circumflex accent î &#238; --> î &icirc; --> î
|
||
small i, dieresis or umlaut mark ï &#239; --> ï &iuml; --> ï
|
||
small eth, Icelandic ð &#240; --> ð &eth; --> ð
|
||
small n, tilde ñ &#241; --> ñ &ntilde; --> ñ
|
||
small o, grave accent ò &#242; --> ò &ograve; --> ò
|
||
small o, acute accent ó &#243; --> ó &oacute; --> ó
|
||
small o, circumflex accent ô &#244; --> ô &ocirc; --> ô
|
||
small o, tilde õ &#245; --> õ &otilde; --> õ
|
||
small o, dieresis or umlaut mark ö &#246; --> ö &ouml; --> ö
|
||
division sign ÷ &#247; --> ÷ &divide; --> ÷
|
||
small o, slash ø &#248; --> ø &oslash; --> ø
|
||
small u, grave accent ù &#249; --> ù &ugrave; --> ù
|
||
small u, acute accent ú &#250; --> ú &uacute; --> ú
|
||
small u, circumflex accent û &#251; --> û &ucirc; --> û
|
||
small u, dieresis or umlaut mark ü &#252; --> ü &uuml; --> ü
|
||
small y, acute accent ý &#253; --> ý &yacute; --> ý
|
||
small thorn, Icelandic þ &#254; --> þ &thorn; --> þ
|
||
small y, dieresis or umlaut mark ÿ &#255; --> ÿ &yuml; --> ÿ
|
||
</PRE>
|
||
</UL>
|
||
|
||
<P><HR NOSHADE SIZE=4></P>
|
||
|
||
<CENTER>
|
||
You are visitor
|
||
<IMG SRC="/cgi-bin/countrex.cgi?sampler" ALIGN=absmiddle WIDTH=90 HEIGHT=20 ALT="[Odometer]">
|
||
since 25 March 1996
|
||
|
||
<P><HR SIZE=1></P>
|
||
|
||
<B>Sorry, but I do not have time to provide free answers
|
||
to questions about HTML.</B><BR>
|
||
(I'm busy trying to make a living!) So please don't e-mail your questions to me.
|
||
|
||
<P><HR SIZE=1></P>
|
||
|
||
<ADDRESS>
|
||
(This is an <ADDRESS> block.)
|
||
<BR>
|
||
Copyright © 1996-2010 Rex Swain<BR>
|
||
E-mail <A HREF="mailto:rex@rexswain.com">rex@rexswain.com</A>,
|
||
Web <A HREF="http://www.rexswain.com/index.html">http://www.rexswain.com</A><BR>
|
||
Permission granted to distribute unmodified copies
|
||
</ADDRESS>
|
||
|
||
<P><HR SIZE=1></P>
|
||
|
||
<P>Thanks to <A HREF="http://www.3wventures.com/">3wVentures</A> for supporting this site</P>
|
||
|
||
</CENTER>
|
||
|
||
</BODY>
|
||
</HTML>
|