Bold and italic textText sizeMonospaced fontPre-formatted textQuoted textSubscripts and superscriptsHorizontal rulesXHTML FormattingIn general, XHTML formatting is handled by cascading style sheets (styles); however, there are a few simple, default ways to format text in XHTML. Most of the elements mentioned in this document are logical elements – they give structure by describing what they contain, while also providing default formatting. Additionally, there are times when styles are overkill for a simple page because only basic formatting (e.g., bold-faced or italicized text) is required.NOTE: The parts of an example that appear in a bold-faced, red font are the parts of the example that are being emphasized.Bold and italic textTo bold-face text, use the b element. To italicize text, use the i element.<h2>After Computers</h2><p>Programming became <b>significantly</b> more interesting after the computer was invented...at least until <i>COBOL</i> made its way onto the scene.</p>This is how the markup may appear in the browser.After ComputersProgramming became significantly more interesting after the computer was invented...at least until COBOL made its way onto the scene.Text sizeTo change the text size, use the big and small elements. These elements have a cumulative effect. For example you can make text twice as small as the surrounding text by using <small><small>miniscule</small></small>.<h2>After Computers</h2><p>Programming became <b>significantly</b> more interesting after the computer was invented...at least until <i>COBOL</i> made it's way onto the scene. <big>Hint:</big>Don't spend your time learning COBOL right now -- learn C or Java. <small>Your mileage may vary -- offer not valid in some areas.</small></p>This is how the appear may appear in the browser.After ComputersProgramming became significantly more interesting after the computer was invented...at least until COBOL made its way onto the scene. Hint: Don’t spend your time learning COBOL right now -- learn C or Java. Your mileage may vary -- offer not valid in some areas.Monospaced fontEvery browser should have two fonts available: a proportionally-spaced font (such as Times) and a monospaced font (such as Courier). Some examples of text that should be displayed in a monospaced font are computer code, URLs, and commands to enter using the keyboard. There are four elements that format text using a monospaced font: tt, code, kbd, and samp. These elements represent typewriter text, computer code, keyboard instructions, and sample text respectively.<p>Some of us had typewriters, and would practice our skills using the phrase <tt>The quick brown fox jumped over the lazy dog</tt>. Now we can do repeated text in Perl: <code>print "$_\n" x 60;</code>. Simply type <kbd>perl foo.pl</kbd> and enter the phrase <samp>sample text</samp>.</p>This is how the markup may appear in the browser.Some of us had typewriters, and would practice our skills using the phrase The quick brown fox jumped over the lazy dog. Now we can do repeated text in Perl: print "$_\n" x 60;. Simply type perl foo.pl and enter the phrase sample text.Pre-formatted textBrowsers usually remove all extra newlines and spaces, creating line breaks according to the size of the window. Pre-formatted text lets you maintain the original line breaks and spacing, and is denoted using the pre element. NOTE: The pre tag is typically formatted in a monospaced font, and is a block level element.<h2>Printing Arrays in Sorted Order</h2><pre>foreach (sort @foo) { print "$_\n";}</pre>This is how the markup may appear in the browser.Printing Arrays in Sorted Orderforeach (sort @foo) { print "$_\n";}Two significant disadvantages of the pre element are that text between angle brackets (< and >) is interpreted as XHTML, and any formatting elements in the text will be interpreted. For example: <pre> #include <stdio.h> <b>do not bold face me</b></pre>will be displayed in the browser as: #include do not bold face meNote that the text in the angle brackets does not get displayed and that the text within the b elements is displayed in bold-face. To prevent text within angle brackets from being interpreted as an XHTML element, use the character entity references for < and >, namely < and >. In the example markup below, the semicolon after the < tells the browser not to insert a space after the < character.<pre> #include <stdio.h> <b> do not bold face me</b></pre>Notice how unreadable this makes the text. The xmp element is an alternative to pre that tells the browser display text verbatim, including angle brackets, until it encounters </xmp>. For example:<xmp> #include <stdio.h> <b>do not bold face me</b></xmp>will be displayed in the browser as: #include <stdio.h> <b>do not bold face me</b>NOTE: The xmp tag is not defined for XHTML 1.0 Transitional.Quoted textThere are two ways to identify quoted text. Block-level quotes, denoted by the blockquote element, are generally indented by the browser. Inline quotes, denoted by the q element, are automatically enclosed in quotation marks, or whatever character is used to indicate quoted text in the target language.<p>You might appreciate these words of wisdom from Donald Knuth...</p><blockquote> <p>Programming isn't for everyone. It's hard and often frustrating. However, when it's done well, it's downright fun!</p></blockquote><p>I hear you screaming, <q lang="en">Frustrating? You said this would be fun!!</q> Read on, my friends, and fear not.</p>This is how the markup may appear in the browser.You might appreciate these words of wisdom from Donald Knuth...Programming isn’t for everyone. It’s hard and often frustrating. However, when it’s done well, it’s downright fun!I hear you screaming, "Frustrating? You said this would be fun!!" Read on, my friends, and fear not.Subscripts and superscriptsSubscripts and superscripts are denoted using the sub and sup elements respectively.<p>Your first fun program will be to sort the elements of a list, a<sub>0</sub> through a<sub>n-1</sub>. I recommend using a straight-forward O(N<sup>2</sup>) algorithm at first.</p>This is how the markup may appear in the browser.Your first fun program will be to sort the elements of a list, a0 through an-1. I recommend using a straight-forward O(N2) algorithm at first.Horizontal rulesA horizontal rule is a horizontal line that spans a page and visually divides the page into sections. Its most basic form is <hr/>; however,
View Full Document
Unlocking...