Lessons | previous | next |

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" é:


     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       &gt;450 &amp; &lt;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":

  &nbsp;

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>
sample web page
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.
sample web page
    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.
sample web page
    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.

previous: "Preformatted Text" | next: "Definition Lists" |