Inserting Special Characters into Web Pages

This tutorial will explain how to insert mathematical equations and special characters into web pages using Microsoft Windows XP. The modules of Microsoft Office X - including FrontPage - offer the user a limited equation editor, but the equations produced with the editor may not display as desired in a web browser, especially a browser other than Internet Explorer.

To avoid displaying the equations incorrectly, this tutorial will show you how to turn your equation into an image and insert it into a web page. In addition, for advanced users, we will show you how to insert special characters directly from FrontPage, and how to insert them manually using HTML code.

Creating a Mathematical Equation

1. Display the equation.

   • Create a new blank document in Microsoft Word.
   • To insert a special character into the equation, under the Insert menu, choose Symbol....

     

   • In the Symbol dialog box that appears, click on the symbol you wish to add, and click the Insert button.

     

   Note: If a certain symbol does not display in the list, it may not be available for the given font you are using. You can change the current font with the Font drop-down menu at the top of the dialog box.

   • Repeat this step for every special character you are adding to the equation. Once you have finished, click the Close button.
   • Add any additional characters to the equation that you need as if you were working with a normal text document.
   • Format the equation as necessary using the Formatting toolbar.
   • If colored lines appear under the equation that you have created, you will have to disable spelling and grammar checking. Under the Tools menu, choose Preferences... to display the Options window.

     

   • Click the Spelling and Grammar tab at the top of the window. Uncheck the Check spelling as you type and Check grammar as you type boxes, and click the OK button.

     

   
   

2. Capture the equation.

   After you have finished assembling the equation of Microsoft Word, take a screen capture of it, and save that screen capture. The screen capture tutorials are available below:

   • Screen Capture (Windows)
   • Screen Capture (Macintosh)
   
   

3. Edit and save the equation.

   • Open the screen capture in Adobe Photoshop Elements. Any other image editor can be used, but this tutorial will only list the instructions for Photoshop Elements.
   • On the Tools toolbar, click the Crop icon.

     

   • Crop the image so that it contains only the equation. To use the crop tool, click the mouse and drag it until the dotted rectangle encompases the part of the image that you wish to keep. Press [Return] to complete the crop.

     

   • Under the File menu, choose Save for Web....

     

   • Under the Settings heading, click on the drop-down menu shown below, and choose GIF from the available options.

     

   • Click the OK button in the upper-right corner, and save the image.

     

   • Insert the equation into your web page as you would any other image.

Inserting a Special Character using Macromedia Dreamweaver MX 2004

1. Position your cursor at the location in your web page where you wish to insert a special character.
2. Under the Insert menu, choose Special Characters → and then Other... to display the Insert Other Character dialog box.
3. Locate the symbol that you wish to add from the list, and click on it. Click the OK button to add it to the document.

Inserting a Special Character Manually into HTML Code

Due to the nature of the HTML (the language that defines what most web pages will look like), inserting a special character normally - i.e., using the Character Palette feature in Mac OS X or a similar "insert character" feature in a text editor - will not always display properly in some web browsers. Fortunately, one of the capabilities of HTML is to use special codes to represent these characters.

While the codes may appear to be a random string of letters, numbers, and symbols when viewing the HTML code, they will appear as the character they represent when viewed in a web browser. Each code begins with an ampersand (&) and ends with a semicolon (;), and there are two different sets of codes - one using the text decription of the character, and another using a numerical identifier. To use these codes, simply insert them into your web page code where you want the character to appear.

For example, consider the following code:

<p>O&ugrave; est la biblioth&egrave;que?</p>

If this phrase was viewed in a web browser, it would appear as follows:

Où est la bibliothèque?

Note that the text codes and the number codes are interchangable. The following code - which uses the number codes - produces the same results:

<p>O&#249; est la biblioth&#232;que?</p>

These codes can be used for on any page, regardless of style or layout. However, if a specific character is not available for a given font, it will be replaced by a blank square. If this occurs, you will have to add additional code to change the font for that specific character.

Special Character HTML Codes ¹

¹ Source: Webmonkey Reference: Special Characters (http://www.webmonkey.com)