Site Development
Downloads
Help!!
Home
What Are Special CharactersHTML is coded in ASCII characters. This is a limited set of characters including upper- and lower-case English letters, all ten digits, and some punctuation marks. This is why HTML can be coded in any text editor on any type of machine running any OS. From time to time, you'll need to add a character to your page that isn't a standard ASCII character like the copyright symbol ( © ) or the registered trademark symbol: WinZip®. To get these characters to appear on our page we must use a special code designed just for them. How To Code Special CharactersThe code for the "©" symbol is shown below: © All Special Characters begin with an ampersand ( & ) and end with a semi-colon ( ; ). the text between these is the individual code for the Special Character. In the case of the "©" symbol it's "copy". The code for "®" is ®. Sometimes the string between the "&" and the ";" is a hash ( # ) followed by three digits. The "™" is like this. Its code is ™. Don't get thrown off by the use of digits. The principle is the same. Start a Special Character's code with an ampersand ( & ), add the sting for the character you want, end with a semi-colon ( ; ). There are no spaces in a Special Character's code. Using The Special Character   represents a blank space just like hitting the space bar on your keyboard. This is called a "non-breaking space" because it doesn't cause a line break, just a space. We've already covered that multiple spaces and line-breaks in your code do not show up when a browser renders your page. You could hit the space bar a hundred times between two words of content and only one space will appear in a browser. We can use to tell the browser to display extra spaces. Let's indent a line five spaces using . (Remember that the first hit of the space bar will provide one space. Only subsequent spaces are ignored and the is needed.):
<html> Remember that you can make one space by just hitting your spacebar in your code. This space will show up in the browser. It's the subsequent spaces that are not rendered. Add these extra spaces as needed with . See what the above code looks like here. A List Of Common Special Character Codes
Presenting HTML TagsHow do you figure I put up tags like this -- <br> without actually causing a line break? Well, I don't actually type in "<br>". I use Special Characters for the angle brackets so the browser doesn't see it as a real tag. Here's how the <br> tag is coded for display: <br> I start with the code for a "<" -- <. Next I put in the content of the tag -- "br" in this case. Finally, I close the tag with > which shows up as ">". This takes some getting used to, but it's not that rough once you get used to it. Believe me, after writing this site I got really used to it. Now lets use our newly learned code to produce this: © <Code Punk>First notice that the example is centered and in big text. I used <h3 align="center"> for this effect. Next I coded the copyright symbol using ©. Then I hit the space bar once for the single space I needed. If I'd wanted more space, I'd have added some 's. Then I made the "<" using <, typed in "Code Punk", and ended with > for the closing bracket. I then coded the closing </h3> tag. Below is the full code:
<h3 align="center">© <Code Punk></h3> Using The <sup> And <sub> TagsIf you code content for science pages, you'll have to use "superscript" and "subscript" effects. The "superscript" effect looks like this: 32. See how the "2" is higher than the "3"? The "2" is superscripted. The subscript is similar, but the subscripted content is lower instead of higher -- 32. We use the <sup> and </sup> tags to make superscripted strings and <sub> </sub> to make subscripted strings: <p>This is normal.<sup>This is superscripted.</sup><sub>This is subscripted.</sub></p> The above code would produce the effect seen below when run in a browser: This is normal.This is superscripted.This is subscripted. Using <sup> is also handy for making 1st, 2nd, 3rd, nth. You won't use superscript and subscript much, but, when you do have to use it, you generally have to use a lot of it. These are quite common in scientific and math pages. Practice making all of the special symbols above including using special characters to make HTML tags that will show up in a browser. Make sure you can make the © <Code Punk> example and know how it works. Play around with <sup> and <sub>. When you're ready, move on to making lists. Lists are a great and easy way to heavily format text into outlines that even include automatic numbering. | ||||||||||||||||||
To Next Beginning HTML Lesson
Back To Beginning HTML Index