HTML Goodies by Joe Burns

From the Publisher

HTML Goodies, Second Edition is based on the most popular tutorials at HTMLGoodies.com. It starts with a series of short primers teaching the basics of building Web pages, then continues with detailed tutorials covering

Product Details

• Table of Contents
• Read an Excerpt

Table of Contents

Read an Excerpt

Chapter 3: Manipulating Text

How did it go with your first HTML page? I'll assume it went well. If I don't assume as much, I can't go on, and I want to go on. Now you know the basics about placing flags and manipulating text in terms of bold, italic, and typewriter font. That's good, and along with the <HR>, <BR>, and <P> commands, you'll be able to play with text placement. Now we'll talk about changing text size.

---

Visit this tutorial online at http://www.htmlgoodies.com/primer_3.html.

---

Heading Flags

Heading flags are used extensively on HTML documents to--you guessed it--create headings! How novel.

There are six heading flags: <H1> through <H6>. <H1> is the largest and <H6> is the smallest. Headings need begin and end flags, as shown in Figure P3.1.

Heading commands create nice bold text, as shown in the figure, and are quite easy to use. It's a simple <H#> and </H#> command. However, they do have one other annoying trait: They like to be alone. When you use a heading command, the text is set alone by default. It's like the heading commands carry a <P> command with them. It's hard to get other text to sit next to it. It's as if it wants to be, dare I say, a heading. Try a few for yourself.

Font Size Commands

Maybe you'd like a little more control over your text size. Well, here it is: the <FONT SIZE> flags. Heading commands are great for text at the top of the page, and they're also good for separating your Web page into logical sections of text.

There are twelve font size flags available to you: +6 through +1 and -1 through -6. As you probably guessed, +6 is the largest. It's huge. The smallest one is -6. It's a little small. Figure P3.2 shows a few in action. Follow this pattern to place one on your page:

<FONT SIZE="##"> 

The ## can be anything from +6 to -6.

Notice that the first flag is actually doing two things:

This is what's referred to as a command inside of a command, or just a subcommand. When you have that, you denote the subcommand with an equal (=) sign and enclose it within quotation marks. Look at the preceding code. See the equal sign, and the plus or minus number in quotation marks? That's the subcommand:.

Also notice in Figure P3.2 that the end command for a <FONT SIZE> flag only requires </FONT>.

---

FAQs from the HTML Goodies Web Site

---

---

Centering Text and Aligning It to the Right

Since you've already created a few Web pages, you no doubt noticed that the text always starts at the left of the screen. That's the default; it just happens without you doing anything. What if you want your text centered, or aligned with the right side of the screen? Can you do that? Yes! (and Figure P3.3 shows you some examples).

You center text by surrounding it with simple <CENTER> and </CENTER> commands. Here's what it looks like:

<CENTER>All text in here will be centered</CENTER> 

Getting text to align on the right is a little trickier. You need to set the text aside as a paragraph unto itself. Here's the format:

<P ALIGN="right">text that will go to the right</P> 

You probably remember that <P> command from Primer 2. Here again is the concept of a command inside of a command. You are setting an attribute of the <P> flag. That alignment command is what pushes to the right. Remember this: When you use a subcommand in the <P> flag, you need to end with a </P> flag. . . .