Chapter 5
Cahapter 5
Text Formatting and Alignment
As you discovered in Chapter 2, "Creating a Web
Page," making your Web page can be as easy as typing some text and adding a few
standard HTML tags to the beginning and end. In that chapter, you learned how to emphasize
important text with headings. You also saw how to use paragraph breaks, line breaks, and
horizontal rules to separate sections of text.
In this chapter, you will learn to control the
appearance and arrangement of text on your pages. You'll learn to incorporate boldface,
italics, and other special text formatting into your pages. You'll also see how to center
text or align it to the right side of the page.
To do these things, you'll need a few more HTML
tags. You'll also need to learn how to control optional settings (called attributes) for
some of the tags you already know. To Do: Before you proceed, you should get some text to
work with so you can practice formatting it as you read this chapter.
- Any text will do, but try to find (or type) some text
that you want to put onto a Web page. The text from a company brochure or your personal
resumé might be a good choice.
- If the text is from a word processor file, be sure to
save it as plain text or ASCII text before you add any HTML tags.
- Add the <HTML>, <HEAD>,
<TITLE>, and <BODY> tags (discussed in Chapter 2) before you
use the tags introduced in this chapter to format the body text.
Emphasizing
Text with Boldface and Italics
Way back in the age of the typewriter, we were
content with plain text and an occasional underline for emphasis. But today, boldface and
italicized text have become "de rigueur" in all paper communication. Naturally,
you can add bold and italic text to your Web pages, too.
For boldface text, put the <B> tag at
the beginning of the text and </B> at the end. Similarly, you can make any
text italic by enclosing it between <I> and </I>. If you
want bold italics, put <B><I> in front of it and </I></B>
after it. You can also use italics within headings, but boldface usually won't show in
headings because they are already bold.
The news article in Figure 5.1 uses the <B>
and <I> tags extensively, and Figure 5.2 shows the resulting text as it
appears in Netscape Navigator.
Just A Minute: There are actually two ways to
make text display as boldface; the <B> tag and the <STRONG>
tag do the same thing in most Web browsers. Likewise, all popular browsers today interpret
both <I> and <EM> as italics. Many purists prefer the <STRONG>
and <EM> tags because they imply only that the text should receive special
emphasis, rather than dictating exactly how that effect should be achieved. Meanwhile, the
vast majority of Web authors use the shorter and easier-to-remember <B> and
<I> tags. I'll use <B> and <I> throughout
this guide, but if you like to be philosophically pure, by all means use <STRONG>
and <EM> instead.
Figure 5.1. Use the <B> tag for
boldface text, and the <I> tag for italics.
Figure 5.2. The many <B>
and <I> tags in Figure 5.1 certainly add plenty of emphasis to this Web
page.
To Do: Use headings, boldface, and italics to
emphasize some of the text on your own Web page.
- 1. Use <H1>, <H2>,
and <H3> to add any headings and sub-headings your page may need. (End each
heading with </H1>, </H2>, or </H3>.)
2. If any of the text on your page should be in boldface, mark the beginning of it
with <B> and the end with </B>. Use <I> and </I>
to mark text to be italicized.
Character
Formatting
In addition to <B>, <I>,
<EM>, and <STRONG>, there are several other HTML tags for
adding special formatting to text. Table 5.1 summarizes all of them (including the
boldface and italic tags), and Figures 5.3 and 5.4 demonstrate each of them in action.
Table 5.1. HTML tags that add
special formatting to text.
Tag |
Function |
<SMALL> |
Small text |
<BIG> |
Big text |
<SUPER> |
Superscript |
<SUB> |
Subscript |
<STRIKE> |
Strikethrough (draws a line through
text) |
<U> |
Underline |
<TT> |
Monospaced (typewriter) font |
<PRE> |
Monospaced font, preserving spaces and
line breaks |
<EM> or <I> |
Emphasized (italic) text |
<STRONG> or <B> |
Strong (boldface) text |
Figure 5.3. Each
of the tags in Table 5.1 is used in this little poem.
Figure 5.4. Here's what
all character formatting from Table 5.1 and Figure 5.3 looks like.
The <TT> tag usually changes the
typeface to Courier New, a monospaced font. However, Web browsers let users change the
monospaced <TT> font to the typeface of their choice (under Options |
General Preferences | Fonts in Netscape Navigator 3.0 and View | Options | General | Font
Settings in Microsoft Internet Explorer 3.0). The monospaced font may not even be
monospaced for some users. However, the vast majority of people just stick with the
standard fonts that their browser comes set up with, so you should design and test your
pages with those default fonts, too. (The standard proportional font is usually Times New
Roman, and the standard monospaced font is almost always Courier or Courier New.)
The <PRE> tag also causes text to
appear in the monospaced font, but it also does something more unique and useful. As you
learned in Chapter 2, multiple spaces and line breaks are normally ignored in HTML files.
But <PRE> causes exact spacing and line breaks to be preserved. For
example, without <PRE> the following text:would look like this:
Qty Description
Price Total 1 Rubber chicken
$7.98 $7.98 2 Vibrating fake hand
$14.97 $29.94 12 Plastic cockroaches
$0.25 $3.00
--------
$40.92 |
Qty Description Price Total 1 Rubber chicken $7.98
$7.98 2 Vibrating fake hand $14.97 $29.94 12 Plastic cockroaches $0.25 $3.00
--------$40.92
Even if you added <BR> tags at the
end of every line, the columns wouldn't line up properly. However, if you put <PRE>
at the beginning of the invoice and </PRE> at the end, the columns would
line up properly, and no <BR> tags would be needed.
There are fancier ways to make columns of text line
up, and you'll learn all about them in Chapter 16, "Advanced Layout with
Tables." The <PRE> tag gives you a quick and easy way to preserve the
alignment of any monospaced text files that you might want to transfer to a Web page with
a minimum of effort.
Time Saver: You can use the <PRE>
tag as a quick way to insert vertical space between paragraphs or graphics without having
to use a "spacer" image. For example, to put several blank lines between the
words "Up" and "Down", you could type: Up<PRE> </PRE>Down
Text
Alignment
Some HTML tags allow you to specify a variety of
options, or attributes, along with the basic tag itself. For example, when you begin a
paragraph with the <P> tag, you can specify whether the text in that
paragraph should be aligned to the left margin, right margin, or center of the page.
To align a paragraph to the right margin, you can
put ALIGN="right" inside the <P> tag at the beginning of
the paragraph, like this:
<P ALIGN="right">
To center a paragraph, use:
<P ALIGN="center">
Similarly, the tag to align a paragraph to the left
is:
<P ALIGN="left">
The word ALIGN is called an attribute of
the <P> tag. You can use the ALIGN attribute with just about any
HTML tag that contains text, including <H1>, <H2>, the other
heading tags, and some tags you will meet later. There are many other attributes besides ALIGN.
You will find out how to use them as you learn more HTML tags.
New Term: Attributes are special code words
used inside an HTML tag to control exactly what the tag does.
Just a Minute: Keep in mind that sometimes
the same attribute word can have different meanings when used with different tags. For
instance, you will discover in Chapter 9, "Putting Images on a Web Page," that ALIGN="left"
does something quite different when used with the <IMG> image tag than it
does with the text tags discussed in this chapter.
When you want to set the alignment of more than one
paragraph or heading at a time, you can use the ALIGN attribute with the <DIV>,
or division, tag. By itself, <DIV> and its corresponding closing tag </DIV>
actually don't do anything at all--which would seem to make it a peculiarly useless tag!
Yet if you include an ALIGN attribute, <DIV>
becomes quite useful indeed. Everything you put between <DIV
ALIGN="center"> and </DIV>, for example, will be
centered. This may include lines of text, paragraphs, headings, images and all the other
things that you'll learn how to put on Web pages in upcoming chapters. Likewise, <DIV
ALIGN="right"> will right-align everything down to the next </DIV>
tag.
Just a Minute: When you look at Web pages
that other people have created, you may see <CENTER> and </CENTER>
used to center text. The <CENTER> tag is officially obsolete, and it may
not work with future Web browsers, so you should always use <DIV
ALIGN="center"> and </DIV> instead.
Figure 5.5 demonstrates the ALIGN attribute
with both the <P> and <DIV> tags. <DIV ALIGN=
"center"> is used to center two headings and some text at the top of the
page, and all three ALIGN options are used with <P> tags to alter
the alignment of the verse. The results are shown in Figure 5.6.
Figure 5.5. The ALIGN
attribute allows you to left-justify, right-justify, or center text.
Figure 5.6. The alignment settings in Figure 5.5, as
they appear in a Web browser.
Time Saver: Whenever you don't use an ALIGN
attribute, text will be aligned to the left. Therefore, there's usually no point in
wasting your time typing ALIGN="left". For example, using <P>
instead of <P ALIGN="left"> for the first paragraph in Figure 5.5
would have resulted in exactly the same Web page in Figure 5.6. One place where you would
need ALIGN="left" is when you want to left-align a single heading or
paragraph within a larger region that has been centered or right-justified with <DIV
ALIGN="center"> or <DIV ALIGN= "right">. For
example, if you changed the <H2> tag in Figure 5.5 to <H2 ALIGN=
"left">, Tommy Thumb's Pretty Song guide would be left-aligned
while Selections from and Published in 1744 would both still be
centered.
-
Summary
This chapter showed you how to make text appear as
boldface, italic, or with other special formatting, such as superscripts, subscripts, or
strikethrough text. You saw how to make everything line up properly in preformatted
passages of monospaced text.
Finally, you learned that attributes are used to
specify options and special behavior of many HTML tags, and you also learned to use the ALIGN
attribute to center or right-justify text.
Table 5.2 summarizes the tags and attributes
discussed in this chapter.
Table 5.2. HTML tags and attributes
covered in Chapter 5.
Tag |
Attribute |
Function |
<EM>...</EM> |
|
Emphasis (usually
italic). |
<STRONG>...</STRONG> |
|
Stronger emphasis
(usually bold). |
<B>...</B> |
|
Boldface text. |
<I>...</I> |
|
Italic text. |
<TT>...</TT> |
|
Typewriter (monospaced)
font. |
<PRE>...</PRE> |
|
Preformatted text (exact
line endings and spacing will be preserved--usually rendered in a monospaced font). |
<BIG>...</BIG> |
|
Text is slightly larger
than normal. |
<SMALL>...</SMALL> |
|
Text is slightly smaller
than normal. |
<SUB>...</SUB> |
|
Subscript. |
<SUP>...</SUP> |
|
Superscript. |
<STRIKE>...</STRIKE> |
|
Puts a strikethrough line
in text. |
<DIV>...</DIV> |
|
A region of text to be
formatted. |
|
ALIGN="..." |
Align text to CENTER,
LEFT, or RIGHT. (May also be used with <P>, <H1>,
<H2>, <H3>, and so on.) |
Q&A
- Q Other guides talk about some text formatting tags
that you didn't cover in this chapter, such as <CODE> and <ADDRESS>. Shouldn't
I know about them?
A There are a number of tags in HTML to indicate what kind of information is contained
in some text. The <ADDRESS> tag, for example, was supposed to be put around
addresses. The only visible effect of <ADDRESS> in most browsers, however,
is that the text is made italic. So Web page authors today usually just use the <I>
tag instead. Similarly, <CODE> and <KBD> do essentially the
same thing as <TT>. You may also read about <VAR>, <SAMP>,
or <DFN> in some older HTML references, but nobody uses them in ordinary
Web pages.
Q Some HTML pages I've seen use ALIGN=CENTER or ALIGN=center instead of
ALIGN="center". Which is correct?
A As with tags, it generally makes no difference whether attributes are in lowercase
or uppercase. It also usually doesn't matter if you include the quotes around attribute
values like center. The only time you really do need the quotes is when the value
contains a blank space or a character that has special meaning in HTML. In this guide, I
always include the quotes so that neither I nor you need to worry about when they're
needed and when they're not.
Q You mentioned that <DIV ALIGN="center"> is a new tag that replaces
the old <CENTER> tag. Won't my pages be incompatible with older Web browsers if I
use the new tag?
A Yes, but in practice the only incompatibility will be that some text appears
left-aligned instead of centered. If this deeply concerns you, you can use both the old
and new tags, like this:
-
<DIV
ALIGN="center"><CENTER>This text will be centered in both old and
new browsers.</CENTER></DIV>. |
Quiz
Questions
- 1. Write the HTML to produce the following:
Come for cheap free H2O on May 7th at 9:00PM
2. What's the difference between the following two lines of HTML?
Deep <TT>S p a a c e</TT> Quest
Deep <PRE>S p a a c e</PRE> Quest
3. What's the easiest way to center a single paragraph or heading?
4. How would you center everything on an entire page?
Answers
- 1. Come for
<STRIKE>cheap</STRIKE> free H<SUB>2</SUB>O on May
7<SUPER><U>th</U></SUPER> at 9:00<SMALL>PM</SMALL>
2. The line using <TT> will look like this:
Deep S p a a c e Quest
The line using <PRE> will produce the following lines of text on the Web
page (<PRE> always skips a line before and after the preformatted text):
Deep
S p a a c e
Quest
3. Start it with <P ALIGN="center"> (or <H1
ALIGN="center">, and so on).
4. Put <DIV ALIGN="center"> immediately after the <BODY>
tag at the top of the page, and </DIV> just before the </BODY>
tag at the end of the page.
|