Special Characters

Because of the way HTML uses certain characters and the differences between how browsers handle other characters, anything outside of the alphanumeric zone and the most common punctuation may not be displayed the way you expect it to on one browser or all of them. Take Bugfix's website for example; this fishdragon wanted to faithfully replicate some character mode screenshots into fixed width text, but was shocked when he found out the borders rendered completely wrong in Internet Explorer 1:

What's all of this crap here?! It was supposed to look neat like the actual MS-DOS setup program, but ended up so dirty that it stretched twice the width of an 800x600 display! Is he supposed to forego the borders? Actually, he doesn't have to, for HTML offers its own simple way to add special characters to a page that will render in both ASCII and Unicode-based browsers and operating systems!

I suppose by now you're wondering how I got HTML code to show up as is on this page without being used by your browser to display the end result. In order to display the < and > characters to show up without being interpreted, you'd basically need to use entity names or numbers. There's a comprehensive list on HTML.am (as well as a list of box drawing characters on W3Schools) showing all the special characters you could use, but we'll focus on the very basics for now.

An entity name looks like this:

<

This entity stands for the less than symbol, which outputs <, as you should be able to guess. Naturally, then comes >, which displays >. Some characters like quote marks (") will usually render just fine in paragraphs and what not, but if you're wanting to put them in other fields HTML uses which are encapsulated by quote marks, the entity name " exists for that.

But how do you display an ampersand (&) without the browser trying to interpret it as something else? Pretty simple, you just type &. To show someone else that's what they need to type, you type &amp;.

If you really want to, you can use HTML entity numbers instead of names (e.g. type < to display the same < character), but I'm sure you'll find it easier to use names.

Fixed Width Text

When you're explaining a command line interface or the source code to a program, it's not ideal to present it all in variable width text as it is with most other kinds of text. Programmers and text mode programs always use fixed width fonts; that is, every character is the exact same width so they're all distributed across the screen evenly. It's not as efficient to read paragraphs this way, but it very much is for reading code.

The <tt> tag is used for displaying fixed width text. You've seen it being used all throughout this tutorial, but now might be a good time to try it yourself.

There is a little issue that I should bring up here, though... it's not with the tag itself, but how some old browsers don't use it correctly. When I tested Razorback on Netscape Navigator 2, it didn't actually display some text in the fixed width font I wanted! It turns out that if you set a font face that spans the entire page or anything of a similarly broad scope, this old version of Netscape just won't cope. I have to force it to use a fixed width font by surrounding <tt> with an additional <font> tag. So, to display one line of code correctly on as many browsers as possible, I have to type this:

<font face="monospace"><tt>printf("FUCK ! THIS ARE TEDIOUS !\n");</tt></font>

A very annoying thing for sure, but such is the reality of trying to get such an advanced site working correctly all the way through on this wide of a variety of browsers.

If you want to display multiple lines of fixed width text in a single block, there is a handy way to go about it: use the <pre> tag. By itself, it only displays line breaks and tabs as is in the text it encapsulates, which is otherwise either ignored or handled differently. In combination with <tt> (and begrudingly the necessary <font> tag for idiotic Netscape), preformatted text becomes very useful. Here's how I displayed the code for the very first HTML page you ever wrote from scratch:

<pre><tt><font face="monospace"><html>
<head>
<title>My First Web Page!</title>
</head>
<body>
<p>I am in complete servitude to Razorback.</p>
</body>
</html></font></tt></pre>

With so many tags all working for the same job, you do have to be cautious about nesting your tags properly, which I mentioned in the first page. As cumbersome as it seems to type so much in, it'll be all worth it in the end when the user browsing your site is presented with the code in an easy to read font.

Keep in mind that with preformatted text, word wrapping is not performed at all, so if you put too many characters on a line, the browser may not be able to display all of them in its window. This is something you should be especially mindful of when you're making a website that is assumed to be viewable on 640x480 displays. If one line has so many characters, perhaps the programming language you're teaching has a way to break it up into multiple lines.

I'd Just Like to Interject...

If you want to make it easier to find certain parts of a web page you're building, there is a mechanism HTML has which allows you to write text that will not show up in the actual browser window. As with many other programming languages, HTML allows for comments, basically bits of descriptive text that are not used in a program or web page but can be read by anyone going through the source code. It doesn't actually use an HTML tag, even though its usage looks similar to one.

A comment is opened with the text . Any text and HTML code within the boundaries of these pseudo-tags are not displayed in the browser, but do note that anyone can still read them if they decide to view the source code of your HTML page, either by saving it, selecting an option like "View Source" from a drop down menu, or right clicking somewhere and selecting "Inspect Element".

There's no getting around that any HTML code you write is going to be publicly viewable by anyone. HTML is an interpreted language, after all. For something as public and ubiquitous as the world wide web, this is extremely important.

Of course, the rule does not apply to server-side scripts like PHP, whose code cannot be read by web browsers anyway; an HTTP server has to work with the scripting engine to run through all the errands of a page before it sends anything to a browser for displaying. As such, the operator of a web server would have to elect to share server-side code, perhaps by creating a copy of a PHP file with the PHPS extension. (I plan on doing this myself later on when some of this site's more dynamic pages get a lot more functionality and polish)

In any case, you may want to consider using HTML comments in a way that not only you, but other people can make use of as well.

Find and Replace Operations

If you're wanting to make a fancy ASCII box like those used in MS-DOS Setup and other such programs, it may come as a great concern to you that you may have to type so many entity names over and over again... but you don't really have to do that. Just type the characters as you would see them first, and then as soon as you're ready to publish the page, you can perform a find and replace operation in your plain text editor. Replace every special character with its HTML entity name, save the file, and see how it looks. Bugfix will be delighted to see that his ASCII boxes are displayed correctly now!

...or not? Sorry Bugfix, but I think you're just gonna have to learn how to make better use of tables if you really want that box to look more correct...

Previous: Making a Bad PowerPoint