The Document Object Model (DOM)

This is a simplified view of the Document Object Model (DOM). Each box represents an object in the DOM tree structure. There are additional objects in the DOM that are not listed here. I hope to add them to an expanded image later.

The Document Object Model (DOM)

HTML Event Handlers

This is a brief listing of HTML Event Handlers which are used to trigger JavaScript code in web pages:

onAbort	The loading of an image has been canceled
onBlur	A page element loses focus
onChange	The user changes the content of a form field
onClick	The user uses the mouse to click on a page element
onDblClick	The user uses the mouse to double-click on a page element
onError	An error occurs when loading a page or an image
onFocus	A page element gets focus (selected)
onKeyDown	The user presses a keyboard key
onKeyPress	The user presses or holds down a keyboard key
onKeyUp	The user releases a previously pressed keyboard key
onLoad	A page or an image finishes loading
onMouseDown	The user presses a mouse button
onMouseMove	The mouse cursor moves
onMouseOut	The mouse cursor moves off of a page element
onMouseOver	The mouse cursor moves over a page element
onMouseUp	The user releases a previously pressed mouse button
onReset	The form is reset; the reset button is clicked
onResize	A window or frame is resized
onSelect	The user selects some text on the page
onSubmit	The form is submitted; the submit button is clicked or the enter key is pressed
onUnload	The user leaves the current page

Note: Event Handlers that are device-non-specific are preferred to those that are device-specific. So, for example, use onFocus and onBlur instead of onMouseUp and onMouseDown since the latter are triggered specifically by using the mouse. Keyboard presses will not trigger such an event. Using onFocus and onBlur will make the event device neutral and will be triggered by both the keyboard and the mouse.

Remember, the above event handlers are actually part of XHTML (since HTML 4) not JavaScript. JavaScript now boasts an extended list of event handlers. See http://www.java2s.com/Code/JavaScript/Event-onMethod/CatalogEvent-onMethod.htm for details.

From HTML to XHTML and Beyond: XHTML Coding for e-Commerce I Teachers

Career-Technical Education Summer Conference 2006
Business & Information Technology Education
Pre-Conference Sessions
Monday, July 17, 2006; 8:30 a.m. – 5:00 p.m.
The Joseph S. Koury Convention Center
The Sheraton Greensboro Hotel at Four Seasons, Greensboro, NC, USA

Topics

• Introduction to XHTML including step-by-step instructions from the ground up
• XHTML compared and contrasted with HTML
• Brief History of Markup Languages including SGML, HTML, XML
• Common mistakes
• Summary of Coding Rules for both HTML and XHTML
• The use of helper programs including Notepad, Textpad, Microsoft Word, Microsoft Publisher, and Macromedia Dreamweaver
• Books, Reference Materials, etc.
• Brief summary of Firefox Features and Extensions including Web Developer and Color-Coded Page Source
• The basic structure of a web page
• Tags, RGB Hexadecimal Color Codes, Entities, and Extensions including JavaScript and Stylesheets
• Standards, Accessibility, www.usability.gov Guidelines, and Browser Wars
• Lots and lots of hands-on examples

Downloads

• ‘From HTML to XHTML and Beyond’ Presentation (PPT)
• 15 HTML Questions (PDF)
• 7 Rules of XHTML (DOC)
• XHTML Scenario Answers (PDF)

HTML Escape Characters Reference

Notes:

• The Syntax for each Escape Character must be typed into the CODE of
  the web page. It will not work if typed into a WYSIWYG window.
• In most cases, the name syntax works. However, the number syntax tends
  to work more consistently.
• Capitalization in the Syntax is important for the International Characters!
• Technically, the syntax can be ended by either a blank space or a semicolon.
  I have used semicolons here since using them prevents coding mistakes. (For
  example: Using “< hr>” (note the space after < )
  though technically correct may result in “< hr>” (note that < has a space after it) which is less desirable than the intended “<hr>”. Using “<hr>” is both correct AND leaves nothing
  to chance. Typing “&lthr>” is not only syntactically incorrect, it allows for even more mistakes than using spaces does!)
• This information was taken from the official HTML
  4.01 Specification by the W3C.

Basic Latin

Name	Glyph	Syntax	Description
quot	“	” or “	quotation mark = APL quote
amp	&	& or &	ampersand
lt	<	< or <	less-than sign
gt	>	> or >	greater-than sign

Latin 1 (ISO 8859-1) Character Entity Set

Name	Glyph	Syntax	Description
nbsp		or	no-break space = non-breaking space
iexcl	¡	¡ or ¡	inverted exclamation mark
cent	¢	¢ or ¢	cent sign
pound	£	£ or £	pound sign
curren	¤	¤ or ¤	currency sign
yen	¥	¥ or ¥	yen sign = yuan sign
brvbar	¦	¦ or ¦	broken bar = broken vertical bar
sect	§	§ or §	section sign
uml	¨	¨ or ¨	diaeresis = spacing diaeresis
copy	©	© or ©	copyright sign
ordf	ª	ª or ª	feminine ordinal indicator
laquo	«	« or «	left-pointing double angle quotation mark = left pointing guillemet
not	¬	¬ or ¬	not sign
shy	­	­ or ­	soft hyphen = discretionary hyphen
reg	®	® or ®	registered sign = registered trade mark sign
macr	¯	¯ or ¯	macron = spacing macron = overline = APL overbar
deg	°	° or °	degree sign
plusmn	±	± or ±	plus-minus sign = plus-or-minus sign
sup2	²	² or ²	superscript two = superscript digit two = squared
sup3	³	³ or ³	superscript three = superscript digit three = cubed
acute	´	´ or ´	acute accent = spacing acute
micro	µ	µ or µ	micro sign
para	¶	¶ or ¶	pilcrow sign = paragraph sign
middot	·	· or ·	middle dot = Georgian comma = Greek middle dot
cedil	¸	¸ or ¸	cedilla = spacing cedilla
sup1	¹	¹ or ¹	superscript one = superscript digit one
ordm	º	º or º	masculine ordinal indicator
raquo	»	» or »	right-pointing double angle quotation mark = right pointing guillemet
frac14	¼	¼ or ¼	vulgar fraction one quarter = fraction one quarter
frac12	½	½ or ½	vulgar fraction one half = fraction one half
frac34	¾	¾ or ¾	vulgar fraction three quarters = fraction three quarters
iquest	¿	¿ or ¿	inverted question mark = turned question mark
Agrave	À	À or À	latin capital letter A with grave = latin capital letter A grave
Aacute	Á	Á or Á	latin capital letter A with acute
Acirc	Â	Â or Â	latin capital letter A with circumflex
Atilde	Ã	Ã or Ã	latin capital letter A with tilde
Auml	Ä	Ä or Ä	latin capital letter A with diaeresis
Aring	Å	Å or Å	latin capital letter A with ring above = latin capital letter A ring
AElig	Æ	Æ or Æ	latin capital letter AE = latin capital ligature AE
Ccedil	Ç	Ç or Ç	latin capital letter C with cedilla
Egrave	È	È or È	latin capital letter E with grave
Eacute	É	É or É	latin capital letter E with acute
Ecirc	Ê	Ê or Ê	latin capital letter E with circumflex
Euml	Ë	Ë or Ë	latin capital letter E with diaeresis
Igrave	Ì	Ì or Ì	latin capital letter I with grave
Iacute	Í	Í or Í	latin capital letter I with acute
Icirc	Î	Î or Î	latin capital letter I with circumflex
Iuml	Ï	Ï or Ï	latin capital letter I with diaeresis
ETH	Ð	Ð or Ð	latin capital letter ETH
Ntilde	Ñ	Ñ or Ñ	latin capital letter N with tilde
Ograve	Ò	Ò or Ò	latin capital letter O with grave
Oacute	Ó	Ó or Ó	latin capital letter O with acute
Ocirc	Ô	Ô or Ô	latin capital letter O with circumflex
Otilde	Õ	Õ or Õ	latin capital letter O with tilde
Ouml	Ö	Ö or Ö	latin capital letter O with diaeresis
times	×	× or ×	multiplication sign
Oslash	Ø	Ø or Ø	latin capital letter O with stroke = latin capital letter O slash
Ugrave	Ù	Ù or Ù	latin capital letter U with grave
Uacute	Ú	Ú or Ú	latin capital letter U with acute
Ucirc	Û	Û or Û	latin capital letter U with circumflex
Uuml	Ü	Ü or Ü	latin capital letter U with diaeresis
Yacute	Ý	Ý or Ý	latin capital letter Y with acute
THORN	Þ	Þ or Þ	latin capital letter THORN
szlig	ß	ß or ß	latin small letter sharp s = ess-zed
agrave	à	à or à	latin small letter a with grave = latin small letter a grave
aacute	á	á or á	latin small letter a with acute
acirc	â	â or â	latin small letter a with circumflex
atilde	ã	ã or ã	latin small letter a with tilde
auml	ä	ä or ä	latin small letter a with diaeresis
aring	å	å or å	latin small letter a with ring above = latin small letter a ring
aelig	æ	æ or æ	latin small letter ae = latin small ligature ae
ccedil	ç	ç or ç	latin small letter c with cedilla
egrave	è	è or è	latin small letter e with grave
eacute	é	é or é	latin small letter e with acute
ecirc	ê	ê or ê	latin small letter e with circumflex
euml	ë	ë or ë	latin small letter e with diaeresis
igrave	ì	ì or ì	latin small letter i with grave
iacute	í	í or í	latin small letter i with acute
icirc	î	î or î	latin small letter i with circumflex
iuml	ï	ï or ï	latin small letter i with diaeresis
eth	ð	ð or ð	latin small letter eth
ntilde	ñ	ñ or ñ	latin small letter n with tilde
ograve	ò	ò or ò	latin small letter o with grave
oacute	ó	ó or ó	latin small letter o with acute
ocirc	ô	ô or ô	latin small letter o with circumflex
otilde	õ	õ or õ	latin small letter o with tilde
ouml	ö	ö or ö	latin small letter o with diaeresis
divide	÷	÷ or ÷	division sign
oslash	ø	ø or ø	latin small letter o with stroke
ugrave	ù	ù or ù	latin small letter u with grave
uacute	ú	ú or ú	latin small letter u with acute
ucirc	û	û or û	latin small letter u with circumflex
uuml	ü	ü or ü	latin small letter u with diaeresis
yacute	ý	ý or ý	latin small letter y with acute
thorn	þ	þ or þ	latin small letter thorn with
yuml	ÿ	ÿ or ÿ	latin small letter y with diaeresis

Latin Extended-A

Name	Glyph	Syntax	Description
OElig	Œ	Œ or Œ	latin capital ligature OE
oelig	œ	œ or œ	latin small ligature oe
ligature is a misnomer
Scaron	Š	Š or Š	latin capital letter S with caron
scaron	š	š or š	latin small letter s with caron
Yuml	Ÿ	Ÿ or Ÿ	latin capital letter Y with diaeresis

Latin Extended-B

Name	Glyph	Syntax	Description
fnof	ƒ	ƒ or ƒ	latin small f with hook = function = florin

Arrows

Name	Glyph	Syntax	Description
larr	←	← or ←	leftwards arrow
uarr	↑	↑ or ↑	upwards arrow
rarr	→	→ or →	rightwards arrow
darr	↓	↓ or ↓	downwards arrow
harr	↔	↔ or ↔	left right arrow
crarr	↵	↵ or ↵	downwards arrow with corner leftwards = carriage return
lArr	⇐	⇐ or ⇐	leftwards double arrow
ISO 10646 does not say that lArr is the same as the ‘is implied by’ arrow but also does not have any other character for that function. So ? lArr can be used for ‘is implied by’ as ISOtech suggests
uArr	⇑	⇑ or ⇑	upwards double arrow
rArr	⇒	⇒ or ⇒	rightwards double arrow
ISO 10646 does not say this is the ‘implies’ character but also does not have another character with this function. So ? rArr can be used for ‘implies’ as ISOtech suggests
dArr	⇓	⇓ or ⇓	downwards double arrow
hArr	⇔	⇔ or ⇔	left right double arrow

General Punctuation

Name	Glyph	Syntax	Description
ensp		or	en space
emsp		or	em space
thinsp		or	thin space
zwnj	‌	‌ or ‌	zero width non-joiner
zwj	‍	‍ or ‍	zero width joiner
lrm	‎	‎ or ‎	left-to-right mark
rlm	‏	‏ or ‏	right-to-left mark
ndash	–	– or –	en dash
mdash	—	— or —	em dash
lsquo	‘	‘ or ‘	left single quotation mark
rsquo	‘	’ or ’	right single quotation mark
sbquo	‚	‚ or ‚	single low-9 quotation mark
ldquo	“	“ or “	left double quotation mark
rdquo	”	” or ”	right double quotation mark
bdquo	„	„ or „	double low-9 quotation mark
dagger	†	† or †	dagger
Dagger	‡	‡ or ‡	double dagger
bull	•	• or •	bullet = black small circle
bullet is NOT the same as bullet operator
hellip	…	… or …	horizontal ellipsis = three dot leader
permil	‰	‰ or ‰	per mille sign
prime	′	′ or ′	prime = minutes = feet
Prime	″	″ or ″	double prime = seconds = inches
lsaquo	‹	‹ or ‹	single left-pointing angle quotation mark
lsaquo is proposed but not yet ISO standardized
rsaquo	›	› or ›	single right-pointing angle quotation mark
rsaquo is proposed but not yet ISO standardized
oline	‾	‾ or ‾	overline = spacing overscore
frasl	⁄	⁄ or ⁄	fraction slash
euro	€	€ or €	euro sign

Geometric Shapes

Name	Glyph	Syntax	Description
loz	◊	◊ or ◊	lozenge

Greek

Name	Glyph	Syntax	Description
Alpha	Α	Α or Α	greek capital letter alpha
Beta	Β	Β or Β	greek capital letter beta
Gamma	Γ	Γ or Γ	greek capital letter gamma
Delta	Δ	Δ or Δ	greek capital letter delta
Epsilon	Ε	Ε or Ε	greek capital letter epsilon
Zeta	Ζ	Ζ or Ζ	greek capital letter zeta
Eta	Η	Η or Η	greek capital letter eta
Theta	Θ	Θ or Θ	greek capital letter theta
Iota	Ι	Ι or Ι	greek capital letter iota
Kappa	Κ	Κ or Κ	greek capital letter kappa
Lambda	Λ	Λ or Λ	greek capital letter lambda
Mu	Μ	Μ or Μ	greek capital letter mu
Nu	Ν	Ν or Ν	greek capital letter nu
Xi	Ξ	Ξ or Ξ	greek capital letter xi
Omicron	Ο	Ο or Ο	greek capital letter omicron
Pi	Π	Π or Π	greek capital letter pi
Rho	Ρ	Ρ or Ρ	greek capital letter rho
there is no Sigmaf
Sigma	Σ	Σ or Σ	greek capital letter sigma
Tau	Τ	Τ or Τ	greek capital letter tau
Upsilon	Υ	Υ or Υ	greek capital letter upsilon
Phi	Φ	Φ or Φ	greek capital letter phi
Chi	Χ	Χ or Χ	greek capital letter chi
Psi	Ψ	Ψ or Ψ	greek capital letter psi
Omega	Ω	Ω or Ω	greek capital letter omega
alpha	α	α or α	greek small letter alpha
beta	β	β or β	greek small letter beta
gamma	γ	γ or γ	greek small letter gamma
delta	δ	δ or δ	greek small letter delta
epsilon	ε	ε or ε	greek small letter epsilon
zeta	ζ	ζ or ζ	greek small letter zeta
eta	η	η or η	greek small letter eta
theta	θ	θ or θ	greek small letter theta
iota	ι	ι or ι	greek small letter iota
kappa	κ	κ or κ	greek small letter kappa
lambda	λ	λ or λ	greek small letter lambda
mu	μ	μ or μ	greek small letter mu
nu	ν	ν or ν	greek small letter nu
xi	ξ	ξ or ξ	greek small letter xi
omicron	ο	ο or ο	greek small letter omicron
pi	π	π or π	greek small letter pi
rho	ρ	ρ or ρ	greek small letter rho
sigmaf	ς	ς or ς	greek small letter final sigma
sigma	σ	σ or σ	greek small letter sigma
tau	τ	τ or τ	greek small letter tau
upsilon	υ	υ or υ	greek small letter upsilon
phi	φ	φ or φ	greek small letter phi
chi	χ	χ or χ	greek small letter chi
psi	ψ	ψ or ψ	greek small letter psi
omega	ω	ω or ω	greek small letter omega
thetasym	ϑ	ϑ or ϑ	greek small letter theta symbol
upsih	ϒ	ϒ or ϒ	greek upsilon with hook symbol
piv	ϖ	ϖ or ϖ	greek pi symbol

Letterlike Symbols

Name	Glyph	Syntax	Description
weierp	℘	℘ or ℘	script capital P = power set = Weierstrass p
image	ℑ	ℑ or ℑ	blackletter capital I = imaginary part
real	ℜ	ℜ or ℜ	blackletter capital R = real part symbol
trade	™	™ or ™	trade mark sign
alefsym	ℵ	ℵ or ℵ	alef symbol = first transfinite cardinal
alef symbol is NOT the same as hebrew letter alef

Mathematical Operators

Name	Glyph	Syntax	Description
forall	∀	∀ or ∀	for all
part	∂	∂ or ∂	partial differential
exist	∃	∃ or ∃	there exists
empty	∅	∅ or ∅	empty set = null set = diameter
nabla	∇	∇ or ∇	nabla = backward difference
isin	∈	∈ or ∈	element of
notin	∉	∉ or ∉	not an element of
ni	∋	∋ or ∋	contains as member
should there be a more memorable name than ‘ni’?
prod	∏	∏ or ∏	n-ary product = product sign
prod is NOT the same character as U+03A0 ‘greek capital letter pi’ though the same glyph might be used for both
sum	∑	∑ or ∑	n-ary sumation
sum is NOT the same character as U+03A3 ‘greek capital letter sigma’ though the same glyph might be used for both
minus	−	− or −	minus sign
lowast	∗	∗ or ∗	asterisk operator
radic	√	√ or √	square root = radical sign
prop	∝	∝ or ∝	proportional to
infin	∞	∞ or ∞	infinity
ang	∠	∠ or ∠	angle
and	∧	∧ or ∧	logical and = wedge
or	∨	∨ or ∨	logical or = vee
cap	∩	∩ or ∩	intersection = cap
cup	∪	∪ or ∪	union = cup
int	∫	∫ or ∫	integral
there4	∴	∴ or ∴	therefore
sim	∼	∼ or ∼	tilde operator = varies with = similar to
tilde operator is NOT the same character as the tilde
cong	≅	≅ or ≅	approximately equal to
asymp	≈	≈ or ≈	almost equal to = asymptotic to
ne	≠	≠ or ≠	not equal to
equiv	≡	≡ or ≡	identical to
le	≤	≤ or ≤	less-than; or equal to
ge	≥	≥ or ≥	greater-than; or equal to
sub	⊂	⊂ or ⊂	subset of
sup	⊃	⊃ or ⊃	superset of
note that nsup, ‘not a superset of, U+2283’ is not covered by the Symbol font encoding and is not included. Should it be, for symmetry? It is in ISOamsn
nsub	⊄	⊄ or ⊄	not a subset of
sube	⊆	⊆ or ⊆	subset of; or equal to
supe	⊇	⊇ or ⊇	superset of; or equal to
oplus	⊕	⊕ or ⊕	circled plus = direct sum
otimes	⊗	⊗ or ⊗	circled times = vector product
perp	⊥	⊥ or ⊥	up tack = orthogonal to = perpendicular
sdot	⋅	⋅ or ⋅	dot operator
dot operator is NOT the same character as U+00B7 middle dot

Miscellaneous Symbols

Name	Glyph	Syntax	Description
spades	♠	♠ or ♠	black spade suit
black here seems to mean filled as opposed to hollow
clubs	♣	♣ or ♣	black club suit = shamrock
hearts	♥	♥ or ♥	black heart suit = valentine
diams	♦	♦ or ♦	black diamond suit

Miscellaneous Technical

Name	Glyph	Syntax	Description
lceil	⌈	⌈ or ⌈	left ceiling = apl upstile
rceil	⌉	⌉ or ⌉	right ceiling
lfloor	⌊	⌊ or ⌊	left floor = apl downstile
rfloor	⌋	⌋ or ⌋	right floor
lang	〈	〈 or 〈	left-pointing angle bracket = bra
lang is NOT the same character as U+003C ‘less than’; or U+2039 ‘single left-pointing angle quotation mark’
rang	〉	〉 or 〉	right-pointing angle bracket = ket
rang is NOT the same character as U+003E ‘greater than’; or U+203A ‘single right-pointing angle quotation mark’

Spacing Modifier Letters

Name	Glyph	Syntax	Description
circ	ˆ	ˆ or ˆ	modifier letter circumflex accent
tilde	˜	˜ or ˜	small tilde

HTML Color Codes Reference

The 16 Named Colors from the W3C HTML 4.01 specification.

aqua #00FFFF	black #000000	blue #0000FF	fuchsia #FF00FF
green #008000	grey #808080	lime #00FF00	maroon #800000
navy #000080	olive #808000	purple #800080	red #FF0000
silver #C0C0C0	teal #008080	white #FFFFFF	yellow #FFFF00

The 216 Colors of the Netscape Web Safe Color Palette

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF

#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF

#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF

#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF

#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF

#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

Downloads

• HTML Color Codes Reference (PDF) (which displays the colors properly)
• HTML Source Code (PDF)
• Visual Basic Source Code (PDF) used to create the list of 216 web-safe colors.