An ESPG Lesson in Web Design

Table of Contents

Part 7: Character Formatting

There are two types of character formatting: Logical and Physical. Logical has to do with the meaning of the text, while physical has to do with the appearance of the text. Because of personal preference and time constraints, most of what will be discussed in what follows will be regarding physical styles.

These are all fairly self explanatory. Just remember to use the tag before the text which is being formatted and the inverse of the tag (with the backslash / ) after the selected text. The chart which follows shows the tags and examples:

bold text <B>Bold</B>
italic text <I>Italic</I>
underlined text <U>Underline</U>
Strikethrough text <S>Strikethrough</s>
Keyboard Text <kbd>Keyboard</kbd>
typewriter text
(fixed width font)

You probably notice that the angled brackets (<, >) signify a tag. So what happens if you want to use these characters in you web page? Will it work if you type them in the body of your document as you would any other character?

No, unfortunately, it will not work. Luckily, though, there is a solution in HTML. What you need to use in a case such as this is use and Escape Sequence (a.k.a. Character Entities)

Part 8: Escape Sequences

We use escape sequences for more than the purpose of ASCII characters used in HTML tags. We also use escape sequences to display characters which are not available through the ASCII character set.

The three ASCII characters which may not be used as regular characters are: <, >, &. We cannot use the & because, as you will see next, this is the special character used to indicate an escape sequence. The following are the escape sequences for these:

&lt; escape sequence for <
&gt; escape sequence for >
&amp; escape sequence for &

Escape sequences are very easy to use. Instead of writing in the character, just type in the escape sequence--do not add extra spaces around it. The following example uses an escape sequence:

The tag for bold text, &lt;B&gt;, is easy to use.

This would appear as the following on the web page:

The tag for bold text, <B>, is easy to use.

There are additional escape sequences that we can use to allow special, accented characters to appear properly on a web page. For example:

&ouml; lowercase o with umlaut ö
&ntilde; lowercase n with tilde ñ
&Egrave; uppercase E with grave accent É

You can substitute other letters in place of the o, n, and E to get the same effect. The following chart helps to illustrate the available special escape sequences further:

Sequence Character Sequence Character
&quot; " &euml; ë
&lt; < &igrave; ì
&gt; > &iacute; í
&amp; & &icirc; î
&aacute; á &iuml; ï
&agrave; à &ograve; ò
&acirc; â &oacute; ó
&atilde; ã &ocirc; ô
&auml; ä &otilde; õ
&aelig; æ &ouml; ö
&ccedil; ç &ugrave; ù
&egrave; è &uacute; ú
&eacute; é &ucirc; û
&ecirc; ê &uuml; ü

You can use any of these escape sequences for the capital accented character by substituting the correct capital letter for the lowercase letter.

Another way to use an escape sequence is to insert the appropriate number for the LATIN-1 character you wish to use into &#n; in place of the n. The list of symbols and associated numbers are available numerous places on the net.

Also extremely important to notice is that escape sequences, unlike much of HTML, are CASE-SENSITIVE!!! Be sure to use the appropriate case or you will have unpredictable or incorrect results.

Greek Characters:

You can also get different characters by setting the <font name> to SYMBOL. Since the font comes installed on virtually every computer being marketed lately, you can be fairly certain that your reader has it on her or his machine. On a Macintosh, you can find the SYMBOL characters using "Key Caps;" on a PC, the "Character Map" in the Accessories directory. To use those characters, just set <font name="symbol"> and type the character you want to see. For example, we can display the Greek letter "mu" by entering:

<font name="symbol">m</font>

which displays as:


Just be sure that you close the tags, or you will end up with something like:

Just be sure that you close the tags, or you will end up with something like.

On to Part 9: Images