Home > Articles

Working with Text in HTML

  • Print
  • + Share This
You can find pictures on the Web to show you information. Movies exist on the Web so that you can watch information move. And you can find audio on the Web so that you can hear information. But by far the most common form information takes is the written word. In this sample chapter, learn how to specify text size, color, and fonts, as well as how to format text, control line breaks, and use special text characters in HTML.
This chapter is excerpted from How To Use HTML & XHTML.
  1. How to Specify Text Size

  2. How to Specify Text Color

  3. How to Specify Text Fonts

  4. How to Format Text

  5. How to Preformat Text

  6. How to Control Line Breaks

  7. How to Use Special Text Characters

The real value of the World Wide Web is information. If the Web is nothing else, it's an amazing and diverse source of information. A true reflection of the people who feed the information into the vast machine, some of the available information is good, and some of it is bad. Some is profoundly important, and some is ridiculously useless. And of course, it all depends on the perspectives of the Web author and the Web surfer. What I find interesting might bore you to tears. What you find entertaining, I might find offensive.

You can find pictures on the Web to show you information. There are movies on the Web so that you can watch information move. And you can seek out audio on the Web so that you can hear information. But by far the most common form information takes is the written word. There are millions of words on the Web. They are constantly being added, continually being revised. These words are written in virtually every language spoken by the human tongue. And regardless of the language the words come from, the topic they talk about, or the ideological slant that shades them, all these words have one thing in common: Each was put there by humans (or at least by a machine built by humans).

And what all these humans know how to do is to format their HTML so that those words show up in your browser. As I mentioned in Part 1, "Getting Started," some people use WYSIWYG editors to format the words; others code the HTML themselves. The second is the group you'll fall into by the time you're done working through the tasks in this part.

This part shows you how to work with font size, color, and typeface. You'll learn how to make bold text and italic text. (I might even show you how to make italic text that's bold!) You'll learn how to make line breaks without creating a new paragraph. Don't worry; you'll learn how to work with paragraphs in Part 3, "Working with Paragraphs."

Finally, you'll learn about some special problems that HTML introduces when you're working with text. For instance, consider the less-than symbol. You've already learned that it's an important symbol in HTML because it tells the browser that it should expect an HTML tag. So what do you do when you want to write a mathematical equation like this: 7 < 10? I'll show you in Task 7, "How to Use Special Text Characters." 

How to Specify Text Size

There are a number of reasons you might want to change the size of the text on all or part of your Web page. You might want some text to stand out. Maybe your target audience is older, and you know that older people sometimes have trouble reading small text. Whatever your reason, you can use the techniques taught in this task to resize text on your HTML pages.

The Browser Still Rules

The browser has a great deal of control over the way it displays your page. As an example, Internet Explorer gives the viewer the power to override any text size, style, or color specifications you make in your HTML. To see this in Internet Explorer, choose Tools, Internet Options, and then click the Accessibility button. In the Accessibility dialog box, you can set the browser to ignore several different things. No matter how hard you work, the ultimate power still lies in the hands of the Web surfers because the tools they have to override your settings outweigh those you have to create them in the first place. In reality, very few people invoke these weapons. After all, most people are interested in nice-looking Web pages, and as long as you're making good-looking Web pages, you give them little incentive to override your decisions. Still, be aware that the possibility exists.

  1. Add the <font> Tag Pair

  2. Introducing the <font> tag and, of course, its sidekick, the </font> tag. You use this tag pair to control the look of your text. Be aware that some browsers don't recognize this tag pair, although the major ones do. To control the size, color, and typeface of your text, type <font>...</font>.

    <html>
    <head>
    <title>Working with the Font Tag</title>
    </head>
    <body>
    <font>
    Here is text within the font tag pair.
    </font>
    </body>
    </html>
  3. Add the size Attribute

  4. You add attributes to the <font> tag in exactly the same way as you've added attributes to tags in earlier tasks. Type <font size="value">. You'll specify the value of the font in the next step.

    <html>
    <head>
    <title>Working with the Font Tag</title>
    </head>
    <body>
    <font size="value">
    Here is text within the font tag pair.
    The size attribute has been
    added, but the value has not
    yet been specified.</font>
    </body>
    </html>
  5. Absolute or Relative Size

  6. You can specify an absolute or relative size for text. To specify an absolute size, type <font size="X">, where X is a number from 1 to 7. The default is 3, the size you'll get if you don't specify the size attribute. To specify a relative size, type <font size="+ (or –) X">. Relative sizes are always based on the default size of 3, regardless of any absolute size you might have set earlier, so if you want a size of 2, type either <font size="2"> or <font size="–1">.

    <html>
    <head>
    <title>Working with the Font Tag</title>
    </head>
    <body>
    <font size="4">
    Here the value for the size attribute has 
    been set to "4", one higher
    than the default. I could also specify a 
    value of "+1" to achieve the same result.
    </font>
    </body>
    </html>
  7. Change the Base Font Size

  8. As mentioned in Step 3, the default size for text is 3. You can change that default with the <basefont> attribute. To specify a new default size, type <basefont size="X"> where X is between 1 and 7. Now any relative sizes you specify in the <font> tag will be based on the size you specified in the <basefont> tag.

    <html>
    <head>
    <title>Working with the Font Tag </title>
    </head>
    <body>
    <basefont size="4">
    <font size="-2">Notice that here I use the
    basefont tag pair to set the base font size
    to "4". In the font tag, I use the size 
    attribute to set the font size to "-2". I 
    could achieve the same results with a font 
    size of "2".
    </font>
    </basefont>
    </body>
    </html>
  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.