Lessons | previous | next |

18. Spiffing Up Text

Not only can you color the background but you can color, SIZE, and even change the font typeface for specific portions of text! How much would you pay?

But WAIT! You can now write superscripts and subscripts for fun things like chemistry and math:

CO2 + SO4-2
3x2 - 2y-1/2 = 4z

With the HTML introduced by Netscape and HTML 3.2, you have some more options for formatting your text. Specifically, you can create different sized text as well as different colored text. When used judiciously, the text formatting can enhance the layout of a web page. When used with reckless abandon, it can produce web pages that look like noise.

You can also now create superscript and subscripts used in mathematical expressions, chemical formulas, or as footnote markers.

Font Size

The <font>..</font> tag introduced by Netscape may be used to set the size of the font from 1 (smallest) to 7 (largest) with a size of 3 being the normal text size:

    Font Size = 1
    Font Size = 2
    Font Size = 3 -- normal size text
    Font Size = 4
    Font Size = 5
    Font Size = 6
    Font Size = 7

Remember that the actual size will depend on the computer font the user has selected for their web browser -- you are adjusting the size relative to the default font they have chosen.

The format for the font size tag is: 

    <font size=N>blah blah blah</font>

where N=1 to 7. The font tag may be used in conjunction with other style tags (lesson 5) or inside header tags (lesson 3).

The other method for using the font tag is to provide a relative size change:

    <font size=+1>blah blah blah</font>
    <font size=-2>blah blah blah</font>

i.e. where the +N or -N value provides the offset from the current font size. This is used with another tag:

    <basefont size=5>

which changes the base font size from its default value of 3 to some other value. You might do this in a web page that will mostly have text of a larger or smaller than standard font size. That way, if you need to adjust small portions of the page, you can use the relative font size tags shown above.

The power of using relative font size tags (e.g. size=+2) over absolute size tags (e.g. size=5) is that we could easily shift the size of ALL text in that page by changing one instance of the <basefont> tag.

Note: The <basefont> tag has no closing tag -- it continues to be the base font size until another <basefont> tag occurs.

If a web browser does not support the <font> tags, you may want to try the HTML 3.0 tags:

  <BIG>...</BIG>
  <SMALL>...</SMALL>

which gives you less font sizes to work with but can still be useful for those browsers.

    This is the BIG tag

    This is normal size

    This is the SMALL tag

We will first use the <font size=X> tag to modify the title in our opening page:

  1. Open the index.html file in your text editor
  2. Previously we used an <h1>..</h1> header tag to format the title of our page. We will now use some font size tags instead to create a mixed size title.


    3. Change the line that reads: 
      <h1>Volcano Web</h1>
    to: 
      <p>
  <B><font size=+4>V</font><font size=+3>OLCANO 
  WEB</font></B>
    Look carefully at what we have done -- the first V is now increased in size by 4 units above the base value, and the other letters (now capitalized) are increased 3 units above base value. This provides the layout style of SMALL CAPS. Also note that we have added a <b>...</b> tag to make the title stand out. And finally, because we are not using a header tag that carries a line break by default, we had to add a <p> tag above the title to force it to appear on a new line (we do not need one after because the next HTML is a <BLOCKQUOTE> that carries its own line break -- see lesson 13).
  3. Next, we would like to make the quote from Pliny stand out a bit more, so we will raise it one font size: 
      <B><I><font size=+1>"Nature raves savagely, 
  threatening the lands"</font></I></B><br>
  4. Save and Load into your web browser

Font Color

In lesson 16, we introduced the tags for coloring text of the entire web page as well as the proper format for representing color values in HTML. You can also add an attribute to the tag to color a selected portion of text using the hexideciaml codes or the 16 colors recognized by their names:

<font color=red>...</font>
<font color=#993459>...</font>
<font color=lime>...</font>
<font color=#002200>...</font>
<font color=navy>...</font>
<font color=#193467>...</font>

NOTE: The size and color attributes can reside together in a <font> tag. The effect here makes the "V" a brighter violet color and one size larger than the other letters.

Superscripts and Subscripts

Until HTML 3.0 you were out of luck if you needed to write mathematical expressions, chemical formulas, or other expressions with superscripts and/or subscripts. These new tags raise/lower the "scripted" text one half line and sizes it one size smaller.

The HTML format for these tags is:

Superscripts / Subscripts
HTML Result
<sup>...</sup> superscript
<sub>...</sub> subscript

We will now use these tags for our Introduction page:

  1. Open the intro.html file in your text editor.
  2. First we will use subscripts to write some chemical formulas. After the last sentence in paragraph 2 ("Compare the history of human beings...'), add this sentence that uses subscripts: 
      Volcanoes were important contributors to 
  the early earth atmosphere by releasing 
  gases such as nitrogen (N<sub>2</sub>), 
  carbon dioxide (CO<sub>2</sub>), and 
  ammonia (NH<sub>4</sub>).
  3. Now we will use superscripts to denote a cubic volume. Below the table we created with the <pre>...</pre> tags, add this sentence: 
      Note that volcanic eruptions that occurred 
  before historic times were several orders 
  of magnitude larger (more than 1000 km<sup>3</sup> 
  in erupted volume) than ones observed by 
  humans.
  4. If you notice the third column of our table, when we first wrote it we had to use "km^3" to indicate "km3". Although this text is inside the preformat tag, we can still use the superscript tag. To do this change: 
      Volume in km^3
    to 
      Volume in km<sup>3</sup>

Font Face

The HTML for specifying a font face is:

   <font FACE="font1,font2">some text

If a viewer's web browser supports the font FACE attribute and they have one of the listed fonts installed on their computer, then the text will be displayed with the specified font. Otherwise, it will use the same font as the rest of the web page.

If you choose to use a font face, you should select a face that is standard or be sure that the intended computers have any "exotic" fonts installed.

More Information

Here are two more styles that are now available in HTML 3.2 that may work in your web browser.

Style tags
HTML Result 

<u>This is Underline...</u>
This is Underline

<strike>This is Strike-through...</strike>
This is Strike-through

And finally, here is a subtle point about text coloring that you may find useful someday. In lesson 16, we learned how to use the <body> tag to color the background, text, and link colors. If we were to color a block of text with the <font> tag, it would only affect the body text, and not the color of the hypertext links -- these keep the colors that are either the default blue or whatever is designated in the <body> tag.

Default Link Colors HTML Result 
<font color=red>
It was a long time after the sad death of 
<A HREF="http://www.longhorn.org/sir/">
Sir Longhorn</A> 
that someone was able to recreate 
his formula.
It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula. We can change the color of the hypertext link by placing the tags inside the anchor link. Note that this will work only for unvisited links; once you have seen the page that corresponds to the link, it will be colored by whatever color designates visited links, e.g. the default purple Modified Link Colors 
<font color=red>
It was a long time after the sad death of 
<A HREF="http://www.longhorn.org/sir/">
<font color=#228800>Sir Longhorn</font></A> 
that someone was able to recreate 
his formula.
It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.
previous: "Don't Blink, Don't Marquee" | next: "Easy Horizontal Rules" |