Most of the text in this book is set in a proportional font . This means that individual characters take up varying amounts of space horizontally, depending on the size of the individual character . For example, the letter M takes up more space than the letter I, so a string of Ms occupies more space than a string of Is . As a demonstration, let’s take a look at 10 of each character to see the difference:
MMMMMMMMMM IIIIIIIIII
Most Web pages that we’re accustomed to viewing use proportional fonts; they are attractive, professional-looking, and easier to read .
In contrast, a monospace font is one whose characters occupy exactly the same amount
Using Monospace and Preformatted Text 33
as you typed, no matter which letter was keyed . Here are those same 10 Ms and Is in a monospace font:
MMMMMMMMMM IIIIIIIIII
Some common uses for monospaced text include:
● Lines of programming code (like the HTML lines in this book)
● Text that you are instructing a user to type
● ASCII art (artwork created by using text characters)
It is uncommon to use monospaced text on a Web site, but for special situations it’s nice to have that capability . To apply monospace style, you can use any of the tags outlined in the following table . Most browsers do not make a formatting distinction between these tags by default, but you can define them differently in your styles if you like .
Tag Description
<kbd> (Keyboard) The tag used for monospaced text to indicate something a user
should type on a keyboard
<code> (Code) The tag used for monospaced text applied to programming code
<samp> (Sample) The tag used for sample text, which is largely the same thing as <code>
Note The <tt> tag was widely used for monospace text in a document in earlier HTML versions, but it is not supported in HTML5.
Note There are many different monospace fonts. Most browsers use Courier (or a variant) unless you specify otherwise. On page 40, you will learn how to specify a plain text font in Internet Explorer by changing the setting in the browser that controls the font used for monospace.
These tags work nicely if you just want to make certain that characters appear in a monospaced font, but they don’t change the fact that HTML omits extra spacing and line breaks that the text might include . When formatting something that requires the verba-tim inclusion of white space such as spaces or line breaks, you must use the <pre> tag, which stands for “preformatted .” The <pre> tag not only displays the text in monospace, but also preserves all the spaces and line breaks that the Web browser would usually
34 Chapter 3
The <pre> tag can also come in handy when text that you copied and pasted from another source contains a lot of line and paragraph breaks . You could manually enter a
<br> for every line break and a <p> for every paragraph break, but that is pretty labor intensive for a large file with a lot of breaks . Using the <pre> tag is a shortcut . One common use for the <pre> tag is in poetry archives, for example, where line breaks and spacing add meaning to the poems .
In this exercise, you will add monospaced text to an existing page, and you will create a new page consisting of a poem and an ASCII graphic .
SET UP Use the instructions.htm, poem.htm, and poemtext.txt files in the practice file folder for this topic. (These practice files are located in the Documents\Microsoft Press\HTML5 SBS\03Format\UsingMonospace folder.) Open the instructions file in Notepad and Internet Explorer.
1.
In Notepad, enclose the words premium in step 2 and customer in step 4 in <kbd>tags .
<p>1. Click in the Login box<br>
2. Type <kbd>premium</kbd><br>
3. Click in the Password box<br>
4. Type <kbd>customer</kbd></p>
2.
Save the file, and then refresh the Internet Explorer display .Monospace
The text is now monospace, but it doesn’t stand out very well . Let’s make it more
Using Monospace and Preformatted Text 35
3.
Enclose the two monospace words in <b> tags (inside the <kbd> tags) .<p>1. Click in the Login box<br>
2. Type <kbd><b>premium</b></kbd><br>
3. Click in the Password box<br>
4. Type <kbd><b>customer</b></kbd></p>
Note You can place the <b> tags either inside or outside the <kbd> tags, as long as you remember the “first-in, last-out” rule consistently. For example, you could either write
<b><kbd>customer</kbd></b> or <kbd><b>customer</b></kbd>, but you should not mix up the tag order like this: <b><kbd>customer</b></kbd>. Improperly nested codes often render properly in HTML, but not in XHTML.
4.
Save your work, and then refresh Internet Explorer to see the changes .5.
Close the instructions file and the Internet Explorer window .6.
Open the poem file in Notepad and Internet Explorer .7.
In Notepad, in the <head> section, create the following title:<title>”The Gardener” by Robert Louis Stevenson</title>
8.
In another copy of Notepad, open the poemtext file .9.
Select the poem title, attribution, and text (but not the biography note at the bot-tom of the file), and then press Ctrl+C to copy it to the Clipboard .36 Chapter 3
10.
Close the poemtext file .11.
In the poem file, click below the <body> tag and press Ctrl+V to paste the copied text between the <body> and </body> tags .12.
Apply the <h1> tag to the poem title within the <body> section .<h1>The Gardener</h1>