Writing HTML | About | FAQ | Alumni | Tags | Index | back | next |

18. Spiffing Up Text

Not only can you color the background but you can color and SIZE 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.

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.0, you have some more options for formatting your text. Specifically, you can have 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 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 (i.e. size=+2) over absolute size tags (i.e. 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.

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

Open the index.htm 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.
Change the line that reads:
```
 <h1>Volcano Web</h1>
```
to:
```
 
 VOLCANO 
 WEB
```
Look carefully 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 ... 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  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)
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.htm) and Research Project (file proj.htm) 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.

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

`<h3>...</h3>`	`<p><b><font size=+1> ...</font></b><br>`
...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:

... = Red
... = Orange
... = Yellow
... = Green
... = Blue
... = Indigo
... = Violet

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.htm 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 unit smaller.

The HTML format for these tags is:

super^script ...

sub_script ...

We will now use these tags for our Introduction page:

Open the intro.htm 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
```

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different than 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?
What does the <basefont> tag do?
How do you create subscripts in HTML?

Independent Practice

Try experimenting with the ... tags in your own web pages. See how they can work inside of the <hN>...</hN> tags too. 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 Abtracts 1964, pp.234-239
14.Colby never recieved enough recongition for his pioneering work in the cheese field

Coming Next....

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

GO TO.... | Lesson Index | back: "Don't Blink" | next: "Easy Hard Rules" |

Writing HTML Lesson 18: Spiffing Up Text

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

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

super^script		`<sup>...</sup>`
sub_script		`<sub>...</sub>`