Notepad Tutorials for Web Page Development© 2010 Floyd Jay Winters, Professor, Web Master, CIW and ACA Certified.
Special Characters
There are times when you need to display special characters on your Web page, such as the copyright symbol (©), a degree symbol (°), or a letter from a foreign alphabet such as an e with an "acute" accent (é). However, these symbols are not on the keyboard. There are other times when the character is on the keyboard, but if it were to be used on a Web page it would confuse the browser because it is part of an HTML tag or attribute structure, such as the less than symbol, also called a left angle bracket (<), the greater than symbol or right angle bracket (>), and the quotation mark ("). Another issue arises when it is necessary to insert two or more spaces into a page. HTML ignores multiple spaces, so non-breaking spaces ( ) are required. And finally there are foreign currency symbols such as the pound (£), the euro (€), or the yen (¥).
These special HTML characters begin with an ampersand (&) and end with a semicolon (;). Below is a table displaying the most common HTML special characters. However, there are numerous other special characters, especially when you consider that the non-roman characters in international alphabets are extensive, such as ç or ñ or ö.
For a more extensive listing see: http://www.webmonkey.com/2010/02/special_characters/
| Symbol | Description of Common Special Characters | Html code |
| ampersand | & | & |
| cent sign | ¢ | ¢ |
| copyright symbol | © | © |
| registered symbol | ® | ® |
| degree sign | ° | ° |
| greater than | > | > |
| less than | < | < |
| non-breaking space | two or three or four spaces will display as one space, but will display as two spaces |
|
| one half | ½ | ½ |
| one quarter | ¼ | ¼ |
| quote | " | " |
| trademark | ™ | ™ |
| pound | £ | £ |
| euro | € | € |
| yen | ¥ | ¥ |
| cedilla | ç Ç (a hook under a letter, in Spanish) | ç |
| eñe | ñ Ñ (a tilde over a letter, in Spanish) | ñ |
| accent acute | é É (an apostrophe over a letter, in French) | é |
| oumlat | ö Ö (a pair of dots above a vowel in Germanic languages) | ö |
Below is the simple HTML code used to display: by Floyd Jay Winters © 2010
<p>by Floyd Jay Winters © 2010</p>
Perhaps you want to show a student what to type to display an image in a Web page. Below is the line code you would type in Notepad for the image to display:
<img src="images/monitor.png" width="80" height="80" alt="Monitor" />
But to show the actual line of code to the viewer, without the code being rendered by the browser, you would type:
<img src="images/monitor.png" width="80" height="80" alt="Monitor" />
Notice the use of the < for the < and the " for the " and the /> for the >.
Copy and paste the lines above into a practice Notepad Web page. See what they do. Add some other special characters into the same Web page. Experiment and become good at inserting special characters into Web pages.
For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate
Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements... your file, see: http://validator.w3.org
Review Assignment Learning Project: 10 Practice Review Steps
