KacMac
  
KacMac Home
 

   Index
   Chapter 1
   Chapter 2
   Chapter 3
   Chapter 4
   Chapter 5
   Chapter 6
   Chapter 7
   Chapter 8
   Chapter 9
   Chapter 10
   Chapter 11
   Appendix I
   Appendix II
   Appendix III
   Appendix VI
 HTML Guide   Chapter 4 - Adding Life to The Page 

CONTENTS

 


Sprucing Up Your Text

The first of our Web page makeover chores will be to examine some tags that alter the look of individual words and phrases. The next few sections fill you in on the details.

Yer Basic Text Formatting Styles

The good news about text formatting is that most browsers only support four kinds: bold, italic, monospace, and underline. The bad news is that HTML has about a billion different tags that produce these styles. However, I'll take mercy on you and only let you in on the easiest tags to use. The following table shows the tags that produce each of these formats.

 
Text style Begin tag End tag
Bold <B> </B>
Italic <I> </I>
Underline <U> </U>
Monospace <TT> </TT>

Here's a sample HTML document that shows each of these styles in action..

<HTML>

<HEAD>

<TITLE>Yer Basic Text Formatting Styles</TITLE>

</HEAD>

<BODY>

<U>My Excellent Bookstore Adventure</U>

<P>

The other day, I went to a unique bookstore called

<TT>Mary, Mary, Quite Contrary</TT>. There were

<I>tons</I> of unexpected delights, including, believe

it or not, a <B>Self-Helpless</B> section! For real.

I saw titles like <I>Got a 50-Cent Head? Here's How To

Get a Ten Dollar Haircut!</I> and <I>A Few Geese Shy of

a Gaggle-And Proud Of It!</I>

</BODY>

</HTML>

Combining Text Formats

You should note, as well, that browsers let you combine these text styles. So, for example, if you need bold italic text, you can get it by throwing the <B> and <I> tags together, like so:

<B><I>This is bold italic text</I></B>

Accessorizing: Displaying Special Characters

You might think because HTML is composed in text-only documents (documents that include only the characters and symbols you can peck out from your keyboard), non-standard characters such as and would be taboo. It's true that there's no way to add these characters to your page directly, but the Web wizards who created HTML thought up a way around this limitation. Specifically, they came up with special codes (called character entities) that represent these and other oddball symbols.

These codes come in two flavors: a character reference and an entity name. Character references are basically just numbers, while the entity names are friendlier symbols that describe the character you're trying to display. For example, you can display the cents sign () using either the &#162; character reference, or the &cent; entity name, as shown here:

Got a 50&#162; Head? Here's How To Get a $10 Haircut!

or

Got a 50&cent; Head? Here's How To Get a $10 Haircut!

The next table lists a few other popular characters and their corresponding codes.

 

 
Symbol Character Reference Entity name
 < &#060; &lt;
> &#062; &gt;
&#162; &cent;
&#163; &pound;
&#165; &yen;
&#169; &copy;
&#174; &reg;
i &#176; &deg;
&#188; &frac14;
O &#189; &frac12;
&#190; &frac34;
&#215; &times;

Sectioning Your Page with Headings

Like chapters in a book, many Web page creators divide their contents into several sections. To help separate these sections and so make life easier for the reader, you can use headings. Ideally, these headings act as mini-titles that convey some idea of what each section is all about. To make these titles stand out, HTML has a series of heading tags that display text in larger, bold fonts. There are six heading tags in all, ranging from <H1>-which uses the largest font-down to <H6>-which uses the smallest font.

What's with all the different headings? Well, the idea is that you use them to outline your document. As an example, consider the headings we've used in this chapter and see how we'd format them in HTML.

The overall heading, of course, is the chapter title, so we'd display it using the <H1> tag. The first main section is the one titled "Sprucing Up Your Text," so we'd give its title an <H2> heading. That section contains three subsections, "Yer Basic Text Formatting Styles," "Combining Text Formats," and "Accessorizing: Displaying Special Characters." we'd give each of these titles an <H3> heading. Then I come to the section called "Sectioning Your Page With Headings." This is another main section of the chapter, so wed go back to an <H2> tag for its title, and so on.

The following HTML document shows how we'd format all the section titles for this chapter (notice how we don't need to use a <P> tag to display headings on separate lines; that's handled automatically):

<HTML>

<HEAD>

<TITLE>A Text Formatting and Headings Extravaganza</TITLE>

</HEAD>

<BODY>

<H1>Dressing Up Your Page</H1>

<H2>Sprucing Up Your Text</H2>

<H3>Yer Basic Text Formatting Styles</H3>

<H3>Combining Text Formats</H3>

<H3>Accessorizing: Displaying Special Characters</H3>

<H2>Sectioning Your Page With Headings</H2>

<H2>A Few More Formatting Features</H2>

<H3>Handling Preformatted Text</H3>

<H3>Them's the Breaks: Using &lt;BR&gt; for Line Breaks</H3>

<H3>Inserting Horizontal Lines</H3>

</BODY>

</HTML>

A Few More Formatting Features

Handling Preformatted Text

Remember when we told you in the last chapter that Web browsers ignore white space (multiple spaces and tabs) as well as carriage returns? Well, we lied. Sort of. You see, all browsers normally do spit out these elements, but you can talk a browser into swallowing them whole by using the <PRE> tag. The "PRE" part is short for "preformatted," and you normally use this tag to display preformatted text exactly as it's laid out. Here, "preformatted" means text in which you use spaces, tabs, and carriage returns to line things up.

Let's look at an example. Here's an HTML document where we've set up two chunks of text in a pattern that uses spaces and carriage returns. The first bit of doggerel doesn't make use of the <PRE> tag, but we've surrounded the second poem with <PRE> and </PRE>.  Notice that the lines from the first poem are strung together, but that when the browser encounters <PRE>, it displays the white space and carriage returns faithfully.

 
< PRE > Text Is Ugly!
You'll notice one other thing about how the browser displays text that's ensconced within the <PRE> and </PRE> tags: it formats the text in an ugly monospaced font. There is, unfortunately, no way to avoid this.

<HTML>

<HEAD>

<TITLE>The &lt;PRE&gt; Tag</TITLE>

</HEAD>

<BODY>

<H3>Without the &lt;PRE&gt; Tag:</H3>

          Here's

        some ditty

      Specially done

    to lay it out all

  Formatted and pretty.

Unfortunately, that is all

  This junk really means

     Because I admit I

      couldn't scrawl

        Poetry for

          beans.

<P>

<H3>With the &lt;PRE&gt; Tag:</H3>

<PRE>

          Here's

        some ditty

      Specially done

    to lay it out all

  Formatted and pretty.

Unfortunately, that is all

  This junk really means

     Because I admit I

      couldn't scrawl

        Poetry for

          beans.

</PRE>

</BODY>

</HTML>

Using <BR> for Line Breaks

As you saw in the last chapter, you use the <P> tag when you need to separate your text into paragraphs. When a browser trips over a <P> tag, it starts a new paragraph on a separate line and inserts an extra, blank line after the previous paragraph. However, what if you don't want that extra line? For example, you might want to display a list of items with each item on a separate line and without any space between the items. (Actually, there are better ways to display lists than the method we'll show you here; see Chapter 6)

Well, you could use the <PRE> tag, but your text would appear in the ugly, monospaced font. A better solution is to separate your lines with <BR>, the line break tag. When a browser encounters <BR> it starts a new line, but it doesn't toss in an extra, blank line. Here's an example:

<HTML>

<HEAD>

<TITLE>Yer Basic Text Formatting Styles</TITLE>

</HEAD>

<BODY>

<H2>My Excellent Bookstore Adventure</H2>

The other day, I went to a unique bookstore called

<TT>Mary, Mary, Quite Contrary</TT>. There were

<I>tons</I> of unexpected delights, including, believe

it or not, a <B>Self-Helpless</B> section! For real.

Here's a list of just some of the great titles I saw:

<P>

Got a 50&#162; Head? Here's How To Get a $10 Haircut!<BR>

A Few Geese Shy of a Gaggle--And Proud Of It!<BR>

The Seven Habits of Highly Ineffective Couch Potatoes<BR>

Dieting? No, Sorry, You're <I>Way</I> Too Late For That!<BR>

"Dumb and Dumber": A Yahoo Way of Knowledge

</BODY>

</HTML>

In the list of books, we added the <BR> tag to the end of each line (except the last one; we don't need it there).

Inserting Horizontal Lines

<HR> (which stands for "horizontal rule") produces a line across the page, which is a handy way to separate sections of your document. (browser accepts a few extra attributes for the <HR> tag. more about them in Chapter 10).

The Least You Need to Know

This chapter showed you a few ways to dress up your Web page for a night on the town. Let's take a fond look back at some of the chapter's more memorable moments:

  • The four main tags for text styles are <B> for bold, <I> for italic, <U> for underline, and <TT> for monospace. You're free to combine these tags to apply multiple styles to the same text.
  • You can use special codes (either character references or entity names) to display non-standard characters such as and . See the table in the back of the book for a list of these codes.
  • If you have multiple sections in your page, use the heading tags-<H1> through <H6>-to format the section titles and set up an outline structure.
  • You can display white space and carriage returns in preformatted text by enclosing it with the <PRE> and </PRE> tags.
  • To create a line break, use the <BR> tag.
  • To run a horizontal line across the page, use the <HR> tag.

  Make KacMac your home page
Add URL - Information Center - Contact us - Terms of Service - Privacy Policy - Advertising

Copyright © 2004 KacMac. All rights reserved.