Java Glossary : HTML Cheat Sheet

Java definitions: 0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

You are here : home : Java Glossary : H words : HTML Cheat Sheet.

HTML Cheat Sheet

Introduction

This essay will get you started writing HTML so you can put up a website on the Internet. HTML stands for HyperText Markup Language,a platform independent technique of distributing formatted documents via the web. The bold, italic etc. in the document you are reading now (presumably on a web browser), is encoded by embedding tags like <B> and <I>. This markup scheme works on any brand of computer and allows web sites to send all information in a standard way, without having to worry about what brand of computer the recipient has, or what software she uses.

Learning HTML

I found the easiest way to learn HTML is to look at other people's examples, to cut and paste from them, and to experiment by fiddling the various parameters to see what the visual effects are. Trying to make sense of W3C HTML standards requires a PhD in computer lanuage theory. Anyone can play monkey and copy from other sites.

Documentation

It might help to buy an introductory text, but HTML is so simple, that probably is not necessary.

The bare bones html guide.
the classic A Beginner's Guide to HTML
The tutorial for FORMS.
For the masochists, try the official standards documents for HTML 3.2 and HTML 4.01.

Proofreading

To ensure your HTML will work when you upload it to a website server, use all lowercase filenames and directory names. Avoid spaces and punctuation (except _) in names. Make sure you use relative links to your own files -- no C: or file:///C|/ style absolute references.

The W3 Consortium offers an online validator for the various HTML dialects. It is sort of a Lint for HTML. It can ensure your HTML will work properly on browsers other than the one you tested it on. The W3C consortium also controls the various HTML standards.

For speed, and control, I use CSE HTMLValidator to check my web pages offline and in batches.

When it comes to HTML4, and CSS style sheets, browser support is shaky. You have to stick to a subset of features that are commonly supported.

The Tags

This section just summarised the tags. Sometimes what I tell you here will be enough to use them. It is really just designed to jog your memory. Look elsewhere for details or experiment!

Class

It is easiest to use the class attribute, then specify what it means in your CSS style sheet.

Use of CSS class
Start Tag	End Tag	description
<span class="strawberry">	</span>	encloses text of the strawberry class. The browser will look in the style sheet to figure out what attributes should be applied to strawberry text, perhaps a size, colour, alignment, font etc.
<div class="strawberry sweet">	</div>	Applies both the classes strawberry and sweet to a group of lines. The browser will look in the style sheet to figure out what attributes should be applied to strawberry and to sweet text, perhaps a size, colour, alignment, font etc.
<ul class="strawberry">	</ul>	like a regular UL except everything in it is should be treated as strawberry text.

Groups

Groups, Lists, Glossaries
Start Tag	End Tag	description
<ol>	</ol>	ordered numbered list
<ul>	</ul>	unordered bulleted list
<menu>	</menu>	menu list, more compact than ul.
<li>	</li>	list item
<dl>	</dl>	dictionary list
<dt>	</dt>	dictionary term being defined
<dd>	</dd>	dictionary definition

Line Breaks

Line Breaks
Start Tag	description
<br>	new line, no extra space
<br clear="all">	gets past any flow-around illustration.
<p>	new paragraph, blank line inserted
<p align="center">
<hr>	horizontal rule

Font selectors

Font Colours and Size
Start Tag	End Tag	description
<h1>	</h1>	major heading
<h6>	</h6>	most minor heading
<b>	</b>	bold
<i>	</i>	italic
<tt>	</tt>	typewriter font
<pre>	</pre>	preformatted
<font size="+3">	</font>	or 3 for absolute size rather than increase
<font color="red">	</font>	see choice of colours.
<font face="Comic Sans MS,Helvetica">	</font>	suggest a typeface. User must have it installed, can specify alternates in order of preference.
<big>	</big>	shorthand for <font size="+1">
<small>	</small>	shorthand for <font size="-1">
<dfn>	</dfn>	definition
<em>	</em>	italic emphasis
<cite>	</cite>	book titles
<code>	</code>	program listings
<kbd>	</kbd>	keystrokes
<samp>	</samp>	computer status messages
<strong>	</strong>	bold emphasis
<var>	</var>	to be replaced by specific when used. Typically rendered in italics.
<u>	</u>	underline
<address>	</address>	email address, possibly street address.
<blockquote>	</blockquote>	long quotation

Anchors

typical target -- place where you jump TO:

<h2><a NAME="GLOSSARY">Roedy's Java Glossary</a></h2>

Rules for making up anchor names:

Anchor names must start with a-z or A-Z.
Anchor names must be composed of a-z, A-Z, 0-9, underscore _ colon : and period . nothing else.
Anchor names are case insensitive. Apple is considered the same as APPLE.
For indirect links, use a trailing underscore _ on the anchor name, e.g. MAC_ so you will know not to refer people to those dummy anchors, but rather directly to the HTML at that anchor points to. For example the HTML at anchor at MAC_ may say "see MACINTOSH". People are lazy and will get angry if you send them to anchor MAC_ rather than anchor MACINTOSH, because they have to do an extra click to get to MACINTOSH where the real information is.

Links

typical reference that when clicked takes you to a particular spot:

<a href="http://www.Delftware.com/roedy/gloss.htm#GLOSSARY">glossary</a>
or
<a href="gloss.htm#GLOSSARY">glossary</a>
or
<a href="#GLOSSARY">glossary</a>

Email reference

<a href="mailto:yourid@yourdomain.com">Roedy Green : yourid@yourdomain.com</a>

It is a good idea to repeat the email address visibly for people whose browsers don't support mailto or for people who want to copy/paste the email address into their separate email or database program.

GIF or JPG image reference (often embedded in an <a href="someplace.html"> .. </a>) clickable link to provide a picture button:

view

The longdesc points to a text description of the image for the visually disabled.

Tables

The trick to understanding tables is to realise that the entire table must be contained in <table>...</table>, each row must be contained in <tr> ... </tr>, each heading must be contained in <th> ... </th> and each data cell must be contained in <td> ... </td>.

Tables
Start Tag	End Tag	description
<table border="5" cellspacing="2" cellpadding="1" width="100" width="50%" bgcolor="#f0e68c" summary="Best places to buy toasters">	</table>	cellpadding is interior border of cell. cellspacing is border _between_ cells, the width of the horizontal and vertical lines separating cells. cellpadding will appear on left side of leftmost cell and right side of the rightmost cell; cellspacing will not. Summary does not display. It is used primarily to help visually disabled people navigate.
<caption>	</caption>	caption title, appears above table, in plain font.
<colgroup span="2" class="strawberry">	</colgroup>	encloses <col> elements. Also can be used to apply attributes to a group of columns. Must come before everything else. HTML 4 lets you specify the attributes of an entire column. You don't have to repeat them in every cell the way you do in regular HTML. See the COL and COLGROUP elements. Have a look at this example.
<col class="strawberry" align="center">		tells about entire column's colour, alignment, class, colspan etc. Note you put everything right in the <col> tag. There is no </col> tag.
<thead>	</thead>	encloses table header rows. The THEAD TBODY and TFOOT tags let you group your table in three regions, so that if the table scrolls, the header and footer will always be visible. Just the middle part will scroll.
<tbody>	</tbody>	encloses table body rows
<tr valign="baseline">	</tr>	table row valign can be top, middle, bottom, baseline. valign can also occur on caption, tr and td.
<th align="center">	</th>	header item, also left,center,right,justify
<td align="center">	</td>	data item, also left,center,right,justify
<th rowspan="2">	</th>	header spanning two rows
<td rowspan="2">	</td>	data item spanning two rows
<th colspan="2">	</th>	header spanning two columns
<td colspan="2">	</td>	data item spanning two columns
<td dp=":">	</td>	align data in this cell at the : char
<td nowrap>	</td>	may not break lines in cell
<td width="50%">	</td>	hints on how to compute column widths
<tfoot>	</tfoot>	encloses table footer rows
<spacer type=horizonal>		can also be vertical or block. Netscape appears to ignore spacers.
<spacer size="20">		size in pixels
<spacer width="20">		horizontal size in pixels
<spacer height="20">		vertical size in pixels
<spacer align="left">		also right and center

Colours

Click any ball to view the corresponding colour palette.

Named Colours	Alphabetically	BHS: by Brightness, Hue, Saturation	HBS: by Hue, Brightness, Saturation	SBH: by Saturation, Brightness, Hue
Named Colours	RGB: Numerically	BSH: by Brightness, Saturation, Hue	HSB: by Hue, Saturation, Brightness	SHB: by Saturation, Hue, Brightness
Numbered Colours	HTML 3.2	Websafe	Rainbow	X11
Selected Colours	Pale	Dark	Simple	Greys	Colour Schemes

The above colour chart shows Netscape's 133 standard colours, and HTML 3.2's 16 standard colours. It shows the colours displayed eight ways, (colour on white, colour on black, black on colour, white on colour) both using alpha names and hex names. You can check out your browser for Netscape colour compatibility. It shows the Standard Netscape 7.02 alpha names such as "aliceblue" and also the hex, RGB an HSB values both as HTML and raw ASCII text.

Frames

Frames
Start Tag	End Tag	description
<frameset rows="100,200">	</frameset>	surrounds rows of frames, pixels
<frameset rows="20%,80%">	</frameset>	relative space for each
<frameset rows=",">	</frameset>	let browser decide on spacing
<frameset cols="10,20">	</frameset>	surrounds cols of frames, pixels
<frameset cols="20%,80%">	</frameset>	relative space for each
<frameset cols=",">	</frameset>
<frameset frameborder="0"	</frameset>	no borders around the frames
<frame src="http://mindprod.com/x.html	>	where to get the html to fill the frame
<frame name="someFrame"	>	name a window for referencing via BASE
<frame noresize	>	don't let user change frame size
<frame scrolling="auto"	>	yes, no, -- scroll bars?
<frame marginheight="10"	>	pixels in border top/bottom.
<frame marginwidth="10"	>	pixels in border left/right.
<noframes>	</noframes>	sandwiches HTML to render the page if the browser does or will not support frames.
<BASE TARGET="someFrame" HREF="http://mindprod.com/x.html">		In a menu frame document, one of the "tiles". allows one frame to load documents into another named frame for following HREFs. The HREF provide a default base for any relative hrefs coming. You can also use the magic names _blank, _self, _parent and _top as your frame target. See below for details.
<a HREF="xxx.html" TARGET="someFrame">		Base is unchanged. Most browsers let you leave out the <BASE HREF, which allows code to work both locally and on a website, though strictly speaking the href is mandatory.

Frame Targets
Target	description
_blank	in a new, unnamed window.
_self	in this frame.
_parent	into parent frame (or this frame if no parent).
_top	into the full, original window (thus cancelling all other frames). This is how you get rid of all frames.

Figures

<fig> <caption> <credit> <overlay> are not supported in the big three browsers.

Indenting

You can cheat and use

<ul> ... </ul>

Happily, the technique also nests properly.

The official way is to use CSS styles.

<div style="padding-left: 30px"> ... </div>

If you want to pad all paragraphs, put this in the "head" section or in the style sheet.

<style type="text/css"> p {padding-left: 30px} </style>

Or do this:

<style type="text/css"> p.leftpad {padding-left: 30px} </style>

and then it will only indent subsequent paragraphs that are marked like this:

<p class="leftpad"> ... </p>

Unfortunately, the technique does not handle nesting. <div> does however.

To indent just the first line of each paragraph, use:

<p style="text-indent: 30px">

Fonts

You can see how well your browser supports various fonts by examining this list. The fonts that are supported will look different from the default font. All you have to do is install more fonts in the Control Panel to make them available to HTML. Unfortunately, others may not have the fonts installed. There is no way to include fonts with your HTML document.

Aldine 401 BT Eo	CenturyExpd BT	GoudyHvyface Cn BT	MS PMincho	Times-Roman
Algerian Eo	CenturyOldst BT	GoudyOlSt BT	MS Sans Serif	Times
Arial Black	Comic Sans MS	GoudyOlSt XBd BT	MS Serif	TiresiasPCfont
Arial Narrow	Courier New	Greek Symbols (Greek Symbols)	MS UI Gothic	TiresiasScreenfont
Arial	Courier	Helvetica-Narrow	New York	Trebuchet MS
AvantGarde	cursive	Helvetica	NewCenturySchlbk	Utopia Regular
Bauer Bodoni Black BT Eo	Default	Humanist 521 BT Eo	News Gothic MT Eo	Verdana
Boden Esperanto	Desdemona Eo	Impact	OCR-A BT	Webdings (Webdings)
Bodoni Bd BT	Dialog	Lucida Bright	OCR-B-10 BT	Wingdings 2 (Wingdings 2)
Bodoni BdCn BT	DialogInput	Lucida Console	Palatino	Wingdings 3 (Wingdings 3)
Bodoni Bk BT	Egyptian505 BT Eo	Lucida Sans Typewriter	Perpetua	Wingdings (Wingdings)
Book Antiqua Eo	Elegant Garamond BT Eo	Lucida Sans Unicode Eo	Publika	ZapfChancery
Book Antiqua	Futura Extra Black BT Eo	Lucida Sans	sans-serif	ZapfDingbats (ZapfDingbats)
Bookman Old Style	Garamond	Microsoft Sans Serif	Scribble	ZapfHumnst BT
Bookman	Geneva	Monaco	serif	ZapfHumnst Dm BT
Britannic	Georgia	monospace	Symbol (Symbol)	ZapfHumnst Ult BT
CentSchbook BdCn BT	Gill Sans	Monospaced	Tahoma	Zurich Light BT Eo
CentSchbook BT	Goudy Old Style Eo	MS Gothic	TektonMM
CentSchbook Mono BT	GoudyCatalog BT	MS Mincho	Tempo Esperanto Normala
Century Gothic Eo	GoudyHandtooled BT	MS Outlook	Terminal
Century Gothic	GoudyHvyface BT	MS PGothic	Times New Roman

Fonts available in Java

Sound

There are two basic approaches. You can embed music or sound to start automatically when the page loads like this:

view

Tag	Meaning
<embed src="relativepath/yoursound.mid"	name of sound file, usually .mid .mp3
hidden="true"	hide
autostart="true"	Automatically start the music
loop="true"	Play the music over and over
width="70"	Control panel is 70 pixels wide.
height="25"	Control panel is 25 pixels high.

The other technique is with a simple link usually with an icon that starts the music or sound when you click.

You encode it like this:

view

Composition Tools

I like to create my web pages with a text editor , but if you want a tool to help you compose HTML in a more WYSIWYG style try one of these:

Slickedit: This is what I use -- a general purpose editor. It has HTML and Java syntax colouring which makes it much easier to avoid typos, and Java and HTML beautifying to nicely indent the tags.
Dreamweaver: A professional tool for creating HTML, and HTML with embedded JSP, PHP, ASP, coldfusion etc.
Netscape Composer: part of Netscape Communicator.
TopStyle: helps you compose and manage your style sheets.
Adobe PageMill
Microsoft FrontPage 2000
The Quoter Amanuensis will automatically convert HTML's reserved characters to their &amp é © etc. form. You just copy your text to the clipboard, click CONVERT on the amanuensis, then paste the converted text into your document in a text editor such as Slickedit.

Decorating

Here are some tools for snazzing up your web pages with graphics or other gismos:

Paint Shop Pro: bit map paint program, format conversions.
Wright Design: A friend of mine Clinton Hussy gave a demo of it and I was very impressed. It is much faster than Adobe Photoshop. It combines the virtues of vector and bitmap think. It also comes in a lite version.
Adobe Photoshop: Touching up photographs. Includes ImageReady.
Eye Candy: special effects addin to Paint Shop Pro or Adobe Photoshop.
NVR Border Mania: simple program to add borders to images.

Special Characters

Here are special characters and the codes you must key to get them in HTML. The official term for them is entities. These work no matter what encoding the browser is using. If you want codes that change as the encoding changes see this ASCII table.

This table will show you how to create all the special characters like:

€ † ™ ´ & ¦ ¸ ¢ © ¤ ° ÷ ½ ¼ ¾ > ¡ ¿ « ‘ < ¯ µ · ¬ ª º ¶ ± £ " » ’ ® § ¹ ² ³ ß × ™ ¨ ¥

and all the accented characters like:

With Unicode encoding, you can get about 64,000 different characters! However fonts for it are not widely supported.

See encoding to learn more about all the different ways glyphs can be mapped onto the 8-bit numbers 0 .. 255, (or 16-bit numbers 0..65535 for Unicode). See content type to learn how to specify the encoding you are using in your document.

The é style abbreviations are not kosher in HTML3.2. They are not part of the HTML 3.2 spec, but Netscape and Internet Explorer still support them.

Codes for Special Characters in HTML
Char	Code	Description
´	´	acute accent
&	&	ampersand
'	'	apostrophe, single quote, use grave and acute for left/right, or the new ‘ and ’.
¦	¦	broken bar
•	•	bullet.
¸	¸	cedilla
¢	¢	cent sign
©	©	copyright sign
¤	¤	currency sign
†	&dagger;	dagger. Not widely supported. only works in Latin-1
°	°	degree sign
¨	¨	dieresis
÷	÷	division sign
"	"	double quote. There is no left/right quote.
…	…	... ellipsis
€	€	Euro. only works in Latin-1.
ª	ª	feminine ordinal indicator
`	`	grave
≥	≥	greater or equal
>	>	greater than
¡	¡	inverted exclamation mark
¿	¿	inverted question mark
«	«	left guillemot, left angled quote.
‘	‘	left single quote. New.
≤	≤	less or equal
<	<	less than
¯	¯	macron overline
º	º	masculine ordinal indicator
—	—	m-dash
µ	µ	micro sign
·	·	middle dot
×	×	multiplication sign
–	–	n-dash
		non breaking space
¬	¬	not sign
¶	¶	paragraph sign
±	±	plus-minus sign
£	£	pound sign
®	®	registered trade mark sign. See also ™ ™
»	»	right guillemot, right angled quote
’	’	right single quote. New.
§	§	section sign
(-)		soft hyphen -. The soft hyphen is always visible, and may look slightly different from a normal hyphen. It is intended for use at ends of line to indicate a word break. There is no such thing as a non-breaking hyphen, that forces text on both sides to stay on the same line. Further there is no such thing as a discretionary hyphen that marks a good place to split a word over two lines if necessary, invisible unless the word breaks over two lines.
¹	¹	superscript 1 one
²	²	superscript 2 two
³	³	superscript 3 three
~	~	tilde
™	&trade	Trademark. ™ only recently supported. Use <sup>TM</sup> for safety. only works in Latin-1. See this full discussion of the problems. See ® ®
½	½	vulgar fraction 1/2 one half
¼	¼	vulgar fraction 1/4 one quarter
¾	¾	vulgar fraction 3/4 three quarters
ß	ß	German double s, Beta.
¥	¥	yen sign

Accented Letters

Accented Letters
Char		Code
Upper Case	Lower Case	Upper Case	Lower Case	Description
À	à	À	à	a grave
Á	á	Á	á	a acute
Â	â	Â	â	a circumflex
Ã	ã	Ã	ã	a tilde
Ä	ä	Ä	ä	a umlaut
Å	å	Å	å	a ring
Æ	æ	Æ	æ	ae ligature
Ç	ç	Ç	ç	c cedilla
È	è	È	è	e grave
É	é	É	é	e acute
Ê	ê	Ê	ê	e circumflex
Ë	ë	Ë	ë	e umlaut
Ì	ì	Ì	ì	i grave
Í	í	Í	í	i acute
Î	î	Î	î	i circumflex
Ï	ï	Ï	ï	i umlaut
Ð	ð	Ð	ð	Icelandic eth
Ñ	ñ	Ñ	ñ	n tilde
Ò	ò	Ò	ò	o grave
Ó	ó	Ó	ó	o acute
Ô	ô	Ô	ô	o circumflex
Õ	õ	Õ	õ	o tilde
Ö	ö	Ö	ö	o umlaut
Ø	ø	Ø	ø	o slash
Ù	ù	Ù	ù	u grave
Ú	ú	Ú	ú	uacute
Û	û	Û	û	u circumflex
Ü	ü	Ü	ü	u umlaut
Ý	ý	Ý	ý	y acute
Þ	þ	Þ	þ	Icelandic thorn
Ÿ	ÿ	&Yuml;	ÿ	y umlaut

For official set of W3C entities see this list. For the newer character entities that are not yet fully supported, see RobinLionHeart. Please tell me about any important omissions in my own table.

Standard Prelude

Here is a standard header you could use on all your HTML files, with the obvious modifications.

view

The header, link, meta and body tags have the following puroses:

doctype
says which level of HTML you are using. If you use the strict DTD, you must have absolutely perfect HTML 4, something quite unlikely. If your page has frames, use this DTD.

view

Which doctype to use?: you need a different one depending on whether you are doing plain, frameset or strict html. Note DOCTYPE HTML PUBLIC should be upper case. Here are the possible DOCTYPES:

view
link href
point to your master css style sheet.
link rev
give author's email address. Used by Lynx browser.
link rel
specify the logically previous page so browser can do a better back/up. You can also have a next link to the next logical page to help the browser navigate. There are all kinds of special links you can embed for browsing via a toolbar.
Content-Type
Tell which character set encoding you are using, e.g. which accented letters you use. Normally iso-8859-1 for Latin-1, sometimes iso-8859-3 for Esperanto, or unicode (or utf-8 for compact Unicode) to handle nearly all languages, including Arabic, Thai and Chinese.
PICS-Label
encodes your document for adult content, if any.
PICS
AUTHOR
author's name.
DESCRIPTION
Summary of what's on the page. Used by search engines to summarise the page for people. Should be more detailed than the title.
GENERATOR
What tool you used to create the HTML.
KEYWORDS
important words in the document. Used by search engines to direct people to your document. Avoid using concept words that don't actually appear in the document. Search engines think you are cheating.
title
Title used to display a hit by a search engine. Also used on the window bar when the page is displayed.
body
are for css-challenged browsers that don't understand the style sheet.

Body Tags

Body Tags
Field	Function
link rev	mailto for Lynx browser
PICS-Label	adult content rating
BGCOLOR	background RGB in hex
BACKGROUND	gif to use as background tiled.
TEXT	ordinary text colour
LINK	clickable links not yet visited
VLINK	links that have already been visited
ALINK	active link text, what you just clicked.
MARGINHEIGHT	pixels in border top/bottom.
MARGINWIDTH	pixels in border left/right.

To make such code easier to maintain, you could use SSI Server Side Includes. You then need maintain only one copy of the standard headers.

CSS Styles

To come. In general, avoid styles, and use style sheets. That way you can make a change to you style sheet and your whole website is instantly updated.

CSS Style Sheets

To come. In the meantime, have a look at my style sheet. Looking at an example will probably explain nearly everything you need to know. TopStyle makes it easier to edit style sheets, but it won't explain what the million little fields are for. You will probably figure it out much faster that way that by reading documentation prepared for and by mathematicians.

HTML In Email

Many people use HTML in email. Eudora calls such emails styled. Some call them formatted. Some people love them. Others hate them. Unfortunately no email program I know of will keep track which form each of your correspondents prefer plain or styled, and automatically send them the preferred type.

The arguments against HTML are:

Some people have old browsers that cannot render the HTML in received messages. They see the text interlaced with gibberish.
For people with older email programs such as Outlook 97, the message arrives as an attachment that must be rendered by firing up a browser.
HTML is bulkier. It takes more time to transmit.
Spammers and advertisers love to use HTML, especially images. HTML = spam in many minds. The Pavlovian association blinds them to the legitimate uses of HTML in emails.
There is no proper standard for HTML in emails.

I like HTML myself. The colour, bold, italic and font size, as well as being able to embed an image may my emails much more expressive and personal. HTML is handled with a standard MIME body, just labeled plain/html instead of plain/text. The email program puts this in automatically.

There are a couple of strange email tags you will find only in HTML email.

HTML Used Only In Emails
HTML	Purpose
<x-sigsep><p></x-sigsep>	Separates body from the signature.
<u><a href="http://mindprod.com/" eudora="autourl">http://mindprod.com</a></u>	Indicates some text in your email, in this case http://mindprod.com/ that looked to Eudora like a URL, that it has automatically converted into a link.
<blockquote type=cite class=cite cite>...</blockquote>	Used for quoting in replies. Rendered as nested vertical bars down the left margin.
<img src="cid:5.1.0.14.2.20020323171421.00a76430@mail.mindprod.com.0" width=140 height=166 alt="woody.jpg">	An embedded, as opposed to attached, image. The image itself is made into a hidden attachment that is base64 encoded. HTML email cannot presume web access when mail is written, so ordinary <img tags can't be used.

Forms

A form lets the user fill in the blanks, then send just the data to the server. It does not do any validation. That all must be handled by the server. A more advanced validation system is called XFORMS.

Here is a typical form:

Here is the HTML to generate it:

<form action="http://localhost:8081/adduser" method="post">
<p>
<input type="text" size="30" name="firstname" id="firstname">
<label for="firstname">: First name</label>
<br>
<input type="text" size="30" name="lastname" id="lastname">
<label for="lastname">: Last name</label>
<br>
<input type="text" size="40" name="email" id="email">
<label for="email">: email</label>
<br>
<input type="radio" name="sex" value="Male" checked="checked">
Male
<br>
<input type="radio" name="sex" value="Female">
Female
<br>
<input type="checkbox" name="sendAds" id="sendAds" value="yes" checked="checked">
<label for="sendAds">ok to send email ads?</label>
<br>
<input type="submit" name="what" value="Send">
<input type="reset">
</form>

In this case the forms sends its data to a locally running test echoserver waiting for input on port 8081. What gets sent to the server looks something like this, almost 500 bytes of header followed by:

firstname=Francois+Marie+&lastname=d%27Arouet+Voltaire&email=voltaire%40mindprod.com &sex=Male&sendAds=yes&what=Send

i.e. Francois Marie, d'Arouet Voltaire, voltaire@mindprod.com, Male, sendAds ok.

The method can be either GET for short idempotent queries or POST for more complex ones. You can embed more elaborate HTML formatting commands inside the <form... </form> sandwich. The name fields identify the data to the server. the id fields help link together a label with its data field.

And here is what typically arrives at the server:

POST /adduser HTTP/1.1
User-Agent: Opera/7.50 (Windows NT 5.0; U) [en]?
Host: localhost:8081
Accept: text/html, multipart/mixed, application/xml;q=0.9, application/xhtml+xml;q=0.9, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
Accept-Language: en
Accept-Charset: windows-1252, utf-8, utf-16, iso-8859-1;q=0.6, *;q=0.1
Accept-Encoding: deflate, gzip, x-gzip, identity, *;q=0
Connection: Keep-Alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 80

firstname=Roedy&lastname=Green&email=someone%40mindprod.com&sex=Male&sendAds=yes

The parameters arrive after a set of standard header fields separated from the by a blank line. The datafields are urlencoded, e.g. space appears as %40. Servlets have method for decoding and parsing all this information. Had I not ticked the sendAds checkbox the &sendAds=yes would be misssing entirely.

Learning More

Visibone make a series of cheat sheets, both online and printed. Some show the full Unicode set and the extended unicode &xxx codes. Others show CSS. Others show XHTML. Some are colour charts.

ASCII code table ¤ Esperanto Accented Letters ¤ Font Shower Student Project ¤ Fonts ¤ FORMS

home	Canadian Mind Products
	mindprod.com IP:[24.87.56.253]
	Your IP:[80.134.30.163]
	You are visitor number 20316.
	Please send errors, omissions and suggestions
	to improve this page to Roedy Green.
	You can get a fresh copy of this page from:	or possibly from your local J: drive mirror:
	http://mindprod.com/jgloss/htmlcheat.html	J:\mindprod\jgloss\htmlcheat.html

Java Glossary : HTML Cheat Sheet

Introduction

Learning HTML

Documentation

Proofreading

The Tags

Class

Groups

Line Breaks

Font selectors

Anchors

Links

Tables

Colours

Frames

Figures

Indenting

Fonts

Sound

Composition Tools

Decorating

Special Characters

Accented Letters

Standard Prelude

doctype

link href

link rev

link rel

Content-Type

PICS-Label

AUTHOR

DESCRIPTION

GENERATOR

KEYWORDS

title

body

Body Tags

CSS Styles

CSS Style Sheets

HTML In Email

Forms

Learning More