How to use forbidden characters. Colour charts.

Tutorial 3

Author: Ian McAllister

Use universal codes. Certain characters and colours will ruin your web pages. (Some browsers can handle them.) For instance the quote mark (") is used in HTML code, so might confuse your browser if it is used in your page. The same applies to the ampersand (&). Each browser handles colours differently.

This lesson will cover special characters. You should print out the character chart, and keep it for reference.

There will also be a link to a colour chart to use as a reference. Good colour design says that you should be sparing with your use of colours. Limit yourself to three colours on your page, including black.

Special characters that are used in HTML coding (< > " &) must not be typed in directly, because it confuses some browsers. Always remember to use the special code for these characters. < > " & Each code starts with a & sign and ends with a semicolon (;). Whatever you do, don't forget the semicolon. It is very easy to forget. The non-breaking space (shown as  ) is used because HTML code removes all spaces except one, so if you want many spaces, use non-breaking spaces one after the other. Some characters may not be displayed on all browsers.
Description of character	HTML code	How it appears
Single Quote	'	'
Quotation mark	"	"
Ampersand	&	&
Less than	<	<
Greater than	>	>
Non-breaking space
Cent sign	¢	¢
Pound sterling	£	£
General currency sign	¤	¤
Yen	¥	¥
Broken vertical	¦	¦
Section	§	§
Umlaut (dieresis)	¨ or &die;	¨
Copyright	©	©
Right angle quote	»	»
Left angle quote	«	«
Not sign	¬	¬
Registered trademark	®	®
Macron accent	¯	¯
Degree	°	°
Plus or minus	±	±
Superscript 1	¹	¹
Superscript 2	²	²
Superscript 3	³	³
Acute accent	´	´
Micro	µ	µ
Paragraph	¶	¶
Middle dot	·	·
Cedilla	¸	¸
Fraction quarter	¼	¼
Fraction half	½	½
Fraction three fourths	¾	¾
Inverted question mark	¿	¿
Capital A grave	À	À
Small a grave	à	à
Capital A acute	Á	Á
Small a acute	á	á
Capital A circumflex	Â	Â
Small a circumflex	â	â
Capital A tilde	Ã	Ã
Small a tilde	&tilde;	ã
Capital A umlaut	Ä	Ä
Small a umlaut	ä	ä
Capital A ring	Å	Å
Small a ring	å	å
Capital AE (ligature)	Æ	Æ
Small ae ligature	æ	æ
Capital C cedilla	Ç	Ç
Small c cedilla	ç	ç
Capital E grave	È	È
Small e grave	è	è
Capital E acute	É	É
Small e acute	é	é
Capital E circumflex	Ê	Ê
Small e circumflex	ê	ê
Capital E umlaut	Ë	Ë
Small e umlaut	&emul;	ë
Capital I grave	Ì	Ì
Small i grave	ì	ì
Capital I acute	Í	Í
Small i acute	í	í
Capital I circumflex	Î	Î
Small i circumflex	î	î
Capital I umlaut	Ï	Ï
Small i umlaut	ï	ï
Capital Eth, Icelandic	Ð	Ð
Small eth, Icelandic	ð	ð
Capital N tilde	Ñ	Ñ
Small n tilde	ñ	ñ
Capital O grave	Ò	Ò
Small o grave	ò	ò
Capital O acute	Ó	Ó
Small o acute	ó	ó
Capital O circumflex	Ô	Ô
Small o circumflex	ô	ô
Capital O umlaut	Ö	Ö
Small o umlaut	ö	ö
Capital O slash (phi)	Ø	Ø
Small o slash (phi)	ø	ø
Capital U grave	Ù	Ù
Small u grave	ù	ù
Capital U acute	Ú	Ú
Small u acute	ú	ú
Capital U circumflex	Û	Û
Small u circumflex	û	û
Capital U umlaut	Ü	Ü
Small u umlaut	ü	ü
Capital Y acute	Ý	Ý
small y acute	ý	ý
Capital THORN Icelandic	Þ	Þ
small thorn Icelandic	þ	þ
Capital Y acute	Ý	Ý
Smal y acutel	ý	ý
szl ligature (German)	ß	ß

Only some colours are reliable

Different colours are handled differently by different browsers. You have millions of colours to choose from. Limit your colours to the ones listed here, because all browsers seem to accept these.

Click here for the colour chart file. You should save the file for future reference. Just click on File, Save as, and choose the directory where you are keeping all your HTML code, make sure the file type is HTML, and type in the name colours.html.

Then at any time, you can open a second window in your browser and click on File, Open File, Choose File. Choose colours.html to view the chart. Then you can switch between the chart and the masterpiece of colour that you are creating.

If you see a colour on a web page that you would like to use, then download this little free program. Install Color Detector and put the icon in the bottom toolbar for quick start. To use it, click the quick-start icon and hover your mouse over the colour that you like. You'll see the Hex code. Use that color as "#hex code" in your color tags. Close Color Detector once you are finished with it.

Next: How to use HTML tables for an organized appearance