Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P17 doc

Character-Level Elements
HTML 3.2 defined several additional physical style tags, including the following:
<u>
Underline (deprecated in HTML 4.0)
<s>
Strikethrough (deprecated in HTML 4.0)
<big>
Bigger print than the surrounding text
<small>
Smaller print
<sub>
Subscript
<sup>
Superscript

Note
Text-based browsers, such as Lynx and those associated with wireless devices, can't render
bold, italic, or other styled text. They generally highlight the text in some way, but the
method varies depending on the browser and platform.

You can nest character tagsfor example, using both bold and italic for a set of charactersas follows:
<b><i>Text that is both bold and italic</i></b>

However, the result on the screen is browser-dependent, like all HTML tags. You won't necessarily end
up with text that's both bold and italic. You might end up with one style or the other:
Input
<p>In Dante's <i>Inferno</i>, malaboge was the eighth circle of hell,
and held the malicious and fraudulent.</p>
<p>All entries must be received by <b>September 26, 1999</b>.</p>
<p>Type <tt>lpr -Pbirch myfile.txt</tt> to print that file.</p>
<p>Sign your name in the spot marked <u>Sign Here</u>:</p>

<p>People who wear orange shirts and plaid pants <s>have no taste</s>
are fashion-challenged.</p>
<p>RCP floor mats give you <big>big</big> savings over the
competition!</p>
<p>Then, from the corner of the room, he heard a <small>tiny voice
</small>.</p>
<p>In heavy trading today. Consolidated Orange Trucking
rose ¹/₄
points on volume of 1,457,900 shares.</p>

Figure 6.2 shows some of the physical tags and how they appear.
Output
Figure 6.2. Physical styles displayed in a browser.
file:///G|/1/0672328860/ch06lev1sec1.html (5 von 6) [19.12.2006 13:48:43]
Character-Level Elements
[View full size image]



file:///G|/1/0672328860/ch06lev1sec1.html (6 von 6) [19.12.2006 13:48:43]
Character Formatting Using CSS


Character Formatting Using CSS
You've already seen how styles can be used to modify the appearance of various elements. Any of the
effects associated with the tags introduced in today's lesson can also be created using CSS. Before I go
into these properties, however, I want to talk a bit about how to use them. As I've said before, the
style
attribute can be used with most tags. However, most tags somehow affect the appearance of the text
that they enclose. There's a tag that doesn't have any inherent effect on the text that it's wrapped

around: the
<span> tag. It exists solely to be associated with style sheets. It's used exactly like any of
the other tags you've seen today. Simply wrap it around some text, like this:
<p>This is an example of the <span>usage of the span tag</span>.</p>

Used by itself, the <span> tag has absolutely no effect. Paired with the style attribute, it can take the
place of any of the tags you've seen today and can do a lot more than that as well.
The Text Decoration Property
The text-decoration property is used to specify which, if any, decoration will be applied to the text
within the affected tag. The valid values for this property are
underline, overline, line-through, and
blink. The application of each of them is self-explanatory. However, here's an example that
demonstrates how to use each of them:
Input
<p>Here is some <span style='text-decoration: underline">underlined
text</span>.</p>
<p>Here is some <span style="text-decoration: overline">overlined text</span>.</p>
<p>Here is some <span style="text-decoration: line-through">line-through
text</span>.</p>
<p>Here is some <span style="text-decoration: blink">blinking text</span>.</p>

Using <span> and the text-decoration property to underline text is no different from using the <u> tag,
except that some old browsers that don't support CSS might not support it. The cool thing is that you
can use this, and all the properties you'll see in today's lesson, with any tag that encloses text. Take a
look at this example:
<h1 style="text-decoration: underline">An Underlined Heading</h1>

Using the style attribute, you can specify how the text of the heading appears. Choosing between this
approach and the
<u> tag is a washif you want to remove the underlining from the heading, you'd have

to come back and edit the tag itself, regardless of whether you used the
<u> tag or style attribute. Later,
you'll see how style sheets can be used to control the appearance of many elements at once.
Font Properties
When you want to modify the appearance of text, the other major family of properties you can use is
file:///G|/1/0672328860/ch06lev1sec2.html (1 von 3) [19.12.2006 13:48:43]
Character Formatting Using CSS
font properties. Font properties can be used to modify pretty much any aspect of the type used to
render text in a browser. One of the particularly nice things about font properties is that they're much
more specific than the tags that you've seen so far.
First, let's look at some of the direct replacements for tags you've already seen. The
font-style property
can be used to italicize text. It has three possible values,
normal, which is the default, italic, which
renders the text in the same way as the
<i> tag, and oblique, which is somewhere between italic and
normal, and is not as well supported by browsers as the italic style is. Here are some examples:
Input
<p>Here's some <span style="font-style: italic">italicized text</span>.</p>
<p>Here's some <span style="font-style: oblique">oblique text</span>
(which may look like regular italics in your browser).</p>

Now let's look at how you use CSS to create boldfaced text. In the world of HTML, there are two
options: bold and not bold. With CSS, you have (theoretically) many more options. The reason I say
theoretically is that browser support for the wide breadth of font weights available using CSS can be
spotty. To specify that text should be boldface, the
font-weight property is used. Valid values are normal
(the default),
bold, bolder, lighter, and 100 through 900, in units of 100. Here are some examples:
Input

<p>Here's some <span style="font-weight: bold">bold text</span>.</p>
<p>Here's some <span style="font-weight: bolder">bolder text</span>.</p>
<p>Here's some <span style="font-weight: lighter">lighter text</span>.</p>
<p>Here's some <span style="font-weight: 700">bolder text</span>.</p>

You can also set the typeface for text using the font-family property. You can also set the specific font
for text, but I'm not going to discuss that until later today. In the meantime, let's look at how you can
set the font to a member of a particular font family. The specific font will be taken from the user's
preferences. The property to modify is
font-family. The possible values are serif, sans-serif, cursive,
fantasy, and monospace. So, if you want to specify that a monospace font should be used with CSS
instead of the
<tt> tag, you would use the following code:
Input
<p><span style="font-family: monospace">This is monospaced text.</span></p>

Now let's look at one capability that's not available using regular HTML tags. Using the font-variant
property, you can have your text rendered so that lowercase letters are replaced with larger capital
letters. The two values available are
normal and small-caps. Here's an example:
Input
<p><span style='font-variant: small-caps'>This Text Uses Small Caps.</span></p>

file:///G|/1/0672328860/ch06lev1sec2.html (2 von 3) [19.12.2006 13:48:43]
Character Formatting Using CSS
The browser window in Figure 6.3 contains some text that uses the font-variant property as well as all
the other properties described in this section.
Output
Figure 6.3. Text styled using CSS.
[View full size image]

file:///G|/1/0672328860/ch06lev1sec2.html (3 von 3) [19.12.2006 13:48:43]
Preformatted Text


Preformatted Text
Most of the time, text in an HTML file is formatted based on the HTML tags used to mark up that text. As
I mentioned in
Lesson 3, "Introducing HTML and XHTML," any extra white space (spaces, tabs, returns)
that you put in your text is stripped out by the browser.
The one exception to this rule is the preformatted text tag
<pre>. Any white space that you put into text
surrounded by the
<pre> and </pre> tags is retained in the final output. With these tags, the spacing in
the text in the HTML source is preserved when it's displayed on the page.
The catch is that preformatted text usually is displayed (in graphical displays, at least) in a monospaced
font such as Courier. Preformatted text is excellent for displaying code examples in which you want the
text formatted with exactly the indentation the author used. Because you can use the
<pre> tag to align
text by padding it with spaces, you can use it for simple tables. However, the fact that the tables are
presented in a monospaced font might make them less than ideal. (You'll learn how to create real tables
in
Lesson 8, "Building Tables.") The following is an example of a table created with <pre>:
Input
<pre>
Diameter Distance Time to Time to
(miles) from Sun Orbit Rotate
(millions

of miles)

Mercury 3100 36 88 days 59 days
Venus 7700 67 225 days 244 days
Earth 7920 93 365 days 24 hrs
Mars 4200 141 687 days 24 hrs 24 mins
Jupiter 88640 483 11.9 years 9 hrs 50 mins
Saturn 74500 886 29.5 years 10 hrs 39 mins
Uranus 32000 1782 84 years 23 hrs
Neptune 31000 2793 165 days 15 hrs 48 mins
Pluto 1500 3670 248 years 6 days 7 hrs
</pre>

Figure 6.4 shows how it looks in a browser.
Output
Figure 6.4. A table created using <pre>, shown in a browser.
[View full size image]
file:///G|/1/0672328860/ch06lev1sec3.html (1 von 3) [19.12.2006 13:48:44]
Preformatted Text

When you're creating text for the <pre> tag, you can use link tags and character styles, but not element
tags such as headings or paragraphs. You should break your lines with hard returns and try to keep your
lines to 60 characters or fewer. Some browsers might have limited horizontal space in which to display
text. Because browsers usually won't reformat preformatted text to fit that space, you should make sure
that you keep your text within the boundaries to prevent your readers from having to scroll from side to
side.
Be careful with tabs in preformatted text. The actual number of characters for each tab stop varies from
browser to browser. One browser might have tab stops at every fourth character, whereas another may
have them at every eighth character. You should convert any tabs in your preformatted text to spaces
so that your formatting isn't messed up if it's viewed with different tab settings than in the program you

used to enter the text.
The
<pre> tag is also excellent for converting files that were originally in some sort of text-only form,
such as mail messages or Usenet news postings, into HTML quickly and easily. Just surround the entire
content of the article within
<pre> tags and you have instant HTML, as in the following example:
<pre>
To:
From:
Subject: Tales of the Move From Hell, pt. 1
I spent the day on the phone today with the entire household
services division of northern California, turning off services,
turning on services, transferring services and other such fun
things you have to do when you move.
It used to be you just called these people and got put on hold for
and interminable amount of time, maybe with some nice music, and
then you got a customer representative who was surly and hard of
hearing, but with some work you could actually get your phone
turned off.
</pre>

One creative use of the <pre> tag is to create ASCII art for your web pages. The following HTML input
and output example shows a simple ASCII-art cow:
file:///G|/1/0672328860/ch06lev1sec3.html (2 von 3) [19.12.2006 13:48:44]
Preformatted Text
Input
<pre>
( )
Moo (oo)
\/ \

|| | \
|| W|| *
|| ||
</pre>

The result is displayed in Figure 6.5.
Output
Figure 6.5. A bit of ASCII art that illustrates how preformatted text works.



file:///G|/1/0672328860/ch06lev1sec3.html (3 von 3) [19.12.2006 13:48:44]
Horizontal Rules



Horizontal Rules
The <hr> tag, which has no closing tag in HTML and no text associated with it, creates a horizontal line
on the page. Rule lines are used to visually separate sections of a web pagejust before headings, for
example, or to separate body text from a list of items.
Closing Empty Elements
The <hr> tag has no closing tag in HTML. To convert this tag to XHTML and to ensure
compatibility with HTML browsers, add a space and a forward slash to the end of the tag:
<hr />

If the horizontal line has attributes associated with it, the forward slash still appears at the
end of the tag, as shown in the following examples:
<hr size="2" />
<hr width="75%" />
<hr align="center" size="4" width="200" />

The following input shows a rule line and a list as you would write it in XHTML 1.0:
Input
<hr />
<h2>To Do on Friday</h2>
<ul>
<li>Do laundry</li>
<li>Send FedEx with pictures</li>
<li>Have lunch with Mollie</li>
<li>Read Email</li>
<li>Set up Ethernet</li>
</ul>
<hr />

Figure 6.6 shows how they appear in a browser.
Output
file:///G|/1/0672328860/ch06lev1sec4.html (1 von 5) [19.12.2006 13:48:44]
Horizontal Rules
Figure 6.6. An example of how horizontal rules are used around a list.

Attributes of the
<hr> Tag
In HTML 2.0, the <hr> tag is just as you see it, with no closing tag or attributes. However, HTML 3.2
introduced several attributes to the
<hr> tag that give you greater control over the appearance of the
line drawn by
<hr>. All these attributes have been deprecated in favor of style sheets in the HTML 4.01
specification.
Note

Although presentation attributes such as size, width, and align are still supported in HTML
4.01, style sheets are now the recommended way to control a page's appearance.

The size attribute indicates the thickness, in pixels, of the rule line. The default is 2, and this also is the
smallest that you can make the rule line.
Figure 6.7 shows the sample rule line thicknesses created with
the following code:
Input
<h2>2 Pixels</h2>
<hr size="2" />
<h2>4 Pixels</h2>
<hr size="4" />
<h2>8 Pixels</h2>
<hr size="8" />
<h2>16 Pixels</h2>
<hr size="16" />

Output
file:///G|/1/0672328860/ch06lev1sec4.html (2 von 5) [19.12.2006 13:48:44]