Chapter 5
Formatting Text
CONTENTS
HTML was originally designed as a markup language, not as a formatting
and layout specification. The key difference is that HTML allows
the author to specify how certain elements are to be used, not
necessarily how they're supposed to look. The actual details of
presentation are left up to the client-the
Web browser.
That's how HTML was originally designed, but that's not necessarily
how things turned out. Increasingly, HTML designers are demanding
greater control over the look and feel of their documents. HTML
3.2 provides that control, and yet still allows HTML authors to
take the first approach and allow formatting to be hand ed entirely
by the browser.
As the author of your own document, you will decide how you want
your page to look. In this chapter, you'll learn how to handle
basic formatting for text and paragraphs. You'll also learn a
few valuable techniques for breaking large amounts of text into
readable chunks.
HTML provides two general ways to apply formatting to text. The
first group of formatting tags is collectively known as physical
markup tags. This type of tag gets its name because it indicates
a specific change in appearance. Bold and italic tags, for example,
are known as physical markup tags because they directly specify
how the text should appear on screen. In this section, we'll look
at how you can use physical tags in HTML 3.2.
- Some formatting tags, especially the ones marked as new for
HTML 3.2, are not supported by all Web browsers. Use these tags
only when absolutely necessary.
- When using superscript numbers to indicate footnotes, try
adding the <SMALL> and </SMALL> tags to make the footnote
numbers smaller than the normal text.
Figure 5.1 :
- In general, all character formatting tags work the same. Each
has a starting tag and an ending tag. All of the text that falls
between the two tags inherits the specified format. In addition,
you can nest formatting tags inside one another to combine effects.
- To create italic text, insert an <I> tag in the
document, followed by a </I> tag. Any text between
these two tags will be displayed in italics when viewed by a browser.
Figure 5.2 :
- To create bold text, insert <B> and </B>
tags. Any text falling between these two tags will appear in boldface
type.
Figure 5.3 :
- To create text that is displayed in a monospaced font (such
as Courier), use the <TT> and </TT>
tags. Text falling between these two tags will be displayed in
a fixed-width font, similar to the output from a teletype machine
or typewriter.
Figure 5.4 :
- To create strike-through text, which is text with a single
horizontal line running through it, use the <STRIKE>
and </STRIKE> tags.
Figure 5.5 :
- Underlined text can be displayed using the <U>
and </U> tag pair. You should use these tags only
when absolutely necessary, as underlined text is not widely supported
by Web browsers.
Figure 5.6 :
- You can change the font size of normal text. Using the <BIG>
and </BIG> tags will increase the size of the indicated
text relative to the default size. <SMALL> and </SMALL>
will make the text smaller.
Figure 5.7 :
- You can also format text as either superscript or subscript,
which is text that appears slightly above or below the current
line, respectively. Superscript and subscript numbers are often
used in mathematical equations or to indicate footnotes. Using
the <SUP> and </SUP> tags will mark
text as superscript (slightly above the current line). <SUB>
and </SUB> will mark text as subscript (slightly
below the current line)
Figure 5.8 :
On the previous page, you learned how to specify the appearance
of text using physical markup tags. However, there is a second
method for formatting text-through the use of logical markup
tags, sometimes known as information style elements.
Logical tags take the approach that what's really important is
the type of information being displayed, rather than exactly
how it is displayed. Logical tags leave the actual
appearance decisions-such as
whether to display text in boldface, italics, or larger sizes-up
to the browser (and ultimately the reader).
Figure 5.9 :
- When you want to add importance to a section of text, you
can use the logical style tag called emphasis. Using the
<EM> and </EM> tags will usually display
the indicated text in italics. However, remember that with logical
tags, the actual appearance of the text is determined by the end
user's Web browser, not your HTML document.
Figure 5.10 :
- If a particular section of text is very important, you can
mark it with strong emphasis by using the <STRONG>
and </STRONG> tag pair. Most browsers tend to display
strongly emphasized text in boldface.
Figure 5.11 :
- The <CODE> and </CODE> tags indicate
that the text is to be presented as an example of programming
code. In most browsers, this text will be displayed in
a monospaced font, such as Courier. The <CODE> tags are
used extensively in interactive computer manuals.
Figure 5.12 :
- The <SAMP> and </SAMP> tags are
very similar to the <CODE> tags, and are used to indicate
sample text that isn't specifically programming code. Most Web
browsers will handle both sets of tags in the same way.
- The <KBD> and </KBD> tags indicate
text that is supposed to be typed in by the reader. By default,
most browsers will display this text in a similar fashion to the
<CODE> and <SAMP> tags.
Figure 5.13 :
- The <CITE> and </CITE> tags are
used to insert a citation to give credit for a short quotation
in the body of the document. Citations are typically displayed
in italics.
Figure 5.14 :
- The <DFN> and </DFN> tags are used
to highlight the defining instance of a term. This
is a word or phrase that is being defined in the context of the
paragraph in which it appears.
Figure 5.15 :
Now that you've learned all the ways to format individual characters,
words, and phrases, you're ready to examine the options you have
for presenting entire sections of text. As with normal documents,
the basic section of text in HTML is the paragraph. HTML 3.2 provides
many new ways to present, format, and align paragraphs.
- Although the closing <P> tag is optional, you may want
to include it to help you remember where a paragraph ends.
- The order of placement for attributes inside HTML tags is
not important. As long as all of the attributes are contained
within the HTML tag brackets, you can specify them in any order
you like.
Figure 5.16 :
- The basic paragraph tag is always used to start a new paragraph.
To indicate a paragraph, type <P>. This tells the
Web browser to insert a line space and begin a new paragraph.
The <P> tag always creates a simple, left-justified paragraph.
Figure 5.17 :
- You can change the justification of the paragraph with the
ALIGN attribute. To change the alignment of a paragraph,
put the ALIGN statement in the paragraph tag, followed by the
type of justification you want. To create a right-justified paragraph,
type <P ALIGN=RIGHT>.
Figure 5.18 :
- To create a centered paragraph, type <P ALIGN=CENTER>.
To create a paragraph that is justified on both sides, type <P
ALIGN=JUSTIFY>. You can also create a left-justified paragraph
by typing <P ALIGN=LEFT>. However, since this is
the default, just typing <P> will have the same effect.
Figure 5.19 :
- By default, the Web browser will wrap lines of text to keep
the entire paragraph in view. You have the option of turning off
word wrapping by including the NOWRAP command in the paragraph
tag. To turn off word wrapping in a paragraph, type <P NOWRAP>.
This will allow you to explicitly place line breaks using the
<BR> tag, which is explained in the next section.
Figure 5.20 :
- Normally, paragraphs will wrap around an object in the margin,
such as a figure or table. To force the paragraph to begin below
the object, you can use the CLEAR attribute. Typing <P
CLEAR=LEFT> moves the paragraph down until the left margin
is clear. CLEAR=RIGHT forces the paragraph down to a point
where the right margin is clear. CLEAR=ALL forces the paragraph
to wait until both margins are clear.
Figure 5.21 :
- To combine formatting commands in the same paragraph, type
all the attributes together in the same <P> tag. For example,
to create a center-aligned paragraph with no word wrapping, type
<P ALIGN=CENTER NOWRAP>.
Figure 5.22 :
Not all text fits neatly into paragraphs. Sometimes you want the
reader's Web browser to end a line of text at a specific point.
If you're using HTML to display poetry, lyrics, instructional
materials, or any other type of information where specific formatting
is necessary, you'll want to have control over the flow of text
in the document.
- There are several extensions to the horizontal rule supported
by Netscape but not yet standardized in HTML 3.2. You can learn
more about these in Chapter 14, "Using the Netscape Extensions."
- Use horizontal rules sparingly. Using too many lines can make
your document disjointed and hard to read.
Figure 5.23 :
- To insert a line break at a specific point, type <BR>.
This instructs the Web browser to immediately end the current
line and begin placing text on the next line. A line break does
not start a new paragraph.
Figure 5.24 :
- You can use multiple line breaks to create a short, informal
list of items. By creating a new paragraph before and after the
list, you can separate it from the rest of your text.
Figure 5.25 :
- Sometimes you'll want to visually break apart sections of
text using a visible line. HTML supports this through the use
of horizontal rules. These can be added anywhere
in the document by typing <HR>. A thin line stretching
across the entire window will be placed at that point in the text.
Horizontal rules, like paragraphs, support the clear attribute
to allow you to begin the line when the margins are clear.
Figure 5.26 :
- To place an entire section of text apart from the rest, use
the <BLOCKQUOTE> and </BLOCKQUOTE> tag
pair. This tag, used in place of a paragraph tag, will offset
an entire paragraph from the main body of text, usually by indenting
it and adding extra spaces to the top and bottom. It is commonly
used to highlight long quotations and passages.
Figure 5.27 :
Preformatted text allows you break away from the normal rules
of HTML and quickly specify exactly how a section of text will
appear in the reader's Web browser. When you're using preformatted
text, you don't need to use the HTML markup tags-the text will
appear exactly as you've typed it, complete with spaces, line
breaks, and empty lines. Preformatted text is always displayed
in a monospaced, fixed-width font.
- Preformatted text is a great way to create a quick and dirty
table of data, such as names and phone numbers. However, HTML
3.2 has full table support, and in most cases you'll want to use
real tables whenever possible.
- Another good use for the <PRE> and </PRE> tags
is to display samples of Internet e-mail or newsgroup posts in
your HTML document. These messages often have specific layouts
that are difficult to reproduce in straight HTML. Just cut and
paste the original message into Notepad and then place the <PRE>
and </PRE> tags at the beginning and end, respectively.
Figure 5.28 :
- To begin a section of preformatted text, type <PRE>.
Figure 5.29 :
- Now type the section of text exactly how you want it to appear.
It's a good idea to limit the length of your lines to 65 characters
or less, so that you can accommodate the screen width of most
browsers. (Remember that browsers will not word wrap preformatted
text.)
Figure 5.30 :
- When you're finished entering your preformatted text, type
</PRE> to mark the end of the section.
Figure 5.31 :
- You can apply character formatting styles, such as bold and
italic, in preformatted text. Headings and paragraphs will not
work in preformatted text blocks, however.
Figure 5.32 :
