R. Craig Collins > Web Page Design > HTML Tags and special characters

HTML 3 Tags and Special Characters © R. Craig Collins, 2005/6

Topics

Introduction
A brief explanation of what tags do,
and how they can be further modified.
A small example of a basic web page.
Tag Examples.
A brief intro to links.
To a short list of special ANSI HTML characters
To a list of more characters, such as math

W3C's "HTML 4.0 Specification"
css (cascading style sheets)
xml (extensible markup language), and
dhtml (dynamic hyper text markup language)

Introduction

This document clarifies some of what you are already doing, and contains links to other sites on the Internet that contain more complete lists of tags, and some of the newer ways of implementing tags; but for the most part, this is an attempt to collect together a quick list of the tags that wind up in 90% of the basic documents today.
To the List of Contents

A Brief explanation of what tags do

Web pages are based on HTML (Hyper Text Mark up Language), which basically is plain text with added instructions to, say, make text appear bold, or in italics. These instructions are called tags, and tags that modify text typically surround the text they modify.

That is, you tell the browser when to start making a word bold, then tell the computer where to stop making things bold; so to do this, you could surround the text to be modified with and .

Tags can be fine tuned, just like DOS commands, using a modifier called an attribute. A tag may be used by itself, or there may be a combination of available attributes to further modify the way the document appears on screen; however, an attribute cannot be used without the 'parent' tag.

A tag, and any desired attribute, is always included inside the angled brackets; example: <body> can be modified to make the background blue by changing the tag to <body bgcolor="blue">. (Don't forget, this body tag surrounds all the text to be displayed, so you will need the </body> after the text to display has ended. Also, you only close the original tag, not any attributes.
To the List of Contents

A small example of a basic web page.

All web pages should include the following elements:

A tag to indicate to browsers that it is, in fact, a HTML document, and an ending HTML tag.
A head, that is, information read by the browser, but not included in the visible document portion. A Title tag is included within this section, and both sections end with the appropriate ending tag.
(Think headers in a word processing document...header information is not part of the body of the document.)
And the body, or, the portion of the document that is viewed on the computer screen. As with most tags, the body tag requires an end tag.

Example

To make your page look like

Formatted Text

Example

This line is unformatted text.
This line is bold text.
This line is italicized.
This is the bottom of the visible page.

you would put:

<html>
<head>
<title>
Formatted text
</title>
</head>
<body>
<h1>Example</h1>
This line is unformatted text. 
This line is bold text. 
This line is italicized. 
This is the bottom of the visible page.
</body>
</html>

Note the three distinct sections, the HTML, which contains the HEAD, and the BODY. Each section is started, and stopped.

The word

Example

was defined as a heading one (headline, size 1), whose tag is <h1>. Headings are a different size, bold, and force a line break.

Again, if you don't want to change the way some text looks, you don't need to use tags at that point.

is for bold, and is for italics. HTML is not case sensitive, so you some say you can mix and match uppercase letters in your tags, but you will find your instructor prefers, and more advanced web programming requires, lower case.

Further, browsers ignore white space; that is, so it doesn't matter if you write everything on one line, or hit the return key to write additional lines each starting with the margin; what ever is easiest for YOU to read. As far as displaying goes, until the browser encounters something to force a line of text to drop down a line, such as the break , the browser will keep everything on the same line until it runs out of computer screen, then wraps the text to the next line..

Note: is one of the few tags that does not require an ending tag, as it does not surround text in order to modify the way the text appears… this doesn't mix with newer html programming so they include the end in side the tag, such as ... you may use either in this class.
To the List of Contents

Note: not all tags you may run across are W3C (World Wide Web Consortium) compliant, so tags like <marquee></marquee> or <blink></blink> are not supported on all browsers. Browsers are fault tolerant, that is, if a browser does not recognize a tag, it simply ignores it.
To the List of Contents

Tag and Attribute Example with explanations

<html>	begins the html

<head>	begins the computer use portion of the web page, hold the title
<title>text</title>	Text placed between the tags displays on the browser title bar
</head>	ends the computer use portion of the web page

<body	begins the visible portion of the web page, body can be modified
background="filename"	attribute, within the body, that places an image behind the text
bgcolor="color"	attribute, within the body, that places a color behind the text
text="color"	attribute, within the body, that sets the color of all, unmodified text
link="color"	attribute, within the body, that sets the color of not yet visited links
vlink="color"	attribute, within the body, that sets the color of visited links
alink="color"	attribute, within the body, that sets the color of a link as it clicked or activated... on slow connections, this indicates the linked page will appear soon
>	This is where the body tag ends, all the above attributes are inside

<hx>text</hx>	You make text a heading (head line) by surround it with h1-h6
	This is where you place your document contents, and images
<img	the tag to display an image
src="filename"	tells the browser where the source file to display is
alt="text"	alternate text to display for visually challenged users
height="value in pixels or %"	tells the browser how high the image is to be displayed
width="value in pixels or %"	tells the browser how wide the image is to be displayed
>	closes the img tag; note, as this does not surround text, you don't need /img

</body>	This ends the body

</html>	this ends the web page

To the List of Contents

Brief intro on 'Links' (actually anchors, and hypertext references): <a></a>
The anchor tags are used to 'link' or reference, related text; this hypertext link can go to a different place in the same document, to a different a document within the same site, or to a document at a different web site. It is called an anchor tag, because you can 'pull on the anchor chain' to return to the original page you were on, after following a link.

More tag examples, including an updated starting template, and links, will be introduced soon!
To the List of Contents

Special HTML Characters
See also ANSI Characters

So, how do you put in a less than sign, if the browser is going to expect a tag?

Item	Example
" Quotation Mark	"
< Less than	<
> Greater than	>
© Copyright	©
® Registration Symbol	®
Non-breaking space

The ANSI Character Set

The following table shows characters 128-255 of the ANSI character set.
To use one of the following characters in a web page,
insert an &, followed by a #, followed by the three digit number, and then finish the code with a ;
example: 

Note: Some characters on this page may not display correctly unless you are using a Windows browser.

Code	Char	Name	Code	Char	Name
128	€	unused	192	À	A grave
129		unused	193	Á	A acute
130	‚	baseline single quote	194	Â	A circumflex
131	ƒ	florin	195	Ã	A tilde
132	„	baseline double quote	196	Ä	A diaeresis
133	…	ellipsis	197	Å	A ring
134	†	dagger (single)	198	Æ	AE ligature
135	‡	dagger (double)	199	Ç	C cedilla
136	ˆ	circumflex	200	È	E grave
137	‰	per mil	201	É	E acute
138	Š	S caron	202	Ê	E circumflex
139	‹	left single guillemet	203	Ë	E diaeresis
140	Œ	OE ligature	204	Ì	I grave
141		unused	205	Í	I acute
142	Ž	unused	206	Î	I circumflex
143		unused	207	Ï	I diaeresis
144		unused	208	Ð	Icelandic Eth
145	‘	open single quote	209	Ñ	N tilde
146	’	close single quote	210	Ò	O grave
147	“	open double quote	211	Ó	O acute
148	”	close double quote	212	Ô	O circumflex
149	•	bullet (large)	213	Õ	O tilde
150	–	en dash	214	Ö	O diaeresis
151	—	em dash	215	×	multiply symbol
152	˜	tilde	216	Ø	O with oblique stroke
153	™	unregistered trademark	217	Ù	U grave
154	š	s caron	218	Ú	U acute
155	›	right single guillemet	219	Û	U circumflex
156	œ	oe ligature	220	Ü	U diaeresis
157		unused	221	Ý	Y acute
158	ž	unused	222	Þ	Icelandic Thorn
159	Ÿ	Y diaeresis	223	ß	German sharp s
160		non-breaking space	224	à	a grave
161	¡	Spanish inverted !	225	á	a acute
162	¢	cents	226	â	a circumflex
163	£	pounds	227	ã	a tilde
164	¤	intl. monetary symbol	228	ä	a diaeresis
165	¥	yen	229	å	a ring
166	¦	broken bar	230	æ	ae ligature
167	§	section symbol	231	ç	c cedilla
168	¨	diaeresis	232	è	e grave
169	©	copyright	233	é	e acute
170	ª	feminine ordinal	234	ê	e circumflex
171	«	left double guillemet	235	ë	e diaeresis
172	¬	not	236	ì	i grave
173		soft hyphen	237	í	i acute
174	®	registered trademark	238	î	i circumflex
175	¯	macron	239	ï	i diaeresis
176	°	ring (also degrees)	240	ð	Icelandic eth
177	±	plus/minus	241	ñ	n tilde
178	²	superscript 2	242	ò	o grave
179	³	superscript 3	243	ó	o acute
180	´	acute	244	ô	o circumflex
181	µ	micro symbol (or mu)	245	õ	o tilde
182	¶	pilcrow (paragraph symbol)	246	ö	o diaeresis
183	·	bullet (small)	247	÷	divide symbol
184	¸	cedilla	248	ø	o with oblique stroke
185	¹	superscript 1	249	ù	u grave
186	º	masculine ordinal	250	ú	u acute
187	»	right double guillemet	251	û	u circumflex
188	¼	one-fourth	252	ü	u diaeresis
189	½	one-half	253	ý	y acute
190	¾	three-fourths	254	þ	Icelandic thorn
191	¿	Spanish inverted ?	255	ÿ	y diaeresis

To the List of Contents

Math Symbols in HTML

Even more is hidden in the archive... will be folded in with this material soon...

This page explains how to place various mathematical characters into HTML documents. The symbols have been grouped into the following categories:

Miscellaneous Symbols

INTRODUCTION
There are several ways to add these symbols to your pages. I will skip symbols which appear on the keyboard unless, like &, they have a special HTML meaning. Of course, for any symbol, an image can be created and the image displayed using the <img> tag. refer to the graphics pages for these strategies. In the tables below three codes will be given for displaying a character: the HTML numerical code, a code that can be placed between a FONT FACE tag, and a special HTML literal code (where available).

Well, how do you use this stuff? The following samples illustrate the use of each code method. To place a symbol in an HTML page or an email message (readable using a web browser) copy and paste the appropriate code into the file (or message) where you want the symbol.

HTML NUMERIC CODE example: to make a left curly bracket {, type {.

FONT FACE TAG example: to write xÎA, type xÎA.

HTML LITERAL CODE example: to make a degree symbol °, type °.

One more thing. To form superscripts or subscripts use the or tags.

SUPERSCRIPT example: to write 2^À, type 2À.

SUBSCRIPT example: to write x₅, type x5.

WARNING: Sometimes the numeric code for a symbol is the same as used within FONT FACE tags, but sometimes it's different. For example, \ produces \ while \ produces \. Also, while the codes appear to have become "standard" it is possible that some browser will not support certain characters. This will most likely be a problem when using the FONT FACE method.

Operation Symbols

NAME	SYMBOL	NUMERIC CODE	FONT FACE="Symbol" Code	LITERAL CODE
For all	"	None	`<FONT FACE="Symbol">"</FONT>`	None
There exist	$	None	`<FONT FACE="Symbol">$</FONT>`	None
Not	Ø	`¬`	`<FONT FACE="Symbol">Ø</FONT>`	¬
And (meet)	Ù	None	`<FONT FACE="Symbol">Ù</FONT>`	None
Or (join)	Ú	None	`<FONT FACE="Symbol">Ú</FONT>`	None
Intersection	Ç	None	`<FONT FACE="Symbol">Ç</FONT>`	None
Union	È	None	`<FONT FACE="Symbol">È</FONT>`	None
Plus or minus	±	`±`	`<FONT FACE="Symbol">±</FONT>`	±
Times	´	`×`	`<FONT FACE="Symbol">´</FONT>`	×
Partial derivative	¶	None	`<FONT FACE="Symbol">¶</FONT>`	None
Solid dot	·	None	`<FONT FACE="Symbol">·</FONT>`	None
Middle dot	·	`·`	`<FONT FACE="Symbol">×</FONT>`	·
Circle times	Ä	None	`<FONT FACE="Symbol">Ä</FONT>`	None
Circle plus	Å	None	`<FONT FACE="Symbol">Å</FONT>`	None
Division	¸	`÷`	`<FONT FACE="Symbol">¸</FONT>`	÷
Big product	Õ	None	`<FONT FACE="Symbol">Õ</FONT>`	None
Big sum	å	None	`<FONT FACE="Symbol">å</FONT>`	None
Square root	Ö	None	`<FONT FACE="Symbol">Ö</FONT>`	None

Relation Symbols

NAME	SYMBOL	NUMERIC CODE	FONT FACE="Symbol" Code	LITERAL CODE
Contains the element	'	None	`<FONT FACE="Symbol">'</FONT>`	None
Is a member of	Î	None	`<FONT FACE="Symbol">Î</FONT>`	None
Is not a member of	Ï	None	`<FONT FACE="Symbol">Ï</FONT>`	None
Less than	<	`<`	None	<
Greater than	>	`>`	None	>
Isomorphism	@	None	`<FONT FACE="Symbol">@</FONT>`	None
Perpendicular	^	None	`<FONT FACE="Symbol">^</FONT>`	None
Vertical bar	\|	`\|`	`<FONT FACE="Symbol">\|</FONT>`	None
Vertical line	½	None	`<FONT FACE="Symbol">½</FONT>`	None
Less than or equal	£	None	`<FONT FACE="Symbol">£</FONT>`	None
Greater than or equal	³	None	`<FONT FACE="Symbol">³</FONT>`	None
Not equal to	¹	None	`<FONT FACE="Symbol">¹</FONT>`	None
Equivalent to	º	None	`<FONT FACE="Symbol">º</FONT>`	None
Approximately	»	None	`<FONT FACE="Symbol">»</FONT>`	None
Similar to	~	`~`	`<FONT FACE="Symbol">~</FONT>`	None
Empty set	Æ	None	`<FONT FACE="Symbol">Æ</FONT>`	None
Contains properly	É	None	`<FONT FACE="Symbol">É</FONT>`	None
Contains	Ê	None	`<FONT FACE="Symbol">Ê</FONT>`	None
Not included in	Ë	None	`<FONT FACE="Symbol">Ë</FONT>`	None
Proper subset of	Ì	None	`<FONT FACE="Symbol">Ì</FONT>`	None
Subset of	Í	None	`<FONT FACE="Symbol">Í</FONT>`	None

Arrows and Brackets

NAME	SYMBOL	NUMERIC CODE	FONT FACE="Symbol" Code	LITERAL CODE
Left brace	[	`[`	`<FONT FACE="Symbol">[</FONT>`	None
Right brace	]	`]`	`<FONT FACE="Symbol">]</FONT>`	None
Left angle bracket	<	None	`<FONT FACE="Symbol"><</FONT>`	None
Right angle bracket	>	None	`<FONT FACE="Symbol">></FONT>`	None
Left curley bracket	{	`{`	`<FONT FACE="Symbol">{</FONT>`	None
Right curley bracket	}	`}`	`<FONT FACE="Symbol">}</FONT>`	None
Double arrow	«	None	`<FONT FACE="Symbol">«</FONT>`	None
Left arrow	¬	None	`<FONT FACE="Symbol">¬</FONT>`	None
Up arrow	Ý	None	`<FONT FACE="Symbol">Ý</FONT>`	None
Right arrow	®	None	`<FONT FACE="Symbol">®</FONT>`	None
Down arrow	¯	None	`<FONT FACE="Symbol">¯</FONT>`	None
Double big arrow	Û	None	`<FONT FACE="Symbol">Û</FONT>`	None
Double left arrow	Ü	None	`<FONT FACE="Symbol">Ü</FONT>`	None
Double up arrow	Ý	None	`<FONT FACE="Symbol">Ý</FONT>`	None
Double right arrow	Þ	None	`<FONT FACE="Symbol">Þ</FONT>`	None
Double down arrow	ß	None	`<FONT FACE="Symbol">ß</FONT>`	None
Ellipsis	¼	None	`<FONT FACE="Symbol">¼</FONT>`	None
Left angle quote	«	`«`	None	«
Right angle quote	»	`»`	None	»

Greek Symbols
NOTE: Only the lower case letters are displayed. To obtain upper case use the equivalent upper case character.

NAME	SYMBOL	NUMERIC CODE	FONT FACE="Symbol" Code	LITERAL CODE
alpha	a	None	`<FONT FACE="Symbol">a</FONT>`	None
beta	b	None	`<FONT FACE="Symbol">b</FONT>`	None
gamma	g	None	`<FONT FACE="Symbol">g</FONT>`	None
delta	d	None	`<FONT FACE="Symbol">d</FONT>`	None
epsilon	e	None	`<FONT FACE="Symbol">e</FONT>`	None
zeta	z	None	`<FONT FACE="Symbol">z</FONT>`	None
eta	h	None	`<FONT FACE="Symbol">h</FONT>`	None
theta	q	None	`<FONT FACE="Symbol">q</FONT>`	None
iota	i	None	`<FONT FACE="Symbol">i</FONT>`	None
kappa	k	None	`<FONT FACE="Symbol">k</FONT>`	None
lambda	l	None	`<FONT FACE="Symbol">l</FONT>`	None
mu	m	None	`<FONT FACE="Symbol">m</FONT>`	None
nu	n	None	`<FONT FACE="Symbol">n</FONT>`	None
xi	x	None	`<FONT FACE="Symbol">x</FONT>`	None
omicron	o	None	`<FONT FACE="Symbol">o</FONT>`	None
pi	p	None	`<FONT FACE="Symbol">p</FONT>`	None
rho	r	None	`<FONT FACE="Symbol">r</FONT>`	None
sigma	s	None	`<FONT FACE="Symbol">s</FONT>`	None
tau	t	None	`<FONT FACE="Symbol">t</FONT>`	None
upsilon	u	None	`<FONT FACE="Symbol">u</FONT>`	None
phi	j	None	`<FONT FACE="Symbol">j</FONT>`	None
chi	c	None	`<FONT FACE="Symbol">c</FONT>`	None
psi	y	None	`<FONT FACE="Symbol">y</FONT>`	None
omega	w	None	`<FONT FACE="Symbol">w</FONT>`	None

Miscellaneous Symbols

NAME	SYMBOL	NUMERIC CODE	FONT FACE="Symbol" Code	LITERAL CODE
Blank space		None	`<FONT FACE="Symbol"> </FONT>`
Number sign	#	None	`<FONT FACE="Symbol">#</FONT>`	None
Percent	%	`%`	`<FONT FACE="Symbol">%</FONT>`	None
Ampersand	&	`&`	`<FONT FACE="Symbol">&</FONT>`	`&`
Double quote	²	None	`<FONT FACE="Symbol">²</FONT>`	"
Therefore	\	None	`<FONT FACE="Symbol">\</FONT>`	None
Upper bar	`	None	`<FONT FACE="Symbol">`</FONT>`	None
Infinity	¥	None	`<FONT FACE="Symbol">¥</FONT>`	None
Degree	°	`°`	`<FONT FACE="Symbol">°</FONT>`	°
Long dash	¾	None	`<FONT FACE="Symbol">¾</FONT>`	None
Alpha	À	None	`<FONT FACE="Symbol">À</FONT>`	None
Angle sign	Ð	None	`<FONT FACE="Symbol">Ð</FONT>`	None
Upside-down triangle	Ñ	None	`<FONT FACE="Symbol">Ñ</FONT>`	None
One-half	½	`½`	None	½
Cent sign	¢	`¢`	None	¢
Registered sign	®	`®`	`<FONT FACE="Symbol">Ò</FONT>`	®
Copyright sign	©	`©`	`<FONT FACE="Symbol">Ó</FONT>`	©
Trademark sign	™	``	`<FONT FACE="Symbol">Ô</FONT>`	None

To the List of Contents