Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | 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:

CO₂ + SO₄^-2 3x² - 2y^-1/2 = 4z

Objectives

After this lesson you will be able to:

Change the size of specific portions of text in a web page
Change the color of specific portions of text in a web page
Create superscripts and subscripts for text in a web page
Specify the font for portions of text on a web page

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

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.

In this lesson we will introduce you to these text features with some examples that you will use to modify your Volcano Web pages. You may want to first refer to the font test page to determine if your web browser supports the tags used in this lesson.

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 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  tag to modify the title in our opening page:

Open the index.html file in your text editor
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.

  <h1>Volcano Web</h1>

  <p>
  <B><font size=+4>V</font><font size=+3>OLCANO 
  WEB</font></B>

MALL

APS

...

lesson 13

Next, we would like to make the quote from Pliny stand out a bit more, so we will raise it one font size:
```
 "Nature raves savagely, 
 threatening the lands" 
```
Save and Load into your web browser

Before going on, we will use the font size tags to modify two other web pages in our work area. the page for Volcanic Places in the USA (file usa.html) and Research Project (file proj.html) both use <h2>...</h2> tags for the main title and <h3>...</h3> tags for sub section headings. Go into your text editor and change every occurrent of tags:

  <h3>blah blah blah</h3>

with:

  <p>
  <font size=+1><B>blah blah blah</B></font><br>

Note that the  tag forces a one line break with preceding text above and the tag forces a line break (no white space) to subsequent text.

Can you see the difference between using the  tags and the <hN> tags for section titles? The formatting differences may be subtle, but it does offer you, the HTML author, alternatives for your web page design. Just remember that if a reader's browser does not support font size tags, they will see all the text as the standard size.

Two Methods for Creating Headings

<h3>...</h3>  ... 

...before the next great innovation that rocked the world of rotten milk.

History of Longhorn Cheese

Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...

...before the next great innovation that rocked the world of rotten milk.

History of Longhorn Cheese
Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...

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:

...
...
...
...
...
...

We will not go crazy with the color tags, but as an example, we will change the color of the VOLCANO WEB text we worked on above for the cover page. If you recall, we set the text color for the text of this page to yellow and we will override that color just for the title text:

Open the index.html file in your text editor.
Edit the line that contains the text of VOLCANO WEB to read:

  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>

Save and Reload in your web browser

NOTE: The size and color attributes can reside together in a  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>`	super^script
`<sub>...</sub>`	sub_script

We will now use these tags for our Introduction page:

Open the intro.html file in your text editor.

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

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.

If you notice the third column of our table, when we first wrote it we had to use "km^3" to indicate "km³". 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 km3
```

Font Face

The HTML 3.2 standards included the  tag to specify a particular screen font for text display. This may not work in all web browsers, so you may first want to take a try the font test.

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.

We will now modify the  tag for our title page so that the words "Volcano Web" appear in a different font:

Open the index.html file in your text editor.

Edit the line that contains the text of VOLCANO WEB to read:

  <B><font face="Arial,Helvetica" size=+4 color=#FF66FF>V</font>
  <font face="Arial,Helvetica" size=+3 color=#DD0055>OLCANO WEB</font></B>

Save and Reload in your web browser

NOTE: We've included specifiers for the browser to choose Arial for Windows Helvetica for Macintosh and/or computers that do not have the Arial font installed.

Use this HTML with discretion! There is an art of use versus abuse of too many font styles!

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.

Review

Review topics for this lesson:

How do you change the size and color of a portion of text in a web page?
What HTML can you use if your browser does not support the ... tags?
How do you create subscripts in HTML?
How can you create a block of text to display with a specific font?

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

Independent Practice

Try experimenting with the ... tags in your own web pages. See how they can work inside of the <hN>...</hN> tags too. Experiment with using different fonts, even the wild ones!

Look for places where you think you might need superscripts or subscripts. One example might be for footnotes -- you could number or character code them, and then each footnote could act as a hypertext link to a footnote (or jump to a separate page for end notes):

... and after Linberger and Gordon's 1963 study¹² on the effects of temperature on cheese maturation, Gange and Walters (1964)¹³ as well as Colby (1969)¹⁴ reached the same conclusion.

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

12.Linberger and Gordon's experiments were controversial because of their radical techniques of temperature control.
13.Gange and Walters actually did not reach the same conclusion until their results had been verified by J.D. Smith. For more information see, Cheese Abstracts 1964, pp.234-239
14.Colby never received appropriate recognition for his pioneering work in the cheese field, and died penniless.

Coming Next....

Huge Rulers? Hefty Rulers? Handy Rulers? More options for <hr>

GO TO.... | Lesson Index | previous: "Don't Blink, Don't Marquee" | next: "Easy Horizontal Rules" |

Writing HTML: Lesson 18: Spiffing Up Text
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut18.html