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

18. Spiffing Up Text

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

• 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

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.

Font 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 ahve chosen.

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

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

   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 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
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 <p> tag forces a one line break with preceding text above and the <br> tag forces a line break (no white space) to subsequent text.

Can you see the difference between using the <font> 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>	<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 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>

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:

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

3. Save and Reload in your web browser

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 unit 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 "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 km<sup>3</sup>

Font Face

The HTML 3.2 standards include now any option for the tag to specify a particular screen font for 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 viewers 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 selecta 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:

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

3. 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 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:
1. How do you change the size and color of a portion of text in a web page?
2. What HTML can you use if your browser does not support the <font>...</font> tags?
3. How do you create subscripts in HTML?
4. 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 <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 seeen the page that corresponds to the link, it will be colored by whatever color designates visited links, i.e. 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 <font>...</font> 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 Abtracts 1964, pp.234-239
14.Colby never received appropriate recongition 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 | back: "Don't Blink" | next: "Easy Hard Rules" |

---

Writing HTML Lesson 18: Spiffing Up Text

©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

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

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