Writing HTML | About | FAQ | References | Tags | Lessons | previous | next |

10. Special Characters

How do you say...

>>>Æ ñ Þóßÿ ?

NOTE: If the above characters do not display various accents or diacritical markers, then your web browser does not support the ISO character set. You would likely want to skip this lesson.

Objectives

After this lesson you will be able to:

• Use the HTML codes for ISO Latin 1 characters to display accent marks for non-English letters.
• Override the HTML use of < and > symbols when you need them in a document.
• Add extra spaces in between words and letters in a document.

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

Accent Marks

Sometime you may need to use a special character in an HTML document, an accent or diacritical mark. The ones that are known as ISO These special characters are marked in HTML as:

   &xxxx;

where XXXX is the code name for the special character. To create the special character for the German umlaut (ü), we need to use the HTML:

   ü

For example, in the Terminology section of our Volcano lesson, we want to add an explanation of a technical term that was used to describe a particular type of volcanic flow. This term nuee ardente is from the French term for "glowing cloud"; but to use the proper spelling we need an "acute" accent, so that the word appears as nuée ardente. In this case, we replace the first e in nuee with the HTML for the acute accented "e" &eacute;:

     nuée ardente 

For reference on these codes, see the list of special ISO characters.

Now we will add a sentence to our HTML document that uses an accented letter:

1. Open the HTML file, index.html in your text editor.
2. Under the list of terms of the Volcanology Terminology section enter the text:

   
     The term <I>nu&eacute;e ardente,</I> or 
     "glowing cloud" was first used by La Croix (1904)
     in his description of the volcanic flows he observed in 
     the 1902 eruption of Mt Pel&eacute;e, a historically 
     active volcano on the island of Martinique.
   

   NOTE: We have applied the acute accent mark for two "e" letters in this sentence. It may look strange! Be sure that you replace the letter with the sequence that displays the same letter with the accent mark.

3. Save and Reload the HTML file.

HTML Escape Sequences

The HTML for the accent mark is an example of the more general class of tags known as escape sequences. In entering HTML so far, you may have wondered what you do when you need to use a < (less-than) or a > (greater-than) sign? These two characters, plus the & (ampersand) have special meaning in HTML and cannot be used as typed. Instead, use the escape sequences:

   &lt;  is used for <
   &gt;  is used for > 
   &amp; is used for &

Now let's apply one of these symbols in our Volcano lesson. In the previous: , we added a table that lists several volcanoes and how much material was erupted from each. Let's say one of the values (500-600) for Long Valley is not very accurate (often such values are estimates), and we would like the entry to read >450 & <700. To do this:

1. Open the HTML file, index.html in your text editor.
2. Under the heading of Volumes of Some Well-Known Volcanic Eruptions, find the line for Long Valley in our table:

   
     Long Valley, California     pre-historic        500 - 600
   

   and change it to:

   
     Long Valley, California     pre-historic       >450 & <700
   

   NOTE: Although we are using the escape sequences within a preformatted text, note how a web browser properly interprets and displays the special characters. The escape sequences can thus be used in all portions of an HTML document including headings and anchor links.

3. Save and Reload the HTML file.

Extra Spaces

As you may have seen, a web browser will ignore all extraneous spaces in your HTML files. However, there may be times when you really want to have more than one space. When? Some writers like to have two spaces following the period at the end of the sentence. What if you wanted to indent the first sentence of every paragraph? How about having a single word with its individual letters spaced far apart?

An HTML code for adding a space character is the special character known as the "non-breaking space":

   

Here are some examples of how you might use the non-breaking space:

HTML	Result
Two non-breaking spaces are used to spread the letters in a word farther apart
<b><tt> C &nbsp; H &nbsp; E &nbsp; E &nbsp; S &nbsp; E </tt></b>	C   H   E   E   S   E
HTML	Result
Two non-breaking spaces are used to indent the first sentence of each paragraph
&nbsp; &nbsp; When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. And no cheese. <p> &nbsp; &nbsp; But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful.	When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. And no cheese.     But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful.
HTML	Result
One extra space is used to add an extra space after the end of each sentence.
&nbsp; &nbsp; When Sir Longhorn had tragically died, no one was left to carry on his tradition. &nbsp; There was much sadness in the land. &nbsp; And no cheese. <p> &nbsp; &nbsp; But then the young genius Sheila Colby discovered the missing ingredient. &nbsp; And once again, cheese was plentiful.	When Sir Longhorn had tragically died, no one was left to carry on his tradition.   There was much sadness in the land.   And no cheese.     But then the young genius Sheila Colby discovered the missing ingredient.   And once again, cheese was plentiful.

You may want to experiment with different ways to use the non-breaking space. At this time, we will not modify our HTML documents, but you may, if you wish, add the code for indenting each opening sentence of all paragraphs using two instances of the special code for the non-breaking space.

For more information on paragraph indentation, see Jim Barchuck's Stupid HTML Indent Tricks.

Check Your Work

Compare your document with a sample of how this document should appear. If your document was different from the sample, review the text you entered in the text editor. Be sure that you have correctly bracketed the escape sequences with the & and ; characters.

More Information

Here are some more special charcters that you may find useful:

See also the extensive list of special characters from WebMonkey.

Review

Review topics for this lesson:

1. In HTML, what is the correct way to display a German umlaut (ü)?
2. What happens if you do not use an escape sequence for < and >?
3. Why would you need a special escape sequence for the & character?
4. How can you indent paragraphs?

Independent Practice

In your own HTML document, add a foreign word that requires a special accent or a mathematical expression that uses the < or > symbol. Or, add some extra spaces to indent your paragraphs.

Coming Next....

Build a bibliography using a descriptive list.

GO TO.... | Lesson Index | previous: "Preformatted Text" | next: "Definition Lists" |

Writing HTML: Lesson 10: Special Characters
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges



URL: http://www.mcli.dist.maricopa.edu/tut/tut10.html