HTML Cheat Sheet : Java Glossary

home page go to the Java Glossary Home go to the Computer Buyer’s Glossary up jump to foot of page Google search web for more information on this topic
punctuation 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 (all)
©1996-2013 2008-03-19 Roedy Green, Canadian Mind Products
HTML HTML Cheat Sheet
Introduction CSS Forms Line Breaks Special Characters
Accented Characters Cyrillic Letters Frames Links To Styles
Anchors Decorating Greek Letters Named Entities Style Sheets
Arrows DOCTYPE Groups Nested Quote Escaping Tables
ASCII Documentation Hex Entities Numeric Entities Unicode
Bracketing Characters Email Links HTML5 Entities Obscure Arrows usemap
Body Email formatting Iframes Polish Accented Letters Java cheat sheet
Browser Fonts Entities Image Techniques Possible Special Characters Links
Class Esperanto Image Displaying Prelude
Colours Figures Indenting Proofreading
Comments Fonts Learning HTML Quote Escaping
Composition Tools Font Selectors (without CSS) Learning More Russian Letters

Introduction

This essay will get you started writing HTML (Hypertext Markup Language) so you can put up a website on the Internet. HTML 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 websites 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 (World Wide Web Consortium) HTML standards requires a PhD in computer language 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.

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://localhost/C|/ style absolute references.

The W3 Consortium offers an W3C_logoonline 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 HTML Checked!  CSE HTMLValidator to check my web pages offline and in batches.

When it comes to HTML4, and CSS style sheets, browser support is shaky. TopStyle will help you keep track of which features work on which browsers.

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 (Cascading Style Sheets) 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> Applying two classes to the same tag. This 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. Note they are separated by a space not a comma!
<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. Consider using a borderless table with column of titles and a column of detail instead. The bullets themselves don’t give much additional information.
<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
Tags description
<br>
or
<br />		 new line, no extra space.
To prepare for XHTML (extensible Hypertext Markup Language), it is better to use <br />.
<br clear=all /> gets past any flow-around illustration.
<p>
or
<p>…</p>		 new paragraph, blank line inserted.
To prepare for XHTML, it is better to use <p>…</p> surrounding each paragraph.
<p align=center>…</p> centre each line
<hr>
or
<hr />		 horizontal rule
To prepare for XHTML, it is better to use <hr />

Font selectors (without CSS)

Font Colours and Size
Start Tag End Tag Appearance Description
<h1> </h1>

sample

 major heading
<h6> </h6>
sample
 most minor heading
<b> </b> sample bold, c.f. strong
<i> </i> sample italic, c.f. em
<tt> </tt> sample typewriter font
<u> </u> sample underlined.
<pre> </pre> 
sample
preformatted
<font size=+3> </font> sample or 3 for absolute size rather than increase
<font color=red> </font> sample see choice of colours.
<td bgcolor=#ffeedd> </td> sample see choice of colours.
<font face="Comic Sans MS,Helvetica,sanserif"> </font> sample suggest a typeface. User must have it installed, can specify alternates in order of preference. You should end with one of the CSS default fonts serif, sansserif or monospace.
<big> </big> sample shorthand for <font size=+1>
<small> </small> sample shorthand for <font size=-1>
<dfn> </dfn> sample definition
<em> </em> sample emphasis, usually renders as italic.
<cite> </cite> sample book titles
<code> </code> sample program listings
<kbd> </kbd> sample keystrokes
<samp> </samp> sample computer status messages
<sup> </sup> 2 superscript. You can also use entities like &sup2; ²
<strong> </strong> sample strong emphasis, usually rendered as bold.
<var> </var> sample to be replaced by specific when used. Typically rendered in italics.
<u> </u> sample underline
<address> </address>
sample
email address, possibly street address.
<blockquote> </blockquote>
Diderot took the ground that, if orthodox religion be true Christ was guilty of suicide. Having the power to defend himself he should have used it.
~ Robert Green Ingersoll (born: 1833-08-11 died: 1899-07-21 at age: 65)
 long quotation

Nested Quote Escaping

When you need to specify a " in the middle of text, you can use the &quot; entity to represent the character, or just leave it unescaped as ".

When you need to specify a " in the middle of a quoted attribute value, you have two ways of handling it:

Comments

You can insert comments in your HTML that are ignored. You can insert them in the text but not inside tags. Anything between <!-- … --> is ignored. It is not treated like white space. Comments can span lines. <!> is a dummy comment. Avoid the string -- inside comments. I always put a space after <!-- and before -->, though it is not strictly necessary. Note the asymmetry of the start and end tags.

Comments are not treated as white space, e. g. grand<!-- a comment in the middle of a word -->stand will render as grandstand not grand stand.

a <!-- large --> dog
a<!-- large --> dog
a <!-- large -->dog
will all render the same way: a dog but of course
a<!-- large -->dog
will render as adog.

Anchors

typical 
<h2><a name="GLOSSARY"></a>Roedy&rsquo;s Java Glossary</h2>
Rules for making up anchor names:
  1. The HTML 4.01 spec section 6.2 states that anchor names must begin with a letter a-z, A-Z, and may be followed by any number of letters, digits 0-9, hyphens -, underscores _, colons :, and periods .. So lead _ are not permitted. All-numeric anchors are not permitted.
  2. Anchor names are supposed to be case insensitive. Apple is supposed to be treated as the same as APPLE. To be safe, always consistently use UPPER CASE.
  3. 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.
Sun flagrantly ignores these rules and uses space, ( ) and comma in its anchors in generated Javadoc.

Links To

typical 
Anchors: Where you Jump To

Colours

Click any ball to view the corresponding colour palette.

Named Colours select palette Alphabetically (113) select palette BHS: by Brightness, Hue, Saturation select palette HBS: by Hue, Brightness, Saturation select palette SBH: by Saturation, Brightness, Hue select palette Java AWT Colours (16,777,216)
select palette RGB: Numerically (113) select palette BSH: by Brightness, Saturation, Hue select palette HSB: by Hue, Saturation, Brightness select palette SHB: by Saturation, Hue, Brightness select palette Java Swing Colours (16,777,216)
Numbered Colours select palette HTML 3.2 (16) select palette Websafe (216) select palette Rainbow (4096) select palette Spectrum (401) select palette X11 (657)
Selected Colours select palette Pale (256) select palette Dark (2022) select palette Simple (105) select palette Greys (256) select palette 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 8.0 alpha names such as aliceblue and also the hex, RGB (Red Green Blue) an HSB (Hue Saturation Brightness) values both as HTML and raw ASCII (American Standard Code for Information Interchange) text.

Figures

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

Indenting

<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 
<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

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

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 (What You See Is What You Get) style try one of these:

Decorating

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

Special Character Entity Codes

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.

The entities such as &divide;&#x2713; only work in HTML, not Java. In Java, you get at the exotic characters by encoding them in hex in your strings like this: \u00f7\u2713 to produce ÷ ✓. See String literals for more details.

For official set of W3C entities see this definitive list of entities. Please tell me about any omissions in my own tables. Last revised/verified: 2005-06-24

Standard Prelude

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

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

Body Tag Details

If you use CSS, you don’t use a <body tag.
Body Tags
Field Function
bgcolor background RGB in hex
background *.gif to use as background tiled. For repeating backgrounds, it is best to make the *.gif 25 pixels high even if in theory 1 pixel would do. That speeds rendering even though it slows download.
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. Oddly 0 is an illegal value. Leave marginheight out altogether for 0.
marginwidth pixels in border left/right. Oddly 0 is an illegal value. Leave marginwidth out altogether for 0.
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. I do it with HTML macros, which does not require any code on the server. If you look at my HTML source, you can see how I generate standard headers. I have not yet released the tools I use to the public. If you are curious how I generate my website using macros, see the HTML entry.

CSS Styles

In general, avoid inline styles, and use style sheets. That way you can make a change to you style sheet and your whole website is instantly updated. If you really want to do it, look around the net at people’s headers.

CSS Style Sheets

CSS
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 Used Only In Emails
HTML Purpose
 
<x-sigsep>
<p></x-sigsep>
 Separates body from the signature.

 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.

 Used for quoting in replies. Rendered as nested vertical bars down the left margin.

 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.

Learning More

2-letter language codes for HTML
Amper Utility: to convert & to &amp; intelligently
ASCII code table
captioning images kludges
common Fonts
CSE HTMLValidator
CSS
CSS default Fonts
CSS level 1 Specification
CSS level 2 Specification: current CSS standard
DTD
entities
Entities classes: to insert and strip entities from HTML
Entities: a program to convert text to entity form and back
Esperanto Accented Letters
Esperanto Fonts
Fonts
FontShower: fonts available to Java
FORMS
FORMS: specification
Free Fonts
hex entities
HTML 4.01 Specifications: current HTML Standard
HTML editor
HTML5
Java Cheat Sheet
Linux Cheat Sheet
logical Fonts
Macintosh OS X Fonts
monospaced Fonts
mung
nts
office Fonts
physical Fonts
PostScript Fonts
proportional Fonts
response codes
Reuters Unicode Displayer
RichInStyle.com HTML 4 Guide
sans serif Fonts
Tiresias Fonts
Unicode
usemap
Vista Fonts
W3C CSS Validator
W3C definitive list of entities
W3C HTML Markup Validator
Wikipedia entity list
XHTML
XP Fonts
CMP homejump to top

available on the web at:

 http://mindprod.com/jgloss/htmlcheat.html
  

optional Replicator mirror
of mindprod.com
on local hard disk J:

 J:\mindprod\jgloss\htmlcheat.html
logo
Please email your , letters to the editor, errors, omissions, typos, formatting errors, ambiguities, unclear wording, broken/redirected link reports, suggestions to improve this page or comments to Roedy Green : feedback email. If you want your message, your name or email kept confidential, not considered for public posting, please explicitly specify that. Unless you state otherwise, I will treat your message as a letter to the editor that I may or may not publish in the feedback section. After that, it will be too late to retract it. If you disagree with something I said, especially when sending an ad-hominem attack, a rant composed mainly of obscenities or a death threat, please quote the offending passage and cite the web page where you found it, tell me why you think it is wrong, and, if possible, provide some supporting evidence. I can’t very well fix erroneous or ambiguous text if I can’t find it.
Blog
IP:[65.110.21.43]
Your face IP:[54.234.180.187]
You are visitor number 197,970.