Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

How to use HTML 3.2

Chapter 5 -- Formatting Text

Chapter 5

Formatting Text


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.

How to Format Characters with Physical Tags

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.

Tip Sheet

  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.

  2. 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 :

  3. To create bold text, insert <B> and </B> tags. Any text falling between these two tags will appear in boldface type.

    Figure 5.3 :

  4. 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 :

  5. 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 :

  6. 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 :

  7. 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 :

  8. 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 :

How to Format Characters with Logical Markup Tags

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 :

  1. 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 :

  2. 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 :

  3. 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 :

  4. 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.

  5. 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 :

  6. 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 :

  7. 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 :

How to Format Paragraphs

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.

Tip Sheet

  1. 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 :

  2. 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 :

  3. 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 :

  4. 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 :

  5. 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 :

  6. 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 :

How to Use Text Breaks

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.

Tip Sheet

  1. 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 :

  2. 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 :

  3. 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 :

  4. 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 :

How to Use Preformatted Text

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.

Tip Sheet

  1. To begin a section of preformatted text, type <PRE>.

    Figure 5.29 :

  2. 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 :

  3. When you're finished entering your preformatted text, type </PRE> to mark the end of the section.

    Figure 5.31 :

  4. 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 :